/* ================================================================
   style.css — SaaS Boarding House Management System
   ================================================================ */
:root {
    --font-normal:"Segoe UI",Arial,Helvetica,sans-serif;
    --g50:#f0fdf4;--g100:#dcfce7;--g200:#bbf7d0;--g400:#4ade80;
    --g500:#22c55e;--g600:#16a34a;--g700:#15803d;--g800:#166534;--g900:#14532d;
    --ink:#0a0f1e;--ink-2:#1e2640;--ink-m:#5a6481;--ink-f:#8e98b0;--ink-xf:#c4cad8;
    --bg:#f5f7fb;--bg-2:#eef1f7;--surface:#ffffff;--border:#e4e8f0;--border-2:#d0d6e8;
    --sidebar:#090d1a;--sidebar-2:#111827;--sidebar-3:#1a2235;
    --red:#ef4444;--amber:#f59e0b;--blue:#3b82f6;--indigo:#6366f1;
    --r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:9999px;
    --sh-xs:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --sh-sm:0 2px 8px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
    --sh-md:0 6px 20px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05);
    --sh-lg:0 16px 48px rgba(0,0,0,.10),0 6px 16px rgba(0,0,0,.06);
    --sh-xl:0 28px 70px rgba(0,0,0,.14),0 10px 24px rgba(0,0,0,.08);
    --sh-g:0 8px 28px rgba(22,163,74,.28);
    --ease-out:cubic-bezier(.22,.68,0,1.2);
    --ease-smooth:cubic-bezier(.4,0,.2,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --dur:220ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-normal);background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-xf);}
h1,h2,h3{font-family:var(--font-normal);}
.flex-grow-1{min-width:0;max-width:100vw;}

/* ================================================================
   NAVBAR
   ================================================================ */
.home-nav{
    background:rgba(9,13,26,0.96)!important;
    /* No backdrop-filter here: the bar is 96% opaque, so the blur was almost
       invisible while forcing a full re-blur of the page on every scroll
       frame (visible scroll jank on integrated GPUs). */
    border-bottom:1px solid rgba(255,255,255,0.06)!important;
    padding:0!important;
    box-shadow:0 4px 30px rgba(0,0,0,0.3)!important;
    transition:background-color var(--dur) var(--ease-smooth),box-shadow var(--dur) var(--ease-smooth);
    /* ✅ NOT sticky — removes all gap issues */
    position:sticky;
    top: 0;
    z-index:1030;
}
.home-nav .container{
    padding-top:14px;
    padding-bottom:14px;
}

.navbar-brand{
    font-family:'Cormorant Garamond',serif!important;
    font-size:1.5rem!important;
    font-weight:700!important;
    letter-spacing:-0.02em;
    color:#fff!important;
    display:flex;
    align-items:center;
    gap:8px;
}

.navbar-brand .brand-icon{
    width:34px;
    height:34px;
    background:var(--g600);
    border-radius:var(--r-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 16px rgba(22,163,74,0.45);
    transition:box-shadow var(--dur);
}

.navbar-brand:hover .brand-icon{
    box-shadow:0 0 24px rgba(22,163,74,0.65);
}

.navbar-brand .brand-dot{
    color:var(--g400);
}

.navbar .nav-link{
    font-size:0.75rem!important;
    font-weight:600!important;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5)!important;
    padding:7px 16px!important;
    border-radius:var(--r-pill);
    transition:all var(--dur) var(--ease-smooth);
    position:relative;
}

.navbar .nav-link:hover{
    color:#fff!important;
    background:rgba(255,255,255,0.07);
}

.navbar .nav-link.active{
    color:#fff!important;
}

.navbar .nav-link.active::after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:50%;transform:translateX(-50%);
    width:20px;
    height:2px;
    background:var(--g500);
    border-radius:2px;
}

.nav-btn{
    font-size:0.78rem!important;
    font-weight:600!important;
    padding:8px 20px!important;
    border-radius:var(--r-pill)!important;
    letter-spacing:0.03em;
    transition:all var(--dur) var(--ease-spring)!important;
}

.nav-btn-ghost{
    color:rgba(255,255,255,0.75)!important;
    border:1.5px solid rgba(255,255,255,0.2)!important;
    background:transparent!important;
}

.nav-btn-ghost:hover{
    color:#fff!important;
    border-color:rgba(255,255,255,0.45)!important;
    background:rgba(255,255,255,0.07)!important;
}

.nav-btn-primary{
    background:var(--g600)!important;
    border:none!important;
    color:#fff!important;
    box-shadow:var(--sh-g);
}

.nav-btn-admin{
    background:#dc2626!important;
    color:#fff!important;
    border:none!important;
    box-shadow:0 8px 24px rgba(220,38,38,0.3)!important;
}
.nav-btn-admin:hover{
    background:#b91c1c!important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(220,38,38,0.4)!important;
}

.nav-btn-landlord{
    background:#2563eb!important;
    color:#fff!important;
    border:none!important;
    box-shadow:0 8px 24px rgba(37,99,235,0.3)!important;
}
.nav-btn-landlord:hover{
    background:#1d4ed8!important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(37,99,235,0.4)!important;
}

.nav-btn-tenant{
    background:var(--g600)!important;
    color:#fff!important;
    border:none!important;
    box-shadow:var(--sh-g)!important;
}
.nav-btn-tenant:hover{
    background:var(--g700)!important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(22,163,74,0.38)!important;
}

.nav-btn-danger{
    color:rgba(255,255,255,0.65)!important;
    border:1.5px solid rgba(239,68,68,0.3)!important;
    background:transparent!important;
}

.nav-btn-danger:hover{
    color:#fff!important;
    border-color:var(--red)!important;
    background:rgba(239,68,68,0.1)!important;
    transform:translateY(-1px);
}

.nav-user-chip{
    display:flex;
    align-items:center;
    gap:8px;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--r-pill);
    padding:5px 14px 5px 7px;
    font-size:0.8rem;
    color:rgba(255,255,255,0.85);
}

.nav-user-chip .user-dot{
    width:24px;
    height:24px;
    background:linear-gradient(135deg,var(--g600),var(--g800));
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.7rem;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}
.nav-user-chip.admin .user-dot{ background:linear-gradient(135deg,#dc2626,#991b1b)!important; }
.nav-user-chip.landlord .user-dot{ background:linear-gradient(135deg,#2563eb,#1d4ed8)!important; }
.nav-user-chip.tenant .user-dot{ background:linear-gradient(135deg,#16a34a,#166534)!important; }

.nav-user-chip strong{
    font-weight:600;
    color:#fff;
}

/* Compact mobile navbar: the menu stays inside the navbar instead of
   becoming a tall, misaligned dark panel. */
.home-nav .navbar-toggler{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--r-sm);color:rgba(255,255,255,.78)!important;background:rgba(255,255,255,.06);}
.home-nav .navbar-toggler:hover{background:rgba(255,255,255,.12);color:#fff!important;}

@media(max-width:991.98px){
    .home-nav .container{max-width:100%;padding:10px 18px;}
    .home-nav .navbar-toggler{display:inline-flex;}
    .home-nav .navbar-collapse{flex-basis:100%;margin-top:10px;padding:12px 0 4px;border-top:1px solid rgba(255,255,255,.1);max-height:calc(100dvh - 72px);overflow-y:auto;}
    .home-nav .navbar-nav{width:100%;margin:0!important;gap:3px!important;}
    .home-nav .navbar-nav .nav-link{display:flex;align-items:center;width:100%;padding:10px 12px!important;letter-spacing:.08em;}
    .home-nav .navbar-nav .nav-link.active::after{left:12px;bottom:2px;transform:none;width:28px;}
    .home-nav .navbar-collapse>div:last-child{width:100%;align-items:stretch!important;margin-top:12px!important;padding-bottom:4px;}
    .home-nav .navbar-collapse .nav-user-chip{width:100%;justify-content:flex-start;border-radius:var(--r-sm);padding:7px 12px 7px 8px;}
    .home-nav .navbar-collapse .nav-btn{width:100%;display:flex;align-items:center;justify-content:center;}
}
@media(max-width:576px){
    .home-nav .container{padding-inline:12px;}
    .navbar-brand{font-size:1.28rem!important;}
    .navbar-brand .brand-icon{width:32px;height:32px;}
}

/* ================================================================
   HERO — fills viewport height exactly, no overflow gaps
   ================================================================ */
.hero-section{
    /* ✅ Use min-height so it never creates extra whitespace */
    min-height: calc(100vh - 66px); /* 66px = approx navbar height */
    display:flex;
    align-items:center;
    position:relative;
    background:
        linear-gradient(135deg,rgba(9,13,26,0.92) 0%,rgba(9,30,20,0.85) 60%,rgba(14,33,22,0.8) 100%),
        url('https://images.unsplash.com/photo-1555854817-5b2738a77014?auto=format&fit=crop&w=1800&q=85');
    background-size:cover;
    background-position:center;
    /* ✅ NO background-attachment:fixed — causes height issues on some browsers */
    overflow:hidden;
    color:white;
    /* ✅ NO margin/padding-bottom */
}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 20% 50%,rgba(22,163,74,0.12),transparent),radial-gradient(ellipse 50% 70% at 80% 80%,rgba(22,163,74,0.07),transparent);pointer-events:none;animation:heroGlow 8s ease-in-out infinite alternate;}
.hero-section::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;opacity:0.6;}
@keyframes heroGlow{from{opacity:0.7;}to{opacity:1;}}

.hero-content{position:relative;z-index:2;padding:60px 0;max-width:680px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(22,163,74,0.15);border:1px solid rgba(22,163,74,0.3);border-radius:var(--r-pill);padding:6px 16px;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--g400);margin-bottom:1.6rem;animation:fadeSlideUp 0.6s var(--ease-smooth) both;}
.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--g400);border-radius:50%;box-shadow:0 0 8px var(--g400);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 6px var(--g400);}50%{box-shadow:0 0 14px var(--g400),0 0 20px rgba(74,222,128,0.4);}}
.hero-content h1{font-family:'Outfit',sans-serif;font-size:clamp(2.8rem,6vw,5rem);font-weight:700;line-height:1.05;letter-spacing:-0.03em;margin-bottom:1.4rem;animation:fadeSlideUp 0.6s 0.1s var(--ease-smooth) both;}
.hero-content h1 em{font-style:italic;color:var(--g400);}
.hero-content .hero-sub{font-size:1.05rem;font-weight:300;color:rgba(255,255,255,0.62);line-height:1.7;margin-bottom:2.2rem;max-width:500px;animation:fadeSlideUp 0.6s 0.18s var(--ease-smooth) both;}
.hero-cta-group{display:flex;gap:14px;flex-wrap:wrap;animation:fadeSlideUp 0.6s 0.26s var(--ease-smooth) both;}
.btn-hero-primary{background:var(--g600);border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:0.9rem;padding:14px 32px;border-radius:var(--r-pill);box-shadow:var(--sh-g),inset 0 1px 0 rgba(255,255,255,0.15);transition:all var(--dur) var(--ease-spring);display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;}
.btn-hero-primary:hover{background:var(--g500);color:#fff;transform:translateY(-3px);box-shadow:0 14px 36px rgba(22,163,74,0.42),inset 0 1px 0 rgba(255,255,255,0.15);}
.btn-hero-primary i{transition:transform var(--dur) var(--ease-spring);}
.btn-hero-primary:hover i{transform:translateX(3px);}
.btn-hero-ghost{background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.85);font-family:'Outfit',sans-serif;font-weight:500;font-size:0.9rem;padding:13px 28px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease-spring);text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.btn-hero-ghost:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.4);color:#fff;transform:translateY(-2px);}
.hero-stats-row{display:flex;gap:2.5rem;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,0.1);animation:fadeSlideUp 0.6s 0.34s var(--ease-smooth) both;}
.hero-stat .stat-num{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-0.03em;}
.hero-stat .stat-num span{color:var(--g400);font-size:1.4rem;}
.hero-stat .stat-label{font-size:0.75rem;font-weight:500;color:rgba(255,255,255,0.4);letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;}

/* Hero visual card (right side) */
.hero-visual{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:40%;max-width:540px;animation:fadeSlideLeft 0.8s 0.3s var(--ease-smooth) both;z-index:2;}
.hero-visual-card{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,0.06);position:relative;background:var(--sidebar-2);}
.hero-carousel{position:relative;width:100%;height:480px;overflow:hidden;}
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .65s var(--ease-smooth);}
.hero-slide.is-active{opacity:1;pointer-events:auto;}
.hero-slide>img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-visual-card img{width:100%;height:480px;object-fit:cover;display:block;}
.hero-visual-badge{position:absolute;bottom:20px;left:20px;right:20px;min-width:0;background:rgba(9,13,26,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-md);padding:14px 18px;display:flex;align-items:center;gap:12px;}
.hero-visual-badge .badge-icon{width:40px;height:40px;background:var(--g600);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;}
.hero-visual-badge .badge-text{flex:1 1 auto;min-width:0;overflow:hidden;}
.hero-visual-badge .badge-text strong{display:block;font-size:0.9rem;color:#fff;font-weight:600;}
.hero-visual-badge .badge-text span{display:block;font-size:0.75rem;color:rgba(255,255,255,0.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-visual-badge .badge-price{flex:0 1 auto;min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,2.2vw,1.5rem);font-weight:700;letter-spacing:-0.02em;color:var(--g400);}
.hero-carousel-dots{position:absolute;top:18px;right:18px;z-index:3;display:flex;gap:6px;padding:6px 8px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);background:rgba(9,13,26,.6);backdrop-filter:blur(8px);}
.hero-carousel-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:all var(--dur);}
.hero-carousel-dot.is-active{width:22px;border-radius:var(--r-pill);background:var(--g400);}
.hero-carousel-dot:focus-visible{outline:2px solid var(--g400);outline-offset:3px;}

@keyframes fadeSlideUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeSlideLeft{from{opacity:0;transform:translateY(-50%) translateX(40px);}to{opacity:1;transform:translateY(-50%) translateX(0);}}

/* ================================================================
   SEARCH BAR — inline block, NO sticky, NO position issues
   ================================================================ */
.search-bar-section{
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:18px 0;
    box-shadow:var(--sh-sm);
    display: none;
    /* ✅ position:relative (default) — not sticky, not fixed */
    position:relative;
    z-index:10;
}
.search-bar-inner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.search-bar-inner .search-input-wrap{flex:1;min-width:220px;position:relative;}
.search-bar-inner .search-input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-f);font-size:0.9rem;}
.search-bar-inner input{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Outfit',sans-serif;font-size:0.875rem;color:var(--ink);background:var(--bg);transition:border-color var(--dur),box-shadow var(--dur);outline:none;}
.search-bar-inner input:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(22,163,74,0.12);background:var(--surface);}
.filter-chip{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:0.78rem;font-weight:600;color:var(--ink-m);background:var(--surface);cursor:pointer;transition:all var(--dur);white-space:nowrap;}
.filter-chip:hover,.filter-chip.active{border-color:var(--g600);color:var(--g700);background:var(--g50);}
.filter-chip.active{background:var(--g100);}
.result-count{font-size:0.8rem;color:var(--ink-m);margin-left:auto;white-space:nowrap;font-weight:500;}
.result-count strong{color:var(--ink);}

/* Agoda-style filter bar: search + Filters button + sort chips, with an
   expandable panel and removable active-filter chips. */
.room-filter-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:14px;margin-bottom:1.6rem;}
.room-filter-bar .search-bar-inner input{background:var(--bg);}
.filter-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:0.78rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;transition:all var(--dur);}
.filter-toggle-btn:hover,.filter-toggle-btn[aria-expanded="true"]{border-color:var(--g600);color:var(--g700);background:var(--g50);}
.filter-toggle-btn:focus-visible{outline:2px solid var(--g600);outline-offset:2px;}
.filter-count-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--g600);color:#fff;font-size:0.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.filter-count-badge[hidden]{display:none;}
.filter-chip-group{display:flex;gap:8px;flex-wrap:wrap;}

.filter-panel{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
.filter-panel[hidden]{display:none;}
.filter-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.filter-panel-head strong{font-size:0.82rem;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
.filter-clear-btn{background:none;border:0;padding:2px 0;color:var(--g700);font-family:inherit;font-size:0.75rem;font-weight:600;cursor:pointer;}
.filter-clear-btn:hover{color:var(--g800);text-decoration:underline;}
.filter-panel-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;}
.filter-group-title{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-f);margin-bottom:8px;}
.filter-select{width:100%;min-width:0;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Outfit',sans-serif;font-size:0.82rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color var(--dur),box-shadow var(--dur);cursor:pointer;}
.filter-select:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(22,163,74,0.12);background:var(--surface);}

/* Price filter: editable min/max boxes with a dual-handle slider underneath.
   The slider is one painted track with two range inputs stacked on top, their
   thumbs the only clickable part of each. */
.price-inputs{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.price-inputs span{color:var(--ink-f);font-size:0.8rem;}
.price-inputs input{width:100%;min-width:0;padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Outfit',sans-serif;font-size:0.82rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color var(--dur),box-shadow var(--dur);}
.price-inputs input:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(22,163,74,0.12);background:var(--surface);}
.price-slider{position:relative;height:34px;margin-top:2px;}
.price-slider-track{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:var(--bg-2);border-radius:var(--r-pill);}
.price-slider-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--g600);border-radius:var(--r-pill);}
.price-slider input[type=range]{position:absolute;inset:0;width:100%;height:34px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;}
.price-slider input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent;border:0;}
.price-slider input[type=range]::-moz-range-track{height:4px;background:transparent;border:0;}
.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--surface);border:2.5px solid var(--g600);box-shadow:var(--sh-sm);cursor:grab;transition:transform var(--dur);}
.price-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2.5px solid var(--g600);box-shadow:var(--sh-sm);cursor:grab;}
.price-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08);}
.price-slider input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--g600);outline-offset:2px;}
.price-slider input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--g600);outline-offset:2px;}

.filter-search{position:relative;margin-bottom:6px;}
.filter-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ink-f);font-size:0.75rem;pointer-events:none;}
.filter-search input{width:100%;min-width:0;padding:6px 9px 6px 28px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Outfit',sans-serif;font-size:0.8rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color var(--dur),box-shadow var(--dur);}
.filter-search input:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(22,163,74,0.12);background:var(--surface);}
.filter-check[hidden]{display:none;}

.filter-check{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:0.8rem;color:var(--ink-m);cursor:pointer;}
.filter-check input{width:15px;height:15px;margin:0;accent-color:var(--g600);cursor:pointer;}
.filter-check-count{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink-f);font-size:0.66rem;font-weight:700;line-height:1.6;text-align:center;}
.filter-check.has-none{opacity:0.55;}
.filter-check.has-none .filter-check-count{background:transparent;}
.filter-check:hover .filter-check-count{background:var(--g100);color:var(--g800);}
.filter-done-btn{width:100%;margin-top:16px;padding:10px;border:0;border-radius:var(--r-sm);background:var(--g600);color:#fff;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;transition:background var(--dur);}
.filter-done-btn:hover{background:var(--g700);}

.applied-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.applied-filters[hidden]{display:none;}
.applied-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--g200);border-radius:var(--r-pill);background:var(--g50);color:var(--g800);font-family:inherit;font-size:0.74rem;font-weight:600;cursor:pointer;transition:background var(--dur);}
.applied-chip:hover{background:var(--g100);}
.applied-chip i{font-size:0.62rem;opacity:0.7;}

.price-range-note{display:flex;align-items:center;gap:8px;margin-bottom:1rem;padding:10px 14px;border:1px solid var(--g200);border-radius:var(--r-sm);background:var(--g50);color:var(--g800);font-size:0.82rem;}
.price-range-note[hidden]{display:none;}
.price-range-note i{color:var(--g600);}
.price-range-note strong{font-weight:700;}

.room-no-results[hidden]{display:none;}
.filter-reset-btn{margin-top:14px;padding:9px 20px;border:1.5px solid var(--g600);border-radius:var(--r-pill);background:var(--surface);color:var(--g700);font-family:inherit;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all var(--dur);}
.filter-reset-btn:hover{background:var(--g50);}

/* ================================================================
   ROOMS SECTION — clean padding, no overflow
   ================================================================ */
.rooms-section{
    padding:50px 0 70px;
    background:var(--bg);
    display: block;
    margin-bottom: 0;
    /* ✅ No min-height — prevents black gap at bottom */
}
.section-title-wrap{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;}
.section-title-wrap h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1.1;}
.section-title-wrap h2 em{font-style:italic;color:var(--g600);}
.section-tag{display:inline-flex;align-items:center;gap:6px;background:var(--g100);color:var(--g800);font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);margin-bottom:8px;border:1px solid var(--g200);}
.section-subtitle{font-size:0.9rem;color:var(--ink-m);margin-top:6px;}
.section-view-all{color:var(--g600);font-size:0.82rem;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:4px;transition:gap var(--dur),color var(--dur);}
.section-view-all:hover{color:var(--g700);gap:8px;}

/* Room card */
.room-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--r-lg)!important;overflow:hidden;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-smooth),border-color var(--dur) var(--ease-smooth);box-shadow:var(--sh-sm)!important;height:100%;display:flex;flex-direction:column;position:relative;}
.room-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)!important;border-color:rgba(22,163,74,0.3)!important;}
.room-card-img-wrapper{position:relative;overflow:hidden;background:var(--bg-2);cursor:pointer;}
.room-card-img-wrapper::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.3) 0%,transparent 50%);opacity:0;transition:opacity 0.3s var(--ease-smooth);}
.room-card:hover .room-card-img-wrapper::after{opacity:1;}
.room-card img{width:100%;height:220px;object-fit:cover;display:block;transition:transform 0.5s var(--ease-smooth);}
.room-card:hover img{transform:scale(1.06);}
/* A real listing whose landlord has not uploaded a picture yet. It takes the
   same box as a photo so the card keeps its shape, and says plainly that there
   is nothing to show rather than standing in a stock image. */
.room-no-photo{width:100%;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(140deg,var(--bg-2),var(--bg));color:var(--ink-xf);font-family:'Outfit',sans-serif;font-size:0.76rem;font-weight:600;border-bottom:1px solid var(--border);}
.room-no-photo i{font-size:1.9rem;opacity:0.55;}
.view-360-btn{position:absolute;bottom:12px;right:12px;z-index:3;background:rgba(9,13,26,0.82);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-pill);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:6px 14px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(8px);cursor:pointer;transition:all var(--dur) var(--ease-spring);}
.view-360-btn i{font-size:0.9rem;color:var(--g400);}
.view-360-btn:hover{background:var(--g600);border-color:var(--g600);color:#fff;transform:scale(1.04);}
.room-status-badge{position:absolute;top:12px;left:12px;z-index:3;background:var(--g600);color:#fff;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);box-shadow:0 2px 10px rgba(22,163,74,0.4);display:flex;align-items:center;gap:5px;}
.room-status-badge::before{content:'';width:5px;height:5px;background:var(--g200);border-radius:50%;animation:pulse 2s infinite;}
.room-wishlist-btn{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all var(--dur) var(--ease-spring);color:var(--ink-f);font-size:0.9rem;box-shadow:var(--sh-sm);}
.room-wishlist-btn:hover{transform:scale(1.12);color:var(--red);}
.room-wishlist-btn.is-favorite{color:var(--red);background:#fff5f5;}
.room-wishlist-btn i{transition:transform var(--dur) var(--ease-spring);}
.room-wishlist-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(239,68,68,0.3),var(--sh-sm);}
.room-wishlist-btn.fav-pop i{animation:favPop .42s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));}
@keyframes favPop{0%{transform:scale(1);}40%{transform:scale(1.32);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.room-wishlist-btn.fav-pop i{animation:none;}}

/* Landlord line on a room card: the name opens the profile, Chat opens messages */
.room-meta-item.landlord{gap:8px;flex-wrap:wrap;}
.room-landlord-link{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:3px 8px 3px 4px;margin-left:-4px;border:0;border-radius:var(--r-pill);background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background var(--dur),color var(--dur);}
.room-landlord-link strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-landlord-link:hover,.room-landlord-link:focus-visible{background:var(--g50);color:var(--g800);outline:none;}
.room-landlord-link:focus-visible{box-shadow:0 0 0 2px var(--g200);}
.room-landlord-caret{font-size:.7rem;opacity:.55;transition:transform var(--dur);}
.room-landlord-link:hover .room-landlord-caret{transform:translateX(2px);opacity:1;}
.room-card img.room-landlord-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;transform:none!important;}
.room-landlord-chat{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:4px 11px;border:1px solid var(--g200);border-radius:var(--r-pill);background:var(--g50);color:var(--g700);font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;cursor:pointer;transition:all var(--dur);}
.room-landlord-chat:hover,.room-landlord-chat:focus-visible{background:var(--g600);border-color:var(--g600);color:#fff;outline:none;}

/* "View Listings" filter */
.landlord-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;border:1px solid var(--g200);border-radius:var(--r-md);background:var(--g50);color:var(--ink-m);font-size:.85rem;}
.landlord-filter-bar[hidden]{display:none;}
.landlord-filter-bar > i{color:var(--g600);}
.landlord-filter-bar strong{color:var(--ink);}
.landlord-filter-bar button{margin-left:auto;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-m);font-size:.75rem;font-weight:700;padding:5px 12px;}
.landlord-filter-bar button:hover{border-color:var(--g500);color:var(--g700);}

/* Landlord profile modal */
.lp-card{border:0;border-radius:var(--r-xl,24px)!important;overflow:hidden;box-shadow:var(--sh-xl);font-family:'Outfit',sans-serif;}
.lp-close{position:absolute;top:14px;right:14px;z-index:2;}
.lp-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px 18px;background:linear-gradient(160deg,var(--g50),var(--surface) 70%);}
.lp-avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--g500),var(--g700));color:#fff;font-size:2rem;font-weight:700;box-shadow:0 0 0 4px var(--surface),var(--sh-md);}
.lp-avatar img{width:100%;height:100%;object-fit:cover;}
.lp-name{margin:14px 0 4px;font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:700;color:var(--ink);}
.lp-role{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-f);}
.lp-verified{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);background:#dbeafe;color:#1d4ed8;letter-spacing:.02em;text-transform:none;}
.lp-verified[hidden],.lp-business[hidden],.lp-areas[hidden],.lp-note[hidden],.lp-btn-message[hidden]{display:none!important;}
.lp-business{margin-top:8px;font-size:.85rem;color:var(--ink-m);}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.lp-stats > div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;text-align:center;}
.lp-stats > div + div{border-left:1px solid var(--border);}
.lp-stats strong{font-size:1.05rem;color:var(--ink);line-height:1.2;}
.lp-stats span{font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-f);}
.lp-areas{display:flex;align-items:flex-start;gap:8px;padding:12px 24px 0;font-size:.8rem;color:var(--ink-m);}
.lp-areas i{color:var(--g600);margin-top:2px;}
.lp-actions{display:flex;flex-direction:column;gap:8px;padding:18px 24px 24px;}
.lp-btn-message,.lp-btn-listings{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 16px;border-radius:var(--r-pill);font-family:'Outfit',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease-spring);}
.lp-btn-message{border:0;background:var(--g600);color:#fff;box-shadow:var(--sh-g);}
.lp-btn-message:hover{background:var(--g700);transform:translateY(-1px);}
.lp-btn-listings{border:1.5px solid var(--border);background:var(--surface);color:var(--ink);}
.lp-btn-listings:hover{border-color:var(--g500);color:var(--g700);}
.lp-note{font-size:.76rem;color:var(--ink-f);text-align:center;}

/* Favorites message (log-in prompt, failed save) */
.fav-toast{position:fixed;left:50%;bottom:24px;z-index:1090;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:var(--r-pill);background:var(--ink,#0a0f1e);color:#fff;font-family:'Outfit',sans-serif;font-size:.82rem;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity var(--dur),transform var(--dur);}
.fav-toast.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.fav-toast i{color:#fca5a5;}
.fav-toast a{color:var(--g400,#4ade80);font-weight:700;text-decoration:none;white-space:nowrap;}
.fav-toast a:hover{text-decoration:underline;}
.room-card .card-body{padding:1.35rem!important;display:flex;flex-direction:column;flex:1;}
.room-number-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;}
.room-number{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:var(--ink-m);letter-spacing:-0.01em;}
.room-type-pill{font-size:0.67rem;font-weight:700;background:var(--bg-2);color:var(--ink-m);padding:3px 10px;border-radius:var(--r-pill);letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--border);}
.room-pill-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
/* Premium listings that have 360° photos */
.room-tour-pill{display:inline-flex;align-items:center;gap:4px;font-size:0.67rem;font-weight:700;background:var(--g50);color:var(--g800);padding:3px 10px;border-radius:var(--r-pill);letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--g200);}
.room-meta{display:flex;flex-direction:column;gap:3px;margin-bottom:0.9rem;}
.room-meta-item{display:flex;align-items:center;gap:6px;font-size:0.8rem;}
.room-meta-item i{font-size:0.78rem;flex-shrink:0;width:14px;}
.room-meta-item.location{color:var(--red);font-weight:600;}
.room-meta-item.place{color:var(--blue);}
.room-meta-item.landlord{color:var(--ink-m);}
.room-meta-item.landlord strong{color:var(--ink);font-weight:600;}
.room-desc{font-size:0.82rem;color:var(--ink-m);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.room-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border);gap:10px;}
.price-tag{font-family:'Cormorant Garamond',serif;font-size:1.65rem;font-weight:700;color:var(--g700);line-height:1;letter-spacing:-0.02em;}
.price-tag .per-mo{font-family:'Outfit',sans-serif;font-size:0.75rem;color:var(--ink-f);font-weight:400;margin-left:2px;letter-spacing:0;}
.btn-reserve{background:var(--g600)!important;border:none!important;color:#fff!important;font-family:'Outfit',sans-serif!important;font-size:0.8rem!important;font-weight:600!important;padding:9px 22px!important;border-radius:var(--r-pill)!important;transition:all var(--dur) var(--ease-spring)!important;white-space:nowrap;}
.btn-reserve:hover{background:var(--g700)!important;transform:translateY(-2px);box-shadow:var(--sh-g)!important;}
.btn-login-reserve{background:var(--blue)!important;border:none!important;color:#fff!important;font-family:'Outfit',sans-serif!important;font-size:0.8rem!important;font-weight:600!important;padding:9px 22px!important;border-radius:var(--r-pill)!important;transition:all var(--dur) var(--ease-spring)!important;}
.btn-login-reserve:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(59,130,246,0.3)!important;}
.empty-state{padding:5rem 2rem;text-align:center;}
.empty-state .empty-icon{width:80px;height:80px;background:var(--bg-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--ink-xf);margin:0 auto 1.2rem;}
.empty-state h5{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ink);}
.empty-state p{font-size:0.875rem;color:var(--ink-m);margin-top:6px;}

/* ================================================================
   FEATURES STRIP
   ================================================================ */
.features-strip{
    background:var(--sidebar);
    padding:60px 0;
    border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
    display: none;
    /* ✅ No margin — sits flush between rooms and contact */
}
.feature-item{display:flex;flex-direction:column;gap:10px;}
.feature-icon{width:46px;height:46px;border-radius:var(--r-sm);border:1px solid;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.feature-title{font-size:.9rem;font-weight:600;color:#fff;line-height:1.3;}
.feature-desc{font-size:.78rem;color:rgba(255,255,255,0.35);line-height:1.6;}

/* ================================================================
   PRICING SECTION
   ================================================================ */
.pricing-section{padding:70px 0 80px;background:var(--bg);}
.pricing-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.2rem 1.8rem;height:100%;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-smooth),border-color var(--dur);}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(22,163,74,0.3);}
.pricing-card.featured{border-color:var(--g600);box-shadow:var(--sh-g);}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--g600);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 16px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(22,163,74,0.35);}
.pricing-plan-name{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-m);}
.pricing-amount{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin:.4rem 0 1.4rem;line-height:1;}
.pricing-amount span{font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:400;color:var(--ink-f);letter-spacing:0;}
.pricing-features{list-style:none;padding:0;margin:0 0 1.8rem;flex:1;display:flex;flex-direction:column;gap:.7rem;}
.pricing-features li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--ink-m);line-height:1.4;}
.pricing-features li i{color:var(--g600);font-size:.9rem;margin-top:1px;flex-shrink:0;}
/* A Premium feature the plan does not include */
.pricing-features li.is-excluded{color:var(--ink-f);text-decoration:line-through;text-decoration-color:var(--border);}
.pricing-features li.is-excluded i{color:var(--ink-f);}
.pricing-cta{display:block;text-align:center;background:var(--g600);color:#fff!important;font-weight:600;font-size:.88rem;padding:11px 20px;border-radius:var(--r-pill);text-decoration:none;transition:all var(--dur) var(--ease-spring);}
.pricing-cta:hover{background:var(--g700);transform:translateY(-2px);box-shadow:var(--sh-g);}

/* ================================================================
   CONTACT SECTION
   ================================================================ */
.contact-section{
    background:var(--sidebar-2);
    padding:80px 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block;
    overflow: hidden;
    /* ✅ No bottom margin — footer sits flush */
}
.contact-header{margin-bottom:3rem;}
.contact-title{font-family:'Cormorant Garamond',serif;color:#fff;font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:700;letter-spacing:-0.03em;margin-top:10px;}
.contact-title em{font-style:italic;color:var(--g400);}
.contact-sub{color:rgba(255,255,255,0.4);font-size:0.92rem;margin-top:10px;max-width:440px;}

/* Info cards */
.contact-info-card{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-md);padding:16px 18px;transition:border-color var(--dur),background var(--dur);}
.contact-info-card:hover{border-color:rgba(22,163,74,0.3);background:rgba(22,163,74,0.04);}
.cic-icon{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid;display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;}
.cic-label{font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:4px;}
.cic-value{font-size:0.87rem;color:rgba(255,255,255,0.78);font-weight:500;line-height:1.5;}
.cic-value small{color:rgba(255,255,255,0.32);font-size:.76rem;}
.contact-social-btn{width:40px;height:40px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:1rem;transition:all var(--dur) var(--ease-spring);text-decoration:none;}
.contact-social-btn:hover{background:var(--g600)!important;color:#fff!important;border-color:var(--g600)!important;transform:translateY(-3px);}

/* Contact form card */
.contact-form-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-lg);overflow:hidden;}
.contact-form-header{padding:24px 28px 20px;border-bottom:1px solid rgba(255,255,255,0.06);}
.contact-form-header h5{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:4px;}
.contact-form-header p{font-size:0.8rem;color:rgba(255,255,255,0.35);margin:0;}
.contact-form-card form{padding:24px 28px;}
.cf-field{margin-bottom:0;}
.cf-field label{display:block;font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:6px;}
.cf-input-wrap{position:relative;}
.cf-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.25);font-size:0.88rem;pointer-events:none;transition:color 0.2s;}
.cf-input-wrap:focus-within .cf-icon{color:var(--g400);}
.cf-input{width:100%;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.1);border-radius:var(--r-sm);color:#fff;font-family:'Outfit',sans-serif;font-size:0.875rem;padding:11px 13px 11px 40px;outline:none;transition:border-color 0.22s,background 0.22s,box-shadow 0.22s;}
.cf-input::placeholder{color:rgba(255,255,255,0.2);}
.cf-input:focus{border-color:var(--g500);background:rgba(255,255,255,0.08);box-shadow:0 0 0 3px rgba(22,163,74,0.15);}
.cf-textarea{padding-left:13px!important;resize:vertical;min-height:110px;}
.cf-submit-btn{width:100%;background:var(--g600);border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:0.9rem;padding:13px;border-radius:var(--r-sm);letter-spacing:0.03em;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all 0.22s var(--ease-spring);box-shadow:0 4px 16px rgba(22,163,74,0.25);}
.cf-submit-btn:hover{background:var(--g500);transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,163,74,0.38);}
.cf-submit-btn i{transition:transform 0.2s;}
.cf-submit-btn:hover i{transform:translateX(3px);}
.cf-success{text-align:center;padding:2.5rem 1.5rem;}
.cf-success-icon{width:60px;height:60px;background:rgba(22,163,74,0.15);border:2px solid rgba(22,163,74,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--g400);margin:0 auto 1rem;animation:scaleIn 0.4s var(--ease-spring);}
@keyframes scaleIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.cf-success h6{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:6px;}
.cf-success p{font-size:0.82rem;color:rgba(255,255,255,0.4);line-height:1.6;}

/* ================================================================
   FOOTER — flush with contact section above it
   ================================================================ */
.site-footer{
    background:var(--sidebar);
    color:rgba(255,255,255,0.8);
    /* ✅ No extra margin-top — sits directly after contact */
    padding:0;
    position:relative;
}
.footer-top-accent{height:3px;background:linear-gradient(90deg,transparent,var(--g600),transparent);}
.footer-main-row{padding:56px 0 40px;}
.footer-brand-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-brand-icon{width:32px;height:32px;background:var(--g600);border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:#fff;box-shadow:0 0 12px rgba(22,163,74,0.35);}
.footer-brand-name{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-0.02em;}
.footer-brand-desc{font-size:0.82rem;color:rgba(255,255,255,0.32);line-height:1.7;max-width:270px;margin-bottom:1.2rem;}
.footer-socials{display:flex;gap:8px;}
.footer-socials a{width:36px;height:36px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.45);font-size:0.95rem;transition:all var(--dur) var(--ease-spring);text-decoration:none;}
.footer-socials a:hover{background:var(--g600)!important;color:#fff!important;border-color:var(--g600)!important;transform:translateY(-3px);}
.footer-col-title{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.22);margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a,.footer-links span{font-size:0.82rem;color:rgba(255,255,255,0.4);text-decoration:none;transition:color var(--dur);}
.footer-links a:hover{color:var(--g400);}
.footer-bottom-bar{border-top:1px solid rgba(255,255,255,0.06);padding:18px 0 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.footer-bottom-bar span{font-size:0.75rem;color:rgba(255,255,255,0.2);}
.footer-bottom-bar strong{color:rgba(255,255,255,0.42);}

/* ================================================================
   RESERVATION MODAL
   ================================================================ */
.modal-reserve .modal-dialog{max-width:560px;}
.modal-reserve .modal-content{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-xl)!important;box-shadow:var(--sh-xl)!important;overflow:hidden;}
.modal-reserve .modal-header{background:#fff;border-bottom:1px solid var(--border);padding:1.4rem 1.6rem;}
.modal-reserve .modal-title{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;}
.modal-reserve .modal-title .title-icon{width:34px;height:34px;background:var(--g600);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.95rem;color:#fff;box-shadow:0 0 14px rgba(22,163,74,0.3);flex-shrink:0;}
.modal-reserve .btn-close{filter:none;opacity:0.5;}
.modal-reserve .btn-close:hover{opacity:1;}
.reserve-room-preview{display:flex;align-items:center;gap:14px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);padding:14px 16px;margin-bottom:1.5rem;}
.reserve-room-preview img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);flex-shrink:0;}
.reserve-room-preview .rp-name{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.2;}
.reserve-room-preview .rp-meta{font-size:0.78rem;color:var(--ink-m);margin-top:3px;}
.reserve-room-preview .rp-price{margin-left:auto;flex-shrink:0;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:var(--g700);text-align:right;}
.reserve-room-preview .rp-price small{display:block;font-family:'Outfit',sans-serif;font-size:0.7rem;color:var(--ink-f);font-weight:400;}
.modal-reserve .modal-body{padding:1.6rem!important;background:#fff;}
.res-field{margin-bottom:1.1rem;}
.res-field label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-m);margin-bottom:6px;}
.res-input-wrap{position:relative;}
.res-input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-f);font-size:0.9rem;pointer-events:none;transition:color 0.2s;}
.res-input-wrap:focus-within .res-input-icon{color:var(--g600);}
.res-input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--ink);font-family:'Outfit',sans-serif;font-size:0.875rem;padding:11px 13px 11px 40px;outline:none;transition:border-color .22s,background .22s,box-shadow .22s;-webkit-appearance:none;}
.res-input::placeholder{color:var(--ink-xf);}
.res-input:focus{border-color:var(--g600);background:#fff;box-shadow:0 0 0 3px rgba(22,163,74,0.1);}
textarea.res-input{padding-left:13px;resize:vertical;min-height:80px;}
.duration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.duration-option{display:none;}
.duration-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all 0.2s;font-size:0.8rem;font-weight:600;color:var(--ink-m);text-align:center;}
.duration-label span{font-size:0.65rem;color:var(--ink-f);font-weight:400;margin-top:1px;}
.duration-option:checked+.duration-label{border-color:var(--g600);background:var(--g50);color:var(--g700);}
.duration-option:checked+.duration-label span{color:var(--g600);}
.res-estimate{display:flex;align-items:center;justify-content:space-between;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:1.4rem;margin-top:0.3rem;}
.res-estimate .est-label{font-size:0.78rem;color:var(--ink-m);font-weight:500;}
.res-estimate .est-total{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--g700);letter-spacing:-0.02em;}
.res-estimate .est-note{font-size:0.68rem;color:var(--ink-f);font-family:'Outfit',sans-serif;font-weight:400;}
.btn-reserve-submit{width:100%;background:var(--g600);border:none;color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:0.9rem;padding:13px;border-radius:var(--r-sm);letter-spacing:0.03em;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .22s var(--ease-spring);box-shadow:0 4px 16px rgba(22,163,74,.25);cursor:pointer;}
.btn-reserve-submit:hover{background:var(--g700);transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,163,74,.35);}
.btn-reserve-submit i{transition:transform 0.2s;}
.btn-reserve-submit:hover i{transform:translateX(3px);}
.res-divider{height:1px;background:var(--border);margin:1.2rem 0;}
.res-alert{display:flex;align-items:flex-start;gap:10px;border-radius:var(--r-sm);padding:12px 14px;font-size:0.82rem;margin-bottom:1.2rem;animation:fadeSlideUp .3s ease both;}
.res-alert i{flex-shrink:0;font-size:1rem;margin-top:1px;}
.res-alert.error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.reserve-success-state{text-align:center;padding:2rem 1rem;}
.success-anim{width:68px;height:68px;background:rgba(22,163,74,0.12);border:2px solid rgba(22,163,74,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--g400);margin:0 auto 1.2rem;animation:scaleIn .4s var(--ease-spring);}
.reserve-success-state h5{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.reserve-success-state p{font-size:0.85rem;color:var(--ink-m);line-height:1.6;}
.res-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ================================================================
   360° PANNELLUM VIEWER MODAL
   ================================================================ */
.modal-360 .modal-dialog{max-width:min(960px,96vw);}
.modal-360 .modal-content{background:var(--sidebar)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:var(--r-xl)!important;overflow:hidden;box-shadow:var(--sh-xl)!important;}
.modal-360 .modal-header{background:var(--sidebar-2);border-bottom:1px solid rgba(255,255,255,0.07);padding:18px 24px;}
.modal-360 .modal-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;}
.modal-360 .viewer360-title{display:block;min-width:0;color:#fff!important;visibility:visible!important;opacity:1!important;white-space:normal;}
.modal-360 .modal-title i{color:var(--g400);}
.modal-360 .modal-body{padding:0!important;}
.modal-360 .btn-close{filter:invert(1);opacity:0.6;}
.modal-360 .btn-close:hover{opacity:1;}

/* Pannellum container */
.viewer-360-container{position:relative;width:100%;background:var(--sidebar-3);overflow:hidden;}
#pannellumViewer{width:100%;height:clamp(320px,55vh,540px);}

/* Overlay badge (pointer-events:none so pannellum controls still work) */
.viewer-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;pointer-events:none;z-index:10;}
.viewer-top-bar{padding:16px 20px;background:linear-gradient(to bottom,rgba(0,0,0,0.55),transparent);}
.viewer-360-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(22,163,74,0.2);border:1px solid rgba(22,163,74,0.4);border-radius:var(--r-pill);padding:6px 14px;color:var(--g400);font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.viewer-360-badge .spinning-icon{animation:spin360 3s linear infinite;}
@keyframes spin360{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* No-photo fallback */
.viewer-no-photo{width:100%;height:clamp(320px,55vh,540px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);background:var(--sidebar-3);}
.pano-viewer-wrapper{position:relative;width:100%;min-height:260px;overflow:hidden;background:#030712;isolation:isolate;}
.pano-viewer-wrapper iframe{display:block;width:100%;height:100%;min-height:clamp(320px,55vh,540px);border:0;}
.pano-empty-state{display:flex;flex:1;min-height:260px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--ink-f);font-size:0.82rem;}
.pano-empty-state i{font-size:2rem;opacity:0.35;}

/* Fullscreen is applied to the modal content so the viewer keeps its height
   instead of remaining trapped in the original dialog. */
.pano-fullscreen-target{display:flex!important;flex-direction:column;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border-radius:0!important;}
.pano-fullscreen-target .modal-body{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;max-height:none!important;overflow:hidden!important;padding:0!important;}
.pano-fullscreen-target .pano-viewer-wrapper{flex:1 1 auto;height:auto!important;min-height:0!important;}
.pano-fullscreen-target .pano-viewer-wrapper iframe{height:100%!important;min-height:0!important;}
.pano-fullscreen-fallback{position:fixed!important;inset:0!important;z-index:2050!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column;}
.pano-fullscreen-fallback .modal-body{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden!important;padding:0!important;}
.pano-fullscreen-fallback .pano-viewer-wrapper{flex:1 1 auto;height:auto!important;min-height:0!important;}
.pano-fullscreen-fallback .pano-viewer-wrapper iframe{height:100%!important;min-height:0!important;}
body.pano-fallback-open{overflow:hidden!important;}

/* ── 360° viewer stage ──────────────────────────────────────────────────────
   The wrapper owns the height; everything inside fills it absolutely:
       .pano-viewer-wrapper → .viewer-360-container → #pannellumViewer (.pnlm-container)
   A fixed height on #pannellumViewer used to pin the panorama at its modal
   size, so in fullscreen the wrapper grew but the canvas did not, and
   Pannellum's resize() had no new size to pick up. With the stage following
   the wrapper, fullscreen, the phone layout and rotation all hand Pannellum a
   real new box and resize() redraws the scene and its markers in place. */
.modal-360 .pano-viewer-wrapper{display:flex;flex-direction:column;height:min(70vh,650px);min-height:320px;}
.modal-360 .pano-viewer-wrapper > .pano-empty-state{flex:1 1 auto;}
.modal-360 .viewer-360-container{position:absolute;inset:0;}
.modal-360 #pannellumViewer,
.modal-360 #pannellumViewer.pnlm-container{position:absolute!important;inset:0;width:100%!important;height:100%!important;}

/* Fullscreen (real, or the pinned fallback): the modal content fills the
   screen and shows the panorama only. The room details and Reserve button are
   hidden, and the header shrinks to its close and Exit buttons floating over
   the panorama's top-right corner. The .modal-content stays the fullscreen
   element because the Pannellum stage is rebuilt inside #viewer360Container, so
   controls placed there would be wiped. :fullscreen styles it from the first
   frame; the JS classes cover the event-only and pinned-fallback cases. */
.modal-360 .modal-content:fullscreen,
.modal-360 .modal-content.pano-fullscreen-target,
.modal-360 .modal-content.pano-fullscreen-fallback{
    display:flex!important;flex-direction:column;
    width:100vw!important;max-width:none!important;
    height:100vh!important;height:100dvh!important;max-height:none!important;min-height:0!important;
    margin:0!important;border:0!important;border-radius:0!important;
}
.modal-360 .modal-content:-webkit-full-screen{display:flex!important;flex-direction:column;width:100vw!important;height:100vh!important;border-radius:0!important;}
.modal-360 .modal-content:fullscreen::backdrop{background:#030712;}
/* Panorama only: no room name, location, price or Reserve button. */
.modal-360 .modal-content:fullscreen .viewer-info-strip,
.modal-360 .modal-content.pano-fullscreen-target .viewer-info-strip,
.modal-360 .modal-content.pano-fullscreen-fallback .viewer-info-strip,
.modal-360 .modal-content:fullscreen .modal-header > div:first-child,
.modal-360 .modal-content.pano-fullscreen-target .modal-header > div:first-child,
.modal-360 .modal-content.pano-fullscreen-fallback .modal-header > div:first-child{display:none!important;}
.modal-360 .modal-content:-webkit-full-screen .viewer-info-strip,
.modal-360 .modal-content:-webkit-full-screen .modal-header > div:first-child{display:none!important;}

/* The header leaves the layout and floats its buttons over the panorama. It
   ignores the pointer so the drag and Pannellum's zoom controls underneath
   keep working; only the buttons themselves take clicks. */
.modal-360 .modal-content:fullscreen .modal-header,
.modal-360 .modal-content.pano-fullscreen-target .modal-header,
.modal-360 .modal-content.pano-fullscreen-fallback .modal-header{
    position:absolute;top:0;right:0;left:0;z-index:20;
    justify-content:flex-end!important;
    padding:calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 28px 14px;
    background:linear-gradient(to bottom,rgba(3,7,18,.55),rgba(3,7,18,0));
    border:0;pointer-events:none;
}
.modal-360 .modal-content:-webkit-full-screen .modal-header{
    position:absolute;top:0;right:0;left:0;z-index:20;justify-content:flex-end!important;
    padding:12px 14px 28px;background:linear-gradient(to bottom,rgba(3,7,18,.55),rgba(3,7,18,0));border:0;pointer-events:none;
}
.modal-360 .modal-content:fullscreen .modal-header button,
.modal-360 .modal-content.pano-fullscreen-target .modal-header button,
.modal-360 .modal-content.pano-fullscreen-fallback .modal-header button{pointer-events:auto;}
.modal-360 .modal-content:-webkit-full-screen .modal-header button{pointer-events:auto;}
.modal-360 .modal-content:fullscreen .modal-header .btn-outline-light,
.modal-360 .modal-content.pano-fullscreen-target .modal-header .btn-outline-light,
.modal-360 .modal-content.pano-fullscreen-fallback .modal-header .btn-outline-light{background:rgba(3,7,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.modal-360 .modal-content:fullscreen .modal-body,
.modal-360 .modal-content.pano-fullscreen-target .modal-body,
.modal-360 .modal-content.pano-fullscreen-fallback .modal-body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-height:none!important;overflow:hidden!important;}
.modal-360 .modal-content:fullscreen .pano-viewer-wrapper,
.modal-360 .modal-content.pano-fullscreen-target .pano-viewer-wrapper,
.modal-360 .modal-content.pano-fullscreen-fallback .pano-viewer-wrapper{flex:1 1 auto;height:auto!important;min-height:0!important;}
/* The pinned fallback covers the page like real fullscreen; the floating
   header's padding already keeps its buttons clear of the notch. */
.modal-360 .modal-content.pano-fullscreen-fallback{background:#030712;}

/* Info strip */
.viewer-info-strip{padding:16px 24px 20px;background:var(--sidebar-2);border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.viewer-room-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:#fff;}
.viewer-room-meta{font-size:0.78rem;color:rgba(255,255,255,0.45);margin-top:2px;}
.viewer-reserve-btn{background:var(--g600);border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:600;padding:10px 26px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease-spring);display:inline-flex;align-items:center;gap:7px;box-shadow:var(--sh-g);cursor:pointer;}
.viewer-reserve-btn:hover{background:var(--g500);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,163,74,0.4);}

/* ================================================================
   SIDEBAR (DASHBOARD)
   ================================================================ */
.sidebar{min-width:258px;max-width:258px;background:var(--sidebar);min-height:100vh;color:white;transition:all var(--dur) var(--ease-smooth);border-right:1px solid rgba(255,255,255,0.04);box-shadow:2px 0 24px rgba(0,0,0,0.2);display:flex;flex-direction:column;z-index:200;position:relative;}
.sidebar-header{padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,0.05);}
.sidebar-brand{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;}
.sidebar-brand .s-brand-icon{width:32px;height:32px;background:linear-gradient(135deg,#dc2626,#991b1b);border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(220,38,38,0.4);}
.sidebar-brand .s-brand-dot{color:#f87171;}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,0.04);border-radius:var(--r-sm);margin:14px 16px 0;border:1px solid rgba(255,255,255,0.06);}
.sidebar-user .s-avatar{width:36px;height:36px;background:linear-gradient(135deg,#dc2626,#991b1b);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(220,38,38,0.3);}
.sidebar-user .s-name{font-size:0.82rem;font-weight:600;color:#fff;line-height:1.2;}
.sidebar-user .s-role{font-size:0.68rem;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em;}
.sidebar-nav{padding:16px 0;flex:1;}
.sidebar-section-label{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:8px 28px 4px;margin-top:8px;}
.sidebar .nav-link{color:rgba(255,255,255,0.55);margin:2px 12px;border-radius:var(--r-sm);transition:all var(--dur) var(--ease-smooth);padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:0.855rem;font-weight:500;}
.sidebar .nav-link i{font-size:1.05rem;flex-shrink:0;opacity:0.75;transition:opacity var(--dur);}
.sidebar .nav-link .nav-badge{margin-left:auto;font-size:0.65rem;font-weight:700;background:var(--g600);color:#fff;padding:1px 7px;border-radius:var(--r-pill);}
.sidebar .nav-link:hover{color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.07);transform:translateX(2px);}
.sidebar .nav-link:hover i{opacity:1;}
.sidebar .nav-link.active{background:rgba(220,38,38,0.18)!important;color:#ef4444!important;font-weight:600;border-left:3px solid #dc2626;padding-left:11px;}
.sidebar .nav-link.active i{opacity:1;color:#ef4444;}
.dash-topbar .page-title span{color:#dc2626!important;}
.admin-chip .a-dot{width:28px;height:28px;background:linear-gradient(135deg,#dc2626,#991b1b)!important;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff;}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,0.05);}
.sidebar-footer .nav-link{color:rgba(255,255,255,0.4)!important;font-size:0.82rem;}
.sidebar-footer .nav-link:hover{color:rgba(255,255,255,0.75)!important;}

/* ================================================================
   DASHBOARD STAT CARDS
   ================================================================ */
.stat-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--r-md)!important;box-shadow:var(--sh-sm)!important;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-smooth);overflow:hidden;position:relative;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--g600);border-radius:var(--r-md) var(--r-md) 0 0;}
.stat-card.border-danger::before{background:var(--red);}
.stat-card.border-primary::before{background:var(--blue);}
.stat-card.border-warning::before{background:var(--amber);}
.stat-card.border-indigo::before{background:var(--indigo);}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)!important;}
.stat-card .card-body{padding:1.4rem!important;}
.stat-card .stat-number{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-0.03em;}
.stat-card .stat-label{font-size:0.75rem;font-weight:600;color:var(--ink-m);text-transform:uppercase;letter-spacing:0.07em;margin-top:4px;}
.stat-card .stat-change{font-size:0.75rem;font-weight:600;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-pill);margin-top:8px;}
.stat-change.up{color:var(--g700);background:var(--g100);}
.stat-change.down{color:var(--red);background:#fee2e2;}
.icon-box{width:46px;height:46px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ================================================================
   TABLES
   ================================================================ */
.table-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--r-md)!important;box-shadow:var(--sh-sm)!important;overflow:hidden;}
.table{margin-bottom:0;font-size:0.875rem;}
.table thead th{background:var(--bg-2)!important;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-m)!important;border-bottom:1px solid var(--border)!important;padding:13px 16px;white-space:nowrap;}
.table tbody td{padding:13px 16px;vertical-align:middle;border-color:var(--border)!important;color:var(--ink);}
.table tbody tr{transition:background var(--dur);}
.table tbody tr:hover{background:var(--bg)!important;}
.room-img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);}

/* ================================================================
   FORMS (GENERAL)
   ================================================================ */
.form-control,.form-select{font-family:'Outfit',sans-serif;font-size:0.875rem;color:var(--ink);padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);outline:none;}
.form-control:focus,.form-select:focus{border-color:var(--g600);box-shadow:0 0 0 3px rgba(22,163,74,0.12);background:var(--surface);}
.form-control::placeholder{color:var(--ink-xf);}
.form-label{font-size:0.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:0.03em;}
.input-group .input-group-text{background:var(--bg);border:1.5px solid var(--border);color:var(--ink-m);font-size:0.875rem;transition:border-color var(--dur),color var(--dur);}
.input-group:focus-within .input-group-text{border-color:var(--g600);color:var(--g600);}

/* ================================================================
   MODAL (GENERAL)
   ================================================================ */
.modal-content{border-radius:var(--r-xl)!important;border:1px solid var(--border)!important;box-shadow:var(--sh-xl)!important;overflow:hidden;}
.modal-header{border-bottom:1px solid var(--border);padding:1.25rem 1.5rem;background:var(--bg);}
.modal-header .modal-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:var(--ink);}
.modal-body{padding:1.5rem!important;}
.modal-footer{border-top:1px solid var(--border);padding:1rem 1.5rem;}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:0.02em;transition:all var(--dur) var(--ease-spring);}
.btn-success{background:var(--g600)!important;border-color:var(--g600)!important;color:#fff!important;}
.btn-success:hover{background:var(--g700)!important;border-color:var(--g700)!important;transform:translateY(-1px);box-shadow:var(--sh-g)!important;}
.btn-outline-success{color:var(--g600)!important;border-color:var(--g600)!important;}
.btn-outline-success:hover{background:var(--g600)!important;color:#fff!important;}

/* ================================================================
   BADGES
   ================================================================ */
.badge{font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:0.04em;}
.bg-success-soft{background:var(--g100)!important;color:var(--g800)!important;border:1px solid var(--g200)!important;}
.avatar-circle{width:38px!important;height:38px!important;background:linear-gradient(135deg,var(--g600),var(--g800))!important;color:#fff!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;font-weight:700;font-size:0.82rem;text-transform:uppercase;flex-shrink:0;box-shadow:0 2px 8px rgba(22,163,74,0.3);}

/* ================================================================
   AUTH PAGES
   ================================================================ */
.login-body,.register-body{background:var(--sidebar);background-image:radial-gradient(ellipse 80% 50% at 15% 80%,rgba(22,163,74,0.1),transparent),radial-gradient(ellipse 50% 50% at 85% 15%,rgba(22,163,74,0.07),transparent);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.register-body{align-items:flex-start;padding-top:60px;}
.login-card,.register-card{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.09)!important;border-radius:var(--r-xl)!important;box-shadow:0 40px 80px rgba(0,0,0,0.45)!important;overflow:hidden;width:100%;max-width:440px;backdrop-filter:blur(30px);}
.register-card{max-width:460px;}
.login-header,.register-header{padding:2.2rem 2.2rem 1.8rem;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.07);text-align:center;}
.login-header .auth-logo,.register-header .auth-logo{width:52px;height:52px;background:var(--g600);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin:0 auto 1rem;box-shadow:0 0 24px rgba(22,163,74,0.45);}
.login-header h4,.register-header h4{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:-0.02em;margin-bottom:4px;}
.login-header p,.register-header p{font-size:0.82rem;color:rgba(255,255,255,0.4);}
.login-card .card-body,.register-card .card-body{padding:2rem!important;}
.login-card .form-label,.register-card .form-label{color:rgba(255,255,255,0.65);}
.login-card .form-control,.register-card .form-control,.register-card .form-select{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.1)!important;color:#fff!important;}
.login-card .form-control:focus,.register-card .form-control:focus{background:rgba(255,255,255,0.09)!important;border-color:var(--g500)!important;box-shadow:0 0 0 3px rgba(22,163,74,0.18)!important;}
.login-card .form-control::placeholder,.register-card .form-control::placeholder{color:rgba(255,255,255,0.22)!important;}
.login-card .input-group-text,.register-card .input-group-text{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.1)!important;color:rgba(255,255,255,0.4)!important;}
.btn-login,.btn-register{background:var(--g600);border:none;color:#fff;width:100%;font-family:'Outfit',sans-serif;font-weight:700;font-size:0.9rem;padding:13px;border-radius:var(--r-sm);letter-spacing:0.03em;transition:all var(--dur) var(--ease-spring);box-shadow:0 4px 16px rgba(22,163,74,0.3);}
.btn-login:hover,.btn-register:hover{background:var(--g500);color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(22,163,74,0.42);}
.auth-link{color:rgba(255,255,255,0.45);font-size:0.82rem;text-align:center;margin-top:1.2rem;}
.auth-link a{color:var(--g400);text-decoration:none;font-weight:600;}

/* ================================================================
   ALERTS
   ================================================================ */
.alert{border:none;border-radius:var(--r-sm);font-size:0.875rem;font-weight:500;}
.alert-success{background:var(--g100);color:var(--g800);}
.alert-danger{background:#fee2e2;color:#991b1b;}
.alert-warning{background:#fef3c7;color:#92400e;}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.anim-fade-up{animation:fadeInUp .4s var(--ease-smooth) both;}
.anim-delay-1{animation-delay:.05s;}
.anim-delay-2{animation-delay:.10s;}
.anim-delay-3{animation-delay:.15s;}
.anim-delay-4{animation-delay:.20s;}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media(max-width:992px){
    .hero-visual{display:none;}
    .hero-content{max-width:100%;text-align:center;padding:60px 0;}
    .hero-cta-group{justify-content:center;}
    .hero-stats-row{justify-content:center;}
    .hero-eyebrow{margin-left:auto;margin-right:auto;}
    .hero-content .hero-sub{margin:0 auto 2.2rem;}
}
@media(max-width:768px){
    .flex-grow-1{max-width:calc(100vw - 66px);}
    .sidebar{min-width:66px!important;max-width:66px!important;padding:0!important;}
    .sidebar-header,.sidebar-user,.sidebar-section-label,
    .sidebar .nav-link span,.sidebar .nav-link .nav-badge,
    .sidebar-footer .nav-link span{display:none!important;}
    .sidebar .nav-link{justify-content:center;padding:13px 0;margin:3px 8px;gap:0;border-left:none!important;padding-left:0!important;}
    .sidebar .nav-link i{font-size:1.2rem;margin:0!important;}
    .sidebar .nav-link.active{border-left:none!important;}
    .sidebar-nav{padding:12px 0;}
    .hero-section{min-height:auto;padding:0;}
    .hero-content{padding:50px 0 40px;}
    .hero-content h1{font-size:2.2rem;}
    .hero-stats-row{gap:1.5rem;}
    .search-bar-inner{gap:8px;}
    .result-count{display:none;}
    .room-filter-bar{padding:12px;}
    .filter-panel-body{grid-template-columns:1fr 1fr;}
    .stat-card .stat-number{font-size:2rem;}
    .icon-box{width:40px!important;height:40px!important;}
    .modal-360 .modal-dialog{margin:8px;max-width:calc(100vw - 16px);}
    .modal-dialog{margin:8px;max-width:calc(100vw - 16px);}
    #pannellumViewer{height:260px;}
    .viewer-no-photo{height:260px;}
    .viewer-info-strip{flex-direction:column;align-items:flex-start;}
    .viewer-reserve-btn{width:100%;justify-content:center;}
    .contact-form-card form{padding:16px 18px;}
    .contact-form-header{padding:18px 18px 14px;}
}
@media(max-width:480px){
    .login-card,.register-card{border-radius:var(--r-lg)!important;}
    .hero-cta-group{flex-direction:column;align-items:center;}
    .btn-hero-primary,.btn-hero-ghost{width:100%;justify-content:center;}
    .section-title-wrap{flex-direction:column;align-items:flex-start;}
    .res-row{grid-template-columns:1fr;}
    .duration-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Gap fix ── */
.rooms-section  { margin-bottom: 0 !important; padding-bottom: 60px !important; }
.contact-section { margin-top: 0 !important; }
section { display: block; }

/* ── Custom Floating Close Button for Modals ── */
.btn-modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(10, 15, 30, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    margin: 12px !important;
}
.btn-modal-close:hover {
    background: rgba(10, 15, 30, 0.9) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* ── Room Status Modal Styles ── */
.modal-status .modal-content{border-radius:var(--r-xl)!important;border:1px solid var(--border)!important;box-shadow:var(--sh-xl)!important;overflow:hidden;}
.modal-status .modal-header{border-bottom:1px solid var(--border);padding:1.2rem 1.5rem;background:var(--bg);}
.modal-status .modal-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:var(--ink);}
    .contact-form-card form{padding:16px 18px;}
    .contact-form-header{padding:18px 18px 14px;}
}
@media(max-width:480px){
    .login-card,.register-card{border-radius:var(--r-lg)!important;}
    .hero-cta-group{flex-direction:column;align-items:center;}
    .btn-hero-primary,.btn-hero-ghost{width:100%;justify-content:center;}
    .section-title-wrap{flex-direction:column;align-items:flex-start;}
    .res-row{grid-template-columns:1fr;}
    .duration-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Gap fix ── */
.rooms-section  { margin-bottom: 0 !important; padding-bottom: 60px !important; }
.contact-section { margin-top: 0 !important; }
section { display: block; }

/* ── Custom Floating Close Button for Modals ── */
.btn-modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(10, 15, 30, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    margin: 12px !important;
}
.btn-modal-close:hover {
    background: rgba(10, 15, 30, 0.9) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* ── Room Status Modal Styles ── */
.modal-status .modal-content{border-radius:var(--r-xl)!important;border:1px solid var(--border)!important;box-shadow:var(--sh-xl)!important;overflow:hidden;}
.modal-status .modal-header{border-bottom:1px solid var(--border);padding:1.2rem 1.5rem;background:var(--bg);}
.modal-status .modal-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:var(--ink);}
.status-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--dur);margin-bottom:10px;}
.status-option:hover{border-color:var(--g600);background:var(--g50);}
.status-option.selected{border-color:var(--g600);background:var(--g50);}
.status-option .so-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.status-option .so-label{font-weight:600;font-size:.875rem;color:var(--ink);}
.status-option .so-desc{font-size:.72rem;color:var(--ink-f);margin-top:1px;}
.btn-st-update{font-size:.72rem!important;font-weight:600!important;padding:6px 14px!important;border-radius:var(--r-pill)!important;border:1.5px solid var(--border)!important;color:var(--ink-m)!important;background:var(--surface)!important;cursor:pointer!important;transition:all var(--dur)!important;font-family:'Outfit',sans-serif!important;display:inline-flex!important;align-items:center!important;gap:4px!important;}
.btn-st-update:hover{border-color:var(--g600)!important;color:var(--g700)!important;background:var(--g50)!important;}

/* ================================================================
   CAPSTONE THEME UPGRADE & OBJECTIVE COMPONENT STYLES
   ================================================================ */

/* Status Color Badges */
.badge-available {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700;
}
.badge-occupied {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
    font-weight: 700;
}
.badge-reserved {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700;
}
.badge-maintenance {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700;
}

/* Status Indicator Dots */
.status-indicator-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-indicator-dot.available { background-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
.status-indicator-dot.occupied  { background-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.25); }
.status-indicator-dot.reserved  { background-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.status-indicator-dot.maintenance { background-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,0.25); }

/* Policy Pill */
.policy-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.policy-pill i { color: #0284c7; }

/* Waitlist UI */
.btn-waitlist {
    background: #475569 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
    transition: all var(--dur) var(--ease-spring) !important;
    white-space: nowrap;
}
.btn-waitlist:hover {
    background: #334155 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(51,65,85,0.3) !important;
}

/* Announcement Cards */
.announcement-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--g600);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-sm);
}
.announcement-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}
.announcement-date {
    font-size: 0.72rem;
    color: var(--ink-f);
    font-weight: 500;
}
.announcement-body {
    font-size: 0.85rem;
    color: var(--ink-m);
    line-height: 1.55;
    margin-top: 6px;
}

/* Maintenance Requests */
.maintenance-badge-pending {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
.maintenance-badge-in_progress {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}
.maintenance-badge-resolved {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

/* Verified Badge */
.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 700;
}
.badge-unverified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Printable Official Receipt */
.receipt-container {
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-lg);
    padding: 32px 36px;
    box-shadow: var(--sh-md);
}
.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 18px;
    margin-bottom: 24px;
}
.receipt-brand h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.receipt-brand p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 2px 0 0;
}
.receipt-meta {
    text-align: right;
}
.receipt-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--g700);
}
.receipt-date {
    font-size: 0.78rem;
    color: #64748b;
}
.receipt-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}
.receipt-table th {
    background: #f8fafc;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    border-bottom: 1px solid #cbd5e1;
}
.receipt-table td {
    padding: 12px 14px;
    font-size: 0.88rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}
.receipt-total-row td {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
    border-top: 2px solid #0f172a;
    border-bottom: none;
    padding-top: 14px;
}
.receipt-footer-note {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px dashed #cbd5e1;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

@media print {
    body * {
        visibility: hidden;
    }
    .receipt-print-area, .receipt-print-area * {
        visibility: visible;
    }
    .receipt-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        box-shadow: none;
        border: none;
    }
    .no-print {
        display: none !important;
    }
}

/* Full-screen 360 viewer on phones: the viewport keeps the touch surface
   intact while the room details remain in a compact, non-overlapping footer. */
@media (max-width: 768px) {
    .modal-360 .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh;
        margin: 0 !important;
    }

    .modal-360 .modal-content {
        width: 100%;
        min-height: 100dvh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0 !important;
    }

    .modal-360 .modal-header {
        flex: 0 0 auto;
        gap: 8px;
        padding: 12px 14px;
    }

    .modal-360 .modal-header > div:first-child {
        min-width: 0;
    }

    .modal-360 .modal-title {
        min-width: 0;
        overflow: hidden;
        font-size: 1rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .modal-360 #viewer360Subtitle {
        max-width: 56vw;
        overflow: hidden;
        font-size: .65rem !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .modal-360 .modal-header .btn-outline-light {
        flex: 0 0 auto;
        padding: 5px 7px !important;
        font-size: .68rem !important;
        white-space: nowrap;
    }

    .modal-360 .modal-header .btn-close {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .modal-360 .modal-body {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-360 .pano-viewer-wrapper {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        touch-action: auto;
    }

    .modal-360 .pano-viewer-wrapper iframe {
        height: 100%;
        min-height: 0;
        touch-action: auto;
    }

    .modal-360 .viewer-info-strip {
        flex: 0 0 auto;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px 14px;
    }

    .modal-360 .viewer-room-name {
        font-size: 1.05rem;
    }

    .modal-360 .viewer-room-meta {
        font-size: .68rem;
        line-height: 1.4;
    }

    .modal-360 .viewer-reserve-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 14px;
        font-size: .76rem;
    }
}

@media (max-width: 420px) {
    .modal-360 #viewer360Subtitle {
        display: none !important;
    }

    .modal-360 .modal-header .btn-outline-light {
        width: 34px;
        overflow: hidden;
        padding: 5px 8px !important;
        font-size: 0 !important;
    }

    .modal-360 .modal-header .btn-outline-light i {
        margin: 0 !important;
        font-size: .85rem;
    }
}