/* ============================================================
   STAYLUXE — Inner Pages + Dashboards Stylesheet
   Loads AFTER style.css on every inner page.
   ============================================================ */

/* ============ PAGE HERO / BREADCRUMB ============ */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--grad-royal); color: #fff;
  padding: 84px 0 64px;
}
.page-hero::before {
  content: ''; position: absolute; inset: -4%; opacity: .22;
  background-image: url('../images/banner/banner-1.jpg');
  background-size: cover; background-position: center;
  animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.16) translateX(-3%); }
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(20,15,60,.9), rgba(109,40,217,.55));
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); margin: 0; }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: rgba(255,255,255,.75); font-size: .86rem; font-weight: 600; }
.page-hero .breadcrumb-item.active { color: #fbbf24; }
.page-hero .hero-chip {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); border-radius: 50px; padding: .45rem 1.2rem;
  font-size: .8rem; font-weight: 700; display: inline-flex; gap: .5rem; align-items: center;
}

/* ============ SEARCH RESULTS ============ */
.filters-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; position: sticky; top: 100px;
}
.filters-card .f-head {
  background: var(--grad-primary); color: #fff; padding: 1rem 1.3rem;
  display: flex; justify-content: space-between; align-items: center;
}
.filters-card .f-head b { font-size: 1rem; }
.filters-card .f-head a { color: #fbd7ff; font-size: .78rem; font-weight: 700; }
.f-group { padding: 1.1rem 1.3rem; border-bottom: 1px dashed var(--border-soft); }
.f-group:last-child { border-bottom: none; }
.f-group h6 { font-family: var(--font-body); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); margin: -1.1rem -1.3rem 1rem; display: flex; align-items: center; gap: .5rem; background: linear-gradient(90deg, rgba(109,40,217,.14), rgba(236,72,153,.07)); padding: .7rem 1.3rem; border-radius: 0; border-bottom: 1px solid rgba(109,40,217,.16); }
.f-group h6 i { color: var(--primary); }
[data-bs-theme="dark"] .f-group h6 { color: #c4b5fd; background: linear-gradient(90deg, rgba(139,92,246,.22), rgba(236,72,153,.11)); }
.form-check { margin-bottom: .5rem; }
.form-check-label { font-size: .88rem; color: var(--text-muted); font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; width: 100%; }
.form-check-label .cnt { font-size: .72rem; background: var(--bg-soft); border-radius: 50px; padding: .1rem .5rem; }
.form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-range::-webkit-slider-thumb { background: var(--grad-primary); }
.price-vals { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--primary); }
.star-filter .btn {
  border: 1.5px solid var(--border-soft); color: var(--text-muted); border-radius: 10px;
  font-size: .8rem; font-weight: 700; padding: .35rem .7rem;
}
.star-filter .btn.active, .star-filter .btn:hover { background: var(--grad-gold); color: #4a2c00; border-color: transparent; }

/* results toolbar */
.results-bar {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: .8rem 1.2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
}
.view-toggle .btn {
  border: 1.5px solid var(--border-soft); color: var(--text-muted); width: 40px; height: 40px;
  border-radius: 10px !important; display: inline-grid; place-items: center; margin-left: .35rem;
}
.view-toggle .btn.active { background: var(--grad-primary); color: #fff; border-color: transparent; }
.sort-select { border: 1.5px solid var(--border-soft); border-radius: 10px; font-weight: 600; font-size: .88rem; color: var(--text-main); background-color: var(--bg-card); padding: .5rem 2.2rem .5rem 1rem; }

/* list-view hotel card */
.hotel-row { display: flex; flex-direction: column; }
@media (min-width: 768px) { .hotel-row { flex-direction: row; } .hotel-row .hr-img { width: 320px; flex-shrink: 0; } }
.hotel-row .hr-img { position: relative; overflow: hidden; }
.hotel-row .hr-img img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform .7s ease; }
.hotel-row:hover .hr-img img { transform: scale(1.08); }
.hotel-row .hr-body { flex: 1; padding: 1.4rem; display: flex; flex-direction: column; }
.hotel-row .hr-price {
  border-left: 1px dashed var(--border-soft); padding: 1.4rem; min-width: 200px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;
}
@media (max-width: 767px) { .hotel-row .hr-price { border-left: none; border-top: 1px dashed var(--border-soft); align-items: flex-start; text-align: left; } }
.coupon-strip {
  background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(251,113,133,.12));
  border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent);
  font-size: .74rem; font-weight: 800; padding: .35rem .8rem; display: inline-flex; align-items: center; gap: .45rem;
}
[data-bs-theme="dark"] .coupon-strip { color: #fbbf24; }
.map-view-box {
  border-radius: var(--radius-lg); overflow: hidden; min-height: 480px;
  background: var(--grad-ocean); position: relative; box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: #fff;
}
.map-pin { position: absolute; background: #fff; color: var(--ink); font-weight: 800; font-size: .8rem; padding: .35rem .8rem; border-radius: 50px; box-shadow: var(--shadow-md); }
.map-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* pagination */
.lux-pagination .page-link {
  border: 1.5px solid var(--border-soft); color: var(--text-main); font-weight: 700;
  border-radius: 12px !important; margin: 0 .25rem; min-width: 44px; text-align: center;
  background: var(--bg-card); padding: .6rem .5rem;
}
.lux-pagination .page-item.active .page-link { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); }
.lux-pagination .page-link:hover { border-color: var(--primary); color: var(--primary); }

/* ============ HOTEL DETAILS ============ */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 10px; border-radius: var(--radius-lg); overflow: hidden; }
.gal-grid a { position: relative; overflow: hidden; display: block; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gal-grid a:hover img { transform: scale(1.08); }
.gal-grid .g-main { grid-column: span 2; grid-row: span 2; }
.gal-grid .g-more { position: absolute; inset: 0; background: rgba(15,10,45,.62); color: #fff; display: grid; place-items: center; font-weight: 800; backdrop-filter: blur(2px); }
@media (max-width: 767px) { .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; } .gal-grid .g-main { grid-column: span 2; } }

/* Sticks flush under .main-header — --header-h is measured in main.js;
   the 63px fallback is the header's natural height if JS hasn't run yet. */
.detail-tabs { position: sticky; top: calc(var(--header-h, 63px) + var(--hero-h, 0px)); z-index: 100; background: var(--bg-body); padding: .6rem 0; border-bottom: 1px solid var(--border-soft); }
.detail-tabs .nav-pills .nav-link { color: var(--text-muted); font-weight: 700; font-size: .88rem; border-radius: 50px; padding: .55rem 1.3rem; }
.detail-tabs .nav-pills .nav-link.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
/* Keep the sticky tabs on ONE horizontal row (icon inline, scroll instead of wrap) */
.detail-tabs .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-tabs .nav-pills::-webkit-scrollbar { display: none; }
.detail-tabs .nav-item { flex: 0 0 auto; }
.detail-tabs .nav-pills .nav-link { display: inline-flex; align-items: center; white-space: nowrap; }

.amenity-tile { display: flex; align-items: center; gap: .8rem; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: .85rem 1rem; font-size: .88rem; font-weight: 600; color: var(--text-main); height: 100%; transition: all .3s ease; }
.amenity-tile:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.amenity-tile i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-soft); color: var(--primary); font-size: 1.05rem; flex-shrink: 0; }

/* room cards on details page */
.room-card { display: flex; flex-direction: column; }
@media (min-width: 992px) { .room-card { flex-direction: row; } .room-card .rc-img { width: 300px; flex-shrink: 0; } }
.room-card .rc-img { position: relative; overflow: hidden; }
.room-card .rc-img img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; transition: transform .6s ease; }
.room-card:hover .rc-img img { transform: scale(1.07); }
.rc-feats { display: flex; flex-wrap: wrap; gap: .45rem; }
.rc-feats span { font-size: .74rem; font-weight: 600; background: var(--bg-soft); color: var(--text-muted); border-radius: 50px; padding: .3rem .8rem; }
.rc-feats span i { color: var(--teal); margin-right: .25rem; }
.rc-policy { font-size: .8rem; color: #059669; font-weight: 700; }
[data-bs-theme="dark"] .rc-policy { color: #34d399; }

/* sticky booking panel */
.book-panel { position: sticky; top: 104px; }
.book-panel .bp-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.bp-head { background: var(--grad-primary); color: #fff; padding: 1.2rem 1.4rem; }
.bp-head .price-now { color: #fff; }
.bp-body { padding: 1.4rem; }
.fee-row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-muted); padding: .4rem 0; }
.fee-row.fee-sub { padding: .15rem 0 .15rem 1rem; font-size: .82rem; opacity: .85; }
.fee-row.fee-sub b { font-weight: 600; }
.fee-row.total { border-top: 1px dashed var(--border-soft); margin-top: .5rem; padding-top: .8rem; font-weight: 800; color: var(--text-main); font-size: 1.05rem; }

/* reviews */
.rating-big { font-size: 3.4rem; font-weight: 800; font-family: var(--font-heading); background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.rate-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .55rem; font-size: .82rem; }
.rate-bar .lbl { width: 90px; color: var(--text-muted); font-weight: 600; }
.rate-bar .track { flex: 1; height: 8px; background: var(--bg-soft); border-radius: 10px; overflow: hidden; }
.rate-bar .fill { height: 100%; background: var(--grad-primary); border-radius: 10px; }
.review-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.review-card .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.review-card .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============ BOOKING WIZARD ============ */
.wizard-steps { display: flex; justify-content: space-between; position: relative; max-width: 900px; margin: 0 auto; }
.wizard-steps::before { content: ''; position: absolute; top: 26px; left: 6%; right: 6%; height: 3px; background: var(--border-soft); z-index: 0; }
.wizard-steps .progress-line { position: absolute; top: 26px; left: 6%; height: 3px; background: var(--grad-primary); z-index: 1; transition: width .5s ease; }
.w-step { position: relative; z-index: 2; text-align: center; flex: 1; }
.w-step .dot {
  width: 52px; height: 52px; margin: 0 auto .5rem; border-radius: 50%;
  background: var(--bg-card); border: 2.5px solid var(--border-soft); color: var(--text-muted);
  display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; transition: all .4s ease;
}
.w-step span { font-size: .74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.w-step.active .dot { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); transform: scale(1.12); }
.w-step.active span { color: var(--primary); }
.w-step.done .dot { background: var(--grad-ocean); border-color: transparent; color: #fff; }
.w-step.clickable { cursor: pointer; }
.w-step.clickable .dot { transition: transform .25s ease, box-shadow .25s ease; }
.w-step.clickable:hover .dot { transform: scale(1.12); box-shadow: 0 6px 18px rgba(2,132,199,.35); }
.w-step.clickable:hover span { color: var(--primary); }
@media (max-width: 575px) { .w-step span { display: none; } .w-step .dot { width: 42px; height: 42px; } .wizard-steps::before, .wizard-steps .progress-line { top: 21px; } }

.wiz-pane { display: none; animation: wizIn .5s ease; }
.wiz-pane.active { display: block; }
@keyframes wizIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.select-room-opt { border: 2px solid var(--border-soft); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all .3s ease; background: var(--bg-card); }
.select-room-opt:hover { border-color: #86efac; }
.select-room-opt.selected { border-color: #22c55e; background: rgba(34,197,94,.06); box-shadow: 0 12px 28px -12px rgba(34,197,94,.55); }
.room-select-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .55rem; padding: .5rem 1rem; border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font-weight: 800; font-size: .82rem; border-radius: 11px; cursor: pointer; transition: all .25s ease; white-space: nowrap; }
.room-select-btn:hover { background: var(--primary); color: #fff; }
.room-select-btn .rsb-done { display: none; }
.select-room-opt.selected .room-select-btn { border-color: transparent; background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; box-shadow: 0 8px 20px -8px rgba(34,197,94,.6); }
.select-room-opt.selected .room-select-btn .rsb-pick { display: none; }
.select-room-opt.selected .room-select-btn .rsb-done { display: inline-flex; align-items: center; gap: .4rem; }

/* floating label inputs */
.float-input { position: relative; }
.float-input input, .float-input select, .float-input textarea {
  border: 2px solid var(--border-soft); border-radius: 14px; background: var(--bg-card); color: var(--text-main);
  padding: 1.35rem 1.1rem .55rem; width: 100%; font-weight: 600; font-size: .95rem; transition: border .3s ease;
}
.float-input label {
  position: absolute; left: 1.1rem; top: .95rem; color: var(--text-muted); font-size: .92rem; font-weight: 600;
  pointer-events: none; transition: all .25s ease;
}
.float-input input:focus, .float-input select:focus, .float-input textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(109,40,217,.1); }
.float-input input:focus + label, .float-input input:not(:placeholder-shown) + label,
.float-input textarea:focus + label, .float-input textarea:not(:placeholder-shown) + label,
.float-input select:focus + label, .float-input.filled label {
  top: .42rem; font-size: .68rem; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 800;
}

/* coupon apply */
.coupon-box { display: flex; gap: .6rem; }
.coupon-box input { flex: 1; border: 2px dashed var(--accent); border-radius: 12px; padding: .8rem 1rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; background: var(--bg-card); color: var(--text-main); }
.coupon-box input:focus { outline: none; border-style: solid; }
.coupon-pick { border: 1.5px dashed var(--border-soft); border-radius: 14px; padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; cursor: pointer; transition: all .3s ease; background: var(--bg-card); }
.coupon-pick:hover { border-color: var(--accent); background: var(--bg-soft); }
.coupon-pick .code { font-weight: 800; letter-spacing: 1.5px; color: var(--primary); }

/* payment methods */
.pay-method { border: 2px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: all .3s ease; background: var(--bg-card); }
.pay-method:hover { border-color: var(--primary-2); }
.pay-method.selected { border-color: var(--primary); background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.pay-method .pm-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; }
.pay-method b { font-size: .95rem; }
.pay-method small { color: var(--text-muted); }

/* success / failure animation */
.result-anim { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 1.6rem; display: grid; place-items: center; position: relative; }
.result-anim.success { background: linear-gradient(135deg, #10b981, #14b8a6); box-shadow: 0 20px 50px rgba(16,185,129,.4); animation: popIn .6s cubic-bezier(.2,1.4,.4,1); }
.result-anim.failure { background: linear-gradient(135deg, #ef4444, #f43f5e); box-shadow: 0 20px 50px rgba(239,68,68,.4); animation: shakeX .7s ease; }
.result-anim i { font-size: 3.6rem; color: #fff; }
.result-anim::before, .result-anim::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: .35; animation: pulseRing 2s ease-out infinite; color: #10b981; }
.result-anim.failure::before, .result-anim.failure::after { color: #ef4444; }
.result-anim::after { animation-delay: 1s; }
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes shakeX { 0%,100% { transform: translateX(0) } 20%,60% { transform: translateX(-12px) } 40%,80% { transform: translateX(12px) } }
.confetti { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: confettiFall 3.2s linear infinite; opacity: .85; }
@keyframes confettiFall { 0% { transform: translateY(-10vh) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }

.booking-id-chip { background: var(--bg-soft); border: 1.5px dashed var(--primary); border-radius: 14px; padding: .8rem 1.6rem; font-weight: 800; letter-spacing: 2px; color: var(--primary); display: inline-flex; align-items: center; gap: .7rem; font-size: 1.05rem; }

/* ============ AUTH PAGES ============ */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-side {
  flex: 1; background: var(--grad-royal); color: #fff; position: relative; overflow: hidden;
  display: none; flex-direction: column; justify-content: space-between; padding: 3rem;
}
@media (min-width: 992px) { .auth-side { display: flex; } }
.auth-side::before { content: ''; position: absolute; inset: 0; background-image: url('../images/banner/banner-2.jpg'); background-size: cover; background-position: center; opacity: .3; }
.auth-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,15,60,.85), rgba(109,40,217,.55)); }
.auth-side > * { position: relative; z-index: 2; }
.auth-quote { font-family: var(--font-heading); font-size: 1.7rem; font-style: italic; line-height: 1.5; }
.auth-form-col { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.3rem; background: var(--bg-body); }
.auth-card { width: 100%; max-width: 460px; }
.auth-card .lux-card { padding: 2.4rem; overflow: visible; }
.social-btn {
  flex: 1; border: 1.5px solid var(--border-soft); border-radius: 14px; padding: .7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .88rem; color: var(--text-main); background: var(--bg-card); transition: all .3s ease;
}
.social-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--primary); color: var(--primary); }
.divider-text { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 1.4rem 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.otp-inputs { display: flex; gap: .7rem; justify-content: center; }
.otp-inputs input {
  width: 56px; height: 60px; text-align: center; font-size: 1.5rem; font-weight: 800;
  border: 2px solid var(--border-soft); border-radius: 14px; background: var(--bg-card); color: var(--text-main);
}
.otp-inputs input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(109,40,217,.12); }

/* ============ DASHBOARD LAYOUT ============ */
.dash-body { background: var(--bg-body); min-height: 100vh; }
.dash-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 268px; z-index: 1040;
  background: linear-gradient(180deg, #16132e 0%, #1e1b4b 100%);
  color: #fff; display: flex; flex-direction: column; transition: transform .35s ease;
}
.dash-sidebar .ds-brand { padding: 1.4rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.dash-sidebar .ds-nav { flex: 1; overflow-y: auto; padding: 1.1rem .9rem; }
.dash-sidebar .ds-nav::-webkit-scrollbar { width: 5px; }
.ds-label { font-size: .66rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 800; margin: 1.1rem .7rem .5rem; }
.ds-link {
  display: flex; align-items: center; gap: .85rem; color: rgba(255,255,255,.72);
  padding: .72rem 1rem; border-radius: 13px; font-size: .9rem; font-weight: 600; margin-bottom: .2rem;
  transition: all .3s ease; position: relative;
}
.ds-link i { font-size: 1.08rem; width: 22px; text-align: center; }
.ds-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.ds-link.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
.ds-link .badge-dot { margin-left: auto; background: var(--grad-sunset); font-size: .62rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; border: none; position: static; }
.ds-user { padding: 1.1rem 1.4rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .8rem; }
.ds-user img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.ds-user b { font-size: .88rem; display: block; }
.ds-user small { color: rgba(255,255,255,.5); font-size: .72rem; }

/* role heading in sidebar (Customer / Agent) */
/* role strip — full-width band directly under the logo, stays fixed with the brand (not inside the scrolling nav) */
.ds-role { margin: 0; padding: .7rem 1.5rem; border-radius: 0; border: none; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 800; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.ds-role i { font-size: .95rem; }
.ds-role.cust { background: linear-gradient(90deg, rgba(147,51,234,.32), rgba(147,51,234,.14)); color: #e9d5ff; }
.ds-role.agent { background: linear-gradient(90deg, rgba(245,158,11,.3), rgba(245,158,11,.12)); color: #fde68a; }

/* AGENT sidebar = gold/amber theme (distinct from customer purple) */
.dash-sidebar.sidebar-agent { background: linear-gradient(180deg, #2b1a05 0%, #3f2a0a 100%); }
.sidebar-agent .ds-link.active { background: var(--grad-gold); color: #4a2c00; box-shadow: 0 8px 24px rgba(245,158,11,.4); }
.sidebar-agent .ds-link .badge-dot { background: var(--grad-gold); color: #4a2c00; }
.sidebar-agent .ds-label { color: rgba(251,191,36,.55); }

/* colourful action buttons in dashboard tables */
.act-btns { display: inline-flex; gap: .4rem; }
.act-btn { width: 34px; height: 34px; border-radius: 10px; border: none; display: inline-grid; place-items: center; font-size: .95rem; color: #fff; transition: all .25s ease; }
.act-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); filter: brightness(1.08); }
.act-view { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.act-edit { background: linear-gradient(135deg,#fbbf24,#d97706); }
.act-delete { background: linear-gradient(135deg,#fb7185,#e11d48); }
.act-print { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.act-invoice { background: linear-gradient(135deg,#34d399,#059669); }
.act-cancel { background: linear-gradient(135deg,#94a3b8,#475569); }

.dash-main { margin-left: 268px; padding: 1.6rem 2rem 3rem; transition: margin .35s ease; }
@media (max-width: 1199px) {
  .dash-sidebar { transform: translateX(-100%); }
  .dash-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .dash-main { margin-left: 0; padding: 1.2rem 1rem 3rem; }
}
.dash-overlay { position: fixed; inset: 0; background: rgba(10,8,30,.55); z-index: 1039; opacity: 0; visibility: hidden; transition: all .3s ease; backdrop-filter: blur(3px); }
.dash-overlay.show { opacity: 1; visibility: visible; }

.dash-topbar {
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: .85rem 1.3rem; margin-bottom: 1.6rem;
  display: flex; align-items: center; gap: 1rem;
}
.dash-topbar .search-mini { flex: 1; max-width: 380px; position: relative; }
.dash-topbar .search-mini input { width: 100%; border: 1.5px solid var(--border-soft); border-radius: 50px; padding: .55rem 1rem .55rem 2.6rem; background: var(--bg-soft); color: var(--text-main); font-size: .88rem; font-weight: 500; }
.dash-topbar .search-mini input:focus { outline: none; border-color: var(--primary); }
.dash-topbar .search-mini i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

/* stat cards */
.stat-card { border-radius: var(--radius-lg); padding: 1.5rem; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-md); height: 100%; }
.stat-card .sc-ic { position: absolute; right: -14px; bottom: -14px; font-size: 5.4rem; opacity: .18; transform: rotate(-10deg); }
.stat-card h3 { color: #fff; font-weight: 800; font-size: 2rem; margin: .3rem 0 0; }
.stat-card p { margin: 0; font-size: .82rem; opacity: .85; font-weight: 600; letter-spacing: .5px; }
.stat-card .trend { font-size: .74rem; font-weight: 800; background: rgba(255,255,255,.2); border-radius: 50px; padding: .2rem .7rem; }

/* panels & tables */
.panel { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel .p-head { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; }
.panel .p-head h5 { margin: 0; font-weight: 700; font-size: 1.08rem; }
.panel .p-body { padding: 1.5rem; }
.lux-table { margin: 0; --bs-table-bg: transparent; }
.lux-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 800; border-color: var(--border-soft); padding: 1rem 1.2rem; white-space: nowrap; }
.lux-table td { padding: 1rem 1.2rem; border-color: var(--border-soft); vertical-align: middle; font-size: .9rem; color: var(--text-main); }
.lux-table tbody tr { transition: background .2s ease; }
.lux-table tbody tr:hover { background: var(--bg-soft); }
.t-hotel { display: flex; align-items: center; gap: .8rem; }
.t-hotel img { width: 52px; height: 44px; border-radius: 10px; object-fit: cover; }
.t-hotel b { font-size: .9rem; display: block; }
.t-hotel small { color: var(--text-muted); font-size: .74rem; }

.status-pill { font-size: .72rem; font-weight: 800; border-radius: 50px; padding: .38rem .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-success { background: rgba(16,185,129,.13); color: #059669; }
.st-warning { background: rgba(245,158,11,.14); color: #b45309; }
.st-danger { background: rgba(239,68,68,.13); color: #dc2626; }
.st-info { background: rgba(14,165,233,.13); color: #0284c7; }
.st-purple { background: rgba(109,40,217,.12); color: var(--primary); }
.st-muted { background: rgba(100,116,139,.15); color: #64748b; }
[data-bs-theme="dark"] .st-muted { color: #94a3b8; }
[data-bs-theme="dark"] .st-success { color: #34d399; } [data-bs-theme="dark"] .st-warning { color: #fbbf24; }
[data-bs-theme="dark"] .st-danger { color: #f87171; } [data-bs-theme="dark"] .st-info { color: #38bdf8; }
[data-bs-theme="dark"] .st-purple { color: #c4b5fd; }

/* charts (pure CSS/SVG) */
.bar-chart { display: flex; align-items: flex-end; gap: 4.2%; height: 230px; padding-top: 1rem; }
.bar-chart .bar { flex: 1; background: var(--grad-primary); border-radius: 8px 8px 3px 3px; position: relative; min-height: 8%; transition: all .4s ease; animation: barGrow 1s ease both; transform-origin: bottom; }
.bar-chart .bar:hover { filter: brightness(1.2); }
.bar-chart .bar.alt { background: var(--grad-sunset); }
.bar-chart .bar span { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.bar-chart .bar b { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: .68rem; color: var(--text-main); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.bar-chart .bar:hover b { opacity: 1; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.donut-svg { transform: rotate(-90deg); }
.donut-svg circle { fill: none; stroke-width: 26; stroke-linecap: round; }
.legend-dot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; margin-right: .5rem; }

/* timeline */
.lux-timeline { position: relative; padding-left: 2.1rem; }
.lux-timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border-soft); }
.tl-item { position: relative; padding-bottom: 1.5rem; }
.tl-item::before { content: ''; position: absolute; left: -2.1rem; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-card); border: 4px solid var(--primary); margin-left: 0; box-shadow: 0 0 0 4px rgba(109,40,217,.15); }
.tl-item.done::before { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.tl-item b { font-size: .92rem; display: block; }
.tl-item small { color: var(--text-muted); font-size: .78rem; }

/* upload dropzone */
.dropzone { border: 2px dashed var(--border-soft); border-radius: var(--radius-lg); padding: 2.4rem; text-align: center; color: var(--text-muted); cursor: pointer; transition: all .3s ease; background: var(--bg-soft); }
.dropzone:hover { border-color: var(--primary); background: var(--bg-card); }
.dropzone i { font-size: 2.4rem; color: var(--primary); }
.thumb-tile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.thumb-tile img { width: 100%; height: 100%; object-fit: cover; }
.thumb-tile .rm { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(239,68,68,.92); color: #fff; font-size: .75rem; display: grid; place-items: center; }

/* toggle switch */
.form-switch .form-check-input { width: 2.8em; height: 1.5em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* wallet */
.wallet-card { background: var(--grad-royal); border-radius: var(--radius-lg); color: #fff; padding: 1.8rem; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.wallet-card::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.07); top: -110px; right: -70px; }
.wallet-card h2 { color: #fff; font-weight: 800; }

/* notifications list */
.notif-item { display: flex; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border-soft); transition: background .25s ease; }
.notif-item:hover { background: var(--bg-soft); }
.notif-item.unread { background: rgba(109,40,217,.05); border-left: 3px solid var(--primary); }
.notif-item .n-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; flex-shrink: 0; }

/* support chat */
.chat-box { max-height: 420px; overflow-y: auto; padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.chat-msg { max-width: 75%; padding: .8rem 1.1rem; border-radius: 18px; font-size: .88rem; }
.chat-msg.in { background: var(--bg-soft); color: var(--text-main); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.out { background: var(--grad-primary); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg small { display: block; opacity: .6; font-size: .66rem; margin-top: .25rem; }

/* ============ STATIC PAGES ============ */
.policy-toc { position: sticky; top: 104px; }
.policy-toc a { display: block; padding: .6rem 1rem; border-left: 3px solid var(--border-soft); color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.policy-toc a:hover, .policy-toc a.active { border-left-color: var(--primary); color: var(--primary); background: var(--bg-soft); }
.policy-content h4 { font-weight: 700; margin-top: 2.2rem; }
.policy-content p, .policy-content li { color: var(--text-muted); font-size: .95rem; line-height: 1.85; }

.contact-tile { text-align: center; padding: 2rem 1.4rem; }
.contact-tile .c-ic { width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 1.1rem; display: grid; place-items: center; font-size: 1.6rem; color: #fff; box-shadow: var(--shadow-glow); }

.job-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; flex-wrap: wrap; }
.job-card .tags span { font-size: .72rem; font-weight: 700; background: var(--bg-soft); color: var(--text-muted); border-radius: 50px; padding: .3rem .8rem; margin-right: .4rem; }

.value-num { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; opacity: .18; line-height: 1; }

/* misc helpers */
.icon-sq { width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center; color: #fff; font-size: 1.15rem; flex-shrink: 0; }
.bg-grad-1 { background: var(--grad-primary); } .bg-grad-2 { background: var(--grad-sunset); }
.bg-grad-3 { background: var(--grad-ocean); } .bg-grad-4 { background: var(--grad-gold); }
.text-grad { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mini-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-muted); }

/* ============================================================
   HOTEL-DETAILS PAGE ENHANCEMENTS  (scoped to .page-hd)
   ============================================================ */

/* sticky sub-nav icons */
.detail-tabs .nav-link i { font-size: .95rem; margin-right: .35rem; vertical-align: -1px; }

/* colourful highlighted section headings */
.dt-heading { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.12rem; padding: .5rem 1.05rem; border-radius: 14px; margin-bottom: 1.3rem; letter-spacing: .2px; }
.dt-heading i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1rem; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.dt-heading.h-purple { background: rgba(124,58,237,.13); color: #7c3aed; } .dt-heading.h-purple i { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.dt-heading.h-pink   { background: rgba(236,72,153,.13); color: #db2777; } .dt-heading.h-pink i   { background: linear-gradient(135deg,#fb7185,#db2777); }
.dt-heading.h-blue   { background: rgba(2,132,199,.13);  color: #0284c7; } .dt-heading.h-blue i   { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.dt-heading.h-green  { background: rgba(5,150,105,.13);  color: #059669; } .dt-heading.h-green i  { background: linear-gradient(135deg,#34d399,#059669); }
.dt-heading.h-amber  { background: rgba(217,119,6,.15);  color: #d97706; } .dt-heading.h-amber i  { background: linear-gradient(135deg,#fbbf24,#d97706); }

/* colourful + animated amenity / fact tiles */
.page-hd .amenity-tile { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease; }
.page-hd .amenity-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.page-hd .amenity-tile i { color: #fff; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.page-hd .amenity-tile:hover i { transform: rotate(-8deg) scale(1.14); }
.page-hd .row > [class*="col-"]:nth-child(6n+1) .amenity-tile i { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.page-hd .row > [class*="col-"]:nth-child(6n+2) .amenity-tile i { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.page-hd .row > [class*="col-"]:nth-child(6n+3) .amenity-tile i { background: linear-gradient(135deg,#34d399,#059669); }
.page-hd .row > [class*="col-"]:nth-child(6n+4) .amenity-tile i { background: linear-gradient(135deg,#fb7185,#e11d48); }
.page-hd .row > [class*="col-"]:nth-child(6n+5) .amenity-tile i { background: linear-gradient(135deg,#fbbf24,#d97706); }
.page-hd .row > [class*="col-"]:nth-child(6n+6) .amenity-tile i { background: linear-gradient(135deg,#f472b6,#db2777); }

/* stylish animated property-policy cards */
.policy-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 1.2rem 1.25rem; height: 100%; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease; }
.policy-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--pc); }
.policy-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.policy-card .pc-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.55rem; color: #fff; flex-shrink: 0; background: var(--pc-grad); box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.policy-card:hover .pc-ic { transform: rotate(-8deg) scale(1.1); }
.policy-card b { display: block; font-size: 1rem; margin-bottom: .3rem; color: var(--text-main); }
.policy-card p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.7; }
.pc-danger { --pc:#e11d48; --pc-grad: linear-gradient(135deg,#fb7185,#e11d48); }
.pc-blue   { --pc:#0284c7; --pc-grad: linear-gradient(135deg,#38bdf8,#0284c7); }
.pc-green  { --pc:#059669; --pc-grad: linear-gradient(135deg,#34d399,#059669); }
.pc-amber  { --pc:#d97706; --pc-grad: linear-gradient(135deg,#fbbf24,#d97706); }

/* location nearby rows — subtle animated lift */
.page-hd .near-row { transition: transform .3s ease, background .3s ease; border-radius: 10px; padding: .35rem .55rem !important; }
.page-hd .near-row:hover { transform: translateX(5px); background: var(--bg-soft); }

/* mandatory-field asterisk */
.req { color: #e11d48; font-weight: 800; margin-left: 1px; }
.float-input label i { opacity: .85; }

/* ---------- 360° drag-to-pan viewer (room-details) ---------- */
.pano-viewer { position: relative; width: 100%; height: 72vh; max-height: 640px; overflow: hidden; cursor: grab; background: #0b0b12; user-select: none; }
.pano-viewer.grabbing { cursor: grabbing; }
.pano-track { position: absolute; top: 0; left: 0; height: 100%; width: 280%; background-size: cover; background-position: center; will-change: transform; }
.pano-badge { position: absolute; top: 14px; left: 14px; z-index: 5; background: var(--grad-primary); color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .3px; padding: .48rem .95rem; border-radius: 50px; box-shadow: var(--shadow-glow); }
.pano-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(0,0,0,.55); color: #fff; font-size: .82rem; font-weight: 600; padding: .5rem 1.1rem; border-radius: 50px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s ease; pointer-events: none; }

/* ---------- Facilities grid — new colourful animated design (.fac-grid) ---------- */
.fac-grid .amenity-tile { position: relative; overflow: hidden; background: var(--bg-card); transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease; }
.fac-grid .amenity-tile::before { content: ''; position: absolute; inset: 0; opacity: .06; background: var(--fc, var(--grad-primary)); pointer-events: none; }
.fac-grid .amenity-tile > * { position: relative; z-index: 1; }
.fac-grid .amenity-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.fac-grid .amenity-tile i { color: #fff !important; background: var(--fc, var(--grad-primary)) !important; box-shadow: 0 8px 18px rgba(0,0,0,.16); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.fac-grid .amenity-tile:hover i { transform: rotate(-8deg) scale(1.12); }
.fac-grid > [class*="col-"]:nth-child(8n+1) .amenity-tile { --fc: linear-gradient(135deg,#38bdf8,#0284c7); }
.fac-grid > [class*="col-"]:nth-child(8n+2) .amenity-tile { --fc: linear-gradient(135deg,#a78bfa,#7c3aed); }
.fac-grid > [class*="col-"]:nth-child(8n+3) .amenity-tile { --fc: linear-gradient(135deg,#34d399,#059669); }
.fac-grid > [class*="col-"]:nth-child(8n+4) .amenity-tile { --fc: linear-gradient(135deg,#fb7185,#e11d48); }
.fac-grid > [class*="col-"]:nth-child(8n+5) .amenity-tile { --fc: linear-gradient(135deg,#fbbf24,#d97706); }
.fac-grid > [class*="col-"]:nth-child(8n+6) .amenity-tile { --fc: linear-gradient(135deg,#f472b6,#db2777); }
.fac-grid > [class*="col-"]:nth-child(8n+7) .amenity-tile { --fc: linear-gradient(135deg,#22d3ee,#0891b2); }
.fac-grid > [class*="col-"]:nth-child(8n+8) .amenity-tile { --fc: linear-gradient(135deg,#818cf8,#4f46e5); }

/* ---------- Profile hub section cards + read-only view rows (dashboards) ---------- */
.prof-sec { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-card); text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.prof-sec:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.prof-sec .ps-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.25rem; flex-shrink: 0; }
.prof-sec h6 { margin: 0 0 .15rem; font-weight: 800; }
.prof-sec p { margin: 0; font-size: .82rem; color: var(--text-muted); }
.prof-sec .ps-arrow { margin-left: auto; color: var(--text-muted); font-size: 1.2rem; transition: transform .3s ease; }
.prof-sec:hover .ps-arrow { transform: translateX(4px); color: var(--primary); }
.view-row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border-soft); }
.view-row:last-child { border-bottom: none; }
.view-row .vr-label { color: var(--text-muted); font-weight: 600; font-size: .86rem; }
.view-row .vr-value { font-weight: 700; text-align: right; }

/* ---------- Sticky detail-tabs: land sections below the bar + smooth scroll ---------- */
html { scroll-behavior: smooth; }
.panel[id], #rooms, [id="availability"], [id="facilities"] { scroll-margin-top: 150px; }

/* ---------- Google Maps embed (location sections) ---------- */
.map-embed { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; filter: saturate(1.05); }

/* ---------- Profile view/edit: centered content column + polish ---------- */
.pdetail-center { max-width: 900px; margin-inline: auto; }
.pdetail-center .panel { border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.pdetail-center .p-head { padding: 1.25rem 1.6rem; }
.pdetail-center .p-body { padding: 1.5rem 1.6rem; }
.pdetail-center .view-row { padding: 1rem .2rem; }

/* ---------- Clickable user block in sidebar (goes to profile) ---------- */
a.ds-user { text-decoration: none; color: #fff; transition: background .25s ease; }
a.ds-user:hover { background: rgba(255,255,255,.07); }
a.ds-user b { color: #fff; }
.sidebar-agent a.ds-user:hover { background: rgba(251,191,36,.1); }

/* ---------- Contact form: demo captcha ---------- */
.ct-captcha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 330px; padding: .85rem 1rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-soft); }
.ct-cap-check { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 600; font-size: .9rem; margin: 0; position: relative; }
.ct-cap-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-cap-box { width: 26px; height: 26px; border: 2px solid var(--border-soft); border-radius: 6px; display: grid; place-items: center; color: transparent; background: var(--bg-card); transition: all .2s ease; flex-shrink: 0; }
.ct-cap-check input:checked + .ct-cap-box { background: var(--grad-primary); border-color: transparent; color: #fff; }
.ct-cap-brand { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: .58rem; line-height: 1.2; text-align: center; }
.ct-cap-brand i { font-size: 1.4rem; color: var(--primary); margin-bottom: 2px; }


/* ---- amenity / facility tiles: compact so labels don't wrap to 2–3 lines ---- */
.amenity-tile { font-size: .82rem; gap: .6rem; padding: .72rem .8rem; line-height: 1.25; }
.amenity-tile i { width: 34px; height: 34px; font-size: .98rem; border-radius: 10px; }
@media (max-width: 575px) {
  .amenity-tile { font-size: .76rem; gap: .5rem; padding: .6rem .65rem; }
  .amenity-tile i { width: 30px; height: 30px; font-size: .9rem; }
}

/* ============================================================
   INNOVATIVE STICKY BOOKING BAR (all breakpoints)
   ============================================================ */
.sl-bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1048;
  padding:.6rem clamp(.85rem,3vw,1.4rem) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(120,80,200,.14);
  box-shadow:0 -10px 34px rgba(30,27,75,.14);
  transform:translateY(130%);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.sl-bookbar.show{ transform:translateY(0); }
[data-bs-theme="dark"] .sl-bookbar{ background:rgba(18,16,32,.78); border-top-color:rgba(180,140,255,.18); }
.sl-bookbar::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#7c3aed,#c026d3,#e11d48,transparent);
  background-size:200% 100%; animation:slBarLine 4s linear infinite; opacity:.9;
}
@keyframes slBarLine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.sl-bookbar-inner{
  max-width:1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:.9rem;
}
.sl-bb-price{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.sl-bb-dot{ width:9px; height:9px; border-radius:50%; background:#16a34a; flex:none;
  box-shadow:0 0 0 0 rgba(22,163,74,.6); animation:slPulse 1.9s infinite; }
@keyframes slPulse{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.55);} 70%{box-shadow:0 0 0 10px rgba(22,163,74,0);} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);} }
.sl-bb-text{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.sl-bb-label{ font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; font-weight:700; color:var(--text-muted); }
.sl-bb-amount{ display:flex; align-items:baseline; gap:.28rem; }
.sl-bb-amount b{ font-size:clamp(1.2rem,5vw,1.55rem); font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(120deg,#7c3aed,#c026d3 55%,#e11d48);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sl-bb-amount small{ font-size:.72rem; font-weight:600; color:var(--text-muted); }
.sl-bb-btn{
  position:relative; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.82rem clamp(1.15rem,4.5vw,2rem); border-radius:999px;
  font-weight:800; color:#fff; text-decoration:none;
  background:linear-gradient(120deg,#7c3aed,#c026d3 55%,#e11d48); background-size:200% 100%;
  box-shadow:0 8px 24px rgba(124,58,237,.38);
  transition:background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.sl-bb-btn:hover{ color:#fff; background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 30px rgba(192,38,211,.42); }
.sl-bb-btn i{ transition:transform .25s ease; }
.sl-bb-btn:hover i{ transform:translateX(4px); }
.sl-bb-btn::after{ content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:slSheen 3.4s ease-in-out infinite; }
@keyframes slSheen{ 0%{left:-60%;} 45%,100%{left:135%;} }
body.has-bookbar .float-whatsapp{ bottom:242px; }
body.has-bookbar .float-support{ bottom:173px; }
body.has-bookbar .back-top{ bottom:104px; }
@media (min-width:992px){ body.has-bookbar{ padding-bottom:82px; } }
@media (max-width:400px){ .sl-bb-btn{ padding-inline:1.1rem; } .sl-bb-label{ font-size:.62rem; } }

/* ============================================================
   ROOM DETAIL — INNOVATIVE ACCORDION TABS (default closed)
   ============================================================ */
.room-tabs{ position:relative; overflow:hidden; }
.rtabs-hint{ display:flex; align-items:center; gap:.45rem; font-size:.82rem;
  color:var(--text-muted); margin:.1rem 0 1rem; transition:opacity .3s ease; }
.rtabs-hint i{ color:var(--primary); }
.room-tabs.any-open .rtabs-hint{ opacity:0; height:0; margin:0; overflow:hidden; }
/* Connected/segmented single-row tab bar (no button gaps) */
.rtabs-head{
  display:flex; flex-wrap:nowrap; gap:0;
  border:1.5px solid var(--border-soft); border-radius:14px; overflow:hidden;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:var(--bg-card);
}
.rtabs-head::-webkit-scrollbar{ display:none; }
.rtab{
  --c:#7c3aed; --c2:#6d28d9; --soft:rgba(124,58,237,.08);
  flex:1 0 auto; min-width:max-content;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.72rem 1.05rem; border:0; border-right:1.5px solid var(--border-soft);
  background:transparent; color:var(--text-main); font-weight:700; font-size:.9rem;
  cursor:pointer; white-space:nowrap; transition:background .3s ease, color .25s ease;
}
.rtab:last-child{ border-right:0; }
.rtab i:first-child{ color:var(--c); font-size:1.02rem; transition:color .25s ease; }
.rtab .rtab-chev{ display:none; }
.rtab:hover{ background:var(--soft); }
.rtab.open{ color:#fff; background:linear-gradient(135deg,var(--c),var(--c2)); }
.rtab.open i:first-child{ color:#fff; }

.rtab-panel{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .4s ease, margin .4s ease; }
.rtab-panel.open{ grid-template-rows:1fr; opacity:1; margin-top:1.1rem; }
.rtab-inner{ overflow:hidden; min-height:0; }
.rtab-card{ --c:#7c3aed; --soft:rgba(124,58,237,.08);
  position:relative; border:1px solid var(--border-soft); border-radius:18px; padding:1.35rem 1.35rem 1.4rem;
  background:linear-gradient(180deg,var(--soft),var(--bg-card)); animation:rtabIn .5s cubic-bezier(.22,1,.36,1); }
.rtab-card::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:4px;
  border-radius:18px 0 0 18px; background:linear-gradient(180deg,var(--c),transparent); }
@keyframes rtabIn{ from{ transform:translateY(10px); } to{ transform:translateY(0); } }
.rtab-cardtitle{ display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.06rem;
  margin:0 0 1rem; color:var(--text-main); }
.rtab-cardtitle i{ color:var(--c); }
.rtab-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.rtab-photos a{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; display:block; }
.rtab-photos img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.rtab-photos a:hover img{ transform:scale(1.08); }
.rtab-photos a.rp-wide{ grid-column:span 2; aspect-ratio:auto; }
.rtab-photos .rp-more{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(20,16,40,.55); color:#fff; font-weight:800; backdrop-filter:blur(2px); }
@media (max-width:575.98px){
  .rtab{ font-size:.82rem; padding:.62rem .8rem; }
  .rtab-photos{ grid-template-columns:repeat(2,1fr); }
  .rtab-photos a.rp-wide{ grid-column:span 2; }
}

/* Room-card tabs: compact variant + rate list (Calendar & Prices tab) */
.room-tabs.rt-incard{ margin-top:1rem; padding:0; }
.room-tabs.rt-incard .rtab{ font-size:.82rem; padding:.5rem .8rem; }
.rate-list{ display:flex; flex-direction:column; gap:.1rem; }
.rate-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .2rem; border-bottom:1px dashed var(--border-soft); }
.rate-row:last-child{ border-bottom:none; }
.rate-row span{ color:var(--text-muted); font-weight:600; font-size:.9rem; }
.rate-row b{ color:var(--text-main); font-weight:800; white-space:nowrap; }
.rate-row b small{ color:var(--text-muted); font-weight:600; }
.rate-row.rr-total{ margin-top:.2rem; border-top:2px solid var(--border-soft); }
.rate-row.rr-total b{ color:var(--c,#059669); font-size:1.05rem; }

/* Tab bar scroll arrows (shown only when the row overflows, e.g. mobile) */
.rtabs-nav{ display:flex; align-items:stretch; gap:.4rem; }
.rtabs-nav > .rtabs-head{ flex:1 1 auto; min-width:0; }
.rtabs-arrow{
  flex:none; width:38px; align-items:center; justify-content:center;
  display:none; border:1.5px solid var(--border-soft); border-radius:12px;
  background:var(--bg-card); color:var(--primary); cursor:pointer; font-size:1.05rem;
  box-shadow:0 3px 10px rgba(30,27,75,.10);
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rtabs-arrow:active{ transform:scale(.92); }
.rtabs-arrow:hover{ background:var(--primary); color:#fff; border-color:transparent; }
.rtabs-nav.has-arrows .rtabs-arrow{ display:flex; }
.rtabs-arrow:not(.show){ opacity:.35; pointer-events:none; }

/* Sticky detail-tabs: left/right scroll arrows (shown only when the row overflows) */
.dtabs-nav{ display:flex; align-items:center; gap:.4rem; }
.dtabs-nav > .nav-pills{ flex:1 1 auto; min-width:0; }
.dtabs-arrow{
  flex:none; width:34px; height:34px; border-radius:50%; display:none;
  align-items:center; justify-content:center; border:1.5px solid var(--border-soft);
  background:var(--bg-card); color:var(--primary); cursor:pointer; font-size:1rem;
  box-shadow:0 3px 10px rgba(30,27,75,.12);
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.dtabs-arrow:active{ transform:scale(.92); }
.dtabs-arrow:hover{ background:var(--primary); color:#fff; border-color:transparent; }
.dtabs-nav.has-arrows .dtabs-arrow{ display:flex; }
.dtabs-arrow:not(.show){ opacity:.3; pointer-events:none; }

/* Availability calendar (moved from room-details inline; shared for all detail pages) */
.avail-cal { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.avail-cal .cal-head { background: var(--grad-primary); color: #fff; padding: .9rem 1.2rem; display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.avail-cal .cal-head button { border: none; background: rgba(255,255,255,.15); color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 1rem; background: var(--bg-card); }
.cal-grid .dow { text-align: center; font-size: .68rem; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; padding: .3rem 0; }
.cal-day { border: 1.5px solid var(--border-soft); border-radius: 10px; text-align: center; padding: .45rem .15rem; min-height: 58px; background: var(--bg-card); transition: all .25s ease; }
.cal-day b { display: block; font-size: .88rem; color: var(--text-main); }
.cal-day span { font-size: .6rem; font-weight: 700; color: var(--teal, #14b8a6); }
.cal-day:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cal-day.blank { border: none; background: transparent; box-shadow: none; }
.cal-day.sold { background: var(--bg-soft); opacity: .55; text-decoration: line-through; }
.cal-day.sold span { color: #ef4444; text-decoration: none; }
.cal-day.sel { background: var(--grad-primary); border-color: transparent; box-shadow: var(--shadow-glow); }
.cal-day.sel b, .cal-day.sel span { color: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0 1rem 1rem; font-size: .74rem; font-weight: 700; color: var(--text-muted); background: var(--bg-card); }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }

/* ============================================================
   BOOKING FLOW — sticky fare strip (all booking steps)
   ============================================================ */
body.has-fare-strip{ padding-bottom:96px; }
body.has-fare-strip .mobile-nav{ display:none !important; }
body.has-fare-strip .float-whatsapp{ bottom:248px !important; }
body.has-fare-strip .float-support{ bottom:179px !important; }
body.has-fare-strip .back-top{ bottom:110px !important; }
.fare-strip{ position:fixed; left:0; right:0; bottom:0; z-index:1046; }
.fare-breakup{ max-width:1140px; margin:0 auto; max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.22,1,.36,1); }
.fare-strip.open .fare-breakup{ max-height:560px; }
.fb-inner{ background:var(--bg-card); border:1px solid var(--border-soft); border-bottom:0; border-radius:22px 22px 0 0;
  box-shadow:0 -16px 44px rgba(30,27,75,.18); padding:0 1.4rem 1.4rem; margin:0 12px -2px; overflow:hidden; }
.fb-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:0 -1.4rem 1.1rem; padding:.95rem 1.4rem; background:linear-gradient(120deg,#7c3aed,#c026d3 55%,#e11d48); border-radius:22px 22px 0 0; }
.fb-top b{ font-size:1.08rem; color:#fff; display:flex; align-items:center; }
.fb-top b i{ opacity:.95; }
.fb-close{ border:0; background:rgba(255,255,255,.22); width:34px; height:34px; border-radius:50%; color:#fff; cursor:pointer; font-size:.9rem; flex:none; transition:background .2s ease; }
.fb-close:hover{ background:rgba(255,255,255,.35); }
.fb-hotel{ display:flex; gap:.8rem; align-items:center; margin-bottom:1rem; }
.fb-hotel img{ width:64px; height:50px; border-radius:10px; object-fit:cover; }
.fb-hotel b{ display:block; color:var(--text-main); } .fb-hotel small{ color:var(--text-muted); }
.fb-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.42rem 0; font-size:.94rem; color:var(--text-muted); }
.fb-row b{ color:var(--text-main); }
.fb-row.total{ border-top:1px dashed var(--border-soft); margin-top:.45rem; padding-top:.75rem; }
.fb-row.total span:first-child{ color:var(--text-main); font-weight:800; font-size:1.02rem; }
.fb-row.total .text-grad{ font-family:var(--font-heading); font-weight:800; font-size:1.35rem; }
.fb-div{ height:1px; background:var(--border-soft); margin:.55rem 0; }
/* night-by-night tariff, folded away under the Room tariff row */
.fb-nl-tog{ margin-left:.45rem; padding:0; border:0; background:transparent; font:inherit; font-size:.78rem; font-weight:700;
  color:var(--primary); cursor:pointer; display:inline-flex; align-items:center; gap:.22rem; white-space:nowrap; }
.fb-nl-tog i{ font-size:.68rem; transition:transform .2s ease; }
.fb-nl-tog[aria-expanded="true"] i{ transform:rotate(180deg); }
.fb-nights{ margin:.15rem 0 .4rem; padding:.45rem .7rem; border-radius:11px; background:var(--bg-soft); border:1px solid var(--border-soft); }
.fb-night{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.2rem 0; font-size:.85rem; color:var(--text-muted); }
.fb-night b{ color:var(--text-main); font-weight:700; }
.fb-night.is-special > span{ color:var(--text-main); font-weight:700; }
.rm-special{ margin-top:.2rem; font-size:.74rem; font-weight:700; color:#b45309; white-space:nowrap; }
.rm-special i{ margin-right:.2rem; }
.fb-tag{ display:inline-flex; align-items:center; gap:.2rem; margin-left:.35rem; padding:.05rem .4rem; border-radius:50px;
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#b45309; background:rgba(245,158,11,.16); }
.fb-note{ text-align:center; font-size:.8rem; color:var(--text-muted); margin-top:.8rem; }
.fare-bar{ position:relative; z-index:2; background:var(--bg-card); border-top:1px solid var(--border-soft); box-shadow:0 -8px 26px rgba(30,27,75,.14); }
.fare-bar-inner{ max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.4rem calc(.8rem + env(safe-area-inset-bottom)); }
.fare-total{ border:0; background:transparent; text-align:left; cursor:pointer; display:flex; flex-direction:column; padding:0; }
.fare-total .ft-amt{ font-family:var(--font-heading); font-weight:800; font-size:1.5rem; color:var(--text-main); line-height:1; }
.fare-total .ft-sub{ font-size:.8rem; font-weight:800; color:var(--primary); margin-top:.22rem; }
.fare-total .ft-chev{ transition:transform .35s ease; display:inline-block; }
.fare-strip.open .ft-chev{ transform:rotate(180deg); }
.fare-actions{ display:flex; gap:.6rem; align-items:center; flex:none; }
.fare-actions .btn{ white-space:nowrap; }
@media (max-width:575px){
  .fare-bar-inner{ padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); gap:.5rem; }
  .fare-total .ft-amt{ font-size:1.25rem; }
  .fare-actions .btn-outline-soft{ padding-left:.85rem; padding-right:.85rem; }
  .fare-actions .btn-outline-soft .fa-label{ display:none; }
  .fb-inner{ margin:0 8px -2px; padding:0 1.1rem 1.2rem; }
  .fb-top{ margin:0 -1.1rem 1rem; padding:.9rem 1.1rem; }
}

/* ============ hotel-details polish (added) ============ */
/* Property Policies: small icon inline with heading, description full-width below (no wasted space) */
.policy-card { display: block; gap: 0; }
.policy-card .pc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.policy-card .pc-ic { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; box-shadow: 0 5px 12px rgba(0,0,0,.16); }
.policy-card:hover .pc-ic { transform: rotate(-6deg) scale(1.08); }
.policy-card b { display: inline; margin-bottom: 0; font-size: 1rem; }
.policy-card p { margin: 0; font-size: .84rem; }

/* sticky detail tabs: clear card background + subtle shadow so it reads as a bar */
.detail-tabs { background: var(--bg-card); box-shadow: 0 5px 18px rgba(20,15,60,.06); }

/* gallery action buttons (360 / video / photos) — one swipeable line on phones */
@media (max-width: 767px) {
  .gal-actions { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .gal-actions::-webkit-scrollbar { display: none; }
  .gal-actions .btn { flex: 0 0 auto; white-space: nowrap; font-size: .76rem; }
}

/* ============ compact + sticky coloured page-title bar (pages whose hero is just a title) ============ */
.page-hero:not(:has(.search-card)) {
  position: sticky; top: var(--header-h, 62px); z-index: 90;
  padding: 13px 0 !important; box-shadow: 0 6px 18px rgba(20,15,60,.2);
}
.page-hero:not(:has(.search-card)) h1 { font-size: clamp(1.15rem, 3.6vw, 1.7rem); }
.page-hero:not(:has(.search-card)) > .container > p { display: none; }
.page-hero:not(:has(.search-card)) .breadcrumb { margin-bottom: .1rem !important; }
.page-hero:not(:has(.search-card)) .hero-chip { padding: .3rem .9rem; font-size: .72rem; }

/* detail-page title as a compact coloured bar (non-sticky — tabs stay the sticky nav) */
.page-hero.ph-static { position: sticky !important; top: var(--header-h, 62px); z-index: 99; padding: 15px 0 !important; box-shadow: 0 6px 16px rgba(20,15,60,.12); }
.page-hero.ph-static::before { display: none !important; }   /* remove background photo, keep the purple */
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: rgba(255,255,255,.8) !important; }
.page-hero .breadcrumb-item.active { color: #fbd34d !important; }
.page-hero .loc, .page-hero .loc i { color: rgba(255,255,255,.85) !important; }
.page-hero .loc a { color: #fbd34d !important; }
.page-hero h1 .text-muted { color: rgba(255,255,255,.72) !important; }
.page-hero .status-pill { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.32); }
.page-hero .icon-btn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.32); color: #fff; }
.page-hero .icon-btn:hover { background: #fff; color: var(--primary); }

/* ---- room cards: Model 3 on phones (coloured header + small image + tap-a-section tabs). Desktop/tablet untouched. ---- */
.rc-m3 { display: none; }
@media (max-width: 767px) {
  .room-card { display: block; padding: 0; }
  .room-card > .rc-img { display: none; }
  .room-card > .p-4 { display: block; padding: 0 !important; }
  .room-card > .p-4 > .d-flex.justify-content-between { display: none !important; }
  .room-card > .p-4 > .coupon-strip,
  .room-card > .p-4 > .d-flex.align-items-center { margin: .7rem .95rem 0 !important; }

  .rc-m3 { display: block; }
  .rc-m3-head { background: var(--grad-primary); color: #fff; padding: .72rem .95rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
  .rc-m3-head h5 { margin: 0; font-weight: 800; font-size: 1rem; }
  .rc-m3-head h5 a { color: #fff; text-decoration: none; }
  .rc-m3-pr { text-align: right; flex: none; line-height: 1.15; }
  .rc-m3-pr b { font-size: 1.05rem; font-weight: 800; }
  .rc-m3-pr small { font-size: .58rem; opacity: .92; display: block; }
  .rc-m3-row { display: flex; gap: .7rem; align-items: center; padding: .8rem .95rem .2rem; }
  .rc-m3-img { flex: none; width: 78px; height: 78px; border-radius: 12px; overflow: hidden; }
  .rc-m3-img img { width: 100%; height: 100%; object-fit: cover; }
  .rc-m3-row .rc-feats { gap: .3rem; }
  .rc-m3-row .rc-feats span { font-size: .64rem; padding: .18rem .5rem; }

  .room-card .room-tabs.rt-incard { padding: 0 .95rem .95rem; margin-top: .55rem; }
  .room-card .rtabs-hint { font-size: .76rem; margin-bottom: .5rem; }
  .room-card .rtabs-head { border: 0; gap: .4rem; background: transparent; }
  .room-card .rtab { flex: 0 0 auto; min-width: max-content; border: 1.5px solid var(--border-soft) !important; border-radius: 50px; padding: .48rem .8rem; font-size: .78rem; }
}


/* sticky title bar: collapse to just the name(s) when pinned to the top */
.page-hero .hero-eyebrow { display: none; }
.page-hero.ph-static { transition: padding .18s ease; }
.page-hero.ph-static.stuck { padding: 9px 0 !important; }
.page-hero.ph-static.stuck .breadcrumb,
.page-hero.ph-static.stuck .loc,
.page-hero.ph-static.stuck .hero-actions,
.page-hero.ph-static.stuck .hero-share { display: none !important; }
.page-hero.ph-static.stuck h1 { font-size: 1.12rem !important; }
.page-hero.ph-static.stuck .hero-eyebrow {
  display: block; font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.85); margin-bottom: .05rem;
}
.page-hero.ph-static.stuck .hero-eyebrow i { margin-right: .3rem; color: #fbd34d; }

/* room-details: remove the curved footer arch (mobile + web) */
body.room-detail-page .footer-curve,
body.page-hd .footer-curve { display: none !important; }
@media (max-width: 767px) { body.room-detail-page .main-footer, body.page-hd .main-footer { margin-top: 0 !important; } }


/* ---- centered detail hero (share-only) ---- */
.page-hero.ph-static .breadcrumb { justify-content: center; }
.page-hero.ph-static .loc { justify-content: center; }
.page-hero.ph-static .room-sub { display: inline-flex; align-items: center; gap: .4rem; font-size: .96rem; font-weight: 700; color: #fff; margin-top: .2rem; }
.page-hero.ph-static .room-sub i { color: #fbd34d; }
.page-hero.ph-static .hero-share { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 42px; height: 42px; }
.page-hero.ph-static.stuck .room-sub { font-size: .82rem; margin-top: 0; }

/* detail-tabs scroll arrows — keep both clearly visible */
.dtabs-arrow:not(.show) { opacity: .5; }

/* ---- tighten section headings + panels, fix calendar alignment on phones ---- */
@media (max-width: 767px) {
  .panel { padding: 1rem !important; }
  .dt-heading { margin-bottom: .7rem; padding: .4rem .75rem; font-size: 1rem; gap: .5rem; }
  .dt-heading i { width: 30px; height: 30px; font-size: .9rem; border-radius: 9px; }
  .section-pad-sm { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .panel.mb-4 { margin-bottom: 1rem !important; }
  /* Calendar & Prices: was cramped / misaligned in the tab */
  .cal-grid { gap: 3px; padding: .5rem; }
  .cal-day { min-height: 44px; padding: .3rem .1rem; border-radius: 8px; }
  .cal-day b { font-size: .76rem; }
  .cal-day span { font-size: .5rem; }
  .cal-grid .dow { font-size: .56rem; padding: .2rem 0; }
  .avail-cal .cal-head { padding: .6rem .8rem; font-size: .92rem; }
  .avail-cal .cal-head button { width: 28px; height: 28px; }
}


/* collapsed sticky strip: keep hotel name + area (full details show at default/top) */
.page-hero.ph-static .hero-area { display: none; }
.page-hero.ph-static.stuck .hero-area { display: block; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.88); margin-top: .05rem; }
.page-hero.ph-static.stuck .hero-area i { color: #fbd34d; margin-right: .25rem; }


/* calendar page: pinned strip shows only the hotel name */
body.page-sd .page-hero.ph-static.stuck .room-sub { display: none !important; }


/* hotel-details: remove the side WhatsApp + support floats (keep back-to-top) */
body.page-hd .float-whatsapp, body.page-hd .float-support { display: none !important; }


/* detail pages: remove the whole site footer (keep floats/back-to-top) */
body.page-hd .main-footer, body.room-detail-page .main-footer { display: none !important; }


/* room photo popup (Model 3) */
.rc-m3-img { position: relative; cursor: pointer; }
.rc-m3-zoom { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 7px; background: rgba(20,15,60,.62); color: #fff; display: grid; place-items: center; font-size: .68rem; }
.rpm { border: 0; border-radius: 18px; overflow: hidden; }
.rpm-stage { position: relative; background: #000; }
.rpm-stage img { width: 100%; max-height: 68vh; object-fit: contain; display: block; }
.rpm-x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 1rem; cursor: pointer; }
.rpm-ar { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--primary); display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; }
.rpm-prev { left: 10px; } .rpm-next { right: 10px; }
.rpm-count { position: absolute; bottom: 10px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 50px; }
.rpm-name { padding: .8rem 1rem; font-weight: 800; font-size: 1.05rem; color: var(--text-main); text-align: center; background: var(--bg-card); }


/* ---- Model 3 room-card TAB PANELS: fit the narrow card on phones (desktop untouched) ---- */
@media (max-width: 767px) {
  /* scroll arrows tight, no wasted space */
  .room-card .rtabs-head { padding: 0; }
  .room-card .rtab { padding: .42rem .7rem; font-size: .74rem; }

  /* panel card */
  .room-card .rtab-panel.open { margin-top: .7rem; }
  .room-card .rtab-card { padding: .8rem .75rem .95rem !important; border-radius: 13px; }
  .room-card .rtab-card::before { border-radius: 13px 0 0 13px; }
  .room-card .rtab-cardtitle { font-size: .92rem; margin-bottom: .7rem; }
  .room-card .rtab-card p { font-size: .8rem !important; line-height: 1.6 !important; }
  .room-card .rtab-card .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }

  /* amenity / facilities tiles */
  .room-card .amenity-tile { padding: .5rem .55rem; font-size: .72rem; gap: .45rem; border-radius: 11px; }
  .room-card .amenity-tile i { width: 28px; height: 28px; font-size: .82rem; border-radius: 8px; }
  .room-card .amenity-tile b { font-size: .74rem; }

  /* photos grid */
  .room-card .rtab-photos { grid-template-columns: repeat(2,1fr) !important; gap: .45rem; }
  .room-card .rtab-photos a.rp-wide { grid-column: span 2; }

  /* add-ons grid */
  .room-card .addon-grid { grid-template-columns: 1fr 1fr !important; gap: .5rem; }
  .room-card .addon-card { padding: .6rem .55rem; }
  .room-card .ao-ic { width: 38px; height: 38px; font-size: 1rem; }
  .room-card .ao-title { font-size: .78rem; } .room-card .ao-desc { font-size: .64rem; }
  .room-card .ao-price { font-size: .8rem; }

  /* calendar & prices */
  .room-card .avail-cal .cal-head { padding: .5rem .65rem; font-size: .82rem; }
  .room-card .avail-cal .cal-head button { width: 26px; height: 26px; }
  .room-card .cal-grid { gap: 2px; padding: .4rem; }
  .room-card .cal-grid .dow { font-size: .52rem; padding: .15rem 0; }
  .room-card .cal-day { min-height: 38px; padding: .2rem .05rem; border-radius: 7px; }
  .room-card .cal-day b { font-size: .68rem; } .room-card .cal-day span { font-size: .42rem; }
  .room-card .cal-legend { padding: 0 .55rem .7rem; gap: .45rem; font-size: .56rem; }
  .room-card .cal-title { display: none; }
}


/* Model 3: keep the existing in-card tab arrows compact on phones */
@media (max-width: 767px) {
  .room-card .rtabs-arrow { width: 30px; height: 34px; font-size: .9rem; border-radius: 9px; }
  .room-card .rtabs-nav { gap: .3rem; }
}


/* ============================================================
   Property Videos — players embedded straight into the carousel
   slides (no thumbnail, no modal). 3 per row on desktop, matching
   the Similar Hotels slider.
   ============================================================ */
.dt-vid { overflow: hidden; }
/* The card shell lifts on hover for link cards; these are players, so hold still. */
.dt-vid:hover { transform: none; }
.dt-vid-frame { background: #000; }
.dt-vid-frame iframe { display: block; width: 100%; height: 100%; }
/* Swiper drags by pointer, which an iframe swallows — so the arrows are the
   real control here. Keep them visible rather than hover-revealed. */
.vid-swiper { padding-bottom: 4px; }


/* ============================================================
   Room Add-Ons tab — 2 per row, icon left / content right.
   Scoped to the in-card Add-Ons panel so the booking page's
   selectable add-ons and the service-apartment cards keep the
   original stacked layout.
   ============================================================ */
.rtab-panel[data-panel="addons"] .addon-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.rtab-panel[data-panel="addons"] .addon-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: .85rem;
  row-gap: .15rem;
  padding: 1rem 1.05rem;
}
.rtab-panel[data-panel="addons"] .ao-ic {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}
.rtab-panel[data-panel="addons"] .ao-title { grid-column: 2; grid-row: 1; }
.rtab-panel[data-panel="addons"] .ao-desc  { grid-column: 2; grid-row: 2; }
.rtab-panel[data-panel="addons"] .ao-foot  { grid-column: 2; grid-row: 3; margin-top: .35rem; }

/* The Best Value ribbon sits on the top-right corner; keep the title clear of it. */
.rtab-panel[data-panel="addons"] .addon-card:has(.ao-badge) .ao-title { padding-right: 4.6rem; }

/* Phones: one full-width card per row — two horizontal cards side by side
   leave no usable width for the text. Overrides the 2-col !important rule
   in the max-width:767px block above. */
@media (max-width: 767px) {
  .rtab-panel[data-panel="addons"] .addon-grid {
    grid-template-columns: 1fr !important;
    gap: .6rem;
  }
  .rtab-panel[data-panel="addons"] .addon-card { padding: .8rem .85rem; column-gap: .7rem; }
  .rtab-panel[data-panel="addons"] .ao-ic { width: 44px; height: 44px; font-size: 1.15rem; }
  .rtab-panel[data-panel="addons"] .ao-title { font-size: .9rem; }
  .rtab-panel[data-panel="addons"] .ao-desc { font-size: .72rem; }
  .rtab-panel[data-panel="addons"] .ao-price { font-size: .95rem; }
}



/* Booking flow — picks row on the select-dates step, and inline errors. */
.sd-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.sd-pick { display: flex; flex-direction: column; gap: 6px; }
.sd-pick > span { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.sd-pick select, .sd-pick input {
  width: 100%; padding: .6rem .75rem; border-radius: 10px; font-size: .9rem;
  border: 1.5px solid var(--border-soft); background: var(--bg-card); color: var(--text-main);
}
.sd-errs {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 14px;
  padding: .7rem .9rem; border-radius: 10px; font-size: .84rem; font-weight: 600;
  background: rgba(220,38,38,.08); color: #b91c1c; border: 1px solid rgba(220,38,38,.25);
}
button.sd-continue { border: 0; width: 100%; cursor: pointer; }
button.sd-continue.dis { cursor: not-allowed; }
@media (max-width: 767px) { .sd-picks { grid-template-columns: 1fr 1fr; } }

/* Booking — payment method chooser. */
.pm-list { display: grid; gap: 10px; }
.pm-opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 1rem 1.1rem; border-radius: 14px; background: var(--bg-card);
  border: 1.5px solid var(--border-soft); transition: border-color .25s ease, box-shadow .25s ease;
}
.pm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pm-opt .pm-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--bg-soft); color: var(--primary); flex-shrink: 0; }
.pm-opt .pm-tx { display: flex; flex-direction: column; min-width: 0; }
.pm-opt .pm-tx small { color: var(--text-muted); font-size: .76rem; }
.pm-opt .pm-tick { margin-left: auto; color: var(--border-soft); font-size: 1.2rem; }
.pm-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.pm-opt:has(input:checked) .pm-tick { color: var(--primary); }
.pm-opt:has(input:checked) .pm-ic { background: var(--grad-primary); color: #fff; }

/* Booking — multi-room selection step. */
.br-card { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px; }
.br-card.is-picked { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.br-img img { width: 100%; height: 100px; object-fit: cover; border-radius: 12px; display: block; }
.br-qty { text-align: center; padding-right: 6px; }
.br-ql { display: block; font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.br-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.br-stepper button {
  width: 38px; height: 40px; border: 0; background: var(--bg-soft); color: var(--text-main);
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.br-stepper button:hover { background: var(--primary); color: #fff; }
.br-input { width: 56px; height: 40px; border: 0; text-align: center; font-weight: 700; background: var(--bg-card); color: var(--text-main); }
.br-input::-webkit-outer-spin-button, .br-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.br-input { -moz-appearance: textfield; }
#brNext:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 767px) {
  .br-card { grid-template-columns: 96px minmax(0,1fr); }
  .br-qty { grid-column: 1 / -1; text-align: left; }
}

/* Booking dates — fixed check-in/out times and the policy note. */
.tp-fixed { font-weight: 700; color: var(--text-main); font-size: .95rem; }
.tp-note { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.sd-policy {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  margin: 0 0 14px; padding: .65rem 1rem; border-radius: 12px; font-size: .84rem;
  background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border-soft);
}
.sd-policy b { color: var(--text-main); }


/* Extra-person terms inside a room's Rates tab (hotels/details). */
.rx-list{ list-style:none; margin:0 0 1rem; padding:.7rem .9rem; display:grid; gap:.45rem;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:12px; font-size:.86rem; }
.rx-list li{ display:flex; align-items:flex-start; gap:.5rem; color:var(--text-body); }
.rx-list li i{ color:#059669; margin-top:.15rem; flex:none; }
.rx-none{ display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; padding:.6rem .9rem;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:12px;
  font-size:.84rem; color:var(--text-muted); }


/* Fare breakup shown inline on the confirmation page (not the sliding drawer). */
.fare-breakup.fb-static{ position:static; transform:none; opacity:1; visibility:visible;
  max-height:none; box-shadow:none; border:1px solid var(--border-soft); border-radius:14px;
  padding:1rem 1.1rem; background:var(--bg-card); }


/* Customer panel avatar — initials, since no photo is stored. */
.ds-avatar{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--grad-primary,linear-gradient(135deg,#7c3aed,#a78bfa)); color:#fff;
  font-weight:800; font-size:.92rem; letter-spacing:.02em; }
.ds-user .ds-avatar{ width:38px; height:38px; font-size:.84rem; }


/* Profile rows that display a value rather than linking somewhere: same tile
   look as .prof-sec, without the hover lift that implies a click. */
.prof-sec.prof-static{ cursor:default; }
.prof-sec.prof-static:hover{ transform:none; box-shadow:none; border-color:var(--border-soft); }
.prof-sec .ps-val{ color:var(--text-main); font-weight:600; font-size:.9rem; }

/* ============================================================================
   Booking grid — cards instead of a wide table.
   Shared by the customer and agent panels: the four per-type booking lists,
   the "All bookings" list, and the dashboard's Recent Bookings panels.
   A booking carries far more than fits a row on a phone, so each one is a
   card and the cards flow into as many columns as the viewport allows.
   ========================================================================= */
.bk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
/* The dashboard panels sit two-up already, so their cards run narrower. */
.bk-grid.bk-grid-compact { gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Below 380px a 330px minimum would overflow; one column is the safe floor. */
@media (max-width: 400px) { .bk-grid, .bk-grid.bk-grid-compact { grid-template-columns: 1fr; } }

.bk-card { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }

/* Header: property + the status pill, which stays on the first line. */
.bk-card .bkc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.bk-card .bkc-prop { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.bk-card .bkc-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 1rem; background: var(--grad-primary); }
.bk-card .bkc-name { min-width: 0; }
.bk-card .bkc-name b { display: block; font-size: .95rem; color: var(--text-main); line-height: 1.3;
  overflow-wrap: anywhere; }
.bk-card .bkc-name small { display: block; color: var(--text-muted); font-size: .78rem; overflow-wrap: anywhere; }
.bk-card .bkc-top .status-pill { flex: none; }

/* Body: label/value rows that wrap rather than forcing the card wider. */
.bk-card .bkc-rows { display: flex; flex-direction: column; gap: .4rem; }
.bk-card .bkc-row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: .84rem; }
.bk-card .bkc-row > span { color: var(--text-muted); flex: none; }
.bk-card .bkc-row > b, .bk-card .bkc-row > div { color: var(--text-main); text-align: right; min-width: 0;
  overflow-wrap: anywhere; font-weight: 700; }
.bk-card .bkc-row .bkc-sub { display: block; font-weight: 500; color: var(--text-muted); font-size: .76rem; }
.bk-card .bkc-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bk-card .bkc-amt { font-size: 1rem; }
.bk-card .bkc-earn { color: var(--teal, #14b8a6); }

/* Footer: the actions, pinned to the bottom so cards of different heights
   still line their buttons up. */
.bk-card .bkc-foot { margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bk-card .bkc-when { font-size: .74rem; color: var(--text-muted); }

/* ============================================================================
   Packages & Day Outings — the experiences band on a property detail page.
   Same auto-fill grid as the booking cards, so it reflows by available width
   rather than by fixed breakpoints.
   ========================================================================= */
.pkg-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 360px) { .pkg-grid { grid-template-columns: 1fr; } }

.pkg-card { position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.3rem;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
/* The one the property wants picked. */
.pkg-card.featured { border-color: transparent; box-shadow: var(--shadow-glow); }

.pkg-card .pkg-ribbon { position: absolute; top: 1rem; right: -.25rem; z-index: 2;
  background: var(--grad-gold); color: #4a2c00; font-size: .66rem; font-weight: 800;
  letter-spacing: .06em; padding: .3rem .7rem; border-radius: 6px 0 0 6px; box-shadow: var(--shadow-sm); }

.pkg-card .pkg-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; font-size: 1.2rem; background: var(--grad-primary); margin-bottom: .8rem; }
.pkg-card .pkg-time { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); }
.pkg-card h5 { font-size: 1.05rem; color: var(--text-main); overflow-wrap: anywhere; }

.pkg-card .pkg-price { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem;
  color: var(--primary); line-height: 1.2; margin-bottom: .5rem; }
.pkg-card .pkg-price small { font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.pkg-card .pkg-price .pkg-was { font-size: .95rem; font-weight: 600; color: var(--text-muted); margin-right: .3rem; }
/* The child rate, shown only on a per-person package that has one. */
.pkg-card .pkg-child { display: flex; align-items: center; gap: .35rem; font-size: .8rem;
  font-weight: 700; color: var(--teal, #14b8a6); margin: -.2rem 0 .6rem; }
.pkg-card .pkg-child span { font-weight: 600; color: var(--text-muted); }
.pkg-card .pkg-desc { font-size: .85rem; color: var(--text-muted); margin-bottom: .7rem; }

.pkg-card .pkg-feat { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex;
  flex-direction: column; gap: .45rem; }
.pkg-card .pkg-feat li { display: flex; gap: .5rem; font-size: .85rem; color: var(--text-main);
  line-height: 1.5; overflow-wrap: anywhere; }
.pkg-card .pkg-feat li i { flex: none; margin-top: .18rem; color: var(--teal, #14b8a6); font-size: .85rem; }
.pkg-card .pkg-cx-link { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  border: 0; background: none; padding: 0; margin-bottom: .8rem; font-size: .8rem; font-weight: 700;
  color: var(--primary, #6d28d9); cursor: pointer; }
.pkg-card .pkg-cx-link:hover { text-decoration: underline; }