/* static/css/app.css
   B&T Bright Spotless Cleaning Services — Booking UI
   Mobile-first • clean • accessible • brand-aware
*/

/* ==== Brand tokens ==== */
:root{
  --brand-blue: #1f57c3;
  --brand-blue-600: #1747a5;
  --brand-yellow: #ffcc33;
  --text-1: #0b1220;
  --text-2: #6b778a;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --border: #e6eaf2;
  --page: #f7f9fc;
}

.hamburger{display:none}

/* ==== Base / reset (lightweight) ==== */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text-1);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(31,87,195,.06), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255,204,51,.08), transparent 60%),
    var(--page);
  line-height: 1.5;
}
img{ max-width: 100%; display: block; }
:focus-visible{ outline: 3px solid rgba(31,87,195,.35); outline-offset: 2px; }
::selection{ background: rgba(31,87,195,.18); }

/* ==== Layout wrappers ==== */
.section-wrap{
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: clamp(16px, 4vw, 48px);
}

.card{
  width: min(960px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(18px, 4vw, 36px);
  box-shadow: 0 10px 30px rgba(17,37,84,.08);
}

/* ==== Headings ==== */
.title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(22px, 2.6vw, 32px);
}
.title::after{
  content:"";
  display:block;
  width: 52px; height: 4px; margin-top: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-yellow), color-mix(in srgb, var(--brand-blue) 25%, var(--brand-yellow)));
}
.subtitle{
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: clamp(14px, 1.6vw, 16px);
}

/* ==== Form grid ==== */
.booking-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2.8vw, 18px);
  align-items: start;
}
@media (min-width: 720px){
  .booking-grid{
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }
}
.span-2{ grid-column: 1 / -1; }

/* ==== Field blocks ==== */
.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label{
  font-weight: 600;
  color: var(--text-1);
  font-size: .95rem;
}

/* Inputs */
.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease;
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: #c7d2fe; /* soft brand-ish */
  box-shadow: 0 0 0 4px rgba(31,87,195,.14);
  background: #fff;
}
@media (hover:hover){
  .field input:hover,
  .field select:hover,
  .field textarea:hover{ border-color: #d6deeb; }
}

/* Django’s split date widgets (keeps them tidy) */
select[id$="day"], select[id$="month"], select[id$="year"]{ min-width: 110px; }

/* ==== Buttons ==== */
.btn-primary{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  font-weight: 700; letter-spacing: .2px; font-size: 1rem;
  color: #fff; background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-600));
  border: 1px solid transparent; border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31,87,195,.22);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
@media (hover:hover){
  .btn-primary:hover{
    filter: brightness(1.02) saturate(1.02);
    box-shadow: 0 14px 28px rgba(23,71,165,.28);
    transform: translateY(-1px);
  }
}
.btn-primary:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(23,71,165,.22); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

/* ==== Errors & validation ==== */
.form-errors{
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #ffd9d9;
  background: #fff6f6;
  color: #a21515;
  border-radius: 10px;
  font-size: .95rem;
}
.is-invalid{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.18) !important;
}

/* Django default error list (if used near fields) */
.errorlist{
  margin: 6px 0 0; padding: 0 0 0 16px;
  color: #b91c1c; font-size: .9rem;
}

/* ==== Small UX niceties ==== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition: none !important; animation: none !important; }
}



/* -----------------------------------------------------Mobile nav -------------------------------------------------------------*/
.hamburger{
  display:none;
  width:42px;height:36px;
  border:1px solid var(--border);
  border-radius:10px;background:#fff;cursor:pointer;
  align-items:center;justify-content:center;gap:5px;
}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:640px){
  .hamburger{display:flex}
  .menu{display:none}
}

/* Drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:60;
  background:rgba(11,18,32,.55);
  display:block; /* we toggle visibility via [hidden] + .open */
  transition: background .2s ease;
}
.mobile-drawer[hidden]{display:none}
.mobile-inner{
  position:absolute; top:0; right:0; width:min(88%, 360px); height:100%;
  background:#fff; border-left:1px solid var(--border);
  box-shadow:-6px 0 24px rgba(17,37,84,.15);
  transform:translateX(100%); transition:transform .22s ease;
  padding:18px 16px; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open .mobile-inner{ transform:translateX(0); }

/* Mobile links */
.m-link{
  padding:12px 10px; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:600;
}
.m-link:hover{ background:#f3f6fb; }
.m-cta{
  margin-top:8px; text-align:center; padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-dark));
  color:#fff; text-decoration:none; font-weight:800;
  box-shadow:0 6px 16px rgba(31,87,195,.25);
}

/* Ensure brand vars exist */
:root{
  --brand-blue:#1f57c3; --brand-blue-dark:#123a86; --ink:#0b1220; --border:#e6eaf2;
}

/* Force CTA contrast (desktop + mobile drawer) */
.cta, .m-cta{
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}



/* Make hamburger visible and breakpoint generous */
@media (max-width:900px){
  .hamburger{display:flex}
  .menu{display:none}
}

.hamburger{
  width:42px;height:36px;
  border:1px solid #b7c3d7; /* stronger */
  background:#fff; display:none; align-items:center; justify-content:center; gap:5px;
}
.hamburger span{width:20px;height:2px;background:var(--ink);border-radius:2px}


.mobile-drawer{ position:fixed; inset:0; background:rgba(11,18,32,.55); }
.mobile-inner{ transform:translateX(100%); transition:transform .22s ease; }
.mobile-drawer.open .mobile-inner{ transform:translateX(0); }



.hamburger{
  width:42px; height:36px;
  border:1px solid #000;             /* black border */
  border-radius:6px;
  background:#fff;                   /* white background */
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  cursor:pointer; z-index:200;       /* on top */
}
.hamburger span{
  width:24px; height:3px;
  background:#000 !important;        /* black lines */
  border-radius:2px;
  display:block;
}

@media (max-width:900px){
  .hamburger{display:flex}
  .menu{display:none}
}


/* ====================================== home page ==========================================================- */

/* Ensure buttons look consistent inside cards */
.card-svc .btn-primary{display:inline-block}




/* === Home: Service cards imagery-first === */
.card-svc{padding:0; overflow:hidden}
.card-svc .svc-thumb{position:relative; width:100%; aspect-ratio: 16/10; background:#eef2fb}
.card-svc .svc-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.card-svc .svc-body{padding:14px}
.card-svc h3{margin:0 0 6px; font-size:clamp(16px,1.6vw,18px)}
.card-svc p{margin:0; color:var(--muted); font-size:14px}
.card-svc .actions{
  display:flex;
  gap:8px;
  margin-top:12px;   
}


.card-svc:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(17,37,84,.12); transition:transform .12s ease, box-shadow .2s ease}

/* === Hero media improvements === */
.hero-media{isolation:isolate}
.hero-img{will-change: transform, opacity, clip-path}

/* === Responsive refinements === */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .btn-primary, .btn-outline{width:100%; justify-content:center}
}




/* De-emphasize service card "View Details" buttons */
.card-svc .btn-primary {
  color: var(--brand-blue);
  font-size: 0.85rem;        /* smaller text */
  padding: 10px 14px;        /* smaller padding */
  background: rgba(31,87,195,.08); /* lighter blue */
  border: 1px solid var(--brand-blue);
  /* box-shadow: 0 4px 12px rgba(31,87,195,.18);     */
}

.card-svc .btn-primary:hover {
  background: var(--brand-blue);
  box-shadow: 0 6px 16px rgba(31, 86, 195, 0.349);
  border: 0;
  color: #fff;
}




/* FIX: make hero images visible */
.hero-img{ clip-path: none !important; opacity: 0; }
.hero-img.is-active{ opacity: 1; }


.trust{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-weight:600;margin-top:12px}
.trust-item{display:inline-flex;align-items:center;gap:8px;line-height:1}
.trust-item svg{display:block}











/* === Disable hero background animations === */
.hero::before,
.hero-bubbles,
.hero-sparkle { display:none !important; }


/* ================================== END OF BACKGROUND ANIMATION =============================================== */


/* Services list (Maid2Match-style: stacked, no cards) */
.svc-row{padding:12px 0}
.svc-title{margin:0 0 6px; font-size:clamp(18px,2.2vw,22px); font-weight:900; color:var(--ink)}
.svc-link{color:inherit; text-decoration:none}
.svc-link:hover{text-decoration:underline}
.svc-blurb{margin:0 0 8px; color:var(--muted); max-width:70ch}
.svc-cta{margin:0}
.svc-details{
  font-weight:800; text-decoration:none;
  color: var(--brand-blue);
  padding: 6px 10px; border-radius:10px;
  background: rgba(31,87,195,.08);       /* faint blue background */
}
.svc-details:hover{background: rgba(31,87,195,.12)}
.svc-sep{border:none; border-top:1px solid var(--border); margin:14px 0}



/* ==== Services: stacked hero rows with overlapping pane ==== */
.svc-stack{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin: 24px 0 36px;
  isolation: isolate; /* ensure pane draws above image */
}
.svc-stack .svc-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(17,37,84,.10);
  min-height: 320px;
  background: #eef2fb;
}
.svc-stack .svc-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.svc-stack:hover .svc-media img{ transform: scale(1.02); }

.svc-pane{
  position: absolute;
  inset: auto 4% -24px auto;  /* bottom-right by default */
  width: min(520px, 88%);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(230,234,242,.9);
  background: color-mix(in srgb, #ffffff 70%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(17,37,84,.14);
  z-index: 2;
}
.svc-title{ margin: 0 0 6px; font-size: clamp(18px,2.2vw,24px); font-weight: 900; color: var(--ink); }
.svc-link{ color: inherit; text-decoration: none; }
.svc-link:hover{ text-decoration: underline; }
.svc-blurb{ margin: 0; color: var(--muted); }
.svc-actions{ margin-top: 12px; }
.btn-pane{
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .92rem; text-decoration: none;
  padding: 10px 14px; border-radius: 12px;
  color: var(--brand-blue);
  background: rgba(31,87,195,.08);          /* faint blue */
  border: 1px solid rgba(31,87,195,.12);
}
.btn-pane:hover{ background: rgba(31,87,195,.12); }

/* Alternate layout: pane on the left */
.svc-stack.is-alt .svc-pane{
  inset: auto auto -24px 4%; /* bottom-left */
}

/* Responsive: stack pane below on mobile */
@media (max-width: 960px){
  .svc-pane{
    position: relative;
    inset: unset;
    width: 100%;
    margin-top: -14px;
  }
}

/* Tighten small screens */
@media (max-width: 620px){
  .svc-stack{ margin: 18px 0 28px; }
  .svc-pane{ padding: 14px; border-radius: 12px; }
}





/* ================================== SERVICE_DETAILS===================================== */

/* ===== Service Detail ===== */
.wrap{max-width:1200px;margin:0 auto;padding:0 6px}
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(17,37,84,.06)}

.svc-hero{
  position:relative;
  padding: clamp(12px, 3vw, 18px) 0 0;
  margin-bottom: clamp(16px, 3vw, 24px);
  background: var(--bg);
}
.svc-hero-media{
  position:relative;
  height: clamp(260px, 38vw, 420px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(17,37,84,.10);
}
.svc-hero-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02); transition: transform .6s ease;
}
.svc-hero:hover .svc-hero-media img{ transform: scale(1.04); }

.svc-hero-pane{
  position:relative;
  width: min(720px, 92%);
  margin: -38px auto 0; /* overlap */
  background: color-mix(in srgb, #ffffff 78%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(230,234,242,.9);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(17,37,84,.14);
  padding: clamp(14px, 2.6vw, 18px);
}
.svc-hero-title{margin:0 0 6px; font-size: clamp(22px, 3vw, 28px); font-weight:900}
.svc-hero-blurb{margin:0; color:var(--muted); max-width: 70ch}
.svc-hero-meta{margin-top:8px; color:var(--text-2); display:flex; gap:8px; flex-wrap:wrap}
.svc-hero-cta{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}

.svc-body{padding: clamp(18px, 3.5vw, 24px) 6px;}
.svc-columns{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px}
@media (max-width: 960px){
  .svc-columns{grid-template-columns:1fr}
}

.svc-h2{margin:0 0 10px; font-size: clamp(18px, 2.2vw, 22px); font-weight:900}

/* inclusions checklist */
.incl-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px; margin:0 0 16px; padding:0; list-style:none;
}
@media (max-width: 720px){
  .incl-grid{grid-template-columns: 1fr}
}
.incl-item{
  background:#fbfcfe; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; position:relative; padding-left:34px;
}
.incl-item::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:4px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-600));
  box-shadow: 0 4px 10px rgba(31,87,195,.28);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.7 13.3 4.4 10l1.2-1.2 2.1 2.1 6.7-6.7 1.2 1.2z"/></svg>') no-repeat center / 16px 16px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.7 13.3 4.4 10l1.2-1.2 2.1 2.1 6.7-6.7 1.2 1.2z"/></svg>') no-repeat center / 16px 16px;
}

/* aside */
.trust-strip{display:grid; gap:10px; margin-bottom:12px}
.trust{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600}
.aside-cta{display:grid; gap:8px; margin-top:6px}
.aside-meta{margin-top:10px; color:var(--text-2); font-size:13px}


a {
  text-decoration: none;
}






/* ====================================== INSTANT QUOTE STYLE================================================= */

/* Instant-quote inputs refine */
.iq-form .field input, .iq-form .field select, .iq-form .field textarea{
  background:#fff;
}


/* ===== Instant Quote Modal ===== */
.iq-modal[hidden]{display:none}
.iq-modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center}
.iq-backdrop{position:absolute; inset:0; background:rgba(9,16,28,.55); backdrop-filter: blur(2px)}
.iq-dialog{
  position:relative; width:min(940px, 96vw); max-height:90vh; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); padding:16px;
}
.iq-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer;
  font-weight:900; line-height:1;
}

/* Progress + steps */
.iq-wrap{max-width:820px;margin:0 auto}
.iq-steps{display:flex;gap:8px;color:var(--text-2);font-weight:700;margin:4px 0 8px;flex-wrap:wrap}
.iq-steps .on{color:var(--brand-blue)}
.iq-progress{height:8px;background:#eef2fb;border-radius:999px;overflow:hidden;margin:6px 0 14px}
.iq-bar{height:100%;background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-600));}

/* Cards (icon style) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.svc-grid{grid-template-columns:1fr}}
.svc-card{border:1px solid var(--border);border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(17,37,84,.08);padding:14px;display:flex;gap:12px;align-items:center}
.svc-card .icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#f3f6fd;border:1px solid #e4e9f8}
.svc-card .title{font-weight:900;margin:0}
.svc-card .blurb{color:var(--muted);font-size:13px;margin:2px 0 0}
.svc-card[aria-checked="true"]{outline:3px solid rgba(31,87,195,.35)}

/* Form grid + enhanced inputs */
.iq-form{display:grid;gap:12px}
.iq-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.iq-row{grid-template-columns:1fr}}
.iq-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.iq-note{color:var(--text-2);font-size:14px}

/* Count steppers (for bedrooms, bathrooms, seats, rooms) */
.stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.stepper button{width:40px;height:40px;border:none;background:#f2f5fb;cursor:pointer;font-weight:900}
.stepper input{width:70px;text-align:center;border:none;background:#fff;height:40px}

/* Toggle chips for booleans */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--border); border-radius:999px; padding:8px 12px; background:#fff; cursor:pointer; font-weight:800;
}
.chip[aria-pressed="true"]{background:#eaf0ff;border-color:#c8d6ff;color:#123a86}

/* Hide any cost display */
.iq-quote{display:none !important}



.iq-form input[type="text"],
.iq-form input[type="email"],
.iq-form input[type="tel"],
.iq-form input[type="number"],
.iq-form textarea,
.iq-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}
.iq-form input:focus, .iq-form textarea:focus, .iq-form select:focus {
  outline: none;
  border-color: #b3c5ff;
  box-shadow: 0 0 0 3px #e8efff;
}
.btn-primary { background: var(--brand-blue); color:#fff; border:1px solid transparent; border-radius:12px; padding:10px 14px; font-weight:800; }
.btn-outline { background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:12px; padding:10px 14px; font-weight:800; }
.card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:0 10px 24px rgba(17,37,84,.06); }
.errorlist { list-style:none; margin:6px 0 0; padding:6px 8px; border-radius:8px; }





/* ===== Instant Quote (modal-first) ===== */
:root{
  --iq-radius:14px;
  --iq-border:#e5e7eb;
  --iq-ink:#0f172a;
  --iq-muted:#64748b;
  --iq-bg:#fff;
}

/* Modal shell */
.iq-modal[hidden]{ display:none; }
.iq-modal{ position:fixed; inset:0; z-index:60; }
.iq-modal .iq-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.iq-modal .iq-dialog{
  position:relative; z-index:1; max-width:760px; margin:4vh auto; height:92vh;
  background:var(--iq-bg); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow:hidden;
}
.iq-header{ padding:14px 16px; border-bottom:1px solid var(--iq-border); display:flex; align-items:center; gap:8px; }
.iq-title{ font-weight:800; color:var(--iq-ink); font-size:1.1rem; }
.iq-close{ margin-left:auto; text-decoration:none; color:var(--iq-muted); font-weight:800; }

/* Body / scroller */
.iq-body{ padding:14px 16px; overflow:auto; }

/* Steps + progress */
.iq-steps{ display:flex; gap:8px; font-weight:800; margin:6px 0; color:var(--iq-muted); }
.iq-steps .is-on{ color:var(--brand-blue); }

.iq-progress{ height:6px; background:#eef2fb; border-radius:999px; overflow:hidden; margin:6px 0 12px; }
.iq-progress__bar{ height:100%; background:linear-gradient(180deg,var(--brand-blue),#1d4ed8); width:25%; transition:width .25s ease; }
.is-step-2 .iq-progress__bar{ width:50%; }
.is-step-3 .iq-progress__bar{ width:75%; }
.is-step-4 .iq-progress__bar{ width:100%; }

/* Cards / grid */
.iq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.iq-card{
  border:1px solid var(--iq-border); border-radius:var(--iq-radius); padding:12px; background:var(--iq-bg);
  display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.iq-card .title{ font-weight:800; color:var(--iq-ink); }
.iq-card .muted{ color:var(--iq-muted); font-size:.95rem; }

/* Forms */
.iq-panel{ border:1px solid var(--iq-border); border-radius:var(--iq-radius); padding:14px; background:var(--iq-bg); box-shadow:0 1px 2px rgba(0,0,0,.03); }
.iq-form{ display:grid; gap:12px; }
.iq-field label{ font-weight:700; color:var(--iq-ink); display:block; margin-bottom:6px; }
.iq-field .help{ font-size:.9rem; color:var(--iq-muted); }
.iq-error{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:10px; padding:10px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:6px; font-weight:800; border-radius:10px; padding:10px 14px; cursor:pointer; }
.btn-primary{ background:var(--brand-blue); color:#fff; border:0; }
.btn-outline{ background:#fff; color:var(--iq-ink); border:1px solid var(--iq-border); text-decoration:none; }

/* Links inside modal treated as buttons */
.iq-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; }

/* Reduce default form element width inside modal */
.iq-body input[type="text"],
.iq-body input[type="email"],
.iq-body input[type="tel"],
.iq-body input[type="number"],
.iq-body select,
.iq-body textarea{ width:100%; padding:10px 12px; border:1px solid var(--iq-border); border-radius:10px; }

/* Page version (non-modal) wrapper */
.iq-page{ max-width:980px; margin:0 auto; padding:24px 0; }


/* ==================================== BOOK NOW :-moz-loading */
  #loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
  }

  .loader-container p {
    margin-top: 1rem;
    color: #0e3f68;
    font-weight: 600;
    font-size: 1.1rem;
  }

  .loader-brush {
    width: 60px;
    height: 60px;
    border: 6px solid #e0e7ef;
    border-top: 6px solid #0e3f68;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }







.brand .name { display:flex; gap:6px; min-width:0; }
.name .main {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;   /* ← only the main part truncates */
}
.name .suffix {
  flex:0 0 auto;            /* ← never shrinks */
  white-space:nowrap;
  font-weight:800;
}



/* ================================ HOMEPAGE ICON =========================================== */

.tc-item { flex-shrink: 1; } /* lets them shrink to fit */