/*
Theme Name: Elite Suites Charter
Theme URI: https://elitesuitescharter.co.za
Author: MC Hector Dev
Author URI: https://mchectordev.com
Description: Premium luxury transport booking theme for Elite Suites Charter. Features live Google Maps fare calculation, Yoco card payments, vehicle booking system, user dashboard, and email receipts. Dark gold art-deco aesthetic.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
License URI: https://elitesuitescharter.co.za
Text Domain: elite-suites
Tags: transportation, booking, luxury, dark, custom-menu, custom-logo, featured-images, responsive-layout
*/

/* ============================================================
   ELITE SUITES CHARTER — WordPress Theme
   Design: Dark Luxury / Art Deco Gold
   Built by: MC Hector Dev (mchectordev.com)
   ============================================================ */

:root {
  --black:       #080808;
  --dark:        #0f0f0f;
  --dark-2:      #161616;
  --dark-3:      #1e1e1e;
  --gold:        #C9A84C;
  --gold-light:  #E8C96A;
  --gold-dark:   #9A7A35;
  --white:       #F5F0E8;
  --white-dim:   rgba(245,240,232,0.65);
  --white-faint: rgba(245,240,232,0.08);
  --border:      rgba(201,168,76,0.18);
  --border-strong: rgba(201,168,76,0.42);
  --ff-serif:    'Cormorant Garamond', Georgia, serif;
  --ff-sans:     'Montserrat', sans-serif;
  --transition:  0.35s cubic-bezier(0.4,0,0.2,1);
  --radius:      2px;
}

/* =================== RESET & BASE =================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--ff-sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Grain overlay */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:var(--ff-sans); }

/* =================== TYPOGRAPHY =================== */
h1,h2,h3,h4,h5 { font-family:var(--ff-serif); font-weight:300; line-height:1.15; }
h1 { font-size:clamp(2.8rem,6vw,5.5rem); }
h2 { font-size:clamp(2rem,4vw,3.5rem); }
h3 { font-size:clamp(1.4rem,2.5vw,2rem); }
h4 { font-size:1.2rem; }
p  { color:var(--white-dim); font-size:0.875rem; letter-spacing:0.02em; }

.gold  { color:var(--gold); }
.serif { font-family:var(--ff-serif); }

/* =================== LAYOUT =================== */
.container        { max-width:1280px; margin:0 auto; padding:0 2rem; }
.section          { padding:100px 0; }
.section-dark     { background:var(--dark); }
.section-black    { background:var(--black); }

/* =================== BUTTONS =================== */
.btn {
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.68rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
  padding:0.9rem 2.2rem; border:none; cursor:pointer;
  transition:var(--transition); position:relative; overflow:hidden;
  text-decoration:none;
}
.btn-gold { background:var(--gold); color:var(--black); }
.btn-gold::before {
  content:''; position:absolute; inset:0;
  background:var(--gold-light); transform:translateX(-100%);
  transition:transform 0.4s ease;
}
.btn-gold:hover::before { transform:translateX(0); }
.btn-gold span { position:relative; z-index:1; }
.btn-outline {
  background:transparent; color:var(--gold);
  border:1px solid var(--border-strong);
}
.btn-outline:hover { background:var(--white-faint); border-color:var(--gold); }

/* =================== SECTION HEADERS =================== */
.section-header   { text-align:center; margin-bottom:4rem; }
.section-eyebrow  {
  font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center; gap:1rem;
}
.section-eyebrow::before, .section-eyebrow::after {
  content:''; display:block; width:30px; height:1px; background:var(--gold);
}
.section-title  { margin-bottom:1rem; }
.section-desc   { max-width:520px; margin:0 auto; font-size:0.875rem; }

/* =================== NAVBAR =================== */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 2.5rem; transition:var(--transition);
}
#navbar.scrolled {
  background:rgba(8,8,8,0.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:0.8rem; }
.nav-logo img { height:52px; width:52px; border-radius:50%; object-fit:cover; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.1; }
.nav-logo-text .brand-name { font-family:var(--ff-serif); font-size:1.15rem; color:var(--gold); letter-spacing:0.04em; }
.nav-logo-text .brand-sub  { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--white-dim); }
.nav-links { display:flex; align-items:center; gap:2.2rem; }
.nav-links a {
  font-size:0.68rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--white-dim); transition:color 0.2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px;
  background:var(--gold); transform:scaleX(0); transition:transform 0.3s;
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta   { display:flex; align-items:center; gap:1rem; }
.nav-phone { font-size:0.72rem; letter-spacing:0.08em; color:var(--gold); font-weight:500; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; height:1.5px; width:24px; background:var(--white); transition:var(--transition); }

/* Mobile nav */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:850;
  background:var(--black); flex-direction:column;
  align-items:center; justify-content:center; gap:2rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a    { font-family:var(--ff-serif); font-size:2rem; color:var(--white); transition:color 0.2s; }
.mobile-nav a:hover { color:var(--gold); }
.mobile-nav-close { position:absolute; top:1.5rem; right:2rem; background:none; border:none; color:var(--white); font-size:2rem; cursor:pointer; }

/* =================== HERO =================== */
#hero {
  min-height:100vh; background:var(--black);
  position:relative; display:flex; align-items:flex-end;
  padding-bottom:80px; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  filter:brightness(0.35);
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--black) 0%, transparent 60%),
             linear-gradient(to right, var(--black) 0%, transparent 55%);
}
.hero-lines {
  position:absolute; right:0; top:0; bottom:0; width:42%;
  background:repeating-linear-gradient(-10deg,transparent,transparent 2px,rgba(201,168,76,0.03) 2px,rgba(201,168,76,0.03) 4px);
  pointer-events:none;
}
.hero-content {
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; padding:0 2rem; width:100%;
  display:grid; grid-template-columns:1fr 420px; gap:4rem; align-items:end;
}
.hero-eyebrow {
  font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.hero-eyebrow::before { content:''; display:block; width:40px; height:1px; background:var(--gold); }
.hero-title    { margin-bottom:1.5rem; }
.hero-title em { font-style:italic; color:var(--gold); }
.hero-subtitle { font-size:0.875rem; color:var(--white-dim); margin-bottom:2.5rem; max-width:460px; line-height:1.8; }
.hero-actions  { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.hero-stats    { display:flex; gap:2.5rem; }
.stat-num      { font-family:var(--ff-serif); font-size:2rem; color:var(--gold); line-height:1; }
.stat-label    { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-dim); margin-top:0.25rem; }

/* =================== BOOKING CARD =================== */
.booking-card {
  background:var(--dark-2); border:1px solid var(--border);
  padding:2rem; position:relative; flex-shrink:0;
}
.booking-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}
.booking-card h3 { font-size:1.2rem; color:var(--gold); margin-bottom:1.5rem; text-align:center; letter-spacing:0.06em; }
.form-group   { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:0.4rem; font-weight:600; }
.form-control {
  width:100%; background:var(--dark-3); border:1px solid var(--border);
  color:var(--white); font-family:var(--ff-sans); font-size:0.82rem;
  padding:0.75rem 1rem; outline:none; transition:border-color 0.25s;
  -webkit-appearance:none; border-radius:0;
}
.form-control:focus { border-color:var(--gold); }
.form-control option { background:var(--dark-2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.airport-toggle { display:flex; align-items:center; gap:0.6rem; margin:0.5rem 0 1rem; cursor:pointer; }
.airport-toggle input { accent-color:var(--gold); cursor:pointer; }
.airport-toggle span  { font-size:0.72rem; color:var(--white-dim); }

/* Fare display */
.fare-display { background:rgba(201,168,76,0.06); border:1px solid var(--border); padding:1rem; margin:1rem 0; display:none; }
.fare-display.visible { display:block; }
.fare-row { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--white-dim); margin-bottom:0.4rem; }
.fare-row:last-child { margin-bottom:0; }
.fare-total { border-top:1px solid var(--border); padding-top:0.6rem; margin-top:0.6rem; font-size:1rem; color:var(--gold); font-family:var(--ff-serif); font-weight:600; }
.fare-amount { font-size:1.4rem; }
#calc-btn { width:100%; margin-bottom:0.75rem; justify-content:center; background:var(--dark-3); color:var(--gold); border:1px solid var(--border-strong); font-size:0.65rem; padding:0.8rem; }
#calc-btn:hover { background:var(--white-faint); }
#book-btn { width:100%; justify-content:center; font-size:0.65rem; padding:0.9rem; }

/* =================== FLEET =================== */
.fleet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; }
.fleet-card { background:var(--dark-2); overflow:hidden; position:relative; cursor:pointer; transition:transform 0.4s ease; }
.fleet-card:hover { transform:translateY(-4px); }
.fleet-img-wrap { height:240px; overflow:hidden; }
.fleet-img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; filter:brightness(0.8); }
.fleet-card:hover .fleet-img { transform:scale(1.05); filter:brightness(1); }
.fleet-info  { padding:1.5rem; }
.fleet-tag   { font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:0.5rem; }
.fleet-name  { font-family:var(--ff-serif); font-size:1.4rem; color:var(--white); margin-bottom:0.5rem; }
.fleet-meta  { display:flex; gap:1.5rem; margin-bottom:1rem; }
.fleet-meta-item { font-size:0.7rem; color:var(--white-dim); display:flex; align-items:center; gap:0.35rem; }
.fleet-price { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--border); padding-top:1rem; }
.fleet-price-base   { font-size:0.65rem; color:var(--white-dim); }
.fleet-price-amount { font-family:var(--ff-serif); font-size:1.3rem; color:var(--gold); }

/* =================== SERVICES =================== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
  background:var(--dark-2); border:1px solid var(--border);
  padding:2.5rem; position:relative; overflow:hidden;
  transition:border-color 0.3s;
}
.service-card:hover { border-color:var(--gold); }
.service-num   { font-family:var(--ff-serif); font-size:4rem; color:rgba(201,168,76,0.08); position:absolute; top:1rem; right:1.5rem; line-height:1; }
.service-icon  { font-size:2rem; margin-bottom:1.5rem; }
.service-title { font-family:var(--ff-serif); font-size:1.3rem; margin-bottom:0.75rem; }
.service-desc  { font-size:0.8rem; }

/* =================== WHY US =================== */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.why-card {
  text-align:center; padding:2.5rem 1.5rem;
  border:1px solid var(--border); position:relative;
  transition:border-color 0.3s;
}
.why-card:hover { border-color:var(--gold); }
.why-card::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--gold); transition:width 0.4s; }
.why-card:hover::after { width:100%; }
.why-icon  { font-size:2rem; margin-bottom:1.5rem; display:block; color:var(--gold); }
.why-title { font-family:var(--ff-serif); font-size:1.2rem; margin-bottom:0.75rem; }
.why-desc  { font-size:0.8rem; }

/* =================== ROUTES =================== */
.routes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.route-card  { background:var(--dark-2); padding:2rem; transition:background 0.3s; }
.route-card:hover { background:var(--dark-3); }
.route-from-to { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.route-city    { font-family:var(--ff-serif); font-size:1.1rem; }
.route-arrow   { color:var(--gold); font-size:1.2rem; }
.route-distance { font-size:0.7rem; color:var(--white-dim); margin-bottom:0.5rem; }
.route-fare     { font-family:var(--ff-serif); font-size:1.4rem; color:var(--gold); }
.route-fare-label { font-size:0.6rem; color:var(--white-dim); letter-spacing:0.1em; }

/* =================== TESTIMONIALS =================== */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card  { background:var(--dark-2); border:1px solid var(--border); padding:2rem; }
.testimonial-quote { font-family:var(--ff-serif); font-size:3rem; color:var(--gold); line-height:1; margin-bottom:1rem; opacity:0.5; }
.testimonial-text  { font-style:italic; font-family:var(--ff-serif); font-size:0.95rem; color:var(--white-dim); margin-bottom:1.5rem; line-height:1.7; }
.testimonial-author { display:flex; align-items:center; gap:0.75rem; }
.author-avatar { width:40px; height:40px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--ff-serif); font-size:1rem; color:var(--black); font-weight:700; }
.author-name   { font-size:0.8rem; color:var(--white); font-weight:500; }
.author-title  { font-size:0.65rem; color:var(--white-dim); }
.star-rating   { color:var(--gold); font-size:0.75rem; margin-bottom:1rem; }

/* =================== ABOUT =================== */
.about-strip { background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:5rem 0; }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-img-wrap { position:relative; }
.about-img { width:100%; height:480px; object-fit:cover; filter:brightness(0.85); }
.about-img-badge { position:absolute; bottom:-1.5rem; right:-1.5rem; background:var(--gold); color:var(--black); padding:1.5rem 2rem; text-align:center; }
.about-img-badge-num  { font-family:var(--ff-serif); font-size:2.5rem; font-weight:300; line-height:1; }
.about-img-badge-text { font-size:0.6rem; letter-spacing:0.12em; font-weight:600; }
.about-text .section-eyebrow { justify-content:flex-start; }
.about-text .section-eyebrow::after { display:none; }

/* =================== CTA =================== */
#cta { background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:3rem; }
.cta-phone-badge { display:flex; align-items:center; gap:1rem; background:rgba(201,168,76,0.08); border:1px solid var(--border); padding:1.2rem 2rem; }
.cta-phone-icon { font-size:2rem; }
.cta-phone-num  { font-family:var(--ff-serif); font-size:1.5rem; color:var(--gold); display:block; }
.cta-phone-label { font-size:0.6rem; letter-spacing:0.12em; color:var(--white-dim); }
.cta-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* =================== CONTACT =================== */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:start; }
.contact-info-item { display:flex; gap:1.5rem; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.contact-info-item:last-child { border-bottom:none; }
.contact-icon  { font-size:1.5rem; flex-shrink:0; }
.contact-label { font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:0.25rem; font-weight:600; }
.contact-value { font-size:0.9rem; color:var(--white); }
textarea.form-control { resize:vertical; }

/* =================== MODALS =================== */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.88); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:2rem;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--dark-2); border:1px solid var(--border);
  width:100%; max-width:480px; position:relative; padding:2.5rem;
  max-height:90vh; overflow-y:auto;
}
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark)); }
.modal-close   { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--white-dim); font-size:1.5rem; cursor:pointer; line-height:1; }
.modal-title   { font-family:var(--ff-serif); font-size:1.8rem; color:var(--gold); margin-bottom:0.5rem; }
.modal-subtitle { font-size:0.78rem; margin-bottom:2rem; }
.modal-tabs { display:flex; margin-bottom:2rem; border-bottom:1px solid var(--border); }
.modal-tab { padding:0.7rem 1.5rem; cursor:pointer; font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--white-dim); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.2s,border-color 0.2s; }
.modal-tab.active { color:var(--gold); border-color:var(--gold); }
.modal-panel { display:none; }
.modal-panel.active { display:block; }
.modal-error { background:rgba(220,38,38,0.1); border:1px solid rgba(220,38,38,0.3); color:#f87171; font-size:0.78rem; padding:0.75rem 1rem; margin-bottom:1rem; display:none; }
.modal-error.show { display:block; }

/* Confirmation */
.confirm-ref     { text-align:center; font-family:var(--ff-serif); font-size:2rem; color:var(--gold); margin-bottom:0.5rem; }
.confirm-details { background:var(--dark-3); border:1px solid var(--border); padding:1.2rem; margin:1.5rem 0; }
.confirm-row     { display:flex; justify-content:space-between; font-size:0.78rem; padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.confirm-row:last-child  { border-bottom:none; }
.confirm-row-label { color:var(--white-dim); }
.confirm-row-value { color:var(--white); font-weight:500; }

/* =================== DASHBOARD =================== */
#dashboard         { background:var(--dark); min-height:60vh; }
.dashboard-hidden  { display:none; }
.dashboard-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:3rem; }
.dashboard-welcome { font-family:var(--ff-serif); font-size:2rem; }
.bookings-table-wrap { overflow-x:auto; }
.bookings-table    { width:100%; border-collapse:collapse; font-size:0.78rem; }
.bookings-table th { background:var(--dark-3); text-align:left; padding:0.9rem 1rem; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); font-weight:600; border-bottom:1px solid var(--border); }
.bookings-table td { padding:0.9rem 1rem; border-bottom:1px solid rgba(255,255,255,0.05); color:var(--white-dim); }
.bookings-table tr:hover td { background:var(--dark-3); }
.status-badge   { display:inline-block; padding:0.25rem 0.7rem; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }
.status-pending   { background:rgba(234,179,8,0.12); color:#fbbf24; }
.status-confirmed { background:rgba(34,197,94,0.12); color:#4ade80; }
.status-completed { background:rgba(99,102,241,0.12); color:#a5b4fc; }
.status-cancelled { background:rgba(239,68,68,0.12); color:#f87171; }

/* =================== FOOTER =================== */
footer { background:var(--black); border-top:1px solid var(--border); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-col h4 { font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; font-family:var(--ff-sans); font-weight:600; }
.footer-links li { margin-bottom:0.6rem; }
.footer-links a  { color:var(--white-dim); font-size:0.8rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:0.7rem; }
.footer-legal a  { color:var(--white-dim); font-size:0.7rem; margin-left:1.5rem; transition:color 0.2s; }
.footer-legal a:hover { color:var(--gold); }

/* =================== FLOATS =================== */
#wa-float {
  position:fixed; bottom:2rem; right:2rem; z-index:800;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform 0.3s, box-shadow 0.3s; text-decoration:none;
}
#wa-float:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(37,211,102,0.5); }
.wa-tooltip { position:absolute; right:110%; top:50%; transform:translateY(-50%); background:var(--dark-2); color:var(--white); font-size:0.72rem; padding:0.4rem 0.8rem; white-space:nowrap; border:1px solid var(--border); pointer-events:none; opacity:0; transition:opacity 0.2s; }
#wa-float:hover .wa-tooltip { opacity:1; }

#scroll-top { position:fixed; bottom:6.5rem; right:2rem; z-index:800; width:44px; height:44px; background:var(--dark-2); border:1px solid var(--border); color:var(--gold); display:none; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; transition:background 0.2s; }
#scroll-top.show { display:flex; }
#scroll-top:hover { background:var(--dark-3); }

/* =================== LOADING =================== */
.loading-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(8,8,8,0.75); align-items:center; justify-content:center; }
.loading-overlay.show { display:flex; }
.spinner { width:48px; height:48px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* =================== REVEAL ANIMATIONS =================== */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* =================== WORDPRESS CORE CLASSES =================== */
.wp-block-image img { max-width:100%; height:auto; }
.aligncenter { display:block; margin:0 auto; }
.alignleft   { float:left; margin-right:1.5rem; }
.alignright  { float:right; margin-left:1.5rem; }
.wp-caption  { max-width:100%; }

/* =================== RESPONSIVE =================== */
@media (max-width:1024px) {
  .hero-content { grid-template-columns:1fr; }
  .booking-card { max-width:500px; }
  .footer-grid  { grid-template-columns:1fr 1fr; }
  .why-grid     { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-links, .nav-cta .btn { display:none; }
  .hamburger { display:flex; }
  .fleet-grid, .testimonials-grid, .services-grid { grid-template-columns:1fr; }
  .why-grid   { grid-template-columns:1fr; }
  .routes-grid { grid-template-columns:1fr; }
  .about-inner { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .cta-inner   { flex-direction:column; }
  .form-row    { grid-template-columns:1fr; }
  .hero-stats  { gap:1.5rem; }

  /* Calculator: hide full addresses on mobile so the fare amount is visible */
  .fare-route-summary { display:none; }
  .fare-total-amount  { font-size:2.2rem; }
  .fare-total-row     { padding-top:0.5rem !important; }
}

/* ============================================================
   BOOKING CARD — TWO-STEP FLOW (v2)
   ============================================================ */

/* Airport notice bar — always visible */
.airport-notice {
  background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.3);
  border-left: 3px solid var(--gold);
  padding: 0.65rem 0.9rem;
  font-size: 0.72rem;
  color: var(--gold);
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Step 1 calc button */
#calc-btn { margin-top: 0.25rem; }

/* Fare result header */
.fare-result-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.fare-result-header h3 { color: var(--gold); font-size: 1.1rem; }
.fare-back-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--white-dim);
  font-size: 0.68rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-family: var(--ff-sans);
  letter-spacing: 0.06em;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.fare-back-btn:hover { color: var(--gold); border-color: var(--gold); }

/* Route summary */
.fare-route-summary {
  background: rgba(201,168,76,0.06);
  border: 1px solid var(--border);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.fare-route-from, .fare-route-to {
  font-size: 0.78rem;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fare-route-arrow {
  color: var(--gold);
  font-size: 0.8rem;
  margin: 0.2rem 0;
  opacity: 0.6;
}

/* Fare breakdown */
.fare-breakdown {
  background: var(--dark-3);
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 1rem;
}
.fare-breakdown .fare-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--white-dim);
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fare-breakdown .fare-row:last-child { border-bottom: none; }
.fare-meta {
  font-size: 0.68rem !important;
  opacity: 0.7;
  font-style: italic;
}
.fare-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border-strong) !important;
  padding-top: 0.6rem !important;
  margin-top: 0.4rem;
}
.fare-total-amount {
  font-family: var(--ff-serif);
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
}
.fare-total-row > span:first-child {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

/* Vehicle badge */
.fare-vehicle-badge {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 0.4rem;
  border: 1px dashed var(--border);
}

/* Step transition */
#step-calculate, #step-result {
  transition: opacity 0.3s ease;
}

/* Booking card date/time row in modal */
.booking-datetime-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ============================================================
   CUSTOM LOGO (Customizer support)
   ============================================================ */
.nav-logo .custom-logo-link,
.footer-brand .custom-logo-link { display:inline-flex; align-items:center; }
.nav-logo .custom-logo,
.footer-brand .custom-logo {
  height:44px; width:auto; max-width:160px;
  object-fit:contain; border-radius:4px;
}
/* Yoco payment note */
#yoco-payment-note { transition: opacity .2s; }

/* ============================================================
   SOCIAL LOGIN (Nextend Social Login)
   ============================================================ */
.esc-social-login {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* Nextend renders <a> buttons — style them to match the theme */
.esc-social-login a,
.esc-social-login .nsl-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  padding: 0.7rem 1rem !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.15s !important;
  border: none !important;
  cursor: pointer !important;
}
.esc-social-login a:hover,
.esc-social-login .nsl-button:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

/* Google button */
.esc-social-login .nsl-button-google,
.esc-social-login a[data-provider="google"] {
  background: #fff !important;
  color: #3c4043 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}
/* Facebook button */
.esc-social-login .nsl-button-facebook,
.esc-social-login a[data-provider="facebook"] {
  background: #1877f2 !important;
  color: #fff !important;
}

/* Divider */
.esc-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
  color: var(--white-dim);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.esc-divider::before,
.esc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}