/* role-selection.css – full enhanced version with hover color change & redirect logic */
    :root {
      --teal-dark: #0d7c72;
      --teal-mid: #14a898;
      --teal-light: #4ecdc4;
      --blue-dark: #1a4a8a;
      --accent: #ffffff;
      --card-hover: #0d7c72;
      --text-muted-custom: #6c757d;
      --bg-light: #f4f6f9;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Mulish', sans-serif;
      /* min-height: 100vh; */
      margin: 0;
      display: flex;
    }

    /* ── LEFT PANEL WITH IMAGE ── */
    .left-panel{
    width:42%;
    position:relative;
    overflow:hidden;

     background:url('/assets/vhealthcare/images/Group 204.png')
    center center/cover;

    display:flex;
    align-items:center;
    justify-content:center;
}

.left-panel::before{
    content:'';
    position:absolute;
    inset:0;

    background:url('/assets/vhealthcare/images/Group 204.png')
    center center/cover;

    /* opacity:.25; */
}

    .icon-wrapper {
      transition: background-color 0.25s ease, transform 0.2s ease;
      background-color: #e6eff0;
      width: 60px;
      height: 60px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px auto;
    }

    .role-icon {
      width: 32px;
      height: 32px;
    }

    /* Left Content Container */
    .left-content {
      position: relative;
      z-index: 2;
      text-align: center;
      color: #fff;
      padding: 40px;
      max-width: 80%;
    }

    /* Hero Image Container (using a placeholder but with medical vibe) */
    .hero-image {
      margin-bottom: 30px;
    }

    .hero-img {
      max-width: 100%;
      height: auto;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      animation: fadeInUp 0.8s ease;
    }

    .left-content h1 {
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 15px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .left-content p {
      font-size: 1rem;
      opacity: 0.95;
      line-height: 1.6;
    }

    .logo-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      padding: 8px 20px;
      border-radius: 50px;
      margin-bottom: 30px;
    }

    .logo-badge span {
      font-weight: 700;
      font-size: 0.9rem;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── RIGHT PANEL ── */
    .right-panel {
      flex: 1;
      background: white;
      display: flex;
      justify-content: center;
      padding: 70px;
    }

    .role-container {
      max-width: 620px;
      width: 100%;
    }

    .role-container h2 {
      font-weight: 800;
      color: #1e2a3e;
      letter-spacing: -0.3px;
    }

    .role-container p.subtitle {
      margin-bottom: 40px;
      /* color: #5a6874; */
      font-size: 18px;
    }

    /* ── ROLE CARDS (enhanced hover color change) ── */
    .role-card {
      background: #fff;
      border: 2px solid #e9ecef;
      border-radius: 20px;
      padding: 22px 16px 18px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      text-align: center;
      height: 100%;
      position: relative;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.02);
    }

    /* HOVER COLOR CHANGE – entire card background and border shift */
    .role-card:hover {
      border-color: var(--teal-mid);
      font:#ffff;
      background: linear-gradient(145deg, #00786F, #009689);
      box-shadow: 0 16px 28px -8px rgba(20, 168, 152, 0.25);
      transform: translateY(-5px);
    }

    /* On hover also adjust icon-wrapper background slightly */
    .role-card:hover .icon-wrapper {
      background-color: #ffff;
      transform: scale(1.02);
    }

    /* active state styling (selected card) */
    .role-card.active {
      background: var(--teal-dark);
      border-color: var(--teal-dark);
      color: #fff;
      box-shadow: 0 20px 30px -12px rgba(13, 124, 114, 0.4);
      transform: translateY(-3px);
    }

    .role-card.active .icon-wrapper {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .role-card .role-icon svg,
    .role-card svg [stroke] {
      transition: stroke 0.2s ease;
    }

    .role-card.active .role-icon svg [stroke] {
      stroke: #ffffff;
    }

    .role-card h6 {
      font-weight: 700;
      font-size: 16px;
      color: #009689;
      /* margin-bottom: 8px; */
      transition: color 0.2s;
    }

    /* .role-card.active h6 {
      color: #fff;
    } */

    

    /* .role-card.active h6 {
      color: #fff;
    } */

      /* Change all text inside card to white on hover */
    .role-card:hover h6,
    .role-card:hover p {
      color: white !important;
    }


    .role-card p {
      font-size: 12px;
      /* color: #6c7a89; */
      margin: 0;
      line-height: 1.4;
      transition: color 0.2s;
    }

    /* .role-card.active p {
      color: rgba(255, 255, 255, 0.85);
    } */

    /* footer link */
    .footer-help {
      text-align: center;
      margin-top: 56px;
      font-size: 14px;
      /* color: #5f6c7a; */
    }

    .footer-help a {
      color: var(--teal-dark);
      font-weight: 700;
      text-decoration: underline;
      /* border-bottom: 1px dashed var(--teal-light); */
      transition: 0.2s;
    }

    .footer-help a:hover {
      color: var(--teal-mid);
      border-bottom: 1px solid var(--teal-mid);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 992px) {
      .right-panel {
        padding: 50px 30px;
      }
      .role-card {
        padding: 18px 12px;
      }
    }

    @media (max-width: 768px) {
      body {
        flex-direction: column;
      }
      .left-panel {
        width: 100%;
        min-height: 300px;
      }
      .right-panel {
        padding: 40px 24px;
      }
      .role-container h2 {
        font-size: 1.75rem;
      }
      .role-card .role-icon {
        width: 28px;
        height: 28px;
      }
      .icon-wrapper {
        width: 52px;
        height: 52px;
      }
      .footer-help {
        margin-top: 36px;
      }
    }

    @media (max-width: 480px) {
      .role-card h6 {
        font-size: 0.85rem;
      }
      .role-card p {
        font-size: 0.7rem;
      }
      .left-content h1 {
        font-size: 1.4rem;
      }
    }

    /* subtle click ripple effect */
    .role-card:active {
      transform: scale(0.98);
      transition-duration: 0.08s;
    }