@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy-900:#0B1E3F;
  --navy-800:#16305F;
  --blue-accent:#8ECCEF;
  --blue-mid:#4A90D9;
  --gold-star:#F5C065;
  --badge-tan-bg:#FBE8CE;
  --badge-tan-text:#8A5A20;
  --ribbon-navy-bg:#0B1E3F;
  --bg-page:#FFFFFF;
  --bg-section:#F7F8FA;
  --border-light:#E5E7EB;
  --text-secondary:#6B7280;
  --text-tertiary:#9CA3AF;
  --success-green-bg:#DCFCE7;
  --success-green-text:#166534;
  --radius-page:24px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-btn:10px;
  --shadow-card:0 2px 8px rgba(15,30,60,0.06);
  --shadow-page:0 8px 32px rgba(15,30,60,0.08);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg-section);
  color:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}

.page{
  max-width:1040px;
  margin:32px auto;
  background:#fff;
  border-radius:var(--radius-page);
  box-shadow:var(--shadow-page);
}

.panel{
  max-width:400px;
  margin:32px auto;
  background:#fff;
  border-radius:var(--radius-page);
  box-shadow:var(--shadow-page);
  overflow:hidden;
  padding:32px 24px;
}

/* ---------- Nav ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  padding:0 32px;
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:800;
}
.logo svg{display:block}
.logo img{display:block;height:32px;width:auto}
.logo .apar{color:var(--navy-900)}
.logo .tell{color:var(--blue-accent)}

.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
}
.nav-links a{
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
}
.nav-links a:hover{color:var(--navy-900)}
.nav-links a.active{color:var(--navy-900);position:relative}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:var(--navy-900);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}
.currency{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  font-weight:500;
  color:var(--navy-900);
}

.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy-900);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 24px;
  border-radius:var(--radius-btn);
  font-size:15px;
  font-weight:600;
  transition:background .15s ease, filter .15s ease;
}
.btn-primary{
  background:var(--navy-900);
  color:#fff;
}
.btn-primary:hover{background:var(--navy-800)}
.btn-secondary{
  height:40px;
  padding:0 16px;
  background:var(--navy-900);
  color:#fff;
  font-size:14px;
}
.btn-secondary:hover{background:var(--navy-800)}
.btn-outline{
  height:40px;
  padding:0 16px;
  background:#fff;
  color:var(--navy-900);
  border:1px solid var(--border-light);
  font-size:14px;
  font-weight:500;
}
.btn-outline:hover{background:var(--bg-section)}
.btn-block{width:100%}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  margin:0 32px;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.hero img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.75) 38%, rgba(255,255,255,0) 62%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 0 0 16px;
}
.hero-text{max-width:420px}
.hero-text h1{
  font-size:40px;
  font-weight:800;
  line-height:1.15;
  color:var(--navy-900);
}
.hero-text p{
  margin-top:16px;
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.5;
}

.search-bar{
  position:relative;
  margin:-32px 32px 0;
  background:#fff;
  border-radius:var(--radius-btn);
  box-shadow:var(--shadow-page);
  display:flex;
  align-items:stretch;
  height:64px;
  z-index:2;
}
.search-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-right:1px solid var(--border-light);
  min-width:0;
}
.search-field:last-of-type{border-right:none}
.search-field .icon{color:var(--text-tertiary);flex-shrink:0}
.search-field .field-text{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.search-field .placeholder{
  font-size:14px;
  color:var(--text-tertiary);
}
.search-field .value{
  font-size:14px;
  color:var(--navy-900);
  font-weight:500;
}
.search-btn-wrap{padding:8px}
.search-btn-wrap .btn{height:100%}

.trust-bar{
  display:flex;
  justify-content:center;
  gap:48px;
  padding:32px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-secondary);
}
.trust-item .icon{color:var(--navy-900)}

/* ---------- Results page ---------- */
.results-body{padding:24px 32px 32px}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:var(--text-secondary);
  margin-bottom:16px;
}
.results-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
}
.results-header h1{font-size:28px;font-weight:800}
.results-header .count{font-size:14px;color:var(--text-secondary);margin-top:4px}
.filter-actions{display:flex;gap:12px}

.card-list{display:flex;flex-direction:column;gap:16px}
.result-card{
  display:flex;
  gap:16px;
  padding:16px;
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
}
.result-card .thumb{
  position:relative;
  width:160px;
  height:120px;
  border-radius:var(--radius-md);
  overflow:hidden;
  flex-shrink:0;
}
.result-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ribbon{
  position:absolute;
  top:8px;left:8px;
  background:var(--ribbon-navy-bg);
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
}
.result-card .info{flex:1;min-width:0}
.result-card .info h3{font-size:18px;font-weight:700}
.result-card .loc{
  display:flex;align-items:center;gap:4px;
  font-size:13px;color:var(--text-secondary);margin-top:6px;
}
.result-card .loc .icon{color:var(--blue-mid);width:14px;height:14px}
.result-card .rating{
  display:flex;align-items:center;gap:4px;
  font-size:13px;color:var(--navy-900);font-weight:600;margin-top:6px;
}
.result-card .rating .icon{color:var(--gold-star)}
.result-card .rating .count{color:var(--text-tertiary);font-weight:400}
.meta-row{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-top:12px;
}
.meta-row span{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-secondary);
}
.meta-row .icon{color:var(--text-secondary);width:15px;height:15px}
.result-card .price-block{
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:space-between;flex-shrink:0;text-align:right;
}
.price-block .from{font-size:12px;color:var(--text-tertiary)}
.price-block .amount{font-size:22px;font-weight:800;color:var(--navy-900)}
.price-block .per{font-size:12px;color:var(--text-tertiary)}

/* ---------- Detail page ---------- */
.detail-body{padding:24px 32px 32px}
.gallery{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:12px;
  margin-bottom:24px;
}
.gallery .main-img{border-radius:var(--radius-md);overflow:hidden;height:340px}
.gallery .main-img img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .sub-imgs{display:flex;flex-direction:column;gap:12px}
.gallery .sub-imgs .img-wrap{
  position:relative;border-radius:var(--radius-md);overflow:hidden;flex:1;
}
.gallery .sub-imgs img{width:100%;height:100%;object-fit:cover;display:block}
.more-overlay{
  position:absolute;bottom:8px;right:8px;
  background:rgba(11,30,63,0.75);
  color:#fff;font-size:13px;font-weight:600;
  padding:4px 10px;border-radius:6px;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:32px;
}
.detail-info h1{
  font-size:22px;font-weight:800;display:inline;
}
.badge-tan{
  display:inline-block;
  background:var(--badge-tan-bg);
  color:var(--badge-tan-text);
  font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:999px;
  margin-left:10px;vertical-align:middle;
}
.detail-info .loc{
  display:flex;align-items:center;gap:4px;
  font-size:13px;color:var(--text-secondary);margin-top:10px;
}
.detail-info .loc .icon{color:var(--blue-mid)}
.detail-info .rating{
  display:flex;align-items:center;gap:4px;
  font-size:13px;color:var(--navy-900);font-weight:600;margin-top:8px;
}
.detail-info .rating .icon{color:var(--gold-star)}
.detail-info .rating .count{color:var(--text-tertiary);font-weight:400}
.detail-info .desc{
  font-size:14px;color:var(--text-secondary);line-height:1.6;margin-top:16px;
}
.amenities{
  display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;
}
.amenities span{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-secondary);
}
.amenities .icon{color:var(--text-secondary)}

.booking-panel{
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
  padding:24px;
  height:fit-content;
  position:sticky;top:24px;
}
.booking-panel .from{font-size:12px;color:var(--text-tertiary)}
.booking-panel .amount{font-size:22px;font-weight:800;margin-bottom:20px}
.booking-panel .amount .per{font-size:13px;font-weight:400;color:var(--text-tertiary)}
.field-row{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--border-light);border-radius:var(--radius-btn);
  padding:12px 14px;margin-bottom:12px;
}
.field-row .label{font-size:12px;color:var(--text-tertiary);display:block}
.field-row .value{font-size:14px;color:var(--navy-900);font-weight:500}
.field-row .icon{color:var(--text-tertiary)}
.booking-panel .btn{width:100%;margin-top:8px}
.guarantee-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--text-tertiary);margin-top:14px;
}

/* ---------- Checkout & Confirmation (panel screens) ---------- */
.panel .logo{margin-bottom:24px}
.checkout-summary{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;
}
.checkout-summary img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.checkout-summary h4{font-size:14px;font-weight:700}
.checkout-summary .loc{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-secondary);margin-top:4px;
}
.checkout-summary .loc .icon{color:var(--blue-mid)}

.divider{border-top:1px solid var(--border-light);margin:16px 0}
.divider.heavy{border-top:1px solid #C7CCD6}

.date-row{display:flex;align-items:center;gap:12px}
.date-row .date{font-size:14px;font-weight:600}
.date-row .icon{color:var(--text-tertiary)}
.nights-caption{font-size:12px;color:var(--text-secondary);margin-top:4px}

.line-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:14px;margin-bottom:10px;
}
.line-row .label{color:var(--text-secondary)}
.line-row .value{color:var(--navy-900);font-weight:500}
.line-row .value.link{color:var(--blue-mid)}
.line-row.total{
  font-size:16px;font-weight:700;margin-top:4px;margin-bottom:0;
}

.secure-note, .guarantee-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--text-tertiary);margin-top:14px;
}

/* Confirmation */
.confirm-icon{
  display:flex;justify-content:center;margin:8px 0 24px;
}
.confirm-icon .circle{
  width:56px;height:56px;border-radius:50%;
  border:2px solid var(--blue-mid);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-mid);
}
.confirm-title{
  font-size:22px;font-weight:800;text-align:center;margin-bottom:12px;
}
.confirm-body{
  font-size:14px;color:var(--text-secondary);text-align:center;
  line-height:1.5;margin-bottom:24px;
}
.confirm-card{
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:16px;margin-bottom:16px;
}
.confirm-card .row{display:flex;gap:12px}
.confirm-card img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.confirm-card h4{font-size:14px;font-weight:700}
.confirm-card .meta{font-size:12px;color:var(--text-secondary);margin-top:4px}
.ref-block{text-align:center;margin-top:16px}
.ref-block .label{font-size:12px;color:var(--text-tertiary)}
.ref-block .value{font-size:14px;font-weight:700;letter-spacing:1px;margin-top:2px}
.back-home-link{
  display:block;text-align:center;font-size:14px;
  color:var(--navy-900);text-decoration:underline;margin-top:16px;
}

/* ---------- Date picker popover (interactive-only, no rest-state visual change) ---------- */
.search-field, .field-row, .mobile-field{position:relative}
.mobile-field input.field-input{
  border:none;outline:none;background:transparent;
  font-size:13px;color:var(--navy-900);width:100%;font-family:inherit;
}
.mobile-field input.field-input::placeholder{color:var(--text-tertiary)}
.search-field input.field-input{
  border:none;outline:none;background:transparent;
  font-size:14px;color:var(--navy-900);font-weight:500;
  width:100%;font-family:inherit;
}
.search-field input.field-input::placeholder{color:var(--text-tertiary);font-weight:400}
.search-field .field-label{font-size:11px;color:var(--text-tertiary)}
.search-field #city-field{cursor:pointer}
.location-popover{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:#fff;border-radius:12px;box-shadow:var(--shadow-page);
  padding:8px;z-index:20;
}
.location-popover .loc-item{
  padding:10px 12px;font-size:14px;color:var(--navy-900);font-weight:500;
  border-radius:8px;cursor:pointer;
}
.location-popover .loc-item:hover,
.location-popover .loc-item.selected{background:var(--bg-section)}
.search-field #guests-field,
.mobile-field#guests-field-m,
.search-field #city-field,
.mobile-field#city-field-m{cursor:pointer}
.guest-popover{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:#fff;border-radius:12px;box-shadow:var(--shadow-page);
  padding:16px;z-index:20;
}
.guest-popover .guest-row{display:flex;align-items:center;justify-content:space-between}
.guest-popover .guest-label{font-size:14px;color:var(--navy-900);font-weight:500}
.guest-popover .stepper{display:flex;align-items:center;gap:12px}
.guest-popover .stepper-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border-light);
  background:#fff;color:var(--navy-900);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.guest-popover .stepper-btn:hover{background:var(--bg-section)}
.guest-popover .stepper-btn:disabled{opacity:.4;cursor:default}
.guest-popover .stepper-count{min-width:20px;text-align:center;font-size:14px;font-weight:600;color:var(--navy-900)}
.date-popover{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;
  background:#fff;border:1px solid var(--border-light);
  border-radius:var(--radius-md);box-shadow:var(--shadow-page);
  padding:12px;width:240px;
}
#checkout-field-m .date-popover{left:auto;right:0}
.date-popover .cal-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;font-size:13px;font-weight:600;color:var(--navy-900);
}
.date-popover .cal-nav{cursor:pointer;color:var(--text-secondary);padding:2px 8px;user-select:none}
.date-popover .cal-nav:hover{color:var(--navy-900)}
.date-popover .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-popover .cal-dow{font-size:10px;color:var(--text-tertiary);text-align:center;padding:2px 0}
.date-popover .cal-day{
  font-size:12px;text-align:center;padding:6px 0;border-radius:6px;
  cursor:pointer;color:var(--navy-900);
}
.date-popover .cal-day:hover{background:var(--bg-section)}
.date-popover .cal-day.selected{background:var(--navy-900);color:#fff}
.date-popover .cal-day.disabled{color:var(--text-tertiary);cursor:default;pointer-events:none}

.field-hint{font-size:12px;color:var(--text-tertiary);margin-top:6px}
.field-error{font-size:12px;color:#B91C1C;margin-top:6px}
.empty-state{font-size:14px;color:var(--text-secondary);text-align:center;padding:32px 16px}

.btn-outline.pressed{background:var(--bg-section);border-color:var(--navy-900);color:var(--navy-900)}

/* ---------- Image placeholders (real assets not supplied yet) ---------- */
.img-ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-section);color:var(--text-tertiary);
  font-size:11px;text-align:center;padding:8px;
  border:1px dashed var(--border-light);box-sizing:border-box;
}

/* ---------- Popular Locations (ApartHotels page) ---------- */
.locations-section{padding:32px}
.locations-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.locations-header h2{font-size:18px;font-weight:700}
.locations-header .view-all{font-size:13px;color:var(--text-secondary)}
.location-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.location-card{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  aspect-ratio:4/3;
}
.location-card .img-ph{width:100%;height:100%}
.location-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,30,63,0.75), rgba(11,30,63,0) 55%);
}
.location-card .label{
  position:absolute;left:12px;bottom:10px;color:#fff;
}
.location-card .label .city{font-size:15px;font-weight:700}
.location-card .label .count{font-size:11px;opacity:.85;margin-top:2px}

/* ---------- Offers page ---------- */
.offers-hero{
  position:relative;margin:0 32px;border-radius:var(--radius-lg);overflow:hidden;
  min-height:340px;display:flex;align-items:center;
}
.offers-hero .img-ph{position:absolute;inset:0;height:100%}
.offers-hero-overlay{
  position:relative;z-index:1;padding:0 40px;max-width:460px;
  background:linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.2) 100%);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
}
.offers-hero-overlay h1{font-size:28px;font-weight:800;line-height:1.2}
.offers-hero-overlay p{margin-top:12px;font-size:14px;color:var(--text-secondary)}
.offers-hero-overlay .btn{margin-top:20px;align-self:flex-start}

.offers-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:32px;
}
.offer-card{
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:20px;
}
.offer-card .offer-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy-900)}
.offer-card .offer-caption{font-size:12px;color:var(--text-secondary);margin-top:10px}
.offer-card .offer-pct{font-size:28px;font-weight:800;color:var(--navy-900);margin-top:8px}
.offer-card .offer-fine{font-size:12px;color:var(--text-tertiary);margin-top:6px}

.trust-bar.divided{gap:0}
.trust-bar.divided .trust-item{padding:0 24px;border-right:1px solid var(--border-light)}
.trust-bar.divided .trust-item:last-child{border-right:none}

/* ---------- Generic left-text/right-photo page hero (About) ---------- */
.split-hero{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:420px;
}
.split-hero .text-col{padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.split-hero .text-col h1{font-size:28px;font-weight:800}
.split-hero .text-col p{font-size:14px;color:var(--text-secondary);margin-top:16px;line-height:1.6}
.split-hero .text-col .btn{margin-top:24px;align-self:flex-start}
.split-hero .photo-col{position:relative}
.split-hero .photo-col .img-ph{width:100%;height:100%}

.stats-bar{
  margin:0 32px 32px;padding:24px;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  display:flex;justify-content:space-around;
}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.stat-item .icon{color:var(--navy-900)}
.stat-item .number{font-size:22px;font-weight:800;color:var(--navy-900)}
.stat-item .label{font-size:12px;color:var(--text-secondary)}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:40px;
  padding:48px 40px;position:relative;overflow:hidden;
}
.contact-grid .bg-photo{position:absolute;inset:0;z-index:0}
.contact-grid .bg-photo .img-ph{width:100%;height:100%;opacity:.5}
.contact-info, .contact-form-wrap{position:relative;z-index:1}
.contact-info h1{font-size:28px;font-weight:800}
.contact-info > p{font-size:14px;color:var(--text-secondary);margin-top:12px;max-width:340px}
.contact-row{display:flex;gap:12px;margin-top:24px}
.contact-row .icon{color:var(--navy-900);flex-shrink:0;margin-top:2px}
.contact-row .c-label{font-size:13px;font-weight:700;color:var(--navy-900)}
.contact-row .c-value{font-size:13px;color:var(--text-secondary);margin-top:2px}
.contact-form-card{
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-page);
  padding:32px;max-width:460px;
}
.form-row{display:flex;gap:12px;margin-bottom:12px}
.form-field{
  flex:1;border:1px solid var(--border-light);border-radius:var(--radius-btn);
  padding:12px 14px;font-size:14px;font-family:inherit;color:var(--navy-900);
  outline:none;
}
.form-field::placeholder{color:var(--text-tertiary)}
.form-field:focus{border-color:var(--navy-900)}
textarea.form-field{width:100%;resize:vertical;min-height:110px;margin-bottom:16px;font-family:inherit}

/* ---------- Mobile frames ---------- */
.phone-wrap{display:flex;justify-content:center;padding:40px 0}
.phone{
  width:320px;height:660px;
  background:#000;border-radius:44px;
  padding:14px;box-shadow:var(--shadow-page);
}
.phone-screen{
  width:100%;height:100%;background:#fff;border-radius:32px;
  overflow:hidden;position:relative;display:flex;flex-direction:column;
}
.status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px 4px;font-size:14px;font-weight:600;color:#000;
}
.status-bar .icons{display:flex;gap:5px;align-items:center}
.notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:28px;background:#000;border-radius:0 0 16px 16px;
}
.mobile-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;
}
.mobile-nav .logo{font-size:16px}
.mobile-content{padding:0 20px;flex:1;overflow:hidden}
.mobile-content h1{font-size:26px;font-weight:800;line-height:1.2;margin-top:8px}
.mobile-content p{font-size:13px;color:var(--text-secondary);margin-top:10px;line-height:1.5}

.mobile-search-card{
  background:#fff;border:1px solid var(--border-light);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  padding:14px;margin-top:16px;position:relative;z-index:2;
}
.mobile-field{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border-light);border-radius:var(--radius-btn);
  padding:10px 12px;margin-bottom:8px;font-size:13px;
}
.mobile-field .icon{color:var(--text-tertiary)}
.mobile-field-row{display:flex;gap:8px}
.mobile-field-row .mobile-field{flex:1}
.mobile-search-card .btn{width:100%;height:44px;margin-top:4px}

.mobile-hero-photo{
  margin-top:-8px;border-radius:var(--radius-md);overflow:hidden;height:140px;
}
.mobile-hero-photo img{width:100%;height:100%;object-fit:cover}

.mobile-trust{
  display:flex;gap:20px;justify-content:center;
  padding:16px 20px;font-size:11px;color:var(--text-secondary);
  margin-top:auto;
}
.mobile-trust span{display:flex;align-items:center;gap:5px}

.mobile-bottom-tabs{
  display:flex;justify-content:space-around;
  border-top:1px solid var(--border-light);
  padding:10px 0 8px;
}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;color:var(--text-tertiary);
}
.tab-item.active{color:var(--navy-900);font-weight:600}

.tabs-row{display:flex;gap:24px;margin-top:16px;border-bottom:1px solid var(--border-light)}
.tab-link{
  font-size:14px;padding-bottom:10px;color:var(--text-tertiary);
  border-bottom:2px solid transparent;
}
.tab-link.active{color:var(--navy-900);font-weight:700;border-bottom-color:var(--navy-900)}

.mobile-booking-card{
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:14px;margin-top:16px;position:relative;
}
.mobile-booking-card .row{display:flex;gap:10px}
.mobile-booking-card img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.mobile-booking-card h4{font-size:13px;font-weight:700;max-width:88px}
.mobile-booking-card .meta{font-size:11px;color:var(--text-secondary);margin-top:3px}
.status-pill{
  position:absolute;top:14px;right:14px;
  background:var(--success-green-bg);color:var(--success-green-text);
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;
}
.ref-code{font-size:11px;color:var(--text-secondary);margin-top:10px}

/* ---------- Mobile: ApartHotels / Offers / About / Contact ---------- */
.mobile-content.scroll{overflow-y:auto}
.mobile-back-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary);margin-top:10px}
.mobile-content h1.mobile-h1{font-size:20px;font-weight:800;margin-top:8px}
.mobile-content .mobile-count{font-size:11px;color:var(--text-secondary);margin-top:2px}
.mobile-filter-row{display:flex;gap:8px;margin-top:10px}
.mobile-filter-row .btn-outline{flex:1;height:32px;padding:0 8px;font-size:11px;gap:5px}

.mobile-card-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mobile-result-card{border:1px solid var(--border-light);border-radius:var(--radius-md);padding:10px}
.mobile-result-card .row{display:flex;gap:10px}
.mobile-result-card .thumb{position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;flex-shrink:0}
.mobile-result-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mobile-result-card .ribbon{position:absolute;top:4px;left:4px;background:var(--ribbon-navy-bg);color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:999px}
.mobile-result-card .info{flex:1;min-width:0}
.mobile-result-card .info h3{font-size:13px;font-weight:700;line-height:1.3}
.mobile-result-card .loc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-top:4px}
.mobile-result-card .loc .icon{color:var(--blue-mid);width:11px;height:11px}
.mobile-result-card .rating{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--navy-900);font-weight:600;margin-top:4px}
.mobile-result-card .rating .icon{color:var(--gold-star);width:11px;height:11px}
.mobile-result-card .rating .count{color:var(--text-tertiary);font-weight:400}
.mobile-result-card .meta-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.mobile-result-card .meta-row span{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary)}
.mobile-result-card .meta-row .icon{width:11px;height:11px;color:var(--text-secondary)}
.mobile-result-card .price-row{display:flex;align-items:baseline;gap:4px;margin-top:8px}
.mobile-result-card .price-row .from{font-size:10px;color:var(--text-tertiary)}
.mobile-result-card .price-row .amount{font-size:16px;font-weight:800;color:var(--navy-900)}
.mobile-result-card .price-row .per{font-size:10px;color:var(--text-tertiary)}
.mobile-result-card .btn-secondary{width:100%;height:30px;font-size:11px;margin-top:6px}

.mobile-offer-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mobile-offer-card{border:1px solid var(--border-light);border-radius:var(--radius-md);padding:12px}
.mobile-offer-card .offer-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy-900)}
.mobile-offer-card .offer-caption{font-size:11px;color:var(--text-secondary);margin-top:6px}
.mobile-offer-card .offer-pct{font-size:22px;font-weight:800;color:var(--navy-900);margin-top:4px}
.mobile-offer-card .offer-fine{font-size:10px;color:var(--text-tertiary);margin-top:4px}
.mobile-content .btn-block{margin-top:12px}

.mobile-about-photo{margin-top:12px;border-radius:var(--radius-md);overflow:hidden;height:110px}
.mobile-about-photo img{width:100%;height:100%;object-fit:cover;display:block}

.mobile-contact-row{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.mobile-contact-row .icon{color:var(--navy-900);width:15px;height:15px;margin-top:2px;flex-shrink:0}
.mobile-contact-row .c-label{font-size:10px;color:var(--text-tertiary)}
.mobile-contact-row .c-value{font-size:12px;color:var(--navy-900);font-weight:600}
.mobile-form{margin-top:12px}
.mobile-form .form-field{width:100%;margin-bottom:8px;font-size:12px;height:36px}
.mobile-form textarea.form-field{min-height:60px}
.mobile-form .btn-block{height:40px;font-size:13px;margin-top:0}
.mobile-form #cf-error{font-size:11px}
.mobile-form #contact-success{font-size:12px;padding:16px 0}

.mobile-menu-list{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--border-light)}
.mobile-menu-row{display:flex;align-items:center;gap:10px;padding:14px 2px;border-bottom:1px solid var(--border-light);font-size:13px;font-weight:600;color:var(--navy-900)}
.mobile-menu-row .icon{color:var(--navy-900);width:16px;height:16px}
.mobile-menu-row .chevron{margin-left:auto;color:var(--text-tertiary)}
.mobile-booking-card .btn-outline{width:100%;margin-top:10px;height:36px;font-size:12px}

/* ---------- Mobile home: scrollable page + hero background ---------- */
.mobile-hero-wrap{position:relative;margin:0 -20px;padding:8px 20px 28px}
.mobile-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.mobile-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.mobile-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,63,.62) 0%,rgba(11,30,63,.32) 45%,rgba(255,255,255,0) 82%)}
.mobile-hero-wrap h1{position:relative;z-index:1;color:#fff;font-size:26px;font-weight:800;line-height:1.2;margin-top:8px}
.mobile-hero-wrap p{position:relative;z-index:1;color:rgba(255,255,255,.9);font-size:13px;margin-top:10px;line-height:1.5}
.mobile-hero-wrap .mobile-search-card{position:relative;z-index:1}
.mobile-content .mobile-trust{margin-top:20px;padding:0}

.mobile-popular{margin-top:24px}
.mobile-popular-head{display:flex;justify-content:space-between;align-items:baseline}
.mobile-popular-head h2{font-size:16px;font-weight:800;color:var(--navy-900)}
.mobile-popular-head .view-all{font-size:12px;color:var(--navy-900);font-weight:600}
.mobile-popular-scroll{display:flex;gap:12px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.mobile-popular-scroll::-webkit-scrollbar{display:none}
.mobile-popular-card{flex:0 0 150px;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}
.mobile-popular-card .thumb{height:100px}
.mobile-popular-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mobile-popular-card .info{padding:8px}
.mobile-popular-card h3{font-size:12px;font-weight:700;line-height:1.3}
.mobile-popular-card .loc{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--text-secondary);margin-top:4px}
.mobile-popular-card .loc .icon{width:10px;height:10px;color:var(--blue-mid)}
.mobile-popular-card .rating{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--navy-900);font-weight:600;margin-top:4px}
.mobile-popular-card .rating .icon{width:10px;height:10px;color:var(--gold-star)}
.mobile-popular-card .price{display:flex;align-items:baseline;gap:3px;margin-top:6px}
.mobile-popular-card .price .from{font-size:9px;color:var(--text-tertiary)}
.mobile-popular-card .price .amount{font-size:13px;font-weight:800;color:var(--navy-900)}
.mobile-popular-card .price .per{font-size:9px;color:var(--text-tertiary)}
.mobile-popular-card .btn-secondary{width:100%;height:26px;font-size:10px;margin-top:2px;border-radius:0}

.mobile-promo{margin-top:20px;margin-bottom:20px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:14px;display:flex;gap:12px;align-items:flex-start}
.mobile-promo .promo-icon{width:32px;height:32px;border-radius:50%;background:var(--bg-section);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-900)}
.mobile-promo .promo-text h4{font-size:13px;font-weight:700;color:var(--navy-900)}
.mobile-promo .promo-text p{font-size:11px;color:var(--text-secondary);margin-top:4px;line-height:1.4}
.mobile-promo .btn-secondary{margin-top:10px;height:30px;font-size:11px}

/* ---------- Mobile hamburger drawer menu ---------- */
.mobile-menu-overlay{position:absolute;inset:0;z-index:100;background:#fff;display:none}
.mobile-menu-overlay.open{display:flex;flex-direction:column}
.mobile-menu-scroll{flex:1;overflow-y:auto;padding:0 20px}
.menu-section-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);margin-top:18px;margin-bottom:2px}
.menu-section-label:first-child{margin-top:6px}
.mobile-menu-row .menu-value{margin-left:auto;font-size:12px;color:var(--text-secondary);font-weight:500}
.mini-toggle{position:relative;display:inline-block;width:34px;height:20px;margin-left:auto;flex-shrink:0}
.mini-toggle input{opacity:0;width:0;height:0;position:absolute}
.mini-toggle .track{position:absolute;inset:0;background:var(--border-light);border-radius:999px;transition:background .15s ease}
.mini-toggle .track::before{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s ease}
.mini-toggle input:checked + .track{background:var(--navy-900)}
.mini-toggle input:checked + .track::before{transform:translateX(14px)}
.mobile-menu-footer{text-align:center;font-size:11px;color:var(--text-tertiary);padding:14px 0;border-top:1px solid var(--border-light)}

/* ---------- Real device: strip the decorative phone frame ---------- */
/* On desktop the mobile pages preview inside a drawn phone mockup.
   On an actual phone-sized screen the app fills the real display instead. */
@media (max-width: 600px) {
  body:has(.phone-wrap){background:#fff}
  .phone-wrap{padding:0}
  .phone{
    width:100%;height:100dvh;
    background:#fff;border-radius:0;padding:0;box-shadow:none;
  }
  .phone-screen{border-radius:0}
  .notch{display:none}
  .status-bar{display:none}
  .phone-screen{padding-top:env(safe-area-inset-top)}
  .mobile-bottom-tabs{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* ---------- Mobile detail page ---------- */
.mobile-detail-photo{margin-top:12px;border-radius:var(--radius-md);overflow:hidden;height:170px}
.mobile-detail-loc{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);margin-top:6px}
.mobile-detail-loc .icon{color:var(--blue-mid)}
.mobile-detail-rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--navy-900);font-weight:600;margin-top:4px}
.mobile-detail-rating .icon{color:var(--gold-star)}
.mobile-detail-rating .count{color:var(--text-tertiary);font-weight:400}
.mobile-detail-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-top:8px}
.mobile-amenities{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mobile-amenities span{font-size:10px;color:var(--text-secondary);border:1px solid var(--border-light);border-radius:999px;padding:4px 10px}
.mobile-detail-price{display:flex;align-items:baseline;gap:5px;margin-top:12px}
.mobile-detail-price .from{font-size:11px;color:var(--text-tertiary)}
.mobile-detail-price .amount{font-size:20px;font-weight:800;color:var(--navy-900)}
.mobile-detail-price .per{font-size:11px;color:var(--text-tertiary)}
.mobile-detail-guarantee{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:var(--text-secondary);margin-top:10px;padding-bottom:14px}

/* Panel pages (checkout / confirmation) on a real phone */
@media (max-width: 600px) {
  .panel{margin:16px;border-radius:var(--radius-lg)}
}

/* ---------- Desktop home: Popular ApartHotels + promo + footer ---------- */
.popular-section{padding:32px}
.popular-section .locations-header{margin-bottom:16px}
.popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.popular-card{border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}
.popular-card .thumb{height:180px}
.popular-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.popular-card .body{padding:16px}
.popular-card h3{font-size:16px;font-weight:700}
.popular-card .loc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text-secondary);margin-top:8px}
.popular-card .loc .icon{color:var(--blue-mid);width:14px;height:14px}
.popular-card .rating{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--navy-900);font-weight:600;margin-top:6px}
.popular-card .rating .icon{color:var(--gold-star);width:14px;height:14px}
.popular-card .rating .count{color:var(--text-tertiary);font-weight:400}
.popular-card .price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.popular-card .price-row .amount-block .from{font-size:12px;color:var(--text-tertiary);display:block}
.popular-card .price-row .amount-block .amount{font-size:20px;font-weight:800;color:var(--navy-900)}
.popular-card .price-row .amount-block .per{font-size:12px;color:var(--text-tertiary)}

.promo-banner{
  margin:8px 32px 32px;padding:28px 32px;border-radius:var(--radius-md);
  background:var(--bg-section);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.promo-banner .promo-icon{
  width:44px;height:44px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);
}
.promo-banner .promo-copy{flex:1;display:flex;align-items:center;gap:16px}
.promo-banner h3{font-size:17px;font-weight:700;color:var(--navy-900)}
.promo-banner p{font-size:13px;color:var(--text-secondary);margin-top:2px}

.site-footer{border-top:1px solid var(--border-light);padding:40px 32px 24px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--text-secondary);line-height:1.6;max-width:260px}
.footer-col h4{font-size:13px;font-weight:700;color:var(--navy-900);margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:13px;color:var(--text-secondary)}
.footer-col a:hover{color:var(--navy-900)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:32px;padding-top:20px;border-top:1px solid var(--border-light);
  font-size:12px;color:var(--text-tertiary);
}
.footer-socials{display:flex;gap:12px}
.footer-socials a{color:var(--text-tertiary);display:flex}
.footer-socials a:hover{color:var(--navy-900)}

/* ---------- Full-bleed desktop layout ----------
   The .page card look was a mockup-preview frame. On desktop-sized
   viewports the site fills the browser edge-to-edge like a real website:
   full-width nav/hero/footer, content centered to a max width inside. */
@media (min-width: 700px){
  .page{
    max-width:none;
    margin:0;
    border-radius:0;
    box-shadow:none;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .page > *{
    width:100%;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  .page > .nav{
    max-width:none;
    position:sticky;
    top:0;
    background:#fff;
    z-index:50;
    border-bottom:1px solid var(--border-light);
    padding:0 max(32px, calc((100vw - 1180px)/2));
  }
  .page > .hero{
    max-width:none;
    margin:0;
    border-radius:0;
  }
  .page > .hero img{height:480px !important}
  .page > .hero .hero-overlay{
    padding:0 0 0 max(48px, calc((100vw - 1116px)/2));
  }
  .page > .search-bar{
    max-width:1116px;
    margin-left:auto;
    margin-right:auto;
  }
  .page > .promo-banner{
    max-width:1116px;
    margin-left:auto;
    margin-right:auto;
  }
  .page > .site-footer{
    max-width:none;
    margin-top:auto;
    background:var(--bg-section);
    border-top:1px solid var(--border-light);
    padding:48px max(32px, calc((100vw - 1180px)/2)) 24px;
  }
}

/* ---------- Mobile property detail (appartel iphone mockup) ---------- */
.pd .status-bar{
  position:absolute;top:0;left:0;right:0;z-index:6;color:#fff;
}
.pd-scroll{padding:0}

.pd-hero{position:relative;height:260px}
.pd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd-circle{
  width:36px;height:36px;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-900);box-shadow:0 2px 8px rgba(15,30,60,0.18);
  border:none;cursor:pointer;flex:0 0 auto;
}
.pd-back{position:absolute;top:44px;left:14px}
.pd-hero-actions{position:absolute;top:44px;right:14px;display:flex;gap:10px}
.pd-counter{
  position:absolute;right:14px;bottom:36px;
  background:rgba(11,30,63,0.6);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:0.5px;
  padding:5px 12px;border-radius:999px;
}

.pd-sheet{
  position:relative;margin-top:-24px;background:#fff;
  border-radius:28px 28px 0 0;padding:22px 20px 14px;
}
.pd-brand{display:flex;align-items:center;gap:12px}
.pd-brand img{width:34px;height:34px;border-radius:9px;display:block}
.pd-brand span{
  font-size:12px;font-weight:700;letter-spacing:3px;color:var(--navy-900);
}
.pd-h1{font-size:24px;font-weight:800;line-height:1.2;margin-top:12px;color:var(--navy-900)}
.pd-loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);margin-top:8px}
.pd-loc .icon{color:var(--text-secondary)}
.pd-rating{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:8px}
.pd-rating .icon{color:var(--gold-star)}
.pd-rating .score{font-weight:700;color:var(--navy-900)}
.pd-rating .count{color:var(--text-secondary)}
.pd-rating .badge-tan{margin-left:4px}

.pd-amenities{
  display:flex;justify-content:space-between;
  border:1px solid var(--border-light);border-radius:16px;
  padding:14px 10px;margin-top:16px;
}
.pd-amenities .am{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  flex:1;color:var(--navy-900);
}
.pd-amenities .am span{
  font-size:9px;color:var(--text-secondary);text-align:center;line-height:1.2;
}

.pd-desc{
  font-size:13px;line-height:1.6;color:var(--text-secondary);margin-top:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pd-desc.expanded{display:block;-webkit-line-clamp:unset}
.pd-readmore{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:600;color:var(--navy-900);
  margin-top:8px;padding:0;
}
.pd-readmore svg{transition:transform 150ms ease}
.pd-readmore.open svg{transform:rotate(180deg)}

.pd-price-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:16px;gap:12px;
}
.pd-price .from{display:block;font-size:11px;color:var(--text-secondary)}
.pd-price .amount{font-size:28px;font-weight:800;color:var(--navy-900);line-height:1.1}
.pd-price .per{display:block;font-size:12px;color:var(--text-secondary)}
.pd-viewdates{height:44px;padding:0 18px;border-radius:12px;font-size:14px}

.pd-thumbs-wrap{position:relative;margin-top:16px}
.pd-thumbs{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;
}
.pd-thumbs::-webkit-scrollbar{display:none}
.pd-thumbs img{
  width:96px;height:72px;object-fit:cover;border-radius:14px;
  flex:0 0 auto;cursor:pointer;border:2px solid transparent;
}
.pd-thumbs img.active{border-color:var(--navy-900)}
.pd-thumbs-next{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;
}

.pd-book-card{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-section);border-radius:16px;
  padding:12px 14px;margin-top:16px;
}
.pd-field{position:relative;flex:1;cursor:pointer}
.pd-field .lbl{display:block;font-size:11px;color:var(--text-secondary)}
.pd-field .val{display:block;font-size:13px;font-weight:700;color:var(--navy-900);margin-top:2px;white-space:nowrap}
.pd-adults{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--border-light);border-radius:12px;
  padding:10px 12px;font-size:13px;font-weight:600;color:var(--navy-900);
  flex:0 0 auto;
}

.pd-bottom{
  border-top:1px solid var(--border-light);background:#fff;
  padding:10px 20px 12px;
}
.pd-bottom-main{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pd-total .lbl{display:block;font-size:11px;color:var(--text-secondary)}
.pd-total .row{display:flex;align-items:baseline;gap:6px}
.pd-total .amount{font-size:24px;font-weight:800;color:var(--navy-900)}
.pd-total .for{font-size:12px;color:var(--text-secondary)}
.pd-booknow{height:46px;padding:0 30px;border-radius:12px;font-size:15px;flex:1;max-width:200px}
.pd-cancel{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:11px;color:var(--text-secondary);margin-top:7px;
}
#book-validation .field-error{margin-top:8px}

@media (max-width: 600px){
  .phone-screen.pd{padding-top:0}
  .pd-hero{height:44dvh}
  .pd-back{top:calc(12px + env(safe-area-inset-top))}
  .pd-hero-actions{top:calc(12px + env(safe-area-inset-top))}
  .pd-bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- Mobile home (full-screen hero mockup) ---------- */
.mh-scroll{padding:0}
.mh-hero{
  position:relative;
  min-height:100%;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.mh-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;z-index:0;
}
.mh-hero > *:not(.mh-bg){position:relative;z-index:1}
.mh-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 0;
}
.mh-copy{padding:34px 20px 0}
.mh-copy h1{
  font-size:33px;font-weight:800;line-height:1.18;color:var(--navy-900);
  margin:0;
}
.mh-copy p{
  font-size:16px;line-height:1.55;color:rgba(11,30,63,0.78);
  margin-top:14px;max-width:300px;
}
.mh-card{
  background:#fff;border-radius:24px;
  box-shadow:0 10px 30px rgba(15,30,60,0.18);
  padding:14px;margin:26px 16px 0;
}
.mh-field{
  position:relative;display:flex;align-items:center;gap:11px;
  background:var(--bg-section);border-radius:14px;
  padding:14px;cursor:pointer;
}
.mh-field .icon{color:var(--navy-900);flex:0 0 auto}
.mh-field .chev{color:var(--navy-900);margin-left:auto}
.mh-field .val{font-size:15px;font-weight:700;color:var(--navy-900)}
.mh-field .placeholder{font-size:15px;color:var(--text-secondary)}
.mh-field-loc{padding:12px 14px}
.mh-field-text{display:flex;flex-direction:column;gap:1px}
.mh-field-text .lbl{font-size:12px;color:var(--text-secondary)}
.mh-field-text .val{font-size:16px}
.mh-field-row{display:flex;gap:10px;margin-top:10px}
.mh-field-row .mh-field{flex:1}
.mh-field-row + .mh-field{margin-top:10px}
.mh-search{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--navy-900);color:#fff;
  height:54px;border-radius:14px;margin-top:12px;
  font-size:16px;font-weight:700;
}
.mh-search svg{position:absolute;right:34px}
.mh-search{position:relative}
.mh-trust{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:#F7F5F2;border-top:1px solid var(--border-light);
  padding:16px 12px;
}
.mh-trust span{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;color:var(--navy-900);
}
.mh-trust span svg{color:var(--navy-900)}
.mh-trust-div{width:1px;align-self:stretch;background:var(--border-light)}
@media (max-width: 600px){
  .mh-trust{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* mh refinements */
.mh-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:48%;z-index:1;
  background:linear-gradient(180deg,#EFE8DF 0%,rgba(239,232,223,0.92) 52%,rgba(239,232,223,0) 100%);
}
.mh-bg{z-index:0}
.mh-hero > *:not(.mh-bg){position:relative;z-index:2}
.mh-field .placeholder,.mh-field .val{white-space:nowrap}
/* tighter sizing inside the desktop phone-frame preview only */
@media (min-width: 601px){
  .mh-copy{padding-top:20px}
  .mh-copy h1{font-size:27px}
  .mh-copy p{font-size:13px;margin-top:9px;max-width:250px}
  .mh-card{margin-top:16px;padding:11px}
  .mh-field{padding:11px}
  .mh-field-loc{padding:9px 11px}
  .mh-field-text .val{font-size:14px}
  .mh-field .placeholder,.mh-field .val{font-size:13px}
  .mh-search{height:46px;font-size:14px;margin-top:10px}
  .mh-trust{padding:12px 10px;gap:12px}
  .mh-trust span{font-size:11px;gap:6px}
  .mh-nav .logo img{height:28px !important}
}

/* ---------- Desktop home full-viewport hero ---------- */
.dh-hero{
  position:relative;height:100vh;min-height:660px;
  display:flex;flex-direction:column;overflow:hidden;
}
.dh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dh-hero > *:not(.dh-bg){position:relative;z-index:1}
.dh-hero .nav{border-bottom:none;background:transparent}
.dh-copy{padding-top:64px}
.dh-copy h1{font-size:54px;font-weight:800;line-height:1.14;color:var(--navy-900)}
.dh-copy p{font-size:20px;line-height:1.6;color:rgba(11,30,63,0.75);margin-top:24px}
.dh-hero .search-bar{
  margin-top:auto;margin-bottom:80px;
  background:#fff;border-radius:16px;
  box-shadow:0 16px 44px rgba(15,30,60,0.18);
  padding:12px;height:auto;display:flex;gap:12px;align-items:stretch;
}
.dh-hero .search-field{
  border:1px solid var(--border-light);border-right:1px solid var(--border-light);
  border-radius:12px;height:64px;padding:0 16px;
}
.dh-hero .search-field .icon{color:var(--navy-900)}
.dh-hero .search-btn-wrap{padding:0}
.dh-hero .search-btn-wrap .btn{height:64px;border-radius:12px;padding:0 40px;font-size:16px}

@media (min-width: 700px){
  .page > .dh-hero{max-width:none}
  .dh-hero .nav{
    position:static;
    padding:0 max(32px, calc((100vw - 1180px)/2));
  }
  .dh-copy{
    padding-left:max(48px, calc((100vw - 1116px)/2));
    padding-right:48px;
  }
  .dh-hero .search-bar{
    width:min(1116px, calc(100% - 64px));
    margin-left:auto;margin-right:auto;
  }
  .trust-bar{gap:64px;padding:36px 32px}
}

/* dh: light veil behind headline for legibility over the wall logo */
.dh-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(244,239,232,0.96) 0%, rgba(244,239,232,0.78) 30%, rgba(244,239,232,0) 58%);
}
.dh-hero > *:not(.dh-bg){z-index:2}