/* /public/assets/css/base.css */

/* =========================
   Design tokens (custom props)
   ========================= */
   :root{
    /* brand */
    --brand-900:#0b3b2e;
    --brand-700:#115643;
    --brand-500:#1b7a5e;
    --brand-300:#5fb79a;
    --brand-100:#e6f3ef;
    font-family: 'Arial', sans-serif;
  
/* Global font */
html {
  font-family: Inter, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, input, select, textarea, button {
  font: inherit;
  font-family: Inter, sans-serif;
}

/* Navbar */
/* user dropdown (no JS) */
.user-dd { position: relative; display: inline-block; }
.user-dd > summary { list-style: none; cursor: pointer; }
.user-dd > summary::-webkit-details-marker { display: none; }

.user-pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--border);
  border-radius:999px; background:#fff; color:#0f172a;
}
.user-pill .avatar-dot{
  width:8px; height:8px; border-radius:999px; background:#22c55e;
  display:inline-block;
}
.user-pill .caret{ opacity:.7; }

.user-dd[open] .dd-menu{
  display:block;
}
.dd-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width: 180px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow: var(--shadow);
  padding:8px; display:none; z-index:50;
}
.dd-menu a{
  display:block; padding:8px 10px; border-radius:8px; color:#0f172a; text-decoration:none;
}
.dd-menu a:hover{ background:#f8fafc; }
.dd-menu .danger{ color:#b91c1c; }
.dd-menu hr{ border:0; border-top:1px solid var(--border); margin:6px 0; }




    /* neutrals */
    --bg:#ffffff;
    --text:#121212;
    --muted:#6b7280;
    --border:#e5e7eb;
  
    /* utility */
    --danger:#b91c1c;
    --warning:#a16207;
    --success:#15803d;
  
    /* spacing scale (4px baseline) */
    --s-0:0;
    --s-1:4px;
    --s-2:8px;
    --s-3:12px;
    --s-4:16px;
    --s-5:20px;
    --s-6:24px;
    --s-8:32px;
    --s-10:40px;
    --s-12:48px;
    --s-16:64px;
    --radius:14px;
    --shadow:0 8px 24px rgba(0,0,0,.08);
  }
  
  /* =========================
     Modern CSS reset (safe)
     ========================= */
  *,
  *::before,
  *::after{box-sizing:border-box}
  *{margin:0}
  html:focus-within{scroll-behavior:smooth}
  html,body{height:100%}
  body{
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background:var(--bg);
    color:var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  }
  img, picture, video, canvas, svg{display:block;max-width:100%}
  input, button, textarea, select{font:inherit}
  p, h1, h2, h3, h4, h5, h6{overflow-wrap:anywhere}
  
  /* Remove default ul/ol padding */
  ul[role], ol[role],
  .nav-list, .footer-nav ul{list-style:none;padding-left:0}
  
  /* =========================
     Typography
     ========================= */
  h1{font-size:clamp(28px, 3vw, 40px);line-height:1.2;margin-bottom:var(--s-6)}
  h2{font-size:clamp(22px, 2.4vw, 30px);line-height:1.25;}
  h3{font-size:clamp(18px, 2vw, 22px);line-height:1.3;}
  p{margin-bottom:var(--s-4);color:var(--text)}
  .caption{color:var(--muted);font-size:14px}
  .step-badge
  {
    background-color: #FDE4F1;
    padding:2px 8px;
    color:#FB2C36;
  }
  /* Links */
  a{color:#DC2626;text-decoration:none}
  a:hover{text-decoration:underline}
  a:focus-visible{outline:3px solid var(--brand-300);outline-offset:2px}
  
  /* =========================
     Layout helpers
     ========================= */
  .container{
    max-width:1200px;
    padding-inline:var(--s-6);
    margin-inline:auto;
  }
  
  .site-header{
    position:sticky; top:0; z-index:50;
    background:#fff; border-bottom:1px solid var(--border);
  }
  .header-bar{
    display:flex; align-items:center; justify-content:space-between;
    min-height:64px; gap:var(--s-4);
  }
  
  /* brand */
  /* .brand{display:inline-flex; align-items:center; gap:var(--s-3); font-weight:700; color:var(--brand-900)}
  .brand:hover{text-decoration:none}
  .brand-mark{border-radius:50%; box-shadow:var(--shadow)}
  .brand-name{font-weight:800; letter-spacing:.2px} */
  
  /* Logo styling */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

/* Circle */
.brand-circle {
  fill: #e30613; /* red background */
}

/* Heart */
.brand-heart {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wordmark */
/* logo wordmark */
.brand-name{
  font-weight:650 !important;
  font-size: 1.3rem !important;
  letter-spacing:.02em;
  
  /* -webkit-background-clip:text; */
  background-clip:text;
  color:#DC2626 !important;
  text-decoration: none !important;
}
.loginhead{
  color:#FB2C36 !important ;
}
a:hover {
  text-decoration: none;
}
.signup{
  padding: 8px 30px !important;
}
.btn-signup{
  background: #DC2626!important;
}


  /* nav */
  .nav{display:flex; align-items:center; gap:var(--s-6)}
  .nav-list{display:flex; align-items:center; gap:var(--s-4)}
  .nav-list a{padding:8px 10px; border-radius:10px; color:#1f2937}
  .nav-list a:hover{background:var(--brand-100); text-decoration:none}
  
  /* nav cta */
  .nav-cta{display:flex; gap:var(--s-3)}
  .btn{
    appearance:none; border:1px solid transparent; cursor:pointer;
    padding:10px 16px; border-radius:12px; font-weight:600;
    transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{
    background:#FB2C36 !important; color:#fff;  box-shadow:var(--shadow); 
  }
  .btn-primary:hover{background:var(--brand-500)}
  .btn-ghost{
    background:transparent; color:var(--brand-700); border-color:var(--brand-300)
  }
  .btn-ghost:hover{background:var(--brand-100)}
  
  /* mobile nav toggle */
  .nav-toggle{
    display:none;
    width:44px;height:44px; border:1px solid var(--border);
    background:#fff;border-radius:12px; align-items:center; justify-content:center;
  }
  .nav-toggle .bar{display:block; width:20px;height:2px;background:#111;margin:3px auto;border-radius:2px}
  /* .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} */
  .skip-link{
    position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .skip-link:focus{
    left:16px; top:10px; width:auto; height:auto; background:#fff; border:2px solid var(--brand-300);
    padding:6px 10px; border-radius:10px; z-index:1000;
  }
  


  /* Search form styling */
/* Search form container */

.sb-wrap {
  max-width: 900px;
  margin: 120px auto 20px auto !important;
  padding-inline: 16px;
  text-align: center;
}

.sb-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: #1E2939; /* dark navy text */
  margin-bottom: 24px;
}

/* card */
.sb-card {
  background: #ffffff;
  border: 1px solid #f0f0f0; /* light slate gray border */
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: 24px;
}

/* three fields row */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* fields */
.sb-field { display: block; }

.sb-select {
  width: 100%;
  appearance: none;
  background: #ffffff;
  border: 1px solid #f0f0f0; /* stronger border */
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #364153;
  transition: border-color .2s, box-shadow .2s;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px; /* custom caret */
  background-repeat: no-repeat;
}

.sb-select:focus {
  outline: none;
  border-color: #ef4444; /* red border on focus */
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}

/* submit button full width */
.sb-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FB2C36; /* bright red */
  color: #ffffff;
  border: none;
   /* add border so it pops */
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
  font-size: 16px;
}

.sb-submit:hover {
  background: #FB2C36; /* darker red on hover */
}

.sb-icon { display: block; }

/* accessibility helper */
.sb-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



/* Profile */
/* Profile Cards */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.profile-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* Avatar with circular border */
.profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #e5e7eb;
  margin-inline: auto;
  display: block;
  object-fit: cover;
}

/* Name + age/gender */
.profile-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 16px;
  color: #111827;
}
.profile-card .caption {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
  
}


/* Avatar circle styling */
.profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;            /* makes the circle */
  border: 4px solid #e5e7eb;     /* light gray border */
  padding: 6px;                  /* spacing inside circle */
  background: #fff;              /* white background behind svg */
  margin-inline: auto;
  display: block;
  object-fit: contain;           /* ensures svg scales properly */
}
.profile-container{
  /* margin: 250px auto; */
  padding: 20px;
}

/* About section */
.profile-card h4 {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.profile-card p.muted {
  font-size: 14px;
  color: #4b5563;
  margin-top: 8px;
  min-height: 50px;
}

/* Greyed hidden info lines */
.profile-card .line {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-inline: auto;
}
.profile-card .line.line-1 { width: 90%; margin-top: 20px; }
.profile-card .line.line-2 { width: 70%; margin-top: 8px; }

/* CTA button */
.btn-primary {
  background: #ef4444;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  transition: background .2s ease;
}
.btn-primary:hover { background: #FB2C36; }


/* responsive: stack fields on small screens */
@media (max-width: 720px) {
  .sb-grid { grid-template-columns: 1fr; }
}

  /* Footer */
 
/* Footer Base */
/* Footer */
.ftr {
  background:#101828;
  color:#e2e8f0;
  padding:64px 0 24px;
  font-size:15px;
  line-height:1.6;
    /* red line like screenshot */
}

/* Grid Layout (mascot / brand / quick / legal / email) */
.ftr-grid {
  display: grid;
  grid-template-columns: 20% 20% 15% 15% 15%;
  column-gap: 40px;       /* default gap */
  align-items: start;
}

/* reduce gap just between 1st and 2nd column */
.ftr-grid > :nth-child(1) {
  margin-left: 25px;     /* overrides the big 40px just for this one */
}
.ftr-grid > :nth-child(2) {
  margin-left: -5px;     /* overrides the big 40px just for this one */
}

/* Mascot */
.ftr-mascot img {
  max-width:260px;
  width:100%;
  display:block;
}

.ftr-social {
  display: flex;
  gap: 16px;                /* spacing between icons */
  margin-top: 12px;
}

.ftr-social a {
  color: #fff;              /* white icons */
  font-size: 20px;          /* size of icons */
  transition: color 0.3s;
}

.ftr-social a:hover {
  color: #ef4444;           /* red highlight on hover */
}


/* Brand */
.ftr-brandblock { padding-top:6px; }
.ftr-brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:800;
  color:#fff;
  text-decoration:none;
}
.ftr-tagline {
  margin-top:12px;
  color:#a8b3c3;
  line-height:1.7;
  max-width:420px;
}

/* Column Headings */
.ftr-heading {
  color:#fff;
  font-weight:700;
  margin-bottom:12px;
  font-size:16px;
}

/* Lists */
.ftr-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.ftr-list a {
  color:#e2e8f0;
  text-decoration:none;
  opacity:.95;
}
.ftr-list a:hover { opacity:1; text-decoration:underline; }

/* Contact */
.ftr-email { color:#ef4444; text-decoration:none; }
.ftr-email:hover { text-decoration:underline; }
.ftr-text { color:#cbd5e1; margin-top:8px; }

/* Divider line */
.ftr-divider {
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:36px;
}

/* Bottom row */
.ftr-bottom {
  text-align:center;
  margin-top:16px;
  color:#94a3b8;
  font-size:14px;
}

/* Responsive */
@media (max-width:1140px){
  .ftr-grid { grid-template-columns: 200px 1fr 1fr 1fr; }
  .ftr-mascot { grid-column: 1 / 2; }
  .ftr-brandblock { grid-column: 2 / 5; }
}
@media (max-width:900px){
  .ftr-grid { grid-template-columns: 1fr 1fr; gap:32px; }
  .ftr-brandblock { grid-column:auto; }
}
@media (max-width:640px){
  .ftr-grid { grid-template-columns:1fr; }
  .ftr-mascot img { margin:0 auto; max-width:200px; }
  .ftr-tagline { text-align:left; }
  .ftr-bottom { font-size:13px; }
}


  /* Main area spacing */
  .site-main{min-height:60vh}
  
  /* =========================
     Forms (basic)
     ========================= */
  label{display:block; font-weight:500; margin-bottom:6px;font-size: 14px;}
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea{
    width:100%; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff;
  }
  input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--brand-300); box-shadow:0 0 0 3px rgba(95,183,154,.25);
  }
  .help{color:var(--muted); font-size:13px}
  
  /* =========================
     Cards & Surfaces (light)
     ========================= */
  /* .card{
    border:1px solid var(--border); border-radius:16px; padding:var(--s-6); background:#fff; box-shadow:var(--shadow);
  } */
  
  /* =========================
     Utilities
     ========================= */
  .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)}
  .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)} .mb-8{margin-bottom:var(--s-8)}
  .text-center{text-align:center} .muted{color:var(--muted)}
  .grid{display:grid; gap:var(--s-6)}
  .flex{display:flex; gap:var(--s-4)} .items-center{align-items:center} .justify-between{justify-content:space-between}
  
  /* =========================
     Responsive
     ========================= */
  @media (max-width: 960px){
    .footer-grid{grid-template-columns:1fr}
  }
  @media (max-width: 860px){
    .nav-toggle{display:inline-flex}
    .nav{position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--border);
         transform:translateY(-120%); transition:transform .2s ease; padding:var(--s-6); flex-direction:column; gap:var(--s-6)}
    .nav.open{transform:translateY(0)}
    .nav-list{flex-direction:column; align-items:flex-start; gap:var(--s-3)}
    body.nav-open{overflow:hidden}
  }
  


  /* How it works */

  /* How It Works */
.how {
  background: #fff5f5;          /* soft pink section bg */
  padding-block: 64px;
}
.how .section-title {
  text-align: center;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  color: #0f172a;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  text-align: center;
}
.how-card { padding: 8px; }

.how-badge {
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: #DC2626;          /* red badge */
  display: grid; place-items: center;
  margin: 0 auto 16px;
  box-shadow: 0 6px 16px rgba(239,68,68,.25);
}
.how-badge svg {
  width: 28px; height: 28px;
  display: block;
  stroke: #fff; fill: none;
  stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.how-title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}
.how-text {
  /* margin-top: 3px !important; */
  color: #6b7280;               /* muted */
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  /* line-height: 1.55; */
  font-size: 15px;
}

/* Responsive */
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 24px; }
}


/* video  */
.video-container
{
  margin: 80px 0;
  padding: 15px;
}

.suc-text{
  font-size: 13px !important;
}

  /* Logo styling */