/* ============================================================
   TRAVELEXPERT — 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; }
/* A gateway still running against its sandbox keys. Shared by the room flow's
   review step and the package checkout, so it lives here rather than in one
   page's own <style>. */
.pm-test { font-size: .6rem; font-weight: 800; letter-spacing: .06em; background: #fff4e2; color: #8a5e0a;
  border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: middle; }

/* Labelled select/date field with a hint underneath. The rooms step has its
   own copy scoped to .room-guests, which is more specific and so still wins
   there; this generic one is for pages outside that block. */
.rg-field { display: flex; flex-direction: column; gap: .25rem; }
.rg-field label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted); display: flex; align-items: center; gap: .3rem; margin: 0; }
.rg-field label i { color: var(--primary); }
.rg-field .form-select, .rg-field .form-control { font-weight: 700; border-radius: 10px; }
.rg-field select:disabled { opacity: .55; cursor: not-allowed; }
.rg-hint { font-size: .68rem; color: var(--text-muted); margin-top: 3px; }

/* 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; }
/* "Cancellation Policy" link-button. Unscoped, because it appears both on a
   package card and on the package checkout page, and must read the same in
   either place. */
.pkg-cx-link { display: inline-flex; align-items: center; gap: .35rem;
  border: 0; background: none; padding: 0; font-size: .8rem; font-weight: 700;
  color: var(--primary, #6d28d9); cursor: pointer; }
.pkg-cx-link:hover { text-decoration: underline; }
/* Inside a card it also has to sit hard left and clear the CTA beneath it. */
.pkg-card .pkg-cx-link { align-self: flex-start; margin-bottom: .8rem; }

/* Booking-style pill tabs (#bkTabs). Used by the customer and agent booking
   lists, package bookings, and the commission pages — one definition here
   rather than a copy pasted into each view, which is how the commission pages
   ended up on Bootstrap's default blue. */
#bkTabs .nav-link { color: var(--text-muted); font-weight: 700; font-size: .88rem; border-radius: 50px; padding: .55rem 1.2rem; }
#bkTabs .nav-link.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
#bkTabs .nav-link .badge-dot { position: static; display: inline-grid; margin-left: .4rem; border: none; }

/* Auth pages (customer / agent): the brand block renders the configured Site
   Settings logo when there is one. Sized by height so any aspect ratio fits,
   with the portal label sitting under it rather than beside it. */
.brand-logo.brand-logo-img { align-items: flex-start; }
.brand-logo .logo-img { display: block; height: 46px; width: auto; max-width: 100%; }
.brand-logo .logo-img + .logo-tag { display: block; margin-top: .4rem; }
@media (max-width: 575.98px) { .brand-logo .logo-img { height: 38px; } }