/* assets/styles.css */
/* --- Theme tokens --- */
:root{
  --bg: #f7f9fc;
  --card: #ffffff;
  --text: #1b2430;
  --muted: #738499;
  --line: #e6ecf4;
  --accent-start: #7bdcff;
  --accent-end: #7ef3c1;
  --accent-strong: #2e7cf6;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius-xl: 18px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --focus: 0 0 0 6px rgba(46,124,246,.15);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(40rem 40rem at 120% -10%, rgba(126,243,193,.25), transparent 60%),
    radial-gradient(35rem 35rem at -10% 120%, rgba(123,220,255,.22), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Hide any header "Privacy" nav link if present */
.nav a[href="#privacy"]{ display:none !important; }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 50;
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid var(--line);
}

/* Desktop / large default */
.topbar__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 28px;            /* taller header */
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand | nav (center) | spacer */
  align-items: center;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; text-decoration:none; color:var(--text);
}
.brand__logo{
  width:26px; height:26px; display:inline-grid; place-items:center;
  border-radius:8px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow: var(--shadow);
  color:#0e2440; font-weight:700;
}

/* Nav (center on desktop) */
.nav{
  justify-self: center;
  display: flex;
}
.nav a{
  color: var(--muted);
  text-decoration:none;
  margin: 0 22px;               /* left/right margin between links */
  position:relative;
  font-weight: 500;
  white-space: nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  transition:width .25s ease;
}
.nav a:hover{ color: var(--text); }
.nav a:hover::after{ width:100%; }

/* =========================================
   Mobile: logo centered on first row,
   nav links centered on second row
   ========================================= */
@media (max-width: 768px){
  .topbar__inner{
    max-width: 100%;
    padding: 16px 16px;
    min-height: auto;
    display: grid;                    /* stack rows on mobile */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;    /* row 1: brand, row 2: nav */
    justify-items: center;            /* center content in each row */
    row-gap: 8px;
  }

  .topbar__spacer{ display:none; }    /* hide spacer on mobile */

  .brand{
    justify-self: center;             /* center logo/label (row 1) */
  }
  .brand__logo{ width:24px; height:24px; }

  .nav{
    justify-self: center;             /* center nav (row 2) */
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
  }
  .nav a{
    margin: 0 14px;                   /* tighter spacing on phones */
    font-size: 0.95rem;
  }
  .nav a::after{ bottom: -4px; }
}

/* Even narrower phones */
@media (max-width: 380px){
  .topbar__inner{ padding: 12px 12px; }
  .nav a{
    margin: 0 10px;
    font-size: 0.92rem;
  }
}



/* Layout */
.shell{ max-width: 1100px; padding: 36px 20px 80px; margin: 0 auto; }
.hero{
  text-align:center; margin: 10px auto 24px;
}
.hero h1{ margin: 14px 0 8px; font-size: clamp(28px, 4vw, 40px); }
.hero__sub{ color: var(--muted); margin: 0 0 0; }

.card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 22px; margin: 20px 0;
}
.card.soft{ background: #ffffffd9; }

/* Appear animation */
.appear{ animation: rise .5s ease-out both; }
@keyframes rise{
  from{ opacity:0; transform: translateY(8px) scale(.995); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Form */
.form-card{ padding: 26px; }
.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.field{ grid-column: span 6; display:flex; flex-direction:column; gap:8px; }
.field--wide{ grid-column: span 12; }
.field label{ font-weight:600; font-size: 13px; color: #334155; }
.field .hint{ color: var(--muted); font-size: 12px; margin-top:-4px; }

input, select{
  width:100%;
  border: 1.6px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
input::placeholder{ color:#a6b4c3; }
input:hover, select:hover{
  border-color: #cbd8e6;
}
input:focus, select:focus{
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: var(--focus);
}

/* --- Special animated dropdown (NO border-color change) --- */
.select-animated .selectfx{
  position: relative;
  border-radius: var(--radius-md);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.select-animated select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(135deg, rgba(123,220,255,.15), rgba(126,243,193,.12));
  background-size: 120% 120%;
  background-position: 0% 0%;
  padding-right: 46px;
}
/* Do NOT alter border color on the dropdown */
#agent_name:hover, #agent_name:focus{
  border-color: var(--line) !important;
  box-shadow: none !important; /* use wrapper effects instead */
}
.selectfx__arrow{
  position:absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-right: 2px solid #7a8ba0;
  border-bottom: 2px solid #7a8ba0;
  rotate: 45deg;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  opacity: .9;
}
.select-animated .selectfx::before{
  content:""; position:absolute; inset:-2px; border-radius: inherit; pointer-events:none;
  background: radial-gradient(120px 60px at top right, rgba(123,220,255,.35), transparent 60%),
              radial-gradient(120px 60px at bottom left, rgba(126,243,193,.35), transparent 60%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity .35s ease;
}
.select-animated .selectfx.is-open{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 34px rgba(46,124,246,.15);
}
.select-animated .selectfx.is-open::before{ opacity: .85; }
.select-animated .selectfx.is-open .selectfx__arrow{
  transform: translateY(-50%) rotate(225deg);
}
.select-animated .selectfx.is-valid{
  animation: pulse-select .45s ease;
}
@keyframes pulse-select{
  0%{ transform: translateY(-1px) scale(1.01); }
  50%{ transform: translateY(-2px) scale(1.015); }
  100%{ transform: translateY(-1px) scale(1.01); }
}

/* Buttons (bigger + centered) */
.actions{
  grid-column: span 12;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top: 12px;
  justify-content: center;
}
.btn{
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 16px 28px;
  font-weight:700;
  font-size: 17px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: var(--shadow);
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  color:#062639;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}
.btn--primary:hover{ box-shadow: 0 12px 30px rgba(46,124,246,.25); }
.btn--ghost{
  background:#fff; color:#1b2a3b; border-color: #d5e0ea;
}
.btn--ghost:hover{ background:#f3f7fb; }

/* Alerts */
.alert{
  display:flex; gap:14px; align-items:flex-start; padding: 14px;
  border-radius: var(--radius-lg); border:1px solid var(--line); margin-bottom: 14px;
  transition: opacity .35s ease, transform .35s ease, height .35s ease, margin .35s ease, padding .35s ease;
}
.alert__icon{
  width:30px; height:30px; border-radius: 50%; display:grid; place-items:center; font-weight:700;
}
.alert--success{
  background: #f0fff7; border-color:#bff3d7;
}
.alert--success .alert__icon{
  background: #34d399; color:white;
}
.alert--error{
  background: #fff6f6; border-color:#f3c7c7;
}
.alert--error .alert__icon{
  background: #ef4444; color:white;
}
/* Hide success after fade */
.alert.is-gone{
  opacity: 0; transform: translateY(-8px);
  height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden;
}
.alert__list{ margin:6px 0 0 18px; }

/* Footer */
.site-footer{
  margin-top: 50px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.site-footer__inner{
  max-width:1100px;
  padding: 18px 20px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: var(--muted);
}

/* same hover effect as header */
.footer-nav.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centered by default on desktop */
  gap: 0;
}
.footer-nav.nav a{
  color: var(--muted);
  text-decoration:none;
  margin: 0 18px;
  position:relative;
  font-weight:500;
  white-space:nowrap;
}
.footer-nav.nav a::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  height:2px; width:0;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  transition: width .25s ease;
}
.footer-nav.nav a:hover{ color: var(--text); }
.footer-nav.nav a:hover::after{ width:100%; }

.site-footer__copy{
  margin: 4px 0 0;
  text-align:center;
}

.footer-link{ color: var(--accent-strong); text-decoration:none; }
.footer-link:hover{ text-decoration: underline; }





/* ---------- Mobile centering fix (footer only) ---------- */
@media (max-width: 768px){
  .site-footer__inner{
    padding: 16px;
  }
  .footer-nav.nav{
    width: 100%;
    justify-content: center;   /* keep links centered */
    align-items: center;
    margin: 0 auto;
    text-align: center;
  }
  .footer-nav.nav a{
    margin: 6px 14px;          /* balanced spacing on small screens */
    font-size: .95rem;
    display: inline-block;     /* helps centering in wrap */
  }
  .footer-nav.nav a::after{ bottom: -4px; }
}
@media (max-width: 380px){
  .footer-nav.nav a{
    margin: 6px 10px;
    font-size: .92rem;
  }
}

/* Responsive */
@media (max-width: 860px){
  .field{ grid-column: span 12; } /* stack on mobile */
}

/* ===== Agent list overlay + scroll fix ===== */
#agent_fx,
#agentAuto{
  position: relative;        /* create local stacking context */
  z-index: 9998;             /* sit above neighboring fields */
}

#agent_menu{
  z-index: 99999 !important; /* ensure it stays on top of all inputs */
  max-height: 320px;         /* show scrollbar when long */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 0 16px 40px rgba(0,0,0,.12); /* clearer separation */
}

/* (optional) subtle scrollbar styling; remove if you don't want it */
#agent_menu::-webkit-scrollbar{ width: 10px; }
#agent_menu::-webkit-scrollbar-thumb{
  background: #cbd5e1; border-radius: 8px;
}
#agent_menu::-webkit-scrollbar-track{
  background: #f8fafc;
}



/*------------pre-check.php----------------*/


/* --- Pre-Check page specifics (inherits the main theme) --- */
.hero--compact { margin: 6px auto 18px; }

/* Optional: give the pre-check card a slightly different feel (subtle only) */
body .form-card.appear { animation-duration: .45s; }


/*---------------------assign-agent.php--------------*/



/* --- Assign Agent reveal panel --- */
.hero--compact { margin: 6px auto 18px; }

.reveal{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .5s ease,
    opacity .35s ease,
    transform .35s ease;
}
.reveal.is-open{
  max-height: 900px; /* large enough to fit the form */
  opacity: 1;
  transform: translateY(0);
}

/* Optional: slightly different entrance timing inside reveal */
.reveal .form-grid{ padding-top: 8px; }

/* Ensure the single "Add Agent" button row is nicely centered */
.actions { justify-content: center; }



/* ---------------- About page specific styles (scoped) ---------------- */

/* Remove underline / text-decoration for all links & buttons on About page */
.about a,
.about .btn{
  text-decoration: none !important;
}
.about a:hover,
.about .btn:hover,
.about a:focus,
.about .btn:focus{
  text-decoration: none !important;
}

/* Hero */
.about .hero--about{
  position: relative;
  padding: 56px 18px 34px;
  text-align: center;
  background: linear-gradient(135deg, rgba(93,160,255,.08), rgba(112,224,190,.08));
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.about__badge{
  display:inline-block; font-size:.78rem; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
  color:#0e2440; background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow: var(--shadow);
}
.hero--about h1{ margin:6px 0 6px; }
.hero--about .hero__sub{ max-width: 740px; margin: 0 auto; }

/* KPI cards */
.about__kpis{
  display:grid; gap:16px; margin: 22px 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kpi{ text-align:center; padding:18px; }
.kpi__num{ font-size:1.35rem; font-weight:700; color: var(--text); }
.kpi__label{ color: var(--muted); font-size:.95rem; }

/* Features grid: EXACTLY 2 columns per row on ≥ 901px */
.about__grid{
  display:grid;
  gap:24px;
  margin: 14px 0 22px;
  grid-template-columns: repeat(2, minmax(340px, 1fr)); /* 2 per row */
  align-items: stretch;
}

/* Feature card layout:
   Use flex so the link can stick to the bottom via margin-top:auto */
.feature{
  padding:24px;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 320px;             /* taller/wider cards as requested */
}
.feature__icon{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 0% 0%, var(--accent-start), var(--accent-end));
  color:#0e2440; margin-bottom:12px;
}
.feature__icon svg{ width:24px; height:24px; }
.feature h3{ margin:.2rem 0 .35rem; }
.feature p{ color: var(--muted); }

/* Link always at the bottom with consistent spacing */
.feature__link{
  display:inline-block;
  margin-top: auto;             /* push to bottom */
  padding-top: 12px;            /* breathing room above */
  text-align:center;
}

/* Steps section */
.about__steps{ padding:22px; }
.about__steps h2{ margin:0 0 8px; }
.steps{
  counter-reset: step;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin: 8px 0 14px; padding:0;
}
.steps li{
  list-style:none; background: rgba(15,23,42,.03); border: 1px solid var(--line);
  padding:12px 12px 12px 42px; border-radius:12px; position:relative;
}
.steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:10px; top:10px; width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center; font-size:.85rem; font-weight:600;
  color:#0e2440; background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow: var(--shadow);
}

/* CTA buttons row: always centered */
.about__cta{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
}

/* Trust cards */
.about__trust{
  display:grid; gap:16px; margin: 18px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.trust{
  padding:18px;
  text-align: left;
}
.trust__list{ margin:.4rem 0 0 1rem; }

/* ------------ Responsive ------------ */
@media (max-width: 900px){
  /* Collapse features to single column on small screens */
  .about__grid{ grid-template-columns: 1fr; }
  .feature{ min-height: 280px; }
}

@media (max-width: 768px){
  .about .hero--about{ padding: 38px 14px 26px; }
  .about__kpis{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .steps{ grid-template-columns: 1fr; }
  .about__cta{ justify-content:center; }
}

/* Contact page — scoped to .contact */

.contact a, .contact .btn { text-decoration: none !important; }

/* Hero */
.contact .hero--contact{
  position:relative;
  padding:56px 18px 34px;
  text-align:center;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(120,192,255,.10), rgba(120,255,210,.10));
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.contact__badge{
  display:inline-block; font-size:.78rem; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
  color:#0e2440; background:linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow: var(--shadow);
}
.contact .hero__sub{ max-width:740px; margin:0 auto; }

/* Card */
.contact__card{ padding:22px; }
.contact__card .actions{ justify-content:center; }

/* Success fade-out helper */
.alert.is-gone{ opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease; }

/* Contact info blocks */
.contact__grid{
  display:grid; gap:16px; margin:18px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contact__info{ padding:18px; }

/* Fields tweaks for nice look on narrow screens */
@media (max-width: 768px){
  .contact .hero--contact{ padding:38px 14px 26px; }
  .contact__card{ padding:18px; }
}