/* ==========================================================================
   Salut Transport visual refinements
   Additive stylesheet: loads after style.css / content-fixes.css /
   mobile-fixes.css and only overrides what the audit flagged. Nothing here
   removes the base design system — same ink/gold identity, same fonts.
   ========================================================================== */

/* ---------- 0. Concept preview ribbon (this build only) ---------- */
.conceptRibbon{
  position:relative;z-index:95;
  background:#0A1F17;color:#F3EEE4;
  border-bottom:1px solid rgba(212,162,76,.35);
  font:800 12.5px/1.4 'Nunito Sans',system-ui,sans-serif;
  text-align:center;
  padding:9px 16px;
}
.conceptRibbon b{color:var(--yellow,#D4A24C)}
.conceptRibbon a{text-decoration:underline;color:#fff}

/* ---------- 1. Brand mark: keep Salut wordmark colours consistent ---------- */
.brandText strong{color:#ef3340 !important;}
.brandText small{color:#1f5fbf !important;}
html[data-theme="light"] .brandText strong{color:#ef3340 !important;}
html[data-theme="light"] .brandText small{color:#1f5fbf !important;}

/* ---------- 2. CTA system: primary / secondary / support ----------
   Primary  = check availability & fare (gold fill)  -> .btnPrimary (unchanged)
   Secondary= learn / register                       -> .btnSecondary
   Support  = WhatsApp direct                         -> .btnSupport
*/
.btnSecondary{
  background:transparent!important;
  color:var(--yellow,#D4A24C)!important;
  border:1.5px solid rgba(212,162,76,.55)!important;
  box-shadow:none!important;
}
.btnSecondary:hover{border-color:var(--yellow,#D4A24C)!important;}
html[data-theme="light"] .btnSecondary,
body:not(.darkMode) .btnSecondary{
  color:#8a611f!important;
  border-color:rgba(139,97,31,.4)!important;
}
.btnSupport{
  background:#1f7a4d!important;
  color:#fff!important;
  box-shadow:0 14px 26px rgba(31,122,77,.25)!important;
}
.btnSupport svg{width:18px;height:18px;margin-right:8px;flex:none;}

/* Old .btnGhost usages that now act as the "secondary" tier */
.heroActions .btnGhost{
  background:transparent!important;
  border:1.5px solid rgba(255,255,255,.4)!important;
  color:#fff!important;
}

/* ---------- 3. Trust strip (new, sits right under the hero) ---------- */
.trustStrip{
  background:#0A1F17;color:#fff;
  border-top:1px solid rgba(212,162,76,.18);
  border-bottom:1px solid rgba(212,162,76,.18);
}
.trustStripRow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:22px 0;
}
.trustStripItem{
  display:flex;align-items:center;gap:12px;
  padding:6px 22px;border-left:1px solid rgba(255,255,255,.12);
}
.trustStripItem:first-child{border-left:0;}
.trustStripItem svg{width:26px;height:26px;flex:none;color:var(--yellow,#D4A24C);}
.trustStripItem b{display:block;font-size:15px;color:#fff;line-height:1.2;}
.trustStripItem span{display:block;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.25;margin-top:2px;}
@media(max-width:980px){
  .trustStripRow{grid-template-columns:repeat(2,1fr);gap:14px 0;}
  .trustStripItem{border-left:0;padding:4px 12px;}
}
@media(max-width:560px){
  .trustStripRow{grid-template-columns:1fr;}
  .trustStripItem{padding:4px 4px;}
}

/* ---------- 4. Inline icon set (replaces remaining emoji) ---------- */
.inlineIcon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-0.15em;}
.inlineIcon svg{width:100%;height:100%;}
.hoursBox b .inlineIcon{width:18px;height:18px;margin-right:8px;color:var(--yellow,#D4A24C);}
.schoolMapIcon svg{width:22px;height:22px;display:block;}
.formCardTitle span svg{width:22px;height:22px;color:var(--yellow,#D4A24C);}

/* ---------- 5. Kawasan (coverage) section, promoted higher on the page ---------- */
.coverageIntroNote{
  display:inline-flex;align-items:center;gap:8px;
  font:800 13px/1 'Nunito Sans',system-ui,sans-serif;
  color:var(--yellow,#D4A24C);
  background:rgba(212,162,76,.12);
  border:1px solid rgba(212,162,76,.3);
  border-radius:999px;padding:8px 14px;margin-bottom:16px;
}

/* ---------- 5b. Coverage self-checker (real data, no invented slots/price) ---------- */
.schoolCheckerBox{
  position:relative;max-width:440px;margin:22px auto 6px;
}
.schoolCheckerBox svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:rgba(255,255,255,.5);pointer-events:none;
}
.schoolCheckerBox input{
  width:100%;min-height:52px;border-radius:999px;
  border:1.5px solid rgba(212,162,76,.35);
  background:rgba(255,255,255,.06);color:#fff;
  font:700 16px 'Nunito Sans',system-ui,sans-serif;
  padding:12px 18px 12px 46px;
}
.schoolCheckerBox input::placeholder{color:rgba(255,255,255,.45);}
.schoolCheckerBox input:focus{border-color:var(--yellow,#D4A24C);outline:none;box-shadow:0 0 0 4px rgba(212,162,76,.18);}
html[data-theme="light"] .schoolCheckerBox input,
body:not(.darkMode) .schoolCheckerBox input{background:rgba(26,36,32,.04);color:#1A2420;border-color:rgba(26,36,32,.16);}
html[data-theme="light"] .schoolCheckerBox svg,
body:not(.darkMode) .schoolCheckerBox svg{color:rgba(26,36,32,.4);}
.coveredBadge{
  display:inline-flex;align-items:center;gap:6px;
  font:800 12px 'Nunito Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.4px;
  color:var(--good,#3B7A57);background:var(--good-soft,rgba(59,122,87,.14));
  padding:5px 11px;border-radius:999px;margin-bottom:8px;
}
.coveredBadge svg{width:14px;height:14px;}
.schoolMapInfoActions{display:flex;gap:10px;flex-wrap:wrap;flex:none;}
.schoolMapInfoActions .btn{min-height:44px;padding:11px 18px;font-size:14px;white-space:nowrap;}

.schoolCard[hidden]{display:none!important;}

/* ---------- 6. Pricing section -> "check fare" UX, no invented numbers ---------- */
.fareBanner{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,#173B2B,#0F2E22);
  border:1px solid rgba(212,162,76,.3);
  border-radius:20px;padding:28px 32px;margin-top:8px;
  box-shadow:var(--shadow);
}
.fareBanner p{margin:0;color:rgba(255,255,255,.78);font-size:17px;font-weight:700;max-width:52ch;}
.fareBanner strong{color:#fff;display:block;font-size:21px;margin-bottom:4px;}
.pricePill{cursor:default;}
.priceNote{
  font-size:13.5px;color:inherit;opacity:.68;font-weight:700;margin-top:10px;display:block;
}

/* ---------- 7. Registration page: real H1 + honest progress ---------- */
/* formCardTitle/routeBlock headings moved from h3/h4 to h2/h3 for a real
   H1->H2->H3 outline; restyle to match the visual weight they had before. */
.formCardTitle h2{margin:0;color:#1A2420;font-size:25px;font-weight:900;line-height:1.2;font-family:'Nunito Sans',system-ui,sans-serif;}
html[data-theme="dark"] .formCardTitle h2{color:#fff;}
.routeBlock h3{margin:0;color:#B8842F;font-size:18px;font-weight:900;line-height:1.2;font-family:'Nunito Sans',system-ui,sans-serif;}
@media(max-width:980px){.formCardTitle h2{font-size:22px;}}
.registrationTop h1{
  font-family:'Fraunces',Georgia,serif!important;
  font-weight:600;font-size:clamp(28px,4vw,38px);
  margin:0 0 6px;color:inherit;line-height:1.1;
}
.registrationMeta{
  display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px;
  font:800 13px/1 'Nunito Sans',system-ui,sans-serif;
  color:var(--reg-muted,#5B6A62);
}
.registrationMeta span{display:inline-flex;align-items:center;gap:6px;}
.registrationMeta svg{width:15px;height:15px;color:var(--yellow,#D4A24C);}

.formProgress a{position:relative;transition:background-color .2s ease,border-color .2s ease,color .2s ease;}
.formProgress a.isCurrent{
  background:var(--yellow,#D4A24C)!important;
  color:#1A2420!important;
  border-color:var(--yellow,#D4A24C)!important;
}
.formProgress a.isCurrent span{background:#1A2420;color:var(--yellow,#D4A24C);}
.formProgress a.isDone:not(.isCurrent):after{
  content:'\2713';
  position:absolute;top:-6px;right:-6px;
  width:16px;height:16px;border-radius:50%;
  background:#1f7a4d;color:#fff;font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.icPurposeNote{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(212,162,76,.08);border:1px solid rgba(212,162,76,.28);
  border-radius:10px;padding:12px 14px;margin:4px 0 18px;
  font-size:14px;line-height:1.4;color:var(--reg-muted,#5B6A62);
}
.icPurposeNote svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--yellow,#D4A24C);}

/* ---------- 8. Footer: contact essentials + quick links, still minimal ---------- */
.footer{padding:44px 0 22px;}
.footerGrid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:18px;
}
.footerBrand strong{display:block;font-size:19px;color:#fff;margin-bottom:8px;font-family:'Nunito Sans',sans-serif;}
.footerBrand p{margin:0 0 12px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);font-weight:700;max-width:34ch;}
.footerCol .footerColHead{margin:0 0 12px;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5);font-weight:900;}

/* Policy pages: numbered sections moved from h3 to h2 (h1 was skipping
   straight to h3) — restyle to the same visual weight the old h3 had. */
.contentPage h2{font-size:26px;margin-top:26px;color:#1A2420;font-family:'Nunito Sans',system-ui,sans-serif;font-weight:900;}
html[data-theme="dark"] .contentPage h2{color:#fff;}
.footerCol a,.footerCol div{display:block;margin-bottom:9px;font-size:14.5px;color:#fff;font-weight:700;}
.footerCol a:hover{color:var(--yellow,#D4A24C);}
.footerBottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5);font-weight:700;}
.footerBottom a{color:rgba(255,255,255,.72);}
@media(max-width:820px){
  .footerGrid{grid-template-columns:1fr 1fr;}
  .footerBrand{grid-column:1/-1;}
}
@media(max-width:560px){
  .footerGrid{grid-template-columns:1fr;gap:22px;}
}

/* ---------- 10. Accessibility: visible focus, touch targets, contrast ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--yellow,#D4A24C)!important;
  outline-offset:2px;
}
.schoolMapIcon{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.chatClose,.mobileNavClose,.fleetLightboxClose{min-width:44px;min-height:44px;}
@media (prefers-reduced-motion: reduce){
  .heroSlide,.card,.btn,.mobileNavMenu,.mobileNavPanel,.mobileNavLinks a{transition:none!important;animation:none!important;}
}

/* ---------- 11. Review section: honest framing, no overclaim ---------- */
.reviewNote{
  display:block;margin-top:22px;font-size:14px;font-weight:700;
  color:rgba(255,255,255,.55);text-align:center;
}

/* ---------- 13. About / fleet: caption for excluded stock asset (dev note only, harmless if unused) ---------- */
.fleetCount{font-size:12.5px;color:inherit;opacity:.6;font-weight:700;margin-top:8px;}