/* ============================================================
   STJ Taxi — shared "fun" skin. Loaded last so it re-skins each
   page's own styles. Paint-only (color/font/border/shadow/bg);
   layout/grids left intact so nothing breaks.
   ============================================================ */
:root{
  --ink:#0a3a46; --ink-soft:#2b6577;
  --taxi:#ffcb1f; --taxi-deep:#f5a400;
  --coral:#ff5a52; --teal:#13c4b4; --sky:#36b6ff; --grape:#8a63ff;
  --cream:#fff7e6; --paper:#ffffff; --sand:#ffe9bd;
  --sky-top:#8fe0ff; --sky-mid:#bff0ff;
  --fun-shadow:0 14px 0 rgba(10,58,70,.14);
  --fun-display:"Luckiest Guy","Comic Sans MS",cursive;
  --fun-head:"Baloo 2","Trebuchet MS",sans-serif;
  --fun-body:"Nunito","Segoe UI",sans-serif;
}
html,body{
  background:
    radial-gradient(900px 420px at 85% -60px,#fff6c6 0%,transparent 70%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 230px,#eafff5 520px,#fff8ea 760px,#fff8ea 100%) !important;
  background-attachment:fixed !important;
  color:var(--ink) !important;
  font-family:var(--fun-body) !important;
}
p,li,span,td,th,label,.sub,.lead{font-family:var(--fun-body);}
/* font-only on headings: keep each page's designed colors so text over
   photos / dark sections stays readable */
h1,h2{font-family:var(--fun-display) !important;font-weight:400 !important;line-height:1.02;}
h3,h4,h5{font-family:var(--fun-head) !important;font-weight:800 !important;}
a{color:inherit;}

/* ---------- shared fun sticky bar (injected on every page) ---------- */
.stjbar{position:sticky;top:0;z-index:70;background:#fff;border-bottom:4px solid var(--ink);box-shadow:0 6px 0 rgba(10,58,70,.12);font-family:var(--fun-body);}
.stjbar .in{display:flex;align-items:center;gap:10px;max-width:1040px;margin:0 auto;padding:9px 16px;}
.stjbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;}
.stjbar .mark{width:42px;height:42px;flex:0 0 auto;filter:drop-shadow(0 3px 0 rgba(10,58,70,.25));}
.stjbar .nm{font-family:var(--fun-display);font-size:23px;line-height:.9;color:var(--ink);letter-spacing:.5px;}
.stjbar .nm b{color:var(--coral);}
.stjbar .tag{display:block;font-family:var(--fun-head);font-weight:800;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);}
.stjbar .pill{font-family:var(--fun-head);font-weight:800;border:3px solid var(--ink);border-radius:999px;text-decoration:none;padding:7px 13px;font-size:12.5px;white-space:nowrap;box-shadow:0 4px 0 rgba(10,58,70,.25);}
.stjbar .pill.home{background:var(--taxi);color:var(--ink);}
.stjbar .pill.call{background:var(--coral);color:#fff;}
.stjbar .pill:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(10,58,70,.25);}
@media(max-width:560px){.stjbar .pill.home{display:none;}}

/* ---------- inner-page nav cards (.navband / .hp-*) ---------- */
.navband{background:transparent !important;border:0 !important;box-shadow:none !important;}
.hp-btn{border:4px solid var(--ink) !important;border-radius:20px !important;box-shadow:var(--fun-shadow) !important;background:#fff !important;overflow:hidden;}
.hp-btn .lbl{font-family:var(--fun-head) !important;font-weight:800 !important;color:#fff !important;text-shadow:0 2px 6px rgba(0,0,0,.55) !important;}
.hp-btn .sub{color:#f3fbfa !important;font-weight:700 !important;text-shadow:0 1px 5px rgba(0,0,0,.6) !important;}
.hp-btn .go{font-family:var(--fun-head) !important;font-weight:800 !important;color:#fff !important;text-shadow:0 1px 5px rgba(0,0,0,.6) !important;}
.hp-flag{background:var(--coral) !important;color:#fff !important;font-family:var(--fun-head) !important;font-weight:800 !important;border:2px solid var(--ink) !important;}
.hp-menu{border:3px solid var(--ink) !important;border-radius:14px !important;background:#fff !important;box-shadow:var(--fun-shadow) !important;}
.hp-menu a{font-family:var(--fun-head) !important;font-weight:700 !important;color:var(--ink) !important;}

/* ---------- generic buttons / CTAs ---------- */
.taxi-book-cta,.submit-btn,.copy-link-btn,.big,.btn-primary,.cta,.btn-book,button.primary,
a.button,.pill-btn,.book,.wz-next,.bag-btn,.gps-btn{
  font-family:var(--fun-head) !important;font-weight:800 !important;
  border:3px solid var(--ink) !important;border-radius:14px !important;
  box-shadow:0 5px 0 rgba(10,58,70,.25) !important;
  background:var(--taxi) !important;color:var(--ink) !important;}
.wz-back,.btn-ghost{background:#fff !important;color:var(--ink) !important;border:3px solid var(--ink) !important;border-radius:14px !important;box-shadow:0 5px 0 rgba(10,58,70,.2) !important;font-family:var(--fun-head) !important;font-weight:800 !important;}
.taxi-book-cta:active,.submit-btn:active,.wz-next:active,.big:active{transform:translateY(3px) !important;box-shadow:0 2px 0 rgba(10,58,70,.25) !important;}

/* price pills / chips */
.price-pill,.price-pills span,.chip,.pill-tag{border:3px solid var(--ink) !important;border-radius:999px !important;background:#fff5d6 !important;color:var(--ink) !important;font-family:var(--fun-head) !important;font-weight:800 !important;box-shadow:0 4px 0 rgba(10,58,70,.14) !important;}
.price-pill strong{color:var(--coral) !important;}

/* generic content cards -> chunky */
.card,.trust-card,.guide-card,.beach-card,.tour-card,.dine-card,.info-card,.feature-card{
  border:4px solid var(--ink) !important;border-radius:20px !important;box-shadow:var(--fun-shadow) !important;background:#fff !important;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink) !important;color:#d7f3ef !important;border-top:5px solid var(--taxi) !important;}
.site-footer a{color:#aef0e7 !important;font-weight:800 !important;}
.footer-text-name,.footer-brand,.footer-brand-block .footer-brand{font-family:var(--fun-display) !important;color:#fff !important;}

/* ============================================================
   BOOKING WIZARD / booking-flow specific
   Keep the dark form card (readable), brighten hero, chunky buttons.
   ============================================================ */
.taxi-hero{background:linear-gradient(155deg,#15b8c7 0%,#2aa8f0 55%,#5fd0ff 100%) !important;}
.taxi-hero-bg{background:transparent !important;opacity:1 !important;}
.taxi-hero-content{color:#ffffff !important;}
.taxi-hero-content h1,.taxi-hero-content h2{color:#fff !important;font-family:var(--fun-display) !important;text-shadow:2px 3px 0 rgba(10,58,70,.35);}
.taxi-tagline{color:#eafffd !important;font-weight:700 !important;}
.hero-brand img{filter:drop-shadow(0 3px 0 rgba(10,58,70,.25));}

.taxi-form-card,.pay-card{border:4px solid var(--ink) !important;border-radius:22px !important;box-shadow:var(--fun-shadow) !important;}
.taxi-form-card h1,.taxi-form-card h2,.taxi-form-card h3,.pay-card h1,.pay-card h2,.pay-card h3{font-family:var(--fun-head) !important;}
.step-num{border:3px solid var(--ink) !important;background:var(--taxi) !important;color:var(--ink) !important;font-family:var(--fun-head) !important;font-weight:800 !important;}
.steps .step{font-family:var(--fun-body) !important;}

/* how-it-works / section headings inside wizard */
.quick-answer-title{font-family:var(--fun-display) !important;color:var(--ink) !important;}

/* floating call + whatsapp bubbles: chunky ink ring */
.call-float,.whatsapp-float{border:3px solid var(--ink) !important;box-shadow:0 6px 0 rgba(10,58,70,.25) !important;}