/* =========================================================================
   css/vip-theme.css — VIP Template look & feel (overrides only)

   Goal
   - Re-skin the existing PHP/Bootstrap UI to match the provided VIP template
     style language (slate + amber accents, rounded cards, soft shadows).
   - Keep ALL existing behaviors / JS / form field names intact.
   - Avoid invasive layout rewrites: mostly color/typography/spacing overrides.
   ========================================================================= */

:root{
  /* Palette (inspired by the VIP template: slate + amber) */
  --vip-slate-950:#020617;
  --vip-slate-900:#0f172a;
  --vip-slate-800:#1e293b;
  --vip-slate-700:#334155;
  --vip-slate-100:#f1f5f9;
  --vip-slate-50:#f8fafc;
  --vip-amber-600:#d97706;
  --vip-amber-500:#f59e0b;
  --vip-amber-400:#fbbf24;

  --vip-text:#0f172a;
  --vip-muted:rgba(15,23,42,.65);
  --vip-card-bg:rgba(255,255,255,.94);
  --vip-card-border:rgba(15,23,42,.10);
  --vip-shadow:0 18px 60px rgba(2,6,23,.14);
  --vip-shadow-soft:0 10px 30px rgba(2,6,23,.10);
  --vip-radius:24px;
}

/* Base typography (non-breaking fallbacks) */
html, body{
  font-family: Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Light premium canvas (keeps existing light-content readability) */
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(245,158,11,.12), rgba(245,158,11,0) 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(2,6,23,.10), rgba(2,6,23,0) 55%),
    linear-gradient(180deg, var(--vip-slate-50), #ffffff 40%, var(--vip-slate-50));
  color: var(--vip-text);
}

/* Headings: premium serif touch (matches template vibe) */
h1, h2, h3{
  font-family: "Playfair Display", Inter, Roboto, serif;
  letter-spacing: -0.02em;
}

/* Links */
a{ color: inherit; }
a:hover, a:focus{ text-decoration: none; }

/* =============================
   Top Bar + Navbar (slate glass)
   ============================= */
.top-bar{
  background: rgba(2,6,23,.96);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-bar .left-info i{ color: var(--vip-amber-500); }
.top-bar .left-info span,
.top-bar .right-info span{ color: rgba(255,255,255,.86); }

.main-nav{
  background: rgba(2,6,23,.90) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Logo container: subtle amber halo */
.ta-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ta-logo{
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(245,158,11,.18);
}

/* Nav links */
.main-nav .nav > li > a{
  color: rgba(255,255,255,.78) !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none; /* keep readable */
  border-radius: 999px;
  padding: 10px 14px;
}
.main-nav .nav > li > a:hover,
.main-nav .nav > li > a:focus{
  color: var(--vip-amber-400) !important;
  background: rgba(255,255,255,.06) !important;
}
.main-nav .nav > li.active > a,
.main-nav .nav > li.active > a:hover{
  color: var(--vip-slate-900) !important;
  background: linear-gradient(180deg, var(--vip-amber-400), var(--vip-amber-500)) !important;
  box-shadow: 0 12px 30px rgba(245,158,11,.20);
}

/* Hamburger icon visibility on dark navbar */
.main-nav .navbar-toggle .icon-bar{ background-color: rgba(255,255,255,.88) !important; }

/* =============================
   Buttons (amber primary)
   ============================= */
.btn,
.btn-search,
.btn-login,
.btn-subscribe{
  border-radius: 999px !important;
  font-weight: 800;
  letter-spacing: .01em;
}

.btn-primary,
.btn-login,
.btn-search,
.btn-subscribe{
  background: linear-gradient(180deg, var(--vip-amber-400), var(--vip-amber-500)) !important;
  border-color: transparent !important;
  color: var(--vip-slate-900) !important;
  box-shadow: 0 14px 34px rgba(245,158,11,.20);
}

.btn-primary:hover,
.btn-login:hover,
.btn-search:hover,
.btn-subscribe:hover{
  background: linear-gradient(180deg, var(--vip-amber-500), var(--vip-amber-600)) !important;
  color: var(--vip-slate-900) !important;
}

.btn-primary:active,
.btn-login:active,
.btn-search:active,
.btn-subscribe:active{
  transform: translateY(1px);
}

/* Search-card toggle buttons */
.toggle-group .btn-toggle{
  border-radius: 16px;
  font-weight: 900;
}
.toggle-group .btn-toggle.active{
  background: rgba(2,6,23,.92) !important;
  color: var(--vip-amber-500) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.toggle-group .btn-toggle.inactive{
  background: rgba(255,255,255,.70) !important;
  color: rgba(2,6,23,.82) !important;
  border-color: rgba(2,6,23,.10) !important;
}

/* =============================
   Cards / Panels
   ============================= */
.search-card{
  background: var(--vip-card-bg) !important;
  border: 1px solid var(--vip-card-border) !important;
  border-radius: calc(var(--vip-radius) + 6px) !important;
  box-shadow: var(--vip-shadow) !important;
}

/* Bootstrap thumbnails as VIP cards */
.thumbnail{
  border-radius: var(--vip-radius) !important;
  border: 1px solid var(--vip-card-border) !important;
  box-shadow: var(--vip-shadow-soft) !important;
  overflow: hidden;
}
.thumbnail .caption{
  padding: 18px 18px 16px;
}

/* Treasure cards: keep layout, just upgrade surface */
.thumbnail.treasure-card{
  border-radius: var(--vip-radius) !important;
  box-shadow: var(--vip-shadow) !important;
}

/* Generic “box” surfaces used across pages */
.booking-summary,
.customer-form,
.vehicle-card,
.price-info,
.price-card,
.panel,
.well,
.alert{
  border-radius: var(--vip-radius) !important;
}

/* Give common containers a consistent premium surface (keeps page-level overrides) */
.booking-summary,
.customer-form,
.vehicle-card,
.price-info,
.price-card,
.panel,
.well{
  background: var(--vip-card-bg);
  border: 1px solid var(--vip-card-border);
  box-shadow: var(--vip-shadow-soft);
}

/* =============================
   Form fields
   ============================= */
.form-control{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(241,245,249,.85);
  box-shadow: none;
}
.form-control:focus{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}

/* Inputs inside search-card: match VIP quick-booking */
.search-card .form-control{
  background: rgba(241,245,249,.95);
  font-weight: 800;
  color: rgba(2,6,23,.92);
}
.search-card .form-control::placeholder{
  color: rgba(2,6,23,.34);
  font-weight: 700;
}

/* =============================
   Hero overlay polish
   ============================= */
.hero-overlay{
  background: linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.34) 45%, rgba(2,6,23,.10) 80%, rgba(248,250,252,0));
}
.hero h1{
  color: #fff;
  text-shadow: 0 14px 40px rgba(2,6,23,.40);
}
.hero .hero-subtitle{
  color: rgba(255,255,255,.74);
}

/* =============================
   Footer (dark slate, amber headers)
   ============================= */
.footer{
  background: var(--vip-slate-950) !important;
  color: rgba(255,255,255,.70) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer h5,
.footer h4,
.footer h3{
  color: var(--vip-amber-500) !important;
  font-weight: 900;
}
.footer a{
  color: rgba(255,255,255,.62) !important;
}
.footer a:hover{
  color: rgba(255,255,255,.92) !important;
}
.footer .newsletter-input{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  color: #fff;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.footer .newsletter-input::placeholder{ color: rgba(255,255,255,.40); }

/* =============================
   Small responsiveness alignment
   ============================= */
@media (max-width: 768px){
  .main-nav{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .main-nav .nav > li > a{ padding: 10px 14px; }
}

/* ============================================================
   Mobile drawer (hamburger menu) visibility fix
   ------------------------------------------------------------
   navbar.css sets the collapsed panel background to near-white.
   VIP theme uses light text for navbar links; on a white drawer
   this made menu items appear "invisible" on mobile.
   We keep the existing JS/collapse behavior, only restyle.
   ============================================================ */

@media (max-width: 991px){
  /* Drawer surface */
  #main-navbar-collapse{
    background: rgba(2,6,23,.96) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Items */
  ul.navbar-nav.navbar-right > li{
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  ul.navbar-nav.navbar-right > li > a{
    color: rgba(255,255,255,.86) !important;
  }

  ul.navbar-nav.navbar-right > li > a:hover,
  ul.navbar-nav.navbar-right > li > a:focus{
    background: rgba(255,255,255,.06) !important;
    color: var(--vip-amber-400) !important;
  }

  ul.navbar-nav.navbar-right > li.active > a,
  ul.navbar-nav.navbar-right > li.active > a:hover,
  ul.navbar-nav.navbar-right > li.active > a:focus{
    background: linear-gradient(180deg, var(--vip-amber-400), var(--vip-amber-500)) !important;
    color: var(--vip-slate-900) !important;
    box-shadow: 0 14px 34px rgba(245,158,11,.20);
  }

  /* Language flags row in drawer */
  .navbar-nav > li.lang-switch-mobile.flags{
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: none !important;
  }

  li.lang-switch-mobile.flags a{
    background: rgba(255,255,255,.04);
    opacity: .92;
  }

  li.lang-switch-mobile.flags a.active-flag{
    background: rgba(245,158,11,.18) !important;
  }
}