/* SecureHealth Online - booking site styles (all in one file) */
  :root{
    --cream:        #FBF7EC;
    --cream-2:      #F3EFE0;
    --green-dark:   #1E5B37;
    --green:        #237A45;
    --green-mid:    #2F9358;
    --green-light:  #DCEBDD;
    --green-pale:   #EEF5EC;
    --text-dark:    #1C2B22;
    --text-body:    #3F4C43;
    --white:        #FFFFFF;
    --radius:       14px;
    --shadow:       0 10px 30px rgba(30,91,55,0.08);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    font-family:'Nunito Sans', sans-serif;
    background:var(--cream);
    color:var(--text-body);
    line-height:1.6;
  }

  h1,h2,h3,h4, .brand-name{
    font-family:'Poppins', sans-serif;
  }

  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }
  .container{
    width:92%;
    max-width:1200px;
    margin:0 auto;
  }

  .navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* bag-o: mao ni ang mo-separate sa 3 ka bahin */
  padding:14px 24px;
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-icon img{
  width:40px;
  height:40px;
  display:block;
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.brand-name{
  font-weight:700;
  font-size:1.15rem;
  color:var(--green-dark, #1E5B37);
}

.brand-sub{
  font-size:0.78rem;
  color:var(--text-muted, #6E8073);
}
.navbar-brand{
  flex:1;              /* dugang - left section, mokuha og available space */
}

nav.main-nav{
  flex:1;
  display:flex;
  justify-content:center;   /* mao ni ang mo-center sa Home/About/Contact */
}

.nav-actions{
  flex:1;
  justify-content:flex-end;  /* mao ni ang mo-push sa Login/Register sa right */
}
  nav.main-nav ul{
    display:flex;
    gap:38px;
    font-weight:600;
    color:var(--text-dark);
    font-size:1.02rem;
  }
  nav.main-nav a{
    position:relative;
    padding-bottom:6px;
  }
  nav.main-nav a.active{
    color:var(--green-dark);
    border-bottom:3px solid var(--green-mid);
  }

  .nav-actions{
    display:flex;
    gap:14px;
    align-items:center;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 22px;
    border-radius:30px;
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    border:2px solid transparent;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .btn-outline{
    background:transparent;
    border:2px solid var(--green-dark);
    color:var(--green-dark);
  }
  .to-top{ position:fixed; left:50%; bottom:24px; z-index:900; display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:30px; background:rgba(255,255,255,.45); border:2px solid var(--green-dark); color:var(--green-dark); font-family:inherit; font-weight:800; font-size:.95rem; cursor:pointer; box-shadow:none; text-shadow:0 0 3px rgba(255,255,255,.9); opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .2s, transform .2s, background .2s; white-space:nowrap; }
  .to-top.show{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
  .to-top:hover{ background:rgba(255,255,255,.7); }
  .btn-outline:hover{ background:var(--green-pale); }
  .btn-solid{
    background:var(--green-dark);
    color:#fff;
  }
  .btn-solid:hover{ background:var(--green); }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    overflow:hidden;
    padding-top:20px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    gap:20px;
    position:relative;
    z-index:2;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--green-pale);
    color:var(--green-dark);
    font-weight:600;
    font-size:0.85rem;
    padding:8px 16px;
    border-radius:30px;
    margin-bottom:22px;
  }
  .hero h1.title{
    font-size:3.6rem;
    font-weight:800;
    line-height:1;
    margin-bottom:18px;
  }
  .hero h1.title .accent{ color:var(--green-mid); }

  .hero h2.subtitle{
    font-size:1.55rem;
    font-weight:700;
    color:var(--text-dark);
    line-height:1.35;
    margin-bottom:18px;
  }

  .hl7-badge{
    display:inline-block;
    background:var(--green-dark);
    color:#fff;
    font-weight:700;
    font-size:1.15rem;
    padding:10px 22px;
    border-radius:10px;
    margin-bottom:14px;
  }
  .clinic-line{
    font-size:1.3rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:20px;
  }
  .hero p.desc{
    max-width:480px;
    font-size:1.02rem;
    color:var(--text-body);
    margin-bottom:32px;
  }
  .hero-cta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }

  .hero-visual{
    position:relative;
    height:100%;
    min-height:560px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .hero-photo-frame{
    position:relative;
    width:100%;
    height:560px;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(160deg,#eef2ee,#e2e9e2);
  }
  .hero-photo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
  }
  .hero-wave{
    position:absolute;
    left:0; right:0; bottom:0;
    height:150px;
    background:linear-gradient(100deg, var(--green-mid), var(--green-dark));
    clip-path:polygon(0 55%, 100% 0, 100% 100%, 0% 100%);
    z-index:1;
  }
  .hero-heart{
    position:absolute;
    right:8%;
    bottom:8%;
    width:64px;height:64px;
    border:2.5px solid #fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    z-index:3;
  }
  .hero-cross{
    position:absolute;
    top:6%;
    right:2%;
    width:90px;
    color:var(--green-light);
    opacity:.6;
    z-index:0;
  }
  .leaf-deco{
    position:absolute;
    left:-30px;
    top:40%;
    width:90px;
    opacity:.5;
    z-index:0;
  }

  /* ===== ABOUT ===== */
  .about{
    padding:100px 0 70px;
    text-align:center;
  }
  .section-eyebrow{
    color:var(--green-mid);
    font-weight:700;
    letter-spacing:2px;
    font-size:0.82rem;
    margin-bottom:8px;
  }
  .section-eyebrow::after{
    content:"";
    display:block;
    width:36px;
    height:3px;
    background:var(--green-mid);
    margin:10px auto 0;
    border-radius:3px;
  }
  .about h2{
    font-size:2.4rem;
    font-weight:800;
    color:var(--text-dark);
    margin-bottom:18px;
  }
  .about p.lead{
    max-width:760px;
    margin:0 auto 60px;
    font-size:1.05rem;
    color:var(--text-body);
  }
  .about p.lead strong{ color:var(--text-dark); }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:24px;
  }
  .feature-card{
    background:var(--white);
    border-radius:var(--radius);
    padding:32px 22px;
    box-shadow:var(--shadow);
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .feature-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 34px rgba(30,91,55,0.14);
  }
  .feature-icon{
    width:60px;height:60px;
    margin:0 auto 18px;
    background:var(--green-pale);
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    color:var(--green-dark);
  }
  .feature-card h3{
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:10px;
  }
  .feature-card p{
    font-size:0.9rem;
    color:var(--text-body);
  }

  /* ===== CONTACT ===== */
  .contact{
    position:relative;
    background:var(--green-light);
    padding:100px 0 80px;
    margin-top:90px;
    overflow:hidden;
  }
  .contact::before{
    content:"";
    position:absolute;
    top:-60px; left:0; right:0;
    height:90px;
    background:var(--cream);
    border-bottom-left-radius:50% 40px;
    border-bottom-right-radius:50% 40px;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:40px;
    position:relative;
    z-index:2;
  }
  .contact-eyebrow{
    color:var(--green-mid);
    font-weight:700;
    letter-spacing:2px;
    font-size:0.82rem;
    margin-bottom:8px;
  }
  .contact-eyebrow::after{
    content:"";
    display:block;
    width:36px;height:3px;
    background:var(--green-mid);
    margin-top:10px;
    border-radius:3px;
  }
  .contact h2{
    font-size:2.3rem;
    font-weight:800;
    color:var(--text-dark);
    margin-bottom:16px;
  }
  .contact p.lead{
    max-width:380px;
    color:var(--text-body);
  }

  .contact-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:34px 30px;
  }
  .info-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .info-icon{
    width:46px;height:46px;
    border-radius:50%;
    background:var(--white);
    border:2px solid var(--green-mid);
    color:var(--green-dark);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .info-item h4{
    font-size:1rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:4px;
  }
  .info-item p{ font-size:0.92rem; color:var(--text-body); }

  .contact-deco-shield{
    position:absolute;
    left:4%;
    bottom:6%;
    width:150px;
    color:var(--green-mid);
    opacity:.9;
    z-index:1;
  }

  /* ===== FOOTER ===== */
  footer{
    background:var(--green-dark);
    color:#fff;
    padding:26px 0;
  }
  .footer-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    text-align:center;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:1.05rem;
  }
  .footer-brand .logo-icon{
    width:32px;height:32px;
    border:2px solid #fff;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
  }
  .footer-divider{
    width:1px;height:32px;
    background:rgba(255,255,255,0.3);
  }
  .footer-text{
    font-size:0.85rem;
    color:rgba(255,255,255,0.85);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    nav.main-nav{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; min-height:360px; }
    .hero-photo-frame{ height:360px; }
    .hero h1.title{ font-size:2.6rem; }
    .feature-grid{ grid-template-columns:repeat(2,1fr); }
    .contact-grid{ grid-template-columns:1fr; }
    .contact-info{ grid-template-columns:1fr; }
  }
  @media (max-width:560px){
    .feature-grid{ grid-template-columns:1fr; }
    .hero h1.title{ font-size:2.1rem; }
    /* Keep Login / Patient Registration on the same row as the
       SecureHealth brand instead of wrapping below it — shrink the
       brand (smaller logo/name, subtitle truncated instead of
       hidden) and the buttons (smaller text/padding, no icon) just
       enough for all three to fit on one line on a narrow phone. */
    /* Phone: brand on its own row, the two buttons side by side below it
       (nothing overlaps or gets cut off). */
    header.navbar{ flex-wrap:wrap; gap:10px; padding:12px 14px; }
    .navbar-brand{ flex:1 1 100%; gap:10px; min-width:0; }
    .brand-text{ min-width:0; }
    .logo-icon img{ width:34px; height:34px; }
    .brand-name{ font-size:1.05rem; }
    .brand-sub{ font-size:0.74rem; white-space:normal; }
    .nav-actions{ flex:1 1 100%; gap:8px; justify-content:stretch; }
    .nav-actions .btn{ flex:1 1 0; justify-content:center; padding:10px 8px; font-size:0.82rem; gap:6px; white-space:nowrap; }
    .nav-actions .btn svg{ display:none; }
  }

  /* ===== LOGIN MODAL ===== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,30,24,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:200;
  }
  .modal-overlay.open{ display:flex; }

  .modal-card{
    width:100%;
    max-width:420px;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    padding:38px 36px;
    position:relative;
    max-height:90vh;
    overflow-y:auto;
    animation:modalPop .18s ease;
    scrollbar-width:thin;
    scrollbar-color:#c5d3ca transparent;
  }
  /* keep the rounded corners: slim scrollbar, inset from the edge */
  .modal-card::-webkit-scrollbar{ width:12px; }
  .modal-card::-webkit-scrollbar-track{ background:transparent; margin:20px 0; }
  .modal-card::-webkit-scrollbar-thumb{ background:#c5d3ca; border-radius:10px; border:3px solid transparent; background-clip:content-box; }
  @keyframes modalPop{
    from{ opacity:0; transform:translateY(10px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  .modal-close{
    position:absolute;
    top:16px; right:16px;
    width:32px;height:32px;
    border-radius:50%;
    border:none;
    background:var(--cream);
    color:var(--text-body);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background .15s;
  }
  .modal-close:hover{ background:var(--green-pale); color:var(--green-dark); }

  .modal-card h2{
    font-size:1.5rem;
    font-weight:800;
    color:var(--text-dark);
    text-align:center;
    margin-bottom:6px;
  }
  .modal-card p.modal-sub{
    text-align:center;
    font-size:0.9rem;
    color:var(--text-body);
    margin-bottom:24px;
  }

  .modal-alert{
    padding:12px 14px;
    border-radius:10px;
    font-size:0.85rem;
    margin-bottom:16px;
    display:none;
    background:#FBEAE8;
    border:1px solid #E7B7B0;
    color:#C0392B;
  }
  .modal-alert.show{ display:block; }
  .modal-alert ul{ margin:6px 0 0 18px; }

  .modal-field{ margin-bottom:16px; }
  .modal-field label{
    display:block;
    font-size:0.85rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:6px;
  }
  .modal-field input{
    width:100%;
    padding:11px 14px;
    border:1.6px solid #DDE6DF;
    border-radius:10px;
    font-size:0.92rem;
    font-family:inherit;
    background:#FBFCFA;
  }
  .modal-field input:focus{
    outline:none;
    border-color:var(--green-mid);
    background:var(--white);
  }

  .modal-field textarea{
    width:100%;
    padding:11px 14px;
    border:1.6px solid #DDE6DF;
    border-radius:10px;
    font-size:0.92rem;
    font-family:inherit;
    background:#FBFCFA;
    resize:vertical;
    min-height:84px;
    max-height:200px;
  }
  .modal-field textarea:focus{
    outline:none;
    border-color:var(--green-mid);
    background:var(--white);
  }
  .char-count{ text-align:right; font-size:0.76rem; color:var(--text-body); margin-top:4px; }

  .modal-submit{
    width:100%;
    padding:13px;
    border:none;
    border-radius:30px;
    background:var(--green-dark);
    color:#fff;
    font-weight:700;
    font-size:0.98rem;
    cursor:pointer;
    transition:background .2s;
  }
  .modal-submit:hover{ background:var(--green); }
  .modal-submit:disabled{ opacity:0.65; cursor:default; }

  .modal-switch{
    text-align:center;
    margin-top:20px;
    font-size:0.88rem;
    color:var(--text-body);
  }
  .modal-switch a{ color:var(--green-dark); font-weight:700; }

  body.modal-open{ overflow:hidden; }

  /* ===== REGISTER MODAL EXTRAS (Patient Registration Form) ===== */
  .modal-card-wide{ max-width:640px; }

  .logo-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    margin-bottom:20px;
  }
  .logo-brand .logo-icon img{
    width:34px;
    height:34px;
    display:block;
    object-fit:contain;
  }
  .logo-brand .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
  }
  .logo-brand .brand-name{
    font-weight:700;
    font-size:1.1rem;
    color:var(--green-dark);
  }
  .logo-brand .brand-sub{
    font-size:0.76rem;
    color:var(--text-body);
  }

  .modal-row-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .modal-row-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px;
  }
  .modal-row-3 input{
    width:100%;
    padding:11px 14px;
    border:1.6px solid #DDE6DF;
    border-radius:10px;
    font-size:0.92rem;
    font-family:inherit;
    background:#FBFCFA;
  }
  .modal-row-3 input:focus{
    outline:none;
    border-color:var(--green-mid);
    background:var(--white);
  }
  .modal-row-4{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:14px;
  }
  .modal-field select{
    width:100%;
    padding:11px 14px;
    border:1.6px solid #DDE6DF;
    border-radius:10px;
    font-size:0.92rem;
    font-family:inherit;
    background:#FBFCFA;
    color:inherit;
  }
  .modal-field select:focus{
    outline:none;
    border-color:var(--green-mid);
    background:var(--white);
  }
  @media (max-width:600px){
    .modal-row-3, .modal-row-4{ grid-template-columns:1fr; }
  }

  /* ===== CONFIRM REGISTRATION MODAL ===== */
  .confirm-card{
    max-width:420px;
    text-align:center;
  }
  .confirm-icon{
    width:52px;height:52px;
    margin:0 auto 16px;
    border-radius:50%;
    background:var(--green-pale);
    color:var(--green-dark);
    display:flex;align-items:center;justify-content:center;
  }
  .confirm-card .modal-sub{ margin-bottom:28px; }
  .confirm-actions{
    display:flex;
    gap:12px;
  }
  .confirm-actions .btn{
    flex:1;
    justify-content:center;
    padding:12px 18px;
  }


  /* ===== TRACK APPOINTMENT ===== */
  .track-result{ margin-top:18px; text-align:left; }
  .track-card{
    border:1.6px solid #DDE6DF;
    border-radius:14px;
    padding:16px 16px 14px;
    margin-bottom:12px;
    background:#FBFCFA;
  }
  .track-card-head{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; margin-bottom:10px;
  }
  .track-code{ font-weight:800; color:var(--text-dark); font-size:0.95rem; }
  .track-badge{
    padding:4px 12px; border-radius:20px;
    font-size:0.78rem; font-weight:700;
    background:var(--green-pale); color:var(--green-dark);
  }
  .track-badge.st-cancelled{ background:#FBEAE8; color:#C0392B; }
  .track-badge.st-pending{ background:#FFF4D6; color:#9A6B00; }
  .track-badge.st-waiting, .track-badge.st-inprogress{ background:#FFF4D6; color:#9A6B00; }
  .track-badge.st-completed{ background:#E4EEE8; color:#3F5A4B; }
  .track-row{ display:flex; justify-content:space-between; gap:12px; font-size:0.88rem; padding:4px 0; }
  .track-row span:first-child{ color:var(--text-body); }
  .track-row span:last-child{ font-weight:600; color:var(--text-dark); text-align:right; }
  .track-resched{
    margin-top:10px; padding:10px 12px; border-radius:10px;
    background:#FFF4D6; border:1px solid #F0D98A; color:#7A5600;
    font-size:0.84rem; line-height:1.4;
  }

  /* ===== PREFERRED DATE CALENDAR (any day, no past dates) ===== */
  .date-field{ position:relative; }
  .date-field input[type="text"]{ cursor:pointer; padding-right:40px; }
  .date-field .dp-icon{
    position:absolute; right:13px; bottom:12px;
    color:var(--text-body); pointer-events:none;
  }
  .dp-pop{
    position:absolute;
    left:0; top:100%;
    margin-top:6px;
    width:290px;
    background:var(--white);
    border:1.6px solid #DDE6DF;
    border-radius:14px;
    box-shadow:0 14px 34px rgba(0,0,0,0.22);
    padding:12px;
    z-index:50;
  }
  .dp-pop[hidden]{ display:none; }
  .dp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .dp-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:0.92rem; color:var(--text-dark); }
  .dp-nav{
    width:30px; height:30px; border-radius:50%;
    border:none; background:var(--green-pale); color:var(--green-dark);
    font-size:1.2rem; line-height:1; cursor:pointer;
  }
  .dp-nav:hover:not(:disabled){ background:var(--green-light); }
  .dp-nav:disabled{ opacity:.35; cursor:not-allowed; }
  .dp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
  .dp-dow span{ text-align:center; font-size:0.7rem; font-weight:700; color:var(--text-body); padding:4px 0; }
  .dp-day{
    height:34px; border:none; border-radius:8px;
    background:transparent; font:inherit; font-size:0.85rem;
  }
  .dp-day.empty{ visibility:hidden; }
  .dp-day:disabled{ color:#B9C2BB; cursor:not-allowed; text-decoration:line-through; text-decoration-color:rgba(0,0,0,0.12); }
  .dp-day.ok{ background:var(--green-pale); color:var(--green-dark); font-weight:700; cursor:pointer; }
  .dp-day.ok:hover{ background:var(--green-light); }
  .dp-day.sel{ background:var(--green-dark); color:#fff; }
  .dp-day.today{ outline:2px solid var(--green-mid); outline-offset:-2px; }
  .dp-note{ margin-top:8px; font-size:0.72rem; color:var(--text-body); text-align:center; }

  /* ===== PREFERRED TIME PICKER — same look as the browser's own picker
     (hour | minute | AM-PM columns), but times outside clinic hours are greyed out ===== */
  .date-field input[type="text"]:disabled{ cursor:not-allowed; background:#F1F4F1; }
  .tp-pop{
    position:fixed;          /* never clipped by the form's edges */
    z-index:300;
    display:flex;
    gap:2px;
    padding:3px;
    background:#fff;
    border:1px solid #BDBDBD;
    border-radius:6px;
    box-shadow:0 4px 14px rgba(0,0,0,0.28);
  }
  .tp-pop[hidden]{ display:none; }
  .tp-col{
    width:56px;
    height:252px;            /* 7 rows, like the browser picker */
    overflow-y:auto;
    position:relative;
    scrollbar-width:none;
  }
  .tp-col::-webkit-scrollbar{ display:none; }
  .tp-item{
    display:block;
    width:100%;
    height:36px;
    border:none;
    background:transparent;
    font:inherit;
    font-size:0.95rem;
    color:#000;
    cursor:pointer;
    border-radius:4px;
  }
  .tp-item:hover:not(:disabled):not(.sel){ background:#F0F0F0; }
  .tp-item.sel{ background:#DCDCDC; font-weight:600; }
  .tp-item:disabled{ color:#BDBDBD; cursor:not-allowed; }

  .ref-box{
    background:var(--green-pale);
    border:2px dashed var(--green-mid);
    border-radius:14px;
    padding:16px 12px;
    margin:0 0 12px;
  }
  .ref-label{
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:2px;
    color:var(--green-mid);
    margin-bottom:4px;
  }
  .ref-code{
    font-family:'Poppins', sans-serif;
    font-size:2.2rem;
    font-weight:800;
    letter-spacing:3px;
    color:var(--green-dark);
    user-select:all;
  }
  .ref-note{
    font-size:0.8rem;
    color:var(--text-body);
    margin-bottom:22px;
  }

  .role-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:6px;
  }
  .role-option{ position:relative; }
  .role-option input{
    position:absolute;
    opacity:0;
    inset:0;
    width:100%;
    height:100%;
    cursor:pointer;
    margin:0;
  }
  .role-card{
    border:2px solid #DDE6DF;
    border-radius:12px;
    padding:16px 12px;
    text-align:center;
    transition:all .2s ease;
    background:#FBFCFA;
  }
  .role-card .role-icon{
    width:38px;height:38px;
    margin:0 auto 8px;
    border-radius:50%;
    background:var(--green-pale);
    color:var(--green-dark);
    display:flex;align-items:center;justify-content:center;
  }
  .role-card .role-title{
    font-weight:700;
    color:var(--text-dark);
    font-size:0.9rem;
  }
  .role-card .role-desc{
    font-size:0.72rem;
    color:var(--text-body);
    margin-top:3px;
  }
  .role-option input:checked ~ .role-card{
    border-color:var(--green-mid);
    background:var(--green-pale);
    box-shadow:0 0 0 3px rgba(47,147,88,0.15);
  }

  @media (max-width:480px){
    .modal-card{ padding:30px 24px; }
    .modal-row-2{ grid-template-columns:1fr; }
  }
/* ---- Button motion: a button floats up when the cursor is on it, and presses down when tapped ---- */
button:not(.to-top), .btn, a.btn{ transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
button:not(:disabled):not(.to-top):hover, .btn:hover, a.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 16px rgba(31,107,69,.22); }
button:not(:disabled):not(.to-top):active, .btn:active, a.btn:active{ transform: translateY(0) scale(.95); box-shadow: 0 2px 5px rgba(31,107,69,.25); transition-duration: .06s; }
button:disabled{ transform:none !important; box-shadow:none !important; }
@media (prefers-reduced-motion: reduce){ button:not(.to-top), .btn, a.btn{ transition:none; } button:not(.to-top):hover, button:not(.to-top):active, .btn:hover, .btn:active{ transform:none !important; } }