/* ============================================================
   STAYLUXE — Hotel Booking Portal | Global Stylesheet
   Frontend UI only · Bootstrap 5 based
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('../vendor/fonts/public-fonts.css');

/* ---------- Design Tokens ---------- */
:root {
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --primary: #6d28d9;
  --primary-2: #9333ea;
  --accent: #f59e0b;
  --accent-2: #fb7185;
  --teal: #14b8a6;
  --ink: #1e1b4b;

  --grad-primary: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #c026d3 100%);
  --grad-sunset: linear-gradient(135deg, #f59e0b 0%, #fb7185 100%);
  --grad-ocean: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  --grad-royal: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%);
  --grad-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);

  --bg-body: #f6f5fb;
  --bg-card: #ffffff;
  --bg-soft: #f1effa;
  --text-main: #1e1b4b;
  --text-muted: #6b7280;
  --border-soft: rgba(109, 40, 217, .12);

  --shadow-sm: 0 4px 14px rgba(30, 27, 75, .07);
  --shadow-md: 0 10px 34px rgba(30, 27, 75, .12);
  --shadow-lg: 0 24px 60px rgba(30, 27, 75, .18);
  --shadow-glow: 0 8px 30px rgba(147, 51, 234, .35);

  --radius: 1.1rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.2rem;
}

/* Dark mode tokens */
[data-bs-theme="dark"] {
  --bg-body: #0f0d1f;
  --bg-card: #191632;
  --bg-soft: #201c3d;
  --text-main: #eceafe;
  --text-muted: #a5a1c9;
  --border-soft: rgba(147, 51, 234, .25);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-main);
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}

h1, h2, h3, h4, h5, .font-heading { font-family: var(--font-heading); color: var(--text-main); }

/* Card titles are h6, so they sit outside the rule above — keep them on the heading font.
   (font-family only: colour is handled per-card, e.g. .deal-card .h-name a) */
.h-name { font-family: var(--font-heading); }

a { text-decoration: none; transition: all .3s ease; }

::selection { background: var(--primary); color: #fff; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--primary-2)); border-radius: 20px; }

section { position: relative; }

.section-pad { padding: 64px 0; }
.section-pad-sm { padding: 42px 0; }

/* Section headings */
.sec-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-soft); color: var(--primary);
  border: 1px solid var(--border-soft);
  padding: .45rem 1.2rem; border-radius: 50px;
  font-size: .8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
}
[data-bs-theme="dark"] .sec-badge { color: #c4b5fd; }

.sec-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 700; margin: 1rem 0 .6rem; }
.sec-title .grad-text, .grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec-sub { color: var(--text-muted); max-width: 620px; }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--grad-royal);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.loader-icon {
  width: 84px; height: 84px; border-radius: 26px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  display: grid; place-items: center; font-size: 2.2rem; color: #fbbf24;
  animation: loaderFloat 1.6s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,.15);
}
@keyframes loaderFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.loader-bar { width: 190px; height: 4px; background: rgba(255,255,255,.15); border-radius: 10px; margin-top: 26px; overflow: hidden; }
.loader-bar::after { content: ''; display: block; height: 100%; width: 40%; background: var(--grad-gold); border-radius: 10px; animation: loadBar 1.2s ease-in-out infinite; }
@keyframes loadBar { 0% { margin-left: -40% } 100% { margin-left: 100% } }
.loader-text { color: #fff; margin-top: 16px; letter-spacing: 6px; font-size: .78rem; font-weight: 600; opacity: .85; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  background: var(--grad-royal);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
  padding: .5rem 0;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: #fbbf24; }
.topbar .divider { opacity: .3; margin: 0 .75rem; }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.main-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-soft);
  transition: all .4s ease;
}
[data-bs-theme="dark"] .main-header { background: rgba(15,13,31,.8); }
.main-header.scrolled { box-shadow: var(--shadow-md); }

.brand-logo { display: flex; align-items: center; gap: .65rem; }
.brand-logo .logo-mark {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad-primary);
  display: grid; place-items: center; color: #fff; font-size: 1.3rem;
  box-shadow: var(--shadow-glow);
}
.brand-logo .logo-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.45rem; color: var(--text-main); line-height: 1; }
.brand-logo .logo-tag { font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }

.nav-links .nav-link {
  color: var(--text-main); font-weight: 600; font-size: .88rem;
  padding: .5rem .5rem !important; border-radius: 10px; position: relative;
  white-space: nowrap;
}
.nav-links { flex-wrap: nowrap; }
.nav-links .nav-item { flex: 0 0 auto; }
/* tighten header actions so nothing overflows (Agent Login stays inside) */
.main-header .hdr-call, .main-header .hdr-login,
.main-header .d-lg-flex .btn-sm, .main-header .d-xl-flex .btn-sm { white-space: nowrap; }
.main-header .navbar > .container > .d-none.align-items-center { gap: .35rem !important; }
.main-header .d-lg-flex .btn-sm, .main-header .d-xl-flex .btn-sm { padding: .45rem .7rem; font-size: .82rem; }
.main-header .hdr-call { padding: .45rem .75rem; font-size: .82rem; line-height: 1.5; }
.nav-links .nav-link:hover, .nav-links .nav-link.active { color: var(--primary); background: var(--bg-soft); }
[data-bs-theme="dark"] .nav-links .nav-link:hover { color: #c4b5fd; }

/* Header icon buttons */
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-grid; place-items: center;
  background: var(--bg-soft); color: var(--text-main);
  border: 1px solid var(--border-soft);
  position: relative; font-size: 1.05rem;
  transition: all .3s ease;
}
.icon-btn:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.icon-btn .badge-dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--grad-sunset); color: #fff;
  font-size: .62rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px;
  border: 2px solid var(--bg-card);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-grad {
  background: var(--grad-primary); color: #fff; border: none;
  padding: .78rem 1.8rem; border-radius: 50px; font-weight: 700; font-size: .92rem;
  position: relative; overflow: hidden; z-index: 1;
  box-shadow: var(--shadow-glow);
  transition: all .35s ease;
}
.btn-grad:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 38px rgba(147,51,234,.5); }
.btn-grad.btn-sunset { background: var(--grad-sunset); box-shadow: 0 8px 30px rgba(251,113,133,.35); }
.btn-grad.btn-sunset:hover { box-shadow: 0 14px 38px rgba(251,113,133,.5); }
.btn-grad.btn-ocean { background: var(--grad-ocean); box-shadow: 0 8px 30px rgba(20,184,166,.35); }

.btn-outline-soft {
  border: 2px solid var(--border-soft); color: var(--text-main);
  padding: .7rem 1.7rem; border-radius: 50px; font-weight: 700; font-size: .92rem;
  background: transparent; transition: all .35s ease;
}
.btn-outline-soft:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.45);
  transform: scale(0); animation: rippleAnim .65s ease-out; pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-swiper { height: min(88vh, 780px); min-height: 620px; }
.hero-slide {
  position: relative; height: 100%; display: flex; align-items: center;
  background-size: cover; background-position: center;
}
.hero-slide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,15,60,.86) 0%, rgba(60,20,110,.62) 45%, rgba(20,15,60,.25) 100%);
}
/* gradient scenes used until real banner images are added */
.hero-bg-1 { background-image: url('../images/banner/banner-1.jpg'), linear-gradient(135deg,#312e81,#6d28d9 45%,#db2777); }
.hero-bg-2 { background-image: url('../images/banner/banner-2.jpg'), linear-gradient(135deg,#0c4a6e,#0ea5e9 50%,#14b8a6); }
.hero-bg-3 { background-image: url('../images/banner/banner-3.jpg'), linear-gradient(135deg,#7c2d12,#f59e0b 55%,#fb7185); }

.hero-content { position: relative; z-index: 2; color: #fff; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px); border-radius: 50px;
  padding: .5rem 1.3rem; font-size: .8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.hero-title { font-size: clamp(2.3rem, 5.5vw, 4.3rem); font-weight: 800; line-height: 1.12; margin: 1.2rem 0 1rem; color:#fff; }
.hero-title em { font-style: italic; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { font-size: 1.06rem; color: rgba(255,255,255,.85); max-width: 560px; }

.hero-stats { display: flex; gap: 2.2rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-stat b { font-size: 1.5rem; font-family: var(--font-heading); }
.hero-stat span { display: block; font-size: .8rem; color: rgba(255,255,255,.7); }

/* floating shapes */
.float-shape { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; z-index: 1; animation: floatShape 7s ease-in-out infinite; pointer-events: none; }
@keyframes floatShape { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-26px) rotate(10deg) } }

/* Hero swiper pagination */
.hero-swiper .swiper-pagination-bullet { width: 34px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.4); opacity: 1; transition: all .3s; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--grad-gold); width: 52px; }

/* ============================================================
   SEARCH BOX (glass)
   ============================================================ */
.search-wrap { position: relative; z-index: 5; margin-top: -84px; }
.search-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 1.7rem;
}
[data-bs-theme="dark"] .search-card { background: rgba(25,22,50,.85); border-color: var(--border-soft); }

.search-field { position: relative; }
.search-field label { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; display:flex; align-items:center; gap:.4rem; }
.search-field label i { color: var(--primary); }
.search-field .form-control, .search-field .form-select {
  border: 2px solid var(--border-soft); border-radius: 14px;
  padding: .8rem 1rem; font-weight: 600; background: var(--bg-card); color: var(--text-main);
  transition: all .3s ease;
}
.search-field .form-control:focus, .search-field .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(109,40,217,.12);
}
.btn-search {
  background: var(--grad-sunset); color: #fff; border: none; width: 100%;
  border-radius: 14px; padding: .95rem; font-weight: 800; font-size: 1rem;
  box-shadow: 0 10px 26px rgba(251,113,133,.4); transition: all .35s ease;
}
.btn-search:hover { transform: translateY(-3px) scale(1.01); color: #fff; box-shadow: 0 16px 36px rgba(251,113,133,.55); }

.quick-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.quick-tags .tag {
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 50px; padding: .35rem 1rem;
}
.quick-tags .tag:hover { background: var(--grad-primary); color: #fff; }

/* ============================================================
   CARDS — generic
   ============================================================ */
.lux-card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft);
  overflow: hidden; transition: transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .45s ease;
}
.lux-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }

.card-img-zoom { overflow: hidden; position: relative; }
.card-img-zoom img, .card-img-zoom .ph-img { transition: transform .8s ease; }
.lux-card:hover .card-img-zoom img, .lux-card:hover .card-img-zoom .ph-img { transform: scale(1.1); }

/* placeholder image block (gradient fallback behind real <img>) */
.ph-img { width: 100%; display: block; object-fit: cover; background: var(--grad-primary); }
.ph-h-230 { height: 230px; } .ph-h-260 { height: 260px; } .ph-h-300 { height: 300px; } .ph-h-200 { height: 200px; } .ph-h-170 { height: 170px; }

/* Ribbon + badges */
.ribbon {
  position: absolute; top: 18px; left: -8px; z-index: 3;
  background: var(--grad-sunset); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: 1px;
  padding: .4rem 1.1rem .4rem .9rem; border-radius: 0 50px 50px 0;
  box-shadow: 0 6px 16px rgba(251,113,133,.45);
}
.ribbon::after { content:''; position: absolute; left: 0; bottom: -7px; border: 4px solid transparent; border-right-color: #be3455; border-top-color: #be3455; }
.badge-soft {
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: .72rem; font-weight: 700; border-radius: 50px; padding: .38rem .85rem;
  backdrop-filter: blur(6px);
}
.badge-rating {
  background: var(--grad-ocean); color: #fff; font-weight: 800;
  border-radius: 12px 12px 12px 2px; padding: .45rem .7rem; font-size: .88rem;
  box-shadow: 0 6px 16px rgba(20,184,166,.4);
}
.wish-btn {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; color: #64607f;
  display: grid; place-items: center; font-size: 1.05rem;
  transition: all .3s ease; backdrop-filter: blur(6px);
}
.wish-btn:hover, .wish-btn.active { background: var(--grad-sunset); color: #fff; transform: scale(1.12); }

/* Hotel card body */
.hotel-card .loc { font-size: .82rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; }
.hotel-card .loc i { color: var(--accent-2); }
.hotel-card .h-name { font-size: 1.18rem; font-weight: 700; margin: .35rem 0; }
.hotel-card .h-name a { color: var(--text-main); }
.hotel-card .h-name a:hover { color: var(--primary); }
.stars { color: #fbbf24; font-size: .82rem; letter-spacing: 1.5px; }
.amen-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.amen-chips span {
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-soft); border-radius: 50px; padding: .3rem .75rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.amen-chips span i { color: var(--teal); }
.price-old { font-size: .85rem; color: var(--text-muted); text-decoration: line-through; }
.price-now { font-size: 1.45rem; font-weight: 800; font-family: var(--font-heading); color: var(--text-main); font-feature-settings: 'tnum' 1; letter-spacing: -.01em; }
.price-now small { font-size: .75rem; color: var(--text-muted); font-family: var(--font-body); font-weight: 500; }
.tax-note { font-size: .7rem; color: var(--text-muted); }

/* ============================================================
   DESTINATIONS / CITIES
   ============================================================ */
.city-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  height: 100%; display: block; box-shadow: var(--shadow-sm);
  transition: transform .45s ease, box-shadow .45s ease;
}
.city-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-lg); }
.city-card .ph-img { height: 100%; position: absolute; inset: 0; }
.city-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15,10,45,.88) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem; color: #fff; z-index: 2;
}
.city-card h5 { color: #fff; font-weight: 700; margin: 0; }
.city-card p { color: rgba(255,255,255,.75); font-size: .8rem; margin: 0; }
.city-card .go {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px); border-radius: 50%; display: grid; place-items: center;
  color: #fff; transform: rotate(-45deg); transition: all .35s ease; z-index: 2;
}
.city-card:hover .go { background: var(--grad-sunset); transform: rotate(0); }
.city-h-lg { height: 420px; } .city-h-sm { height: 198px; } .city-h-md { height: 240px; }

/* Category pills */
.cat-pill {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 1.6rem 1rem; height: 100%;
  box-shadow: var(--shadow-sm); transition: all .4s ease; color: var(--text-main);
}
.cat-pill .cat-ic {
  width: 62px; height: 62px; border-radius: 20px; font-size: 1.6rem;
  display: grid; place-items: center; color: #fff; transition: all .4s ease;
}
.cat-pill:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--primary); color: var(--primary); }
.cat-pill:hover .cat-ic { transform: rotate(-8deg) scale(1.08); }
.cat-pill b { font-size: .92rem; }
.cat-pill span { font-size: .74rem; color: var(--text-muted); }

/* ============================================================
   FLASH DEALS
   ============================================================ */
.deals-section { background: var(--grad-royal); overflow: hidden; }
.deals-section .sec-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fbbf24; }
.deals-section .sec-title, .deals-section .sec-sub { color: #fff; }
.deals-section .sec-sub { color: rgba(255,255,255,.7); }

.countdown { display: flex; gap: .7rem; }
.countdown .cd-box {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); border-radius: 14px; min-width: 68px;
  padding: .6rem .5rem; text-align: center; color: #fff;
}
.countdown .cd-box b { font-size: 1.4rem; font-family: var(--font-heading); display: block; }
.countdown .cd-box span { font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }

.deal-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); }
.deal-card:hover { border-color: rgba(251,191,36,.5); }
.deal-card .h-name a, .deal-card .price-now { color: #fff; }
.deal-card .loc, .deal-card .tax-note, .deal-card .price-old, .deal-card .price-now small { color: rgba(255,255,255,.65); }
.deal-card .amen-chips span { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.deal-progress { height: 7px; background: rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; }
.deal-progress .bar { height: 100%; background: var(--grad-gold); border-radius: 10px; }
.deal-left { font-size: .72rem; color: #fbbf24; font-weight: 700; }

/* Offer / promo banners */
.promo-tile {
  border-radius: var(--radius-lg); padding: 2rem; color: #fff; position: relative; overflow: hidden;
  min-height: 210px; display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-md); transition: transform .4s ease;
}
.promo-tile:hover { transform: translateY(-6px); }
.promo-tile h4 { color: #fff; font-weight: 700; }
.promo-tile p { color: rgba(255,255,255,.85); font-size: .88rem; }
.promo-tile .promo-ic { position: absolute; right: -18px; bottom: -18px; font-size: 7.5rem; opacity: .16; transform: rotate(-12deg); }
.promo-code {
  display: inline-block; border: 2px dashed rgba(255,255,255,.6); border-radius: 10px;
  padding: .3rem 1rem; font-weight: 800; letter-spacing: 2px; background: rgba(255,255,255,.12); color:#fff;
}

/* ============================================================
   WHY CHOOSE US / FEATURES
   ============================================================ */
.feature-box {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 2rem 1.6rem; height: 100%; text-align: center;
  box-shadow: var(--shadow-sm); transition: all .4s ease; position: relative; overflow: hidden;
}
.feature-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-primary); transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.feature-box:hover::before { transform: scaleX(1); }
.feature-box:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.feature-box .f-ic {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  font-size: 1.6rem; color: #fff; margin: 0 auto 1.2rem; box-shadow: var(--shadow-glow);
}
.feature-box h5 { font-weight: 700; font-size: 1.1rem; }
.feature-box p { color: var(--text-muted); font-size: .88rem; margin: 0; }

/* ============================================================
   STATS COUNTER
   ============================================================ */
.stats-band { background: var(--grad-primary); border-radius: var(--radius-xl); padding: 3rem 2rem; box-shadow: var(--shadow-glow); position: relative; overflow: hidden; }
.stats-band::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.08); top: -140px; right: -80px; }
.stats-band::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.07); bottom: -110px; left: -60px; }
.stat-item { text-align: center; color: #fff; position: relative; z-index: 1; }
.stat-item .s-ic { font-size: 2.6rem; opacity: .92; margin-bottom: .55rem; }
.stat-item .num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; font-family: var(--font-heading); }
.stat-item p { margin: 0; font-size: .85rem; opacity: .85; letter-spacing: 1px; text-transform: uppercase; }

/* ============================================================
   BOOKING STEPS
   ============================================================ */
.step-card { text-align: center; position: relative; padding: 1rem; }
.step-card .step-ic {
  width: 92px; height: 92px; margin: 0 auto 1.3rem; border-radius: 30px;
  display: grid; place-items: center; font-size: 2rem; color: #fff;
  position: relative; box-shadow: var(--shadow-md); transition: transform .4s ease;
}
.step-card:hover .step-ic { transform: translateY(-8px) rotate(-5deg); }
.step-card .step-num {
  position: absolute; top: -10px; right: -10px; width: 32px; height: 32px;
  background: var(--bg-card); color: var(--primary); border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 800;
  box-shadow: var(--shadow-sm); border: 2px solid var(--border-soft);
}
.step-card h5 { font-weight: 800; font-size: 1.05rem; color: var(--primary); }
.step-card p { color: var(--text-muted); font-size: .86rem; }
.step-connector { position: absolute; top: 46px; left: calc(50% + 60px); width: calc(100% - 120px); border-top: 2px dashed var(--border-soft); }
@media (max-width: 991px) { .step-connector { display: none; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 2rem; height: 100%;
  box-shadow: var(--shadow-sm); position: relative;
}
.testi-card .quote-ic { position: absolute; top: 1.4rem; right: 1.8rem; font-size: 3rem; color: var(--primary); opacity: .12; }
.testi-card .t-text { color: var(--text-muted); font-size: .95rem; line-height: 1.75; }
.testi-user { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.testi-user .avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg-soft); box-shadow: var(--shadow-sm); }
.testi-user .avatar .ph-img { height: 100%; }
.testi-user b { display: block; font-size: .95rem; }
.testi-user span { font-size: .78rem; color: var(--text-muted); }

/* ============================================================
   BLOG
   ============================================================ */
.blog-card .b-meta { display: flex; gap: 1rem; font-size: .76rem; color: var(--text-muted); margin-bottom: .5rem; }
.blog-card .b-meta i { color: var(--accent-2); margin-right: .25rem; }
.blog-card h5 a { color: var(--text-main); font-weight: 700; }
.blog-card h5 a:hover { color: var(--primary); }
.blog-card .b-cat {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  background: var(--grad-primary); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .32rem .9rem; border-radius: 50px;
}
.read-more { font-size: .85rem; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; }
.read-more:hover { gap: .7rem; color: var(--primary-2); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; display: block; box-shadow: var(--shadow-sm); }
.gallery-item .g-overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(109,40,217,.1), rgba(109,40,217,.75));
  opacity: 0; transition: opacity .4s ease; display: grid; place-items: center; color: #fff; font-size: 1.6rem; z-index: 2;
}
.gallery-item:hover .g-overlay { opacity: 1; }
.gallery-item .ph-img { transition: transform .7s ease; }
.gallery-item:hover .ph-img { transform: scale(1.12); }

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-banner {
  border-radius: var(--radius-xl); overflow: hidden; position: relative;
  min-height: 420px; display: grid; place-items: center;
  background: var(--grad-royal) center/cover;
  box-shadow: var(--shadow-lg);
}
.video-banner::before { content:''; position: absolute; inset: 0; background: rgba(20,14,60,.55); }
.play-btn {
  width: 92px; height: 92px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.95); color: var(--primary); font-size: 1.7rem;
  display: grid; place-items: center; position: relative; z-index: 2;
  transition: all .35s ease;
}
.play-btn::before, .play-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); animation: pulseRing 2.2s ease-out infinite;
}
.play-btn::after { animation-delay: 1.1s; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: 1 } 100% { transform: scale(1.9); opacity: 0 } }
.play-btn:hover { transform: scale(1.1); background: var(--grad-sunset); color: #fff; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-acc .accordion-item {
  background: var(--bg-card); border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important; margin-bottom: 1rem; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq-acc .accordion-button {
  background: var(--bg-card); color: var(--text-main); font-weight: 700; font-size: .98rem;
  padding: 1.2rem 1.5rem; box-shadow: none !important;
}
.faq-acc .accordion-button:not(.collapsed) { background: var(--grad-primary); color: #fff; }
.faq-acc .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.faq-acc .accordion-body { color: var(--text-muted); font-size: .92rem; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-band {
  background: var(--grad-ocean); border-radius: var(--radius-xl);
  padding: 3.2rem 2.4rem; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 20px 50px rgba(14,165,233,.35);
}
.newsletter-band h3 { color: #fff; font-weight: 700; }
.newsletter-band .plane { position: absolute; right: 4%; top: 12%; font-size: 6rem; opacity: .16; transform: rotate(-16deg); }
.newsletter-form { display: flex; background: rgba(255,255,255,.96); border-radius: 50px; padding: .4rem; box-shadow: var(--shadow-md); }
.newsletter-form input { border: none; outline: none; background: transparent; flex: 1; padding: .6rem 1.3rem; font-weight: 600; color: #1e1b4b; min-width: 0; }
.newsletter-form .btn-grad { white-space: nowrap; }

/* ============================================================
   APP PROMO
   ============================================================ */
.app-band { background: var(--grad-royal); border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.app-band .app-text { padding: 3.4rem; color: #fff; }
.app-band h3 { color: #fff; font-weight: 700; }
.app-band p { color: rgba(255,255,255,.75); }
.store-btn {
  display: inline-flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px; padding: .7rem 1.3rem; color: #fff; backdrop-filter: blur(8px);
  transition: all .35s ease;
}
.store-btn i { font-size: 1.7rem; }
.store-btn small { display: block; font-size: .64rem; opacity: .7; }
.store-btn b { font-size: .95rem; }
.store-btn:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-4px); }
.phone-mock {
  width: 250px; height: 500px; border-radius: 38px; margin: 3rem auto -80px;
  background: var(--grad-primary); border: 8px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.phone-mock::before { content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:90px; height:20px; background:rgba(0,0,0,.35); border-radius:12px; }

/* Partner logos */
.partner-logo {
  height: 74px; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius);
  color: var(--text-muted); font-weight: 700; letter-spacing: 1px;
  filter: grayscale(1); opacity: .75; transition: all .35s ease; font-size: .95rem;
}
.partner-logo:hover { filter: none; opacity: 1; transform: translateY(-4px); box-shadow: var(--shadow-sm); color: var(--primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
  background: #2e1065;
  color: rgba(255,255,255,.78); margin-top: 108px; position: relative;
}
/* travel-expert style curved (arched) footer top */
.footer-curve { position: absolute; left: 0; bottom: 100%; width: 100%; height: 90px; display: block; z-index: 2; }
@media (max-width: 767px){ .footer-curve { height: 52px; } .main-footer { margin-top: 68px; } }
.main-footer > .container, .main-footer > .footer-bottom { position: relative; z-index: 2; }
/* "Designed & Developed by" credit strip */
.dev-credit { text-align: center; line-height: 1.35; }
.dev-credit { line-height: 1.25; }
.dev-credit .d-line { display: block; font-size: clamp(.8rem, 1.7vw, .95rem); font-weight: 800; color: #fff; letter-spacing: .3px; }
.main-footer .dev-credit a { display: block; font-size: clamp(.92rem, 2vw, 1.15rem); font-weight: 800; color: #fbbf24 !important; letter-spacing: .4px; padding: 0; }
.main-footer .dev-credit a:hover { color: #fff !important; transform: none; }
/* floating hotel/travel icons in the footer background */
.footer-floaties { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.footer-floaties i { position: absolute; color: rgba(255,255,255,.14); animation: ftFloat 9s ease-in-out infinite; }
@media (max-width: 767px){ .footer-floaties i { font-size: 2.6rem !important; opacity: .7; } }
@keyframes ftFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(8deg); } }
/* travel-expert style: centered footer with HORIZONTAL bullet links */
.main-footer .container { text-align: center; }
.f2-brand { padding: .5rem 0 1.2rem; }
.f2-brand .brand-logo { justify-content: center; }
.footer-desc { max-width: 600px; margin: .8rem auto 0; font-size: .92rem; color: rgba(255,255,255,.72); line-height: 1.65; }
.f2-social { display: flex; justify-content: center; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.f2-nav { margin-top: .6rem; padding-top: .4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.f2-sec-head { display: flex; align-items: center; justify-content: center; gap: 1rem; color: #fff; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; font-size: .88rem; margin-bottom: 1rem; }
.f2-sec-head::before, .f2-sec-head::after { content: ''; flex: 1 1 0; height: 1px; background: rgba(255,255,255,.14); max-width: 300px; }
.f2-sec-head i { color: #c4b5fd; font-size: 1.05rem; }
.f2-sec-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem 2.6rem; }
.main-footer .f2-sec-links a { color: rgba(255,255,255,.66); font-size: .92rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; padding: 0; }
.f2-sec-links a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9333ea; flex-shrink: 0; }
.main-footer .f2-sec-links a:hover { color: #fff; transform: none; }
.footer-pay { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; margin-top: 1.6rem; }
.main-footer h6 { color: #fff; font-family: var(--font-body); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: .85rem; margin-bottom: 1.3rem; }
.main-footer a { color: rgba(255,255,255,.65); font-size: .9rem; display: inline-block; padding: .22rem 0; }
.main-footer a:hover { color: #fbbf24; transform: translateX(5px); }
.footer-social a {
  width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: #fff; margin-right: .5rem; font-size: 1rem;
}
.footer-social a:hover { background: var(--grad-primary); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.pay-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .4rem .8rem; font-size: 1.2rem; color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: .75rem 0; font-size: .84rem; background: rgba(0,0,0,.22); }

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.float-btn {
  position: fixed; right: 22px; z-index: 1050;
  width: 54px; height: 54px; border-radius: 50%; border: none;
  display: grid; place-items: center; font-size: 1.35rem; color: #fff;
  box-shadow: var(--shadow-md); transition: all .35s ease;
}
.float-btn:hover { transform: scale(1.12); color: #fff; }
.float-whatsapp { bottom: 165px; background: linear-gradient(135deg, #22c55e, #16a34a); animation: floatPulse 2.4s ease-in-out infinite; }
.float-support { bottom: 96px; background: var(--grad-primary); }
.back-top { bottom: 27px; background: var(--grad-sunset); opacity: 0; visibility: hidden; transform: translateY(20px); }
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
@keyframes floatPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45) } 60% { box-shadow: 0 0 0 16px rgba(34,197,94,0) } }
@media (max-width: 767px) {
  .float-btn { right: 14px; width: 48px; height: 48px; font-size: 1.15rem; }
  .float-whatsapp { bottom: 208px; } .float-support { bottom: 148px; } .back-top { bottom: 88px; }
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1049;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-soft);
  display: none; padding: .5rem .4rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(30,27,75,.12);
}
[data-bs-theme="dark"] .mobile-nav { background: rgba(15,13,31,.94); }
.mobile-nav a { flex: 1; text-align: center; color: var(--text-muted); font-size: .64rem; font-weight: 600; }
.mobile-nav a i { display: block; font-size: 1.25rem; margin-bottom: .15rem; }
.mobile-nav a.active, .mobile-nav a:hover { color: var(--primary); }
.mobile-nav a.nav-book {
  position: relative;
}
.mobile-nav a.nav-book .book-circle {
  width: 52px; height: 52px; margin: -28px auto 2px; border-radius: 50%;
  background: var(--grad-sunset); color: #fff; display: grid; place-items: center;
  font-size: 1.3rem; box-shadow: 0 10px 24px rgba(251,113,133,.5);
}
@media (max-width: 991px) { .mobile-nav { display: flex; } body { padding-bottom: 74px; } }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border-soft) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%; animation: skel 1.4s infinite; border-radius: 8px;
}
@keyframes skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ============================================================
   SWIPER GLOBAL
   ============================================================ */
.swiper-nav-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--bg-card); color: var(--text-main); font-size: 1.1rem;
  display: grid; place-items: center; transition: all .3s ease; cursor: pointer;
}
.swiper-nav-btn:hover { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
.swiper { padding-bottom: 10px; }
.swiper-pagination-bullet { background: var(--primary); }

/* Single-line horizontal category chips ("Find Your Perfect Stay") */
.cat-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .6rem; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 50px; padding: .55rem .6rem .55rem .6rem; font-weight: 700; font-size: .92rem; color: var(--text-main); box-shadow: var(--shadow-sm); transition: all .35s ease; }
.cat-chip .ci { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .95rem; flex-shrink: 0; }
.cat-chip b { padding-right: .7rem; }
.cat-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Bigger blog category cards */
#catGrid .cat-pill { padding: 2.3rem 1.4rem; gap: 1.1rem; }
#catGrid .cat-ic { width: 78px; height: 78px; font-size: 2.1rem; border-radius: 22px; }
#catGrid .cat-pill b { font-size: 1.08rem; }
#catGrid .cat-pill span { font-size: .8rem; }

/* Marquee strip */
.marquee-strip { background: var(--grad-sunset); color: #fff; overflow: hidden; padding: .65rem 0; }
.marquee-track { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 26s linear infinite; font-weight: 700; font-size: .85rem; letter-spacing: 1px; }
.marquee-track i { margin-right: .5rem; }
@keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }

/* ---------- Scrolling partner logo marquee ---------- */
.logo-marquee {
  overflow: hidden; position: relative; padding: .5rem 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track { display: flex; gap: 1.3rem; width: max-content; animation: logoScroll 34s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-chip {
  flex: 0 0 auto; height: 118px; width: 250px;
  display: grid; place-items: center; padding: .8rem .6rem;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: all .35s ease;
  position: relative; overflow: hidden;
}
.logo-chip:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.logo-chip img { height: 78px; max-width: 100%; width: auto; object-fit: contain; transition: transform .35s ease; }
.logo-chip:hover img { transform: scale(1.06); }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Stay-type vector cards (home "Choose Your Kind Of Stay") ---------- */
.stay-type {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden; height: 100%;
  box-shadow: var(--shadow-sm); transition: transform .45s cubic-bezier(.2,.9,.3,1.2), box-shadow .45s ease, border-color .3s ease;
  color: var(--text-main); display: flex; flex-direction: column;
}
.stay-type:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--accent, var(--primary)); }
.stay-illus {
  position: relative; padding: 1.4rem 1rem .6rem;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--bg-soft);
  text-align: center;
}
.stay-illus img { width: 100%; max-width: 200px; height: 118px; object-fit: contain; transition: transform .5s ease; }
.stay-type:hover .stay-illus img { transform: scale(1.08) rotate(-2deg); }
.stay-count {
  position: absolute; top: 12px; left: 12px;
  background: var(--bg-card); color: var(--accent, var(--primary));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  font-size: .68rem; font-weight: 800; padding: .3rem .7rem; border-radius: 50px;
  box-shadow: var(--shadow-sm);
}
.stay-body { padding: 1.1rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; text-align: center; align-items: center; }
.stay-body h5 { font-weight: 700; font-size: 1.15rem; margin-bottom: .3rem; }
.stay-body p { color: var(--text-muted); font-size: .84rem; margin-bottom: .9rem; flex: 1; }
.stay-link { font-size: .84rem; font-weight: 800; color: var(--accent, var(--primary)); display: inline-flex; align-items: center; gap: .4rem; }
.stay-type:hover .stay-link { gap: .7rem; }
.stay-type .stay-bar { height: 4px; background: var(--accent, var(--primary)); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.stay-type:hover .stay-bar { transform: scaleX(1); }

/* Gradient animated background helper */
.grad-anim { background-size: 220% 220% !important; animation: gradShift 8s ease infinite; }
@keyframes gradShift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }

/* Dark-mode switch */
.mode-switch { cursor: pointer; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1199px) { .section-pad { padding: 52px 0; } }
@media (max-width: 767px) {
  .section-pad { padding: 38px 0; }
  .hero-swiper { min-height: 560px; height: auto; }
  .search-wrap { margin-top: -40px; }
  .search-card { padding: 1.2rem; border-radius: var(--radius-lg); }
  .app-band .app-text { padding: 2rem 1.5rem; }
  .newsletter-band { padding: 2.2rem 1.4rem; }
  .city-h-lg { height: 260px; }
}

/* Ultra-wide */
@media (min-width: 1800px) {
  .container { max-width: 1560px; }
}

/* ============================================================
   UNIFIED HEADER — icons, white logo, sticky colored background
   ============================================================ */
.main-header .brand-logo, .offcanvas-header .brand-logo { background: #fff; padding: .3rem .85rem .3rem .35rem; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.nav-links .nav-link { display: inline-flex; align-items: center; gap: .35rem; }
.nav-links .nav-link i { font-size: .95rem; }
.nav-links .nav-link.active { background: var(--grad-primary); color: #fff !important; box-shadow: var(--shadow-glow); }
.main-header .d-lg-flex .btn { font-weight: 700; }

/* sticky (scrolled) => solid coloured background */
.main-header.scrolled { background: var(--grad-primary); border-bottom-color: transparent; box-shadow: 0 10px 30px rgba(76,29,149,.28); }
.main-header.scrolled .nav-links .nav-link { color: #fff; }
.main-header.scrolled .nav-links .nav-link:hover { color: #fff; background: rgba(255,255,255,.18); }
.main-header.scrolled .nav-links .nav-link.active { background: #fff; color: var(--primary) !important; box-shadow: none; }
.main-header.scrolled .btn-outline-soft { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.main-header.scrolled .btn-outline-soft:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ============================================================
   PHOTO LIGHTBOX (galleries) — big popup with prev/next/close
   ============================================================ */
.gal-grid a, .farm-mosaic a, .apt-hero a, .apt-thumbs a, .film-strip a { cursor: zoom-in; }
.lb-overlay {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,8,24,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.lb-overlay.open { display: flex; opacity: 1; }
.lb-figure { max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lb-img { max-width: 92vw; max-height: 80vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); object-fit: contain; background: #000;
  animation: lbPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes lbPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-counter { color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: 1px; background: rgba(255,255,255,.12); padding: .35rem 1rem; border-radius: 50px; }
.lb-btn {
  position: fixed; z-index: 3001; width: 54px; height: 54px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem;
  display: grid; place-items: center; cursor: pointer; transition: all .25s ease; backdrop-filter: blur(6px);
}
.lb-btn:hover { background: var(--grad-primary); transform: scale(1.08); }
.lb-close { top: 20px; right: 20px; font-size: 1.4rem; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) {
  .lb-btn { width: 44px; height: 44px; font-size: 1.3rem; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-img { max-height: 72vh; border-radius: 10px; }
}

/* coloured Agent Login button in the menu */
.main-header .d-lg-flex .btn[href="agent-login.html"],
.offcanvas-body .btn[href="agent-login.html"] { background: var(--grad-gold); border: none; color: #4a2c00; box-shadow: 0 6px 16px rgba(245,158,11,.32); }
.main-header .d-lg-flex .btn:hover, .offcanvas-body .btn[href]:hover { filter: brightness(1.07); transform: translateY(-2px); }
.main-header.scrolled .d-lg-flex .btn[href="agent-login.html"] { background: var(--grad-gold); color: #4a2c00; }

/* ===== Floating decorative site icons in page body ===== */
.page-floaties { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-floaties i { position: absolute; color: var(--primary); opacity: .06; will-change: transform; animation: floatBody 14s ease-in-out infinite; }
.page-floaties i:nth-child(even) { color: var(--accent); opacity: .055; }
@keyframes floatBody {
  0%   { transform: translateY(0) rotate(-8deg); }
  50%  { transform: translateY(-30px) rotate(8deg); }
  100% { transform: translateY(0) rotate(-8deg); }
}
@media (max-width: 767px) { .page-floaties i { opacity: .04 !important; } }

/* ---------- Multi-layout property cards (service apartments) ---------- */
.price-from {
  display: block; font-size: .68rem; font-weight: 700; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  font-family: var(--font-body); margin-bottom: .15rem;
}
.amen-chips span.chip-bhk,
.rc-feats span.chip-bhk {
  background: var(--bg-soft); color: var(--primary); font-weight: 700;
  border: 1px solid var(--border-soft);
}
.amen-chips span.chip-bhk i, .rc-feats span.chip-bhk i { color: var(--primary); }
[data-bs-theme="dark"] .amen-chips span.chip-bhk { color: #c4b5fd; }

/* ============================================================
   NAV PROPERTY DROPDOWNS  (Hotels / Service Apartments / …)
   Desktop hover menus listing featured properties.
   Two tight lines per row: name + (location) — no gap between.
   ============================================================ */
.nav-drop { position: relative; }
.nav-drop > .nav-link { display: inline-flex; align-items: center; gap: .35rem; }
.nd-caret { font-size: .7rem; transition: transform .3s ease; opacity: .7; }
.nav-drop:hover > .nav-link .nd-caret,
.nav-drop:focus-within > .nav-link .nd-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 296px; padding: .5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .28s;
  z-index: 1050;
}
/* little bridge so the menu doesn't close in the 10px gap under the link */
.nav-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-dropdown,
.nav-drop:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* last item opens leftward so it never clips against the viewport edge */
.nav-drop:last-child .nav-dropdown { left: auto; right: 0; transform: translateY(10px); }
.nav-drop:last-child:hover .nav-dropdown,
.nav-drop:last-child:focus-within .nav-dropdown { transform: translateY(0); }

.nd-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .6rem; border-radius: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.nav-drop:hover .nd-item,
.nav-drop:focus-within .nd-item { opacity: 1; transform: translateY(0); }
/* staggered reveal */
.nav-drop:hover .nd-item:nth-child(1) { transition-delay: .04s; }
.nav-drop:hover .nd-item:nth-child(2) { transition-delay: .09s; }
.nav-drop:hover .nd-item:nth-child(3) { transition-delay: .14s; }
.nav-drop:hover .nd-item:nth-child(4) { transition-delay: .19s; }
.nd-item:hover { background: var(--bg-soft); }

.nd-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px; font-size: 1.05rem;
  background: var(--bg-soft); color: var(--primary);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.nd-item:hover .nd-ic { background: var(--grad-primary); color: #fff; transform: scale(1.08) rotate(-4deg); }

/* the two tight lines — column with no gap between them */
.nd-text { display: flex; flex-direction: column; gap: 0; line-height: 1.2; min-width: 0; }
.nd-name { font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--text-main); white-space: nowrap; }
.nd-loc  { display: flex; align-items: center; gap: .25rem; font-size: .74rem; color: var(--text-muted); font-weight: 500; }
.nd-loc i { font-size: .7rem; color: var(--accent-2); }
.nd-item:hover .nd-name { color: var(--primary); }

.nd-all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .35rem; padding: .55rem .7rem;
  border-top: 1px dashed var(--border-soft);
  font-weight: 700; font-size: .82rem; color: var(--primary);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, gap .2s ease;
}
.nav-drop:hover .nd-all, .nav-drop:focus-within .nd-all { opacity: 1; transform: translateY(0); transition-delay: .24s; }
.nd-all i { transition: transform .25s ease; }
.nd-all:hover { color: var(--primary-2); }
.nd-all:hover i { transform: translateX(4px); }
[data-bs-theme="dark"] .nd-name { color: #eceafe; }
[data-bs-theme="dark"] .nd-item:hover .nd-name { color: #c4b5fd; }

/* ============================================================
   BROWSE BY CITY  (home page — circular "city orb" cards)
   ============================================================ */
.city-orb {
  position: relative; text-align: center; padding: 1.6rem 1rem 1.4rem;
  border-radius: var(--radius-lg); background: var(--bg-card);
  border: 1px solid var(--border-soft); height: 100%;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.city-orb:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* --- circular medallion with a spinning gradient ring --- */
.orb-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 1.1rem; border-radius: 50%; }
.orb-ring::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cc), var(--cc2), var(--cc) 75%, transparent);
  animation: orbSpin 7s linear infinite;
}
.orb-ring::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cc), var(--cc2), var(--cc) 75%, transparent);
  filter: blur(11px); opacity: 0; transition: opacity .4s ease;
}
.city-orb:hover .orb-ring::before { animation-duration: 2.4s; }
.city-orb:hover .orb-ring::after { opacity: .55; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orb-ring::before { animation: none; } .city-float { animation: none; } }

.orb-core {
  position: absolute; inset: 5px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 50% 35%, var(--cc-soft), var(--bg-card) 72%);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .4s ease;
}
.city-orb:hover .orb-core { transform: scale(.94); }
.orb-core > i { font-size: 2.9rem; color: var(--cc); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.city-orb:hover .orb-core > i { transform: scale(1.12) translateY(-2px); }
.orb-core img { width: 100%; height: 100%; object-fit: cover; }

/* floating total-count badge on the medallion */
.orb-badge {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap;
  padding: .3rem .8rem; border-radius: 50px; font-weight: 800; font-size: .92rem; color: #fff;
  background: linear-gradient(135deg, var(--cc), var(--cc2));
  box-shadow: 0 8px 20px -4px var(--cc); border: 2px solid var(--bg-card);
}
.orb-badge small { font-size: .6rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .85; }

.orb-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; margin: .6rem 0 .1rem; color: var(--text-main); }
.orb-sub { font-size: .74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* property-type count chips */
.orb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0 .3rem; }
.orb-stats span, .orb-stats .orb-stat-link {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  background: var(--bg-soft); border-radius: 10px; padding: .4rem .3rem;
  font-size: .82rem; font-weight: 700; color: var(--text-main);
  transition: background .3s ease, color .3s ease, transform .2s ease;
}
.orb-stats span i, .orb-stats .orb-stat-link i { color: var(--cc); font-size: .9rem; }
.city-orb:hover .orb-stats span, .city-orb:hover .orb-stats .orb-stat-link { background: var(--cc-soft); }
/* Each count is its own link now, so it has to read and behave like one. */
.orb-stats .orb-stat-link { text-decoration: none; cursor: pointer; }
.orb-stats .orb-stat-link:hover,
.orb-stats .orb-stat-link:focus-visible { background: var(--cc); color: #fff; transform: translateY(-2px); }
.orb-stats .orb-stat-link:hover i,
.orb-stats .orb-stat-link:focus-visible i { color: #fff; }
.orb-stats .orb-stat-link:focus-visible { outline: 2px solid var(--cc); outline-offset: 2px; }
.orb-cta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
  font-weight: 800; font-size: .82rem; color: var(--cc);
}
.orb-cta i { transition: transform .3s ease; }
.city-orb:hover .orb-cta i { transform: translateX(5px); }

.city-float { animation: cityFloat 5s ease-in-out infinite; }
@keyframes cityFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
[data-bs-theme="dark"] .orb-name { color: #eceafe; }
[data-bs-theme="dark"] .orb-stats span,
[data-bs-theme="dark"] .orb-stats .orb-stat-link { color: #eceafe; }

/* ============================================================
   BRANDED DATE PICKER (flatpickr) — purple/gold theme
   ============================================================ */
.flatpickr-calendar {
  border-radius: 18px; border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg); background: var(--bg-card);
  font-family: var(--font-body); padding: 8px; width: auto;
  animation: fpPop .22s cubic-bezier(.22,1,.36,1);
}
@keyframes fpPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-card); }
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: var(--bg-card); }
.flatpickr-months { padding: 4px 0 6px; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year { color: var(--text-main); font-weight: 800; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 800; border-radius: 8px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  fill: var(--primary); border-radius: 10px; top: 4px; padding: 6px 8px;
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--bg-soft); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-2); }
span.flatpickr-weekday { color: var(--text-muted); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; }
.flatpickr-day {
  color: var(--text-main); border-radius: 12px; font-weight: 600;
  height: 40px; line-height: 40px; max-width: 40px;
  border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.flatpickr-day:hover { background: var(--bg-soft); border-color: var(--border-soft); color: var(--primary); transform: translateY(-1px); }
.flatpickr-day.today { border-color: var(--accent); color: var(--accent); font-weight: 800; }
.flatpickr-day.today:hover { background: var(--accent); color: #fff; }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow);
}
.flatpickr-day.inRange { background: var(--bg-soft); border-color: var(--bg-soft); box-shadow: -5px 0 0 var(--bg-soft), 5px 0 0 var(--bg-soft); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: .38; }
[data-bs-theme="dark"] .flatpickr-day { color: #eceafe; }
[data-bs-theme="dark"] span.flatpickr-weekday { color: #a5a1c9; }

/* ---------- flatpickr: time picker, AM/PM, confirm, special days ---------- */
.flatpickr-time { border-top: 1px solid var(--border-soft); margin-top: 4px; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--text-main); font-weight: 700; }
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--bg-soft); }
.flatpickr-time .flatpickr-am-pm { color: var(--primary); font-weight: 800; }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--primary); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--primary); }
/* special day marker */
.flatpickr-day.fp-special { color: #b45309; font-weight: 800; }
.flatpickr-day.fp-special .fp-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.flatpickr-day.fp-special.selected .fp-dot { background: #fff; }
.flatpickr-day.fp-special:hover { background: rgba(245,158,11,.14); color: #b45309; }
/* legend + confirm button */
.fp-legend { display: flex; align-items: center; gap: .4rem; justify-content: center; padding: .5rem 0 .2rem; font-size: .72rem; font-weight: 700; color: var(--text-muted); border-top: 1px solid var(--border-soft); margin-top: 4px; }
.fp-legend .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.flatpickr-confirm { color: #fff !important; background: var(--grad-primary); border-radius: 0 0 16px 16px; font-weight: 800; height: 42px; line-height: 42px; fill: #fff; transition: filter .2s ease; }
.flatpickr-confirm:hover { filter: brightness(1.08); }
.flatpickr-confirm svg path { fill: #fff; }

/* ---------- calendar icon inside date fields ---------- */
.search-field.has-cal { position: relative; }
.search-field.has-cal .cal-ic {
  position: absolute; right: .85rem; bottom: 0; height: calc(2.6rem); display: flex; align-items: center;
  color: var(--primary); font-size: 1.05rem; pointer-events: none; z-index: 2;
}
.search-field.has-cal .form-control { padding-right: 2.4rem; cursor: pointer; }

/* ============================================================
   CANCELLATION — "refund ladder" (attractive redesign)
   ============================================================ */
.refund-ladder { display: flex; flex-direction: column; gap: .7rem; }
.rl-row {
  display: grid; grid-template-columns: 44px minmax(140px,1.4fr) 2fr auto; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--border-soft); border-left: 4px solid var(--rl-c);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rl-row:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.rl-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; background: var(--rl-c); flex-shrink: 0; }
.rl-when b { font-size: .95rem; color: var(--text-main); display: block; line-height: 1.2; }
.rl-when small { font-size: .74rem; color: var(--text-muted); }
.rl-refund { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.rl-refund .rl-label { font-size: .82rem; font-weight: 800; color: var(--rl-c); }
.rl-bar { height: 8px; border-radius: 50px; background: var(--bg-soft); overflow: hidden; }
.rl-bar span { display: block; height: 100%; border-radius: 50px; background: var(--rl-c); width: var(--rl-w); transition: width .8s cubic-bezier(.22,1,.36,1); }
.rl-charge { text-align: center; flex-shrink: 0; }
.rl-charge b { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--rl-c); display: block; line-height: 1; }
.rl-charge small { font-size: .62rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 575px) {
  .rl-row { grid-template-columns: 40px 1fr auto; grid-template-areas: "ic when charge" "ic refund refund"; gap: .5rem 1rem; }
  .rl-ic { grid-area: ic; align-self: start; } .rl-when { grid-area: when; } .rl-refund { grid-area: refund; } .rl-charge { grid-area: charge; }
}
[data-bs-theme="dark"] .rl-when b { color: #eceafe; }

/* ---------- flatpickr custom footer: special days list + time dropdown ---------- */
.fp-extra { padding: 0; }
.fp-cal-head { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); background: linear-gradient(90deg, rgba(109,40,217,.13), rgba(147,51,234,.08)); margin: -8px -8px 6px; padding: 11px 8px; border-radius: 18px 18px 0 0; }
.fp-cal-head i { font-size: .9rem; }
.fp-sec-head { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #b45309; display: flex; align-items: center; justify-content: center; gap: .4rem; background: rgba(245,158,11,.14); margin: 8px -8px 6px; padding: 9px 8px; }
.fp-sec-head i { color: var(--accent); }
.fp-sp-grid { display: flex; flex-direction: column; gap: 0; }
.fp-sp-item { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; width: 100%; background: transparent; border: none; border-radius: 9px; padding: .22rem .85rem; cursor: pointer; text-align: left; transition: background .18s ease; }
.fp-sp-item:hover { background: var(--bg-soft); }
.fp-sp-item b { flex-shrink: 0; font-size: .72rem; font-weight: 800; color: #b45309; background: rgba(245,158,11,.15); border-radius: 6px; padding: .06rem .45rem; min-width: 56px; text-align: center; line-height: 1.4; }
.fp-sp-item span { font-size: .84rem; font-weight: 600; color: var(--text-main); }
[data-bs-theme="dark"] .fp-sp-item span { color: #eceafe; }

/* ---------- flatpickr: two-screen flow — step 2 is a dedicated TIME screen ---------- */
.flatpickr-calendar { min-width: 300px; }
.fp-time-screen { padding: 6px 12px 14px; text-align: center; animation: fpScr .28s cubic-bezier(.22,1,.36,1); }
@keyframes fpScr { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.fp-back {
  display: inline-flex; align-items: center; gap: .35rem; margin-right: auto;
  background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.28);
  color: #b45309; font-weight: 800; font-size: .76rem; cursor: pointer;
  padding: .4rem .9rem; border-radius: 50px; transition: all .22s ease;
}
.fp-back i { font-size: .92rem; }
.fp-back:hover { background: var(--grad-gold); color: #4a2c00; border-color: transparent; box-shadow: 0 8px 20px rgba(245,158,11,.4); transform: translateX(-2px); }
.fp-back-row { display: flex; }
[data-bs-theme="dark"] .fp-back { color: #fbbf24; }
.fp-ts-date {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--text-main);
  margin: .3rem 0 .1rem;
}
.fp-ts-sub { font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.fp-ts-controls { display: flex; gap: .55rem; align-items: stretch; margin-bottom: 1rem; }
.fp-time-select {
  flex: 1; min-width: 0; border: 1.5px solid var(--border-soft); border-radius: 12px; padding: .6rem .8rem;
  font-weight: 800; font-size: 1.05rem; color: var(--text-main); background: var(--bg-card); cursor: pointer; text-align: center;
}
.fp-time-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(147,51,234,.12); }
.fp-ampm { display: flex; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 12px; padding: 3px; gap: 3px; flex-shrink: 0; }
.fp-ap {
  border: none; background: transparent; color: var(--text-muted); font-weight: 800; font-size: .85rem;
  border-radius: 9px; padding: .4rem .95rem; cursor: pointer; transition: all .22s ease;
}
.fp-ap:hover { color: var(--primary); }
.fp-ap.active {
  background: linear-gradient(135deg, #22c55e, #15803d); color: #fff;
  box-shadow: 0 7px 18px rgba(21,128,61,.45); transform: scale(1.07); letter-spacing: .5px;
}
.fp-ok {
  width: 100%; justify-content: center; background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; border: none;
  border-radius: 12px; font-weight: 800; font-size: .95rem; padding: .7rem 1.15rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; box-shadow: 0 10px 26px rgba(21,128,61,.34);
  transition: filter .2s ease, transform .12s ease;
}
.fp-ok:hover { filter: brightness(1.08); }
.fp-ok:active { transform: scale(.98); }
@media (max-width: 575px) {
  .flatpickr-calendar { min-width: 268px; max-width: calc(100vw - 24px); }
  .fp-ts-controls { flex-wrap: wrap; }
  .fp-time-select { flex: 1 1 100%; }
  .fp-ampm { width: 100%; justify-content: center; }
  .fp-ap { flex: 1; }
}

/* ---------- Per-room guests & rooms selector (booking.html) ---------- */
.room-guests { border-top: 1px dashed var(--border-soft); }
.room-guests .rg-field { display: flex; flex-direction: column; gap: .25rem; }
.room-guests .rg-field label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; margin: 0; }
.room-guests .rg-field label i { color: var(--primary); }
.room-guests .rg-field .form-select-sm { min-width: 96px; font-weight: 700; border-radius: 10px; }

/* ============================================================
   ADD-ONS  (room-details display + booking selectable) — horizontal grid
   ============================================================ */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.addon-card {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem 1.15rem 1.15rem; border-radius: 18px; background: var(--bg-card);
  border: 1.5px solid var(--border-soft); overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
}
.addon-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, var(--ao-soft), transparent 60%); transition: opacity .4s ease;
}
.addon-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--ao-c, var(--primary)); }
.addon-card:hover::after { opacity: 1; }
.ao-ic {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; background: var(--ao-grad, var(--grad-primary));
  box-shadow: 0 10px 22px -6px var(--ao-c, var(--primary)); flex-shrink: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.addon-card:hover .ao-ic { transform: scale(1.12) rotate(-6deg); }
.ao-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; color: var(--text-main); line-height: 1.2; }
.ao-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.45; flex-grow: 1; }
.ao-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.ao-price { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--ao-c, var(--primary)); }
.ao-price small { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.ao-badge { position: absolute; top: 0; right: 0; background: var(--ao-grad); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: .28rem .7rem; border-radius: 0 18px 0 12px; box-shadow: var(--shadow-sm); z-index: 2; }
/* selectable variant (booking.html) */
.addon-card.selectable { cursor: pointer; padding-top: 1.3rem; }
.ao-add {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--border-soft); background: var(--bg-card); display: grid; place-items: center;
  color: var(--text-muted); font-size: .95rem; transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.addon-card.selectable:hover .ao-add { border-color: var(--ao-c); color: var(--ao-c); }
.addon-card.selected { border-color: #22c55e; background: rgba(34,197,94,.10); box-shadow: inset 0 0 0 1px #22c55e, 0 14px 32px -10px rgba(34,197,94,.55); }
.addon-card.selected::after { background: radial-gradient(120% 90% at 100% 0%, rgba(34,197,94,.16), transparent 62%); opacity: 1; }
.addon-card.selected .ao-title { color: #15803d; }
.addon-card.selected .ao-price { color: #15803d; }
.addon-card.selected .ao-add { background: linear-gradient(135deg, #22c55e, #15803d); border-color: transparent; color: #fff; transform: scale(1.05) rotate(360deg); box-shadow: 0 0 0 5px rgba(34,197,94,.22); }
.addon-card.selected .ao-add .bi::before { content: "\F26E"; } /* bi-check-lg */
[data-bs-theme="dark"] .ao-title { color: #eceafe; }
@media (max-width: 575px) { .addon-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; } .ao-ic { width: 46px; height: 46px; font-size: 1.25rem; } }

/* ============================================================
   COUPON CODES  (booking.html — MakeMyTrip-style)
   ============================================================ */
.cpn-input {
  display: flex; align-items: center; gap: .5rem; background: #f3f4f6;
  border: 1.5px solid #e5e7eb; border-radius: 12px; padding: .5rem .5rem .5rem 1.1rem; margin-bottom: 1.1rem;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.cpn-input:focus-within { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.1); background: #fff; }
.cpn-input input { flex: 1; border: none; background: none; outline: none; font-weight: 700; font-size: .95rem; color: var(--text-main); min-width: 0; text-transform: uppercase; }
.cpn-input input::placeholder { color: #6b7280; font-weight: 600; text-transform: none; }
.cpn-input .btn-apply { border: none; background: none; color: #9ca3af; font-weight: 800; font-size: .9rem; letter-spacing: .5px; padding: .5rem 1rem; border-radius: 8px; cursor: pointer; transition: color .2s ease; }
.cpn-input:focus-within .btn-apply, .cpn-input .btn-apply:hover { color: #2563eb; }
.coupon-list { display: flex; flex-direction: column; gap: .75rem; }
@keyframes cpnIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cpn-card {
  position: relative; display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.05rem; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: cpnIn .5s ease backwards;
}
.cpn-card:nth-child(1) { animation-delay: .04s; }
.cpn-card:nth-child(2) { animation-delay: .10s; }
.cpn-card:nth-child(3) { animation-delay: .16s; }
.cpn-card:nth-child(4) { animation-delay: .22s; }
.cpn-card:nth-child(5) { animation-delay: .28s; }
.cpn-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.18); border-color: #cbd5e1; }
.cpn-card.applied { border-color: #3b82f6; background: #eff6ff; box-shadow: none; }
.cpn-card.applied:hover { border-color: #3b82f6; }
.cpn-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 1.05rem; color: #fff; background: var(--grad-primary); margin-top: 1px; }
.cpn-card.applied .cpn-ic { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.cpn-body { flex-grow: 1; min-width: 0; }
.cpn-code { font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; color: #1f2937; letter-spacing: .3px; }
.cpn-desc { font-size: .8rem; color: #6b7280; line-height: 1.45; margin-top: .2rem; }
.cpn-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.cpn-off { font-weight: 800; font-size: .92rem; color: #1f2937; white-space: nowrap; }
.cpn-card.applied .cpn-off { color: #059669; }
.cpn-act { border: none; background: none; color: #2563eb; font-weight: 700; font-size: .88rem; cursor: pointer; padding: 0; }
.cpn-more { display: inline-block; text-align: left; margin-top: 1rem; color: #2563eb; font-weight: 700; font-size: .9rem; text-decoration: none; }
.cpn-more:hover { text-decoration: underline; }
/* compact coupon cards when placed in the right summary sidebar */
.book-panel .cpn-input { margin-bottom: .8rem; padding: .35rem .35rem .35rem .9rem; }
.book-panel .cpn-input .btn-apply { padding: .45rem .8rem; font-size: .85rem; }
.book-panel .coupon-list { gap: .55rem; }
.book-panel .cpn-card { padding: .7rem .75rem; border-radius: 10px; gap: .6rem; }
.book-panel .cpn-ic { width: 30px; height: 30px; font-size: .95rem; border-radius: 7px; }
.book-panel .cpn-code { font-size: .9rem; }
.book-panel .cpn-desc { font-size: .72rem; margin-top: .1rem; }
.book-panel .cpn-off { font-size: .82rem; }
.book-panel .cpn-act { font-size: .8rem; }
.book-panel .cpn-more { margin-top: .8rem; font-size: .85rem; }

/* ---------- Per-room add-ons collapsible toggle (booking.html) ---------- */
.ao-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding: .7rem 1.05rem; border: 1.5px dashed var(--border-soft);
  border-radius: 12px; background: var(--bg-soft); color: var(--primary);
  font-weight: 800; font-size: .88rem; cursor: pointer; transition: all .25s ease;
}
.ao-toggle:hover { border-color: var(--primary); }
.ao-toggle:not(.collapsed) { background: var(--grad-primary); color: #fff; border-color: transparent; border-style: solid; box-shadow: var(--shadow-glow); }
.ao-toggle .ao-chev { transition: transform .35s ease; }
.ao-toggle:not(.collapsed) .ao-chev { transform: rotate(180deg); }
.select-room-opt .addon-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 575px) { .select-room-opt .addon-grid { grid-template-columns: 1fr 1fr; } }

/* ============ MOBILE RESPONSIVE PASS — home page + global (added) ============ */
@media (max-width: 767px) {
  /* hero search was clipped by .hero overflow:hidden + tall stacked fields */
  .hero { overflow: visible; }
  .hero-swiper { height: 60vh; min-height: 430px; }
  .search-wrap { margin-top: 1.25rem; }
  .search-card { padding: 1.15rem; }
  .hero-stats { gap: 1.4rem; margin-top: 1.4rem; }
  /* Flash Deals + Promo boxes -> swipeable horizontal strip */
  #deals .row.g-4, #promos .row.g-4 {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: .7rem; margin-right: -.9rem; scrollbar-width: none;
  }
  #deals .row.g-4::-webkit-scrollbar, #promos .row.g-4::-webkit-scrollbar { display: none; }
  #deals .row.g-4 > [class*="col-"], #promos .row.g-4 > [class*="col-"] {
    flex: 0 0 86%; max-width: 86%; scroll-snap-align: center;
  }
  /* tighten the gap around the App band <-> Trusted Partners */
  #appPromo { padding-top: 1.4rem; padding-bottom: .5rem; }
  #partners { padding-top: .6rem; }
  /* small feature/step cards read better a touch tighter at 2-up */
  .feature-box, .step-card { padding: 1.1rem .9rem; }
}

/* ============ MOBILE PASS 2 — listing cards, detail galleries, booking guests (added) ============ */
@media (max-width: 575px) {
  /* dual-price listing cards: stack the price row above a full-width View button */
  .lux-card .d-flex.justify-content-between:has(.dual-price) { flex-direction: column; align-items: stretch !important; gap: .55rem; }
  .lux-card .d-flex.justify-content-between:has(.dual-price) .btn { width: 100%; }
  .dual-price { gap: .5rem; }
  .dual-price .price-now { font-size: .98rem; }
  /* 3-col apartment thumbnail gallery -> 2-up (overrides page inline style) */
  .apt-thumbs { grid-template-columns: 1fr 1fr !important; }
  /* per-room add-on grids: always 2-up on phones */
  .room-card .addon-grid, .layout-card .addon-grid { grid-template-columns: 1fr 1fr; }
  /* booking Select-Room: keep Rooms / Adults / Children 3-up instead of wrapping 2+1 */
  .room-guests.d-flex { display: grid !important; grid-template-columns: 1fr 1fr 1fr; }
  .room-guests .rg-field, .room-guests .rg-field .form-select-sm { min-width: 0; }
  .room-guests .rg-field .form-select-sm { padding-left: .4rem; padding-right: .3rem; }
}

/* ---- metrics: smaller on phones so long numbers stay one line ---- */
@media (max-width: 575px) {
  .stat-item .num { font-size: 1.45rem; white-space: nowrap; }
  .stat-item .s-ic { font-size: 1.55rem; margin-bottom: .25rem; }
  .stat-item p { font-size: .7rem; letter-spacing: .5px; }
  .hero-stat b { font-size: 1.25rem; }
  .hero-stat span { font-size: .72rem; }
}

/* ============ MOBILE PASS 3 — home page compaction (phones only; laptop/desktop untouched) ============ */
/* home hamburger: white round button with white lines (visible over hero) */
@media (max-width: 991px) {
  .main-header .navbar-toggler {
    width: 44px; height: 44px; padding: 0; border-radius: 50% !important;
    border: 1px solid var(--border-soft) !important; background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.15); display: grid; place-items: center;
  }
  .main-header .navbar-toggler i { color: var(--primary) !important; font-size: 1.35rem; }
}
@media (max-width: 767px) {
  /* Choose Your Kind Of Stay — shorter card, less white-box space */
  .stay-illus { padding: .85rem .8rem .35rem; }
  .stay-illus img { height: 76px; }
  .stay-count { font-size: .6rem; padding: .2rem .55rem; top: 9px; left: 9px; }
  .stay-body { padding: .7rem .8rem .95rem; }
  .stay-body h5 { font-size: 1rem; margin-bottom: .12rem; }
  .stay-body p { font-size: .75rem; margin-bottom: .5rem; }
  .stay-body .stay-link { font-size: .76rem; }

  /* Browse by City — shorter orbs */
  .city-orb { padding: 1rem .55rem .85rem; }
  .orb-ring { width: 84px; height: 84px; margin: 0 auto .65rem; }
  .orb-core > i { font-size: 1.85rem; }
  .orb-badge { font-size: .72rem; padding: .2rem .58rem; bottom: -10px; }
  .orb-badge small { font-size: .5rem; }
  .orb-name { font-size: .96rem; margin: .45rem 0 .05rem; }
  .orb-sub { font-size: .62rem; }

  /* Why Travellers Choose Us — shorter feature boxes */
  .feature-box { padding: 1.1rem .85rem; }
  .feature-box .f-ic { width: 48px; height: 48px; font-size: 1.2rem; margin: 0 auto .65rem; border-radius: 13px; }
  .feature-box h5 { font-size: 1rem; margin-bottom: .25rem; }
  .feature-box p { font-size: .77rem; }

  /* Limited Time Only (Flash Deals) — tighter section */
  .deals-section { padding-top: 38px; padding-bottom: 38px; }
  .deals-section .mb-5 { margin-bottom: 1.3rem !important; }

  /* Metrics — one horizontal scrolling line (swipe), numbers stay one line */
  .stats-band { padding: 1.5rem 1rem; }
  .stats-band > .row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .stats-band > .row::-webkit-scrollbar { display: none; }
  .stats-band > .row > [class*="col-"] { flex: 0 0 45%; max-width: 45%; scroll-snap-align: center; }

  /* Powered By The Best In Travel (Partners) — remove extra top space */
  #partners { padding-top: .3rem; padding-bottom: 1rem; }
  #partners .mb-5 { margin-bottom: 1rem !important; }
}


/* ============ MOBILE PASS 4 — auto-scroll metrics, tighter search/deals, hide floats on menu ============ */
/* Flash Deals tighter (system + mobile) */
.deals-section.section-pad { padding-top: 50px; padding-bottom: 50px; }
.deals-section .mb-5 { margin-bottom: 1.6rem !important; }
/* hide floating WhatsApp / support / back-to-top while the mobile menu is open */
body:has(.offcanvas.show) .float-btn { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes statMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  /* Metrics: one line, auto-scroll (ping-pong) */
  .stats-band { overflow: hidden; }
  .stats-band > .row { flex-wrap: nowrap; overflow-x: visible; width: max-content; animation: statMarquee 11s ease-in-out infinite alternate; }
  .stats-band > .row > [class*="col-"] { flex: 0 0 44vw; max-width: 44vw; scroll-snap-align: none; }
  /* Hero search: smaller so it doesn't dominate the screen */
  .search-card { padding: 1rem; }
  .search-card .row { --bs-gutter-y: .55rem; --bs-gutter-x: .55rem; }
  .search-field label { font-size: .64rem; margin-bottom: .18rem; letter-spacing: 1px; }
  .search-field .form-control, .search-field .form-select { padding: .52rem .7rem; font-size: .88rem; border-radius: 11px; }
  .btn-search { padding: .68rem; font-size: .9rem; }
  .quick-tags { margin-top: .7rem; gap: .35rem; }
  .quick-tags .tag { font-size: .72rem; padding: .28rem .8rem; }
}

/* ---- Book In 4 Easy Steps: horizontal swipe-scroll on phones ---- */
@media (max-width: 767px) {
  #steps .row.g-4 { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .6rem; margin-right: -.9rem; scrollbar-width: none; }
  #steps .row.g-4::-webkit-scrollbar { display: none; }
  #steps .row.g-4 > [class*="col-"] { flex: 0 0 60%; max-width: 60%; scroll-snap-align: center; }
  #steps .step-connector { display: none; }
}

/* ============ LISTING PAGES — mobile app experience ============ */
.listing-actionbar { display: none; }
@media (max-width: 991px) {
  /* replace generic bottom nav with Filter / Sort / Map action bar */
  body.listing-page .mobile-nav { display: none !important; }
  body.listing-page { padding-bottom: 68px; }
  .listing-actionbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1035;
    background: var(--bg-card); border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 20px rgba(0,0,0,.10); padding: .35rem .4rem;
  }
  .listing-actionbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: none; border: none; color: var(--text-main); font-size: .7rem; font-weight: 700; padding: .5rem 0; transition: transform .15s ease;
  }
  .listing-actionbar button i { font-size: 1.2rem; color: var(--primary); }
  .listing-actionbar button:active { transform: scale(.92); }
  .listing-actionbar button + button { border-left: 1px solid var(--border-soft); }
  /* the redundant Filters pill in the results bar (bottom bar handles it) */
  body.listing-page .results-bar .d-xl-none { display: none !important; }

  /* full-height animated filter drawer */
  #filterCanvas { max-width: 87vw !important; width: 87vw; }
  #filterCanvas .offcanvas-body { padding-bottom: 84px; }
  .filter-drawer-foot {
    position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: .6rem;
    padding: .7rem .9rem; background: var(--bg-card); border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 18px rgba(0,0,0,.12);
  }
  .filter-drawer .f-group { animation: fdIn .45s ease backwards; }
  .filter-drawer .f-group:nth-child(1){animation-delay:.03s} .filter-drawer .f-group:nth-child(2){animation-delay:.07s}
  .filter-drawer .f-group:nth-child(3){animation-delay:.11s} .filter-drawer .f-group:nth-child(4){animation-delay:.15s}
  .filter-drawer .f-group:nth-child(5){animation-delay:.19s} .filter-drawer .f-group:nth-child(6){animation-delay:.23s}
  .filter-drawer .f-group:nth-child(7){animation-delay:.27s} .filter-drawer .f-group:nth-child(8){animation-delay:.31s}
}
@keyframes fdIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .results-bar { padding: .55rem .75rem; gap: .45rem; border-radius: 14px; }
  .results-bar .sort-select { font-size: .8rem; padding: .45rem 1.7rem .45rem .7rem; max-width: 48vw; }
  .view-toggle .btn { width: 34px; height: 34px; margin-left: .22rem; }
  .view-toggle .btn i { font-size: .9rem; }
}

/* ============ Mobile app-style offcanvas menu ============ */
.mobile-menu { background: var(--bg-body); }
.mm-head { position: relative; text-align: center; padding: 1.25rem 1rem .95rem; background: var(--grad-primary); color: #fff; }
.mm-close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.mm-close:active { transform: scale(.9); }
.mm-logo { display: inline-flex !important; align-items: center; gap: .5rem; background: #fff !important; box-shadow: 0 5px 16px rgba(0,0,0,.18) !important; padding: .35rem .95rem .35rem .4rem !important; border-radius: 14px; }
.mm-logo .logo-mark { width: 40px; height: 40px; }
.mm-logo .logo-name { color: var(--text-main); font-size: 1.3rem; }
.mm-logo .grad-text { -webkit-text-fill-color: transparent; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; }
.mm-tag { display: block; font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.82); margin-top: .35rem; }
.mm-body { padding: 1.1rem; display: flex; flex-direction: column; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; }
.mm-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .95rem .3rem; border-radius: 15px; background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-main); font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; animation: mmIn .42s ease backwards; }
.mm-tile:active { transform: scale(.93); }
.mm-tile .mm-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--mc, var(--primary)); box-shadow: 0 7px 15px -5px var(--mc, var(--primary)); }
.mm-tile.active { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.mm-grid .mm-tile:nth-child(1){animation-delay:.04s} .mm-grid .mm-tile:nth-child(2){animation-delay:.08s}
.mm-grid .mm-tile:nth-child(3){animation-delay:.12s} .mm-grid .mm-tile:nth-child(4){animation-delay:.16s}
.mm-grid .mm-tile:nth-child(5){animation-delay:.20s} .mm-grid .mm-tile:nth-child(6){animation-delay:.24s}
.mm-agent { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .95rem 1.1rem; border-radius: 14px; background: var(--grad-primary); color: #fff; font-weight: 800; text-decoration: none; box-shadow: var(--shadow-glow); animation: mmIn .42s ease .28s backwards; }
.mm-agent:active { transform: scale(.98); }
.mm-agent i:first-child { font-size: 1.05rem; }
.mm-contact { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.mm-con { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 13px; background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-main); text-decoration: none; animation: mmIn .42s ease backwards; }
.mm-con:nth-child(1){animation-delay:.32s} .mm-con:nth-child(2){animation-delay:.37s}
.mm-con-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; background: var(--mc, var(--primary)); flex-shrink: 0; }
.mm-con-t small { display: block; font-size: .64rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.mm-con-t b { font-size: .96rem; color: var(--text-main); }
.mm-credit { text-align: center; margin: auto -1.1rem -1.1rem; padding: .75rem 1rem; background: var(--grad-primary); color: #fff; line-height: 1.35; }
.mm-credit .d-line { display: block; font-size: .82rem; font-weight: 800; color: #fff; letter-spacing: .3px; }
.mm-credit a { display: block; font-size: 1rem; font-weight: 800; color: #fbbf24; text-decoration: none; }
@keyframes mmIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* hide the bottom nav / listing action bar while the mobile menu is open */
body:has(#mobileMenu.show) .mobile-nav,
body:has(#mobileMenu.show) .listing-actionbar { display: none !important; }

/* ---- mobile page banner (.page-hero — the section below the header) — shorter + centred ---- */
@media (max-width: 767px) {
  .page-hero { padding: 40px 0 30px; }
  .page-hero .breadcrumb { justify-content: center; }
  .page-hero > .container > .d-flex { justify-content: center; text-align: center; }
  .page-hero h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .page-hero .hero-chip { font-size: .78rem; }
}

/* ============ Listing sort bottom-sheet + mobile toolbar tidy ============ */
.sort-sheet-backdrop { position: fixed; inset: 0; background: rgba(15,10,40,.45); z-index: 1060; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.sort-sheet-backdrop.show { opacity: 1; visibility: visible; }
.sort-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061; background: var(--bg-card); border-radius: 22px 22px 0 0; padding: .3rem 1.1rem 1.4rem; transform: translateY(105%); transition: transform .32s cubic-bezier(.22,1,.36,1); box-shadow: 0 -12px 34px rgba(0,0,0,.22); }
.sort-sheet.show { transform: translateY(0); }
.ss-grab { width: 42px; height: 4px; border-radius: 4px; background: var(--border-soft); margin: .5rem auto .7rem; }
.ss-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.ss-head b { font-size: 1.02rem; }
.ss-x { border: none; background: var(--bg-soft); width: 32px; height: 32px; border-radius: 50%; color: var(--text-main); display: grid; place-items: center; }
.ss-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: none; background: none; padding: .85rem .2rem; font-weight: 700; font-size: .92rem; color: var(--text-main); border-bottom: 1px solid var(--border-soft); }
.ss-opt:last-child { border-bottom: none; }
.ss-opt i { opacity: 0; color: var(--primary); font-size: 1.1rem; }
.ss-opt.active { color: var(--primary); }
.ss-opt.active i { opacity: 1; }

@media (max-width: 767px) {
  /* the top toolbar above the grids is redundant on mobile (bottom bar handles it) */
  body.listing-page .results-bar { display: none !important; }
  /* shorter search colour strip + less space above the page */
  body.listing-page .page-hero { padding: 20px 0 18px; }
  body.listing-page section.pt-4 { padding-top: .8rem !important; }
  body.listing-page .section-pad-sm { padding-top: .6rem; }
}

/* ============ arrows highlight + price emphasis (added) ============ */
/* carousel / grid nav arrows — highlighted (coloured) */
.swiper-nav-btn { border: 1.5px solid var(--primary) !important; color: var(--primary) !important; }
.swiper-nav-btn:hover { color: #fff !important; }
/* amount / price — emphasised in brand colour (deal cards & summary keep their own colours) */
.price-now { color: var(--primary); }
.deal-card .price-now, .bp-head .price-now, [style*="grad"] .price-now { color: #fff; }

/* ============ calendar month header — full colour + highlighted arrows ============ */
.fp-cal-head { background: var(--grad-primary) !important; color: #fff !important; }
.fp-cal-head i { color: #fff !important; }
.avail-cal .cal-head button { background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.45); }
.avail-cal .cal-head button:hover { background: #fff; color: var(--primary); }

/* on detail pages the sticky Book-Now bar replaces the generic bottom nav (they collide at bottom:0) */
body.has-bookbar .mobile-nav { display: none !important; }

/* cancellation refund ladder — compact on phones (was too tall) */
@media (max-width: 767px) {
  .refund-ladder { gap: .45rem; }
  .rl-row { grid-template-columns: 32px 1.3fr 1.5fr auto; gap: .55rem; padding: .55rem .7rem; border-radius: 12px; }
  .rl-ic { width: 32px; height: 32px; font-size: .88rem; border-radius: 9px; }
  .rl-when b { font-size: .78rem; }
  .rl-when small { font-size: .62rem; }
  .rl-refund { gap: .25rem; }
  .rl-refund .rl-label { font-size: .72rem; }
  .rl-bar { height: 6px; }
  .rl-charge b { font-size: .92rem; }
  .rl-charge small { font-size: .6rem; }
}


/* header: direct call number + smaller logo */
.hdr-call { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .82rem; color: var(--primary); text-decoration: none; background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.22); padding: .35rem .7rem; border-radius: 50px; white-space: nowrap; line-height: 1; }
.hdr-call i { color: var(--primary); font-size: .9rem; }
.hdr-call:hover { background: var(--primary); color: #fff; }
.hdr-call:hover i { color: #fff; }
.main-header.scrolled .hdr-call { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
.main-header.scrolled .hdr-call i { color: #fff; }
.main-header .brand-logo .logo-mark { width: 38px; height: 38px; font-size: 1.08rem; border-radius: 11px; }
.main-header .brand-logo .logo-name { font-size: 1.2rem; }
.main-header .brand-logo .logo-tag { font-size: .55rem; letter-spacing: 2.5px; }
.main-header .brand-logo { padding: .25rem .7rem .25rem .3rem; gap: .5rem; }
@media (max-width: 360px) { .hdr-call span { display: none; } .hdr-call { padding: .35rem .5rem; } }


/* mobile menu: customer login highlighted */
.mm-login { background: var(--grad-primary); color: #fff !important; border-color: transparent !important; }
.mm-login i { color: #fff !important; }


/* home search: colourful heading + box on mobile (desktop unchanged) */
.sc-head { display: none; }
@media (max-width: 767px) {
  .sc-head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: #fff; background: var(--grad-primary); padding: .6rem .9rem; border-radius: 13px; margin-bottom: .9rem; box-shadow: 0 8px 20px rgba(124,58,237,.28); }
  .sc-head i { color: #fbd34d; }
  .search-card { border: 1.5px solid rgba(124,58,237,.20); box-shadow: 0 14px 32px rgba(124,58,237,.16); }
  .search-field label { color: var(--primary); }
  .search-field .form-select, .search-field .form-control { border-color: rgba(124,58,237,.24); background: rgba(124,58,237,.035); }
  .search-field.has-cal .cal-ic { color: var(--primary); }
}

/* Book in 4 Easy Steps — show step links on mobile scroll + tighter gap between grids */
@media (max-width: 767px) {
  #steps .row.g-4 { --bs-gutter-x: .7rem; }
  #steps .step-connector { display: block; top: 46px; left: calc(50% + 50px); width: calc(100% - 30px); }
}


/* header: full-width on desktop only (mobile keeps the normal container) */
@media (min-width: 992px) { .main-header .navbar > .container { max-width: 100%; padding-left: 1.6rem; padding-right: 1.6rem; } }
/* customer login: colourful gold button, stays visible on the scrolled purple header */
/* customer login: same outline design as agent login, different (purple) colour */
.btn.hdr-login { border: 2px solid var(--primary) !important; color: var(--primary) !important; background: transparent !important; font-weight: 800; }
.btn.hdr-login:hover { background: var(--grad-primary) !important; color: #fff !important; border-color: transparent !important; }
.main-header.scrolled .btn.hdr-login { background: #fff !important; color: var(--primary) !important; border-color: #fff !important; }
.main-header.scrolled .btn.hdr-login:hover { background: rgba(255,255,255,.9) !important; color: var(--primary) !important; }

/* 4 Easy Steps — smaller icons on mobile + connector realigned to the smaller icon */
@media (max-width: 767px) {
  #steps .step-ic { width: 60px; height: 60px; border-radius: 19px; font-size: 1.35rem; margin-bottom: .8rem; }
  #steps .step-num { width: 23px; height: 23px; font-size: .68rem; top: -8px; right: -8px; }
  #steps .step-connector { top: 30px; left: calc(50% + 37px); width: calc(100% - 24px); }
}