/* ═══════════════════════════════════════════════════════
   GARUDA BIKE RENTALS — shared.css
   All design tokens + common components
   Every page links to this file first.
   ═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root,[data-theme="light"]{
  --bg:#f5f1eb;--surface:#faf8f4;--surface2:#ede9e2;--surfoff:#e4ded4;
  --border:rgba(30,25,15,.13);--divider:rgba(30,25,15,.07);
  --text:#1a1710;--muted:#635e54;--faint:#9a9388;--inv:#faf8f4;
  --teal:#0f6b63;--teal2:#0a504a;--teal-hi:#d3e5e2;
  --gold:#c9a227;--gold-l:#f0d580;--gold-d:#8a6c12;
  --gold-bg:rgba(201,162,39,.09);--gold-bd:rgba(201,162,39,.28);
  --wa:#25D366;
  --sh-sm:0 1px 3px rgba(20,16,8,.07);
  --sh-md:0 12px 30px rgba(20,16,8,.10);
  --sh-lg:0 24px 60px rgba(20,16,8,.14);
  --sh-gold:0 6px 24px rgba(201,162,39,.22);
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:22px;--r-2xl:32px;--r-full:9999px;
  --font-d:'Zodiak',Georgia,serif;--font-b:'General Sans',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#0c0b09;--surface:#141210;--surface2:#1c1a16;--surfoff:#252118;
  --border:rgba(240,230,200,.11);--divider:rgba(240,230,200,.07);
  --text:#ede9e0;--muted:#a09890;--faint:#6a6258;--inv:#0c0b09;
  --teal:#4fa89e;--teal2:#6bbdb4;--teal-hi:rgba(79,168,158,.14);
  --gold:#d4aa30;--gold-l:#f0d580;--gold-d:#a07c18;
  --gold-bg:rgba(212,170,48,.11);--gold-bd:rgba(212,170,48,.26);
  --sh-sm:0 1px 3px rgba(0,0,0,.3);--sh-md:0 12px 30px rgba(0,0,0,.4);
  --sh-lg:0 24px 60px rgba(0,0,0,.55);--sh-gold:0 6px 24px rgba(212,170,48,.18);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-size-adjust:none;overflow-x:hidden;}
body{min-height:100dvh;font-family:var(--font-b);font-size:clamp(1rem,.95rem + .25vw,1.125rem);color:var(--text);background:var(--bg);line-height:1.65;overflow-x:hidden;max-width:100%;}
@media(max-width:767px){body{padding-bottom:68px;}}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;}
input,select,textarea{font:inherit;}
p{max-width:66ch;color:var(--muted);}
h1,h2{font-family:var(--font-d);letter-spacing:-.03em;line-height:1.04;}
h3,h4{line-height:1.2;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm);}

/* ── LAYOUT ── */
.skip{position:absolute;left:1rem;top:-100px;background:var(--gold);color:#000;padding:.5rem 1.25rem;border-radius:var(--r-full);z-index:9999;font-weight:700;}
.skip:focus{top:1rem;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:1rem;box-sizing:border-box;}
.sec{padding:clamp(3rem,8vw,6rem) 0;position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.eyebrow::before{content:'';width:1.5rem;height:1px;background:currentColor;}
.gold{color:var(--gold);}
.faint{font-size:.8rem;color:var(--faint);}
.text-center{text-align:center;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.875rem;padding:0 1.5rem;border-radius:var(--r-full);font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease;white-space:nowrap;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#000;box-shadow:var(--sh-gold);}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn-ghost{border:1.5px solid var(--border);background:var(--surface);color:var(--text);}
.btn-ghost:hover{background:var(--surface2);transform:translateY(-1px);}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 16px rgba(37,211,102,.3);}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.08);}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:var(--teal2);transform:translateY(-2px);}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--sh-sm);}
.card-gold{border-color:var(--gold-bd);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--gold-bg) 60%,var(--surface)));}

/* ── CHECK LIST ── */
.cl{display:grid;gap:.75rem;margin-top:1.25rem;}
.cl li{display:flex;gap:.75rem;color:var(--muted);align-items:flex-start;font-size:.9rem;}
.cl svg{color:var(--gold);flex-shrink:0;margin-top:.15rem;}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms ease;}
.rev.vis{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none;}}

/* ── HEADER ── */
.hdr{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--divider);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;min-height:4.5rem;gap:1rem;}
.brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:700;}
.brand-logo{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;border:1.5px solid var(--gold-bd);background:#0f0e0c;flex-shrink:0;}
.brand-logo img{width:100%;height:100%;object-fit:cover;}
.brand-text span{display:block;font-size:.95rem;font-weight:700;}
.brand-text small{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
.nav-links{display:flex;align-items:center;gap:1.5rem;}
.nav-links a{font-size:.875rem;color:var(--muted);transition:color 150ms;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.hdr-actions{display:flex;align-items:center;gap:.75rem;}
.icon-btn{width:2.4rem;height:2.4rem;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:border-color 150ms,color 150ms;flex-shrink:0;}
.icon-btn:hover{border-color:var(--gold-bd);color:var(--gold);}
.menu-btn{display:none;}
.mob-nav{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + .5rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.25rem;box-shadow:var(--sh-lg);z-index:50;}
.mob-nav.open{display:grid;gap:1rem;}
.mob-nav a{font-weight:600;font-size:.9rem;}
.mob-nav a:hover,.mob-nav a.active{color:var(--gold);}
.mob-nav .btn{width:100%;margin-top:.25rem;}

/* ── FOOTER ── */
.footer{padding:3rem 0 2rem;border-top:1px solid var(--divider);}
.footer-g{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:2rem;}
.footer-brand p{max-width:28ch;margin-top:1rem;}
.footer-soc{display:flex;gap:.625rem;margin-top:1.25rem;}
.fs-btn{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);color:var(--muted);text-decoration:none;transition:all 150ms;flex-shrink:0;}
.fs-btn:hover{border-color:var(--gold-bd);color:var(--gold);transform:translateY(-2px);}
.footer-col h4{font-size:.875rem;font-weight:700;margin-bottom:1rem;}
.footer-links{display:grid;gap:.75rem;}
.footer-links a{font-size:.875rem;color:var(--muted);transition:color 150ms;}
.footer-links a:hover{color:var(--gold);}
.fci{display:grid;gap:.75rem;}
.fci a,.fci span{font-size:.875rem;color:var(--muted);display:flex;align-items:flex-start;gap:.5rem;text-decoration:none;}
.fci a:hover{color:var(--gold);}
.fci svg{color:var(--gold);flex-shrink:0;margin-top:2px;}
.footer-bot{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;}

/* ── STICKY MOBILE CTA ── */
.mob-cta{position:fixed;bottom:0;left:0;width:100%;display:none;z-index:999;box-shadow:0 -3px 16px rgba(0,0,0,.12);}
@media(max-width:767px){.mob-cta{display:flex;}}
.mob-cta-btn{flex:1;text-align:center;padding:.95rem .5rem;font-weight:700;font-size:.875rem;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.mob-cta-btn.call{background:var(--gold);color:#000;}
.mob-cta-btn.wa{background:var(--wa);color:#fff;}

/* ── WHATSAPP BUBBLE ── */
.wa-bubble{position:fixed;bottom:2rem;right:2rem;z-index:999;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--wa);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);text-decoration:none;transition:transform 200ms;}
@media(min-width:768px){.wa-bubble{display:flex;}}
.wa-bubble:hover{transform:scale(1.1);}

/* ── SOCIAL PROOF ── */
.sp-notif{position:fixed;bottom:5rem;left:1rem;z-index:998;max-width:260px;padding:.875rem 1rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-md);display:flex;align-items:center;gap:.75rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 400ms ease,transform 400ms ease;}
.sp-notif.show{opacity:1;transform:translateY(0);}
@media(max-width:767px){.sp-notif{bottom:5.5rem;max-width:calc(100% - 1.5rem);left:.75rem;}}
.sp-ava{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gold-bg);display:grid;place-items:center;font-weight:700;color:var(--gold);font-size:.8rem;flex-shrink:0;border:1px solid var(--gold-bd);}
.sp-text strong{display:block;font-size:.8rem;color:var(--text);}
.sp-text span{font-size:.72rem;color:var(--muted);}

/* ── REVIEWS CAROUSEL (shared) ── */
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;}
.rev-head h2{font-size:clamp(1.8rem,1.2rem + 2vw,3rem);margin-top:.75rem;}
.rbadge{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--r-lg);background:var(--gold-bg);border:1px solid var(--gold-bd);}
.rscore{font-size:2.2rem;font-weight:700;color:var(--gold);line-height:1;}
.rstars{color:var(--gold);}
.rcarousel{overflow:hidden;}
.rtrack{display:flex;gap:1.25rem;transition:transform 500ms ease;will-change:transform;}
.rcard{flex:0 0 calc(33.33% - .85rem);padding:1.5rem;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);}
.rcard-stars{color:var(--gold);font-size:.85rem;margin-bottom:.75rem;}
.rcard-text{font-size:.875rem;color:var(--muted);font-style:italic;line-height:1.7;margin-bottom:1rem;}
.rcard-author{display:flex;align-items:center;gap:.75rem;}
.rcard-ava{width:2rem;height:2rem;border-radius:50%;background:var(--gold-bg);display:grid;place-items:center;font-weight:700;color:var(--gold);font-size:.8rem;border:1px solid var(--gold-bd);flex-shrink:0;overflow:hidden;}
.rcard-name{font-weight:700;font-size:.875rem;}
.rcard-time{font-size:.72rem;color:var(--faint);}
.rev-nav{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-top:1.5rem;}
.rev-btn{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:all 150ms;color:var(--muted);}
.rev-btn:hover{border-color:var(--gold-bd);color:var(--gold);}
.rev-dots{display:flex;gap:.5rem;}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background 200ms;border:none;cursor:pointer;}
.rdot.on{background:var(--gold);}
@media(max-width:767px){.rcard{flex:0 0 88%;}}

/* ── FAQ ── */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem;}
details{padding:1.25rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);transition:border-color 200ms;}
details[open]{border-color:var(--gold-bd);}
summary{list-style:none;cursor:pointer;font-weight:700;font-size:.9rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";color:var(--gold);font-size:1.1rem;flex-shrink:0;transition:transform 200ms;}
details[open] summary::after{transform:rotate(45deg);}
details p{margin-top:.75rem;font-size:.875rem;}

/* ── PAGE HERO BANNER (about/contact/blog) ── */
.page-hero{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%);border-bottom:1px solid var(--divider);}
.page-hero h1{font-size:clamp(2rem,1.2rem + 3vw,4rem);margin-top:.75rem;}
.page-hero p{margin-top:1rem;font-size:clamp(1rem,1rem + .2vw,1.2rem);max-width:42ch;}

/* ── SOCIAL BUTTONS ── */
.social-row{display:flex;gap:.625rem;margin-top:1.25rem;flex-wrap:wrap;}
.sbtn{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .9rem;border-radius:var(--r-full);font-size:.75rem;font-weight:700;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);text-decoration:none;transition:all 150ms;}
.sbtn:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);}
.sbtn.ig:hover{border-color:#e1306c;color:#e1306c;background:rgba(225,48,108,.06);}
.sbtn.wa:hover{border-color:var(--wa);color:var(--wa);background:rgba(37,211,102,.06);}
.sbtn.gm:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-bg);}

/* ── CTA STRIP ── */
.cta-strip{background:linear-gradient(135deg,var(--gold),var(--gold-d));padding:clamp(2.5rem,5vw,4rem) 0;text-align:center;}
.cta-strip h2{font-size:clamp(1.6rem,1rem + 2vw,2.8rem);color:#000;}
.cta-strip p{color:rgba(0,0,0,.7);margin:.75rem auto 2rem;max-width:40ch;}
.cta-strip .btn-strip{background:#000;color:var(--gold);border-radius:var(--r-full);padding:0 2rem;min-height:3rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;transition:transform 200ms,filter 200ms;}
.cta-strip .btn-strip:hover{transform:translateY(-2px);filter:brightness(1.1);}
.cta-strip .btn-wa-strip{background:var(--wa);color:#fff;border-radius:var(--r-full);padding:0 2rem;min-height:3rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;transition:transform 200ms;}
.cta-strip .btn-wa-strip:hover{transform:translateY(-2px);}
.cta-strip-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ── RESPONSIVE ── */
@media(max-width:980px){
  .nav-links,.hdr-actions .btn{display:none;}
  .menu-btn{display:inline-grid;}
  .footer-g{grid-template-columns:1fr 1fr;}
  .footer-g .footer-brand{grid-column:1/-1;}
  .faq-grid{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .footer-g{grid-template-columns:1fr;}
  .footer-bot{flex-direction:column;align-items:flex-start;}
  .rbadge{flex-direction:column;align-items:flex-start;}
  .cta-strip-btns .btn-strip,.cta-strip-btns .btn-wa-strip{width:100%;}
}