:root{
--ink:#152238;
--soft:#3f5066;
--muted:#8b93a0;
--paper:#f5f6f8;
--line:#d9dce2;
--accent:#ad8a3d;
--cream:#f8eeec;
--brand-navy:#0c1a38;
--brand-blue:#2f6fed;
--danger:#b3261e;
--danger-deep:#8a2d24;
--danger-tint:#fdf3f2;
--danger-line:#f0d4d0;
--shell:960px;
/* The homepage collection card is the reference for every property card on
the site, so its warm surface tokens live here rather than in home.css.
home.css keeps its own --h2-* copies for the rest of that page. */
--card-bg:#f6f3ee;
--card-ink:#17140f;
--card-line:rgba(23,20,15,.13);
--card-accent:#a9724a;
--display:"Space Grotesk","Segoe UI",sans-serif;
/* Height of the sticky .site-header, used for the anchor scroll offset
below. Measured at 89.5px; update here if the header padding changes. */
--header-h:90px;
}
*{box-sizing:border-box}
/* ---------- site-wide scrolling ----------
The document is the scroller everywhere. A page must not wrap itself in a
100vh overflow container: that hands the wheel to a nested scroller with
its own inertia and strands whatever sits outside it (header, footer).
scroll-padding-top keeps anchor targets clear of the sticky header, which
would otherwise cover the top of whatever was jumped to. Set here once, so
pages need not add their own scroll-margin - the two would stack. */
html{
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + 16px);
scrollbar-gutter:stable;
}
/* Full-bleed children sized to 100vw count a scrollbar the viewport does not
give back, which opens a sideways scroll. clip rules that out without
turning body into a scroll container, so vertical scrolling stays on the
document, where the smooth behaviour and anchor padding above apply.
Deliberately no overscroll-behavior: pinning the document would also kill
pull-to-refresh on mobile. Containment belongs on genuinely nested
scrollers, e.g. .modal-box further down. */
body{overflow-x:clip}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:15px;
line-height:1.6
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:inherit;font-weight:600;text-wrap:balance;letter-spacing:-0.01em}
/* reusable "Apple glass" frosted-panel utility — add/remove this one class
to toggle the effect on any surface; layout/shape stays with the
component's own class. Falls back to a plain translucent panel in
browsers without backdrop-filter support. */
.glass-panel{
background:rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
border:1px solid rgba(255,255,255,.4);
box-shadow:0 8px 32px rgba(15,25,50,.15);
}
/* nav */
.site-header{position:sticky;top:0;z-index:100;background:var(--cream);box-shadow:0 1px 0 rgba(23,20,15,.08)}
.nav{position:relative;max-width:none;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:#6b4226;display:flex;align-items:center}
.brand img{height:48px;width:auto;display:block}
/* The mobile menu, dormant above its breakpoint: display:contents leaves the
links and the account menu as direct flex children of .nav, so the wide
header lays out exactly as it did before the panel existed. The checkbox
stays in the DOM (not [hidden]) so it can still take keyboard focus. */
.nav-panel{display:contents}
.nav-toggle{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.nav-burger{display:none}
.navlinks{display:flex;gap:32px}
.navlinks a{color:var(--ink);font-size:15.5px;font-family:"Inter","Segoe UI",-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.04em;position:relative;padding-bottom:0px}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .18s ease}
.navlinks a:hover{color:var(--accent)}
.navlinks a:hover::after{right:0}
.link-muted{color:var(--ink);font-size:14.5px;font-family:"Inter","Segoe UI",-apple-system,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.link-muted:hover{color:var(--accent)}
/* The homepage's "Search stays" / "Explore stays" buttons are the reference
for every button on the site: uppercase display type, a 6px corner, ink
that warms to the accent on hover. .btn-solid / .btn-outline below are the
same recipe at the smaller size the Manage and Search pages need. */
.cta-button-primary{background:var(--ink);color:#fff;font-size:13.5px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:18px 38px;border-radius:6px;display:inline-block;line-height:1;transition:background .2s ease}
.cta-button-primary:hover{background:var(--accent);color:#fff}
/* shared type/atoms */
.kicker,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:500;color:var(--muted);text-transform:uppercase}
.empty{padding:80px 0;text-align:center;color:var(--soft)}
/* -- property card --------------------------------------------------------
Rendered by Views/Shared/_PropertyCard.cshtml on both the homepage
collection and the Search results, so the two read as one design: a real
photo under a full-width tag bar, a warm card surface, and the dark stat
strip along the bottom. home.css only scales it up and layers the
accordion behaviour on top for the homepage. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.grid article{position:relative;display:flex;flex-direction:column;background:var(--card-bg);border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--card-line);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.grid article:hover{transform:translateY(-5px);box-shadow:0 30px 50px -24px rgba(23,20,15,.28),inset 0 0 0 1px var(--card-accent)}
.art-frame{height:clamp(230px,20vw,290px);position:relative;overflow:hidden}
/* The gradient is only what shows through before a photo loads - the card
partial sets background-image inline, and that wins over this one. */
.art{position:absolute;inset:0;background-color:var(--base);background-image:linear-gradient(135deg,var(--base) 0%,var(--accent-tint,var(--base)) 100%);background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .5s ease}
.grid article:hover .art{transform:scale(1.05)}
/* The property's own Base colour, under a dark scrim so the label stays
readable over any photo. This and the accent rule on .stat-bar below are
where "Card artwork" in Manage actually lands. */
.art-tag{position:absolute;z-index:2;top:0;left:0;right:0;width:100%;box-sizing:border-box;background:linear-gradient(rgba(23,20,15,.36),rgba(23,20,15,.36)),var(--base,#17140f);color:#fff;font-size:11.5px;letter-spacing:.3px;font-weight:500;padding:10px 16px}
.art-area{position:absolute;z-index:2;bottom:14px;left:16px;display:flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.art-area svg{flex-shrink:0}
.cardbody{padding:26px 26px 10px;display:flex;flex-direction:column;flex:1}
.location{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.location svg{flex-shrink:0}
.cardbody h3{font-family:var(--display);font-size:25px;font-weight:500;text-transform:lowercase;margin:0 0 8px}
.cardbody h3 a{color:var(--card-ink)}
.cardbody h3 a:hover{color:var(--card-accent)}
.stretched-link::after{content:"";position:absolute;inset:0}
.accordion-label{display:none}
.cardbody p{font-size:14px;color:var(--soft);margin:0 0 14px;flex:1}
.amenities{display:flex;flex-wrap:wrap;gap:7px 20px;font-size:12.5px;color:var(--soft);margin-bottom:20px}
.amenities span{display:flex;align-items:center;gap:5px}
.amenities svg{color:var(--accent);flex-shrink:0}
.stat-bar{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--card-ink);border-top:3px solid var(--accent-tint,var(--card-accent))}
.stat-bar .stat{padding:17px 9px;text-align:center;border-right:1px solid rgba(255,255,255,.22)}
.stat-bar .stat:last-child{border-right:0}
.stat-bar b{display:block;font-size:17px;font-weight:600;color:#fff}
.stat-bar span{display:block;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:3px}
.reserve{width:100%;padding:17px;border:0;border-radius:6px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;font-size:13px;display:block;text-align:center;box-sizing:border-box;transition:background .2s ease}
.reserve:hover{background:var(--accent);color:#fff}
.fine{display:block;text-align:center;color:var(--muted);margin-top:12px;font-size:11.5px}
.summary{padding:0}
.summary h3{font-size:19px;margin:0 0 4px}
.breakdown div{display:flex;justify-content:space-between;font-size:13px;color:var(--soft);margin-bottom:9px}
.breakdown .discount{color:var(--accent)}
.total{display:flex;justify-content:space-between;font-size:16px;margin:16px 0 20px;padding-top:16px;border-top:1px solid var(--line)}
.split-wrap{display:grid;grid-template-columns:1fr 320px;gap:72px;align-items:start}
/* A grid track's automatic minimum is its content's min-content width, so one
stubborn child - a nowrap price, a table - pushes the whole column wider
than the page. These columns scroll or wrap their own content instead. */
.split-wrap > *,.results-wrap > *{min-width:0}
.field-error{color:var(--accent);font-size:11.5px;margin-top:5px;display:block}
.alert-box{border-left:2px solid var(--accent);color:var(--soft);padding:4px 0 4px 16px;font-size:13px;margin-bottom:24px}
/* home */
.homepage{font-family:"Jost","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}
.homepage h1,.homepage h2,.homepage h3,.homepage h4{font-family:"Gilda Display",Georgia,serif;font-weight:400;letter-spacing:0}
/*.hero{position:relative;overflow:hidden;padding:130px 24px 150px;min-height:520px;display:flex;align-items:center;background:linear-gradient(rgba(20,14,8,.58),rgba(20,14,8,.74)),url('/img/rooms/grand-deluxe.jpg') center/cover no-repeat}*/
.hero {
position: relative;
overflow: hidden;
padding: 3rem;
min-height: 520px;
display: flex;
align-items: center;
background: linear-gradient(rgba(20,14,8,.58),rgba(20,14,8,.74)),url('/img/rooms/grand-deluxe.jpg') center/cover no-repeat;
flex-direction: column;
gap: 5rem;
background: #fffffff7 !important;
max-width: 75vw;
margin: 5rem auto;
}
.hero-inner{max-width:960px;margin:0 auto;position:relative;z-index:1}
.hero .eyebrow{color:var(--accent)}
/*.hero h1{color:#fff;font-size:clamp(38px,5.5vw,64px);line-height:1.1;margin:18px 0 20px}*/
.hero h1 {
color: var(--ink);
font-size: clamp(38px,5.5vw,64px);
line-height: 1.1;
margin: 18px 0 20px;
}
.hero h1 em{color:var(--accent);font-style:normal}
/*.hero-intro{font-size:16px;color:rgba(255,255,255,.8);max-width:480px;margin:0}*/
.hero-intro {
font-size: 16px;
color: rgba(255,255,255,.8);
max-width: 480px;
margin: 0;
color: var(--ink);
}
/*.search-wrap{max-width:840px;margin:-64px auto 0;position:relative;z-index:2;padding:0 24px}*/
.search-wrap {
/* max-width: 840px; */
/* margin: -64px auto 0; */
position: relative;
z-index: 2;
/* padding: 0 24px; */
}
.search{display:flex;align-items:stretch;background:#fff;box-shadow:0 30px 60px -22px rgba(30,18,8,.35);border-radius:10px;overflow:hidden}
.field{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 22px;border-right:1px solid var(--line);min-width:0;transition:background-color .15s ease}
.field:last-of-type{border-right:0}
.field.grow{flex:1.6}
.field:focus-within{background:var(--paper)}
.field label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.field-input{display:flex;align-items:center;gap:9px}
.field-input svg{color:var(--muted);flex-shrink:0}
.field input,.field select{border:0;outline:0;background:none;font:14px "Jost",inherit;width:100%;padding:2px 0;color:var(--ink)}
.field input::placeholder{color:var(--muted)}
.search button{display:flex;align-items:center;gap:8px;border:0;background:var(--accent);color:#fff;font-weight:500;cursor:pointer;font-size:14px;padding:0 28px;white-space:nowrap}
.search button:hover{background:var(--ink)}
.search button svg{flex-shrink:0}
.perks{max-width:960px;margin:0 auto;padding:96px 24px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.perk svg{color:var(--accent);margin-bottom:14px}
.perk h4{font-size:17px;margin:0 0 8px}
.perk p{font-size:13px;color:var(--soft);line-height:1.6;margin:0}
.collection{max-width:960px;margin:0 auto;padding:70px 24px 100px}
.head{margin-bottom:44px}
.head .kicker{color:var(--accent)}
.head h2{font-size:34px;margin:10px 0 0}
.controls{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--muted)}
.controls select{padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent}
.story{background:var(--cream);color:var(--ink);padding:90px 24px}
.story-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:center}
.story .kicker{color:var(--accent)}
.story h2{font-size:36px;margin:10px 0;color:var(--ink)}
.story p{font-size:15px;line-height:1.8;color:var(--soft);margin:0}
/* footer */
/*.foot{max-width:960px;margin:0 auto;padding:32px 24px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}*/
.foot {
/* max-width: 960px; */
margin: 0 auto;
padding: 32px 24px;
display: flex;
justify-content: center;
font-size: 12px;
color: var(--muted);
border-top: 1px solid var(--line);
align-items: center;
gap: 1rem;
}
.foot .brand{font-size:16px}
/* results */
.searchbar{max-width:var(--shell);margin:0 auto;padding:24px 24px 0;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.searchsummary{font-size:14px;color:var(--soft)}
.searchsummary b{font-size:19px;font-weight:600;color:var(--ink)}
.editbtn{font-size:12.5px;color:var(--soft)}
.results-wrap{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:64px;padding:32px 24px 100px;align-items:start}
.filters{display:flex;flex-direction:column;gap:28px}
.fgroup{border-bottom:1px solid var(--line);padding-bottom:22px}
.fgroup h4{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 14px}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--soft);margin-bottom:11px;cursor:pointer}
.fgroup input[type=checkbox],.fgroup input[type=radio]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.fgroup select{width:100%;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:13px}
.clearlink{font-size:12px;color:var(--muted);display:inline-block;margin-top:4px}
.resultshead{margin-bottom:36px}
.resultshead h2{font-size:26px;margin:8px 0 0}
/* detail */
.detailpage{max-width:960px;margin:0 auto;padding:32px 24px 110px;}
.crumb{font-size:12px;color:var(--muted);margin-bottom:28px;}
.gallery-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:380px;margin-bottom:44px;border-radius:16px;overflow:hidden}
.gallery-grid .g-item{display:block;overflow:hidden;}
.gallery-grid .g-item:first-child{grid-row:1/3}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.gallery-grid .g-item:hover img{transform:scale(1.06)}
.titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:6px;}
.titlerow h1{font-size:36px;margin:0;}
.locline{
font-size: 18px;
color: var(--muted);
margin: 6px 0 0;
}
.ratingbadge{font-size:13px;color:var(--soft);white-space:nowrap;padding-top:4px}
.ratingbadge b{font-weight:500;color:var(--ink)}
.chips{font-size:13px;color:var(--muted);margin-bottom:40px}
.tabpanel h2{font-size:22px;margin:0 0 14px}
.tabpanel p{font-size:14px;line-height:1.75;color:var(--soft);max-width:620px}
.sectiontitle{font-size:19px;margin:52px 0 22px;font-weight:500}
.sectiontitle:first-of-type{margin-top:44px}
.room{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.room:last-child{border-bottom:1px solid var(--line)}
.room-left h4{font-size:17px;margin:0 0 5px;font-weight:500}
.room-left span{font-size:12.5px;color:var(--soft)}
.room-price{text-align:right;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.room-price b{font-size:18px;color:var(--ink);font-weight:500}
.book-btn{border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font-size:13px;font-weight:500;font-family:inherit}
.book-btn:hover{color:var(--accent)}
/* detail page typography (Gilda Display + Jost) */
.detailpage{
font-family:"Jost","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
max-width: 73vw;
margin: 0 auto;
}
.detailpage h1,.detailpage h2,.detailpage h3,.detailpage h4{
font-family:"Gilda Display",Georgia,serif;
font-weight:400;
letter-spacing:0;
}
/* Best Quality Rooms (full-bleed showcase) */
.apt-heading{font-size:30px;text-align:left;margin:52px 0 10px;}
.apt-heading:first-of-type{margin-top:44px;}
.apt-sub{
font-size: 13px;
color: var(--muted);
text-align: center;
max-width: 520px;
/* margin: 0 auto 30px; */
text-align: left;
}
.detailpage h1 {
font-size: clamp(2.25rem, 6vw, 4.5rem);
}
.apt-heading {font-size: clamp(1.75rem, 4.5vw, 3rem);}
.rooms-showcase{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;background:#fff;padding:80px 40px;box-sizing:border-box}
.rooms-showcase-inner{max-width:1440px;margin:0 auto}
.rooms-showcase .apt-heading{margin-top:0}
.rooms-head{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;flex-wrap:wrap;margin-bottom:0}
.rooms-head .apt-sub{max-width:460px;margin-top:16px}
.icon-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);text-transform:none;font-size:14px}
.icon-kicker::before{content:"";width:26px;height:1px;background:var(--accent)}
.icon-kicker .diamond{width:6px;height:6px;border:1px solid var(--accent);transform:rotate(45deg);display:inline-block}
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.room-showcase-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:460px;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(15,25,50,.08);transition:transform .3s ease,box-shadow .3s ease}
.room-showcase-card:hover{transform:translateY(-4px);box-shadow:0 26px 48px -20px rgba(15,25,50,.35)}
.room-showcase-img{position:absolute;inset:0}
.room-showcase-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.room-showcase-card:hover .room-showcase-img img{transform:scale(1.07)}
.room-showcase-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,4,.85) 0%,rgba(8,6,4,.25) 42%,transparent 62%);pointer-events:none}
.room-showcase-body{position:relative;z-index:1;padding:26px 28px 28px;color:#fff}
.room-showcase-body h4{font-size:26px;margin:0 0 12px;font-weight:400}
.room-stats{display:flex;gap:20px;font-size:12.5px;color:rgba(255,255,255,.88);margin:0 0 16px;padding:0;list-style:none}
.room-stats span{display:flex;align-items:center;gap:7px}
.room-stats svg{flex-shrink:0;color:var(--accent)}
.room-showcase-price{color:#fff;font-size:28px;font-family:"Gilda Display",Georgia,serif;font-weight:400}
/* Amenities (full-bleed showcase) */
.facility-showcase{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;background:var(--paper);padding:80px 40px;box-sizing:border-box}
.facility-showcase-inner{
max-width: 1400px;
margin: 0 auto;
}
.facility-showcase .apt-heading{margin-top:0;margin-bottom:44px}
.facility-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.facility-hero{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(15,25,50,.08)}
.facility-hero-img{
height: 540px;
overflow: hidden;
}
.facility-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.facility-hero-caption{padding:20px 24px;font-size:21px}
.facility-rows{display:flex;flex-direction:column;gap:34px}
.facility-row{display:flex;gap:22px;border:0;background:none;text-align:left;cursor:pointer;padding:0;font-family:inherit;opacity:.55;transition:opacity .2s ease}
.facility-row.active,.facility-row:hover{opacity:1}
.facility-row-img{
width: 320px;
height: 182px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.facility-row-img img{width:100%;height:100%;object-fit:cover;display:block;}
.facility-row-body h4{font-size:21px;margin:0 0 8px;}
.facility-row-body p{font-size:13px;color:var(--soft);line-height:1.7;margin:0;max-width:420px;}
/* Testimonials (full-bleed showcase) */
.hotel-reviews{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;background:#fff;padding:80px 40px;box-sizing:border-box;}
.hotel-reviews-inner{max-width:1180px;margin:0 auto;}
.test-head{text-align:center;margin:0 0 32px;}
.test-title{font-size:clamp(1.9rem,5vw,3.5rem);margin:8px 0 10px;}
.test-sub{font-size:13px;color:var(--soft);max-width:480px;margin:0 auto;}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.test-card{background:#fff;border-radius:16px;padding:44px 24px 28px;text-align:center;position:relative;box-shadow:0 1px 3px rgba(15,25,50,.08);}
.test-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;position:absolute;top:-32px;left:50%;transform:translateX(-50%);border:3px solid #fff;box-shadow:0 4px 12px rgba(15,25,50,.18);}
.test-stars{color:var(--accent);font-size:13px;letter-spacing:2px;margin:14px 0;}
.test-card p{font-size:13px;color:var(--soft);line-height:1.75;margin:0 0 18px;}
.test-card b{display:block;font-size:14.5px;color:var(--ink);font-weight:500;}
.test-card span{font-size:11.5px;color:var(--muted);}
/* ── booking flow: progress rail ──────────────────────────── */
.stepbar{max-width:960px;margin:0 auto;display:flex;align-items:center;padding:26px 24px 0;font-size:12px;color:var(--muted)}
.shell-wide .stepbar{max-width:73vw;padding-left:32px;padding-right:32px}
.stepbar .step{display:flex;align-items:center;gap:9px;white-space:nowrap}
.stepbar .num{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--muted);flex-shrink:0}
.stepbar .num svg{display:block}
.stepbar .rail{flex:1;height:1px;background:var(--line);margin:0 16px;min-width:16px}
.stepbar .rail.is-done{background:var(--accent)}
.stepbar .step.active{color:var(--ink);font-weight:600}
.stepbar .step.active .num{border-color:var(--ink);color:var(--ink)}
.stepbar .step.done{color:var(--soft)}
.stepbar .step.done .num{background:var(--accent);border-color:var(--accent);color:#fff}
/* checkout */
.stay-row{display:flex;align-items:center;gap:15px;padding:16px 24px;border-bottom:1px solid var(--line)}
.stay-row:last-child{border-bottom:0}
.stay-row .cart-thumb{width:58px;height:58px;border-radius:9px}
.stay-row-main{flex:1;min-width:0}
.stay-row-main h4{font-size:14.5px;margin:0 0 4px;font-weight:600}
.stay-row-main .loc{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:7px}
.stay-row-main .meta-row{font-size:12px;gap:5px 16px}
.stay-row-price{flex-shrink:0;text-align:right}
.stay-row-price b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.stay-row-price span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.pay-note{display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.pay-note svg{flex-shrink:0;color:var(--muted);margin-top:1px}
.card-brands{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.card-brands span{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:3px 7px;background:var(--paper);line-height:1.4}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.formfield{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.formfield.full{grid-column:1/-1;}
.formfield label{font-size:11px;letter-spacing:.5px;color:var(--muted);}
.formfield input,.formfield textarea,.formfield select{border:0;border-bottom:1px solid var(--line);padding:9px 0;font-size:14px;outline:0;background:none;width:100%;font-family:inherit;color:var(--ink);}
.formfield input:focus,.formfield textarea:focus,.formfield select:focus{border-color:var(--ink);}
.formfield textarea{resize:vertical;min-height:70px;font-family:inherit;}
.formfield input.input-validation-error,.formfield textarea.input-validation-error{border-color:var(--accent);}
.promo{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:14px;transition:border-color .15s ease}
.promo:focus-within{border-color:var(--ink)}
.promo input{flex:1;border:0;padding:10px 12px;font-size:12.5px;outline:0;background:none;min-width:0;color:var(--ink)}
.promo button{border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--soft);font-size:12px;font-weight:500;padding:0 15px;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.promo button:hover{background:var(--ink);color:#fff}
.promo-applied{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--accent);margin:-4px 0 14px}
.promo-applied svg{flex-shrink:0}
/* confirmation */
.confirm-hero{text-align:center;max-width:560px;margin:0 auto 34px}
.icon{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#fbf7ec;border:1px solid #e6d5ae}
.icon svg{stroke:var(--accent) !important;display:block}
.confirm-hero h1{font-size:clamp(28px,4vw,38px);margin:14px 0 12px}
.confirm-hero .sub{font-size:14px;margin:0 auto;max-width:460px}
.sub{font-size:14.5px;color:var(--soft);max-width:400px;margin:0 auto 44px;line-height:1.7}
.ref-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(15,25,50,.06);padding:16px 22px;margin-bottom:22px}
.ref-card .lbl{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ref-card b{font-size:17px;letter-spacing:1.5px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ref-card .trust-line{margin-top:0}
.itin{margin-bottom:16px}
.itin .surface-head{gap:15px;align-items:center}
.mini-art{width:52px;height:52px;border-radius:10px;flex-shrink:0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--base) 0%,var(--accent-tint,var(--base)) 100%)}
.mini-art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 14%,rgba(255,255,255,.28),transparent 52%),repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
.itin .surface-head h3{font-size:16px;margin:0 0 3px}
.itin .surface-head>div{min-width:0}
.itin .surface-head .status-pill{margin-left:auto;flex-shrink:0}
.itin .surface-head p{margin:0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.itin-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px}
.itin-rows span{display:block;font-size:10px;letter-spacing:.5px;color:var(--muted);margin-bottom:5px;text-transform:uppercase}
.itin-rows b{font-size:14px;font-weight:500}
.next-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.next-list li{display:flex;gap:13px}
.next-list .dot{width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex-shrink:0}
.next-list .dot svg{display:block}
.next-list b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px}
.next-list p{margin:0;font-size:12.5px;color:var(--soft);line-height:1.7}
.confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 18px}
.help{font-size:12.5px;color:var(--muted);text-align:center;margin:0}
/* account nav */
.usermenu{display:flex;align-items:center;gap:20px;font-size:13px}
.usermenu form{margin:0}
.usermenu .divider{width:1px;height:18px;background:var(--line)}
.usermenu .who{color:var(--ink);font-weight:500}
.usermenu .role-badge{color:var(--accent);font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;border:1px solid var(--accent);border-radius:99px;padding:3px 10px}
.usermenu button{border:0;background:none;color:var(--soft);font-size:13px;cursor:pointer;padding:0}
.usermenu button:hover{color:var(--ink)}
/* auth pages */
.auth-wrap{max-width:400px;margin:0 auto;padding:72px 24px 100px}
.auth-wrap h1{font-size:28px;margin:0 0 8px}
.auth-wrap .sub{font-size:13.5px;color:var(--soft);margin:0 0 36px}
.auth-wrap form{display:flex;flex-direction:column}
.auth-switch{font-size:13px;color:var(--soft);margin-top:24px;text-align:center}
.auth-stage{max-width:960px;margin:0 auto;padding:64px 24px 110px}
.auth-card{display:grid;grid-template-columns:1fr 1.15fr;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(15,25,50,.35);border:1px solid var(--line)}
.auth-aside{position:relative;background:linear-gradient(165deg,#241a12 0%,#4a2f1c 45%,#8a5a32 100%);overflow:hidden}
.auth-aside::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 16%,rgba(255,214,158,.55),transparent 45%),radial-gradient(circle at 12% 88%,rgba(0,0,0,.4),transparent 55%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 18px)}
.auth-aside::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,4,.8) 0%,transparent 55%)}
.auth-aside-inner{position:relative;z-index:1;height:100%;padding:48px 40px;display:flex;flex-direction:column;justify-content:flex-end}
.auth-quote{color:#fff;font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-.01em;margin:0 0 14px;max-width:280px}
.auth-quote-sub{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.6;max-width:260px;display:block}
.auth-form-panel{padding:56px 48px}
.auth-form-panel h1{font-size:28px;margin:6px 0 8px}
.auth-form-panel .sub{font-size:13.5px;color:var(--soft);margin:0 0 32px}
.icon-field .input-icon{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s ease,background .15s ease}
.icon-field .input-icon:focus-within{border-color:var(--ink);background:var(--paper)}
.icon-field .input-icon svg{color:var(--muted);flex-shrink:0}
.icon-field input{border:0;outline:0;background:none;font-size:14px;width:100%;color:var(--ink)}
.icon-field input::placeholder{color:var(--muted)}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);margin-bottom:24px;cursor:pointer}
.checkline input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.auth-form-panel .formgrid{gap:0 18px}
.auth-form-panel .formgrid .formfield{margin-bottom:18px}
.auth-aside-points{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;max-width:280px}
.auth-aside-points li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.72);font-size:12.5px;line-height:1.5}
.auth-aside-points svg{flex-shrink:0;margin-top:3px;color:rgba(255,214,158,.92)}
.pw-toggle{border:0;background:none;padding:0;margin:0;cursor:pointer;color:var(--muted);display:flex;align-items:center;flex-shrink:0;line-height:0}
.pw-toggle:hover{color:var(--ink)}
.pw-meter{display:flex;gap:5px;margin-top:9px}
.pw-meter i{height:3px;flex:1;background:var(--line);border-radius:99px;transition:background .2s ease}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:#c0563f}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:#d29a3c}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:var(--accent)}
.pw-meter[data-score="4"] i{background:#3f7d54}
.pw-hint{font-size:11.5px;color:var(--muted);margin-top:6px;display:block}
/* property management */
.manage-msg{border-left:2px solid var(--ink);color:var(--soft);padding:4px 0 4px 16px;font-size:13px;margin-bottom:24px}
.manage-room{border-top:1px solid var(--line);padding:24px 0}
.manage-room:first-of-type{border-top:0}
.manage-room:last-of-type{border-bottom:1px solid var(--line);margin-bottom:32px}
.manage-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;align-items:start;margin-bottom:14px}
.manage-grid .formfield{margin-bottom:0}
.manage-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.manage-actions button{border:0;background:var(--ink);color:#fff;padding:9px 16px;font-size:12.5px;cursor:pointer}
.manage-actions .danger{background:none;color:var(--muted);border:0;cursor:pointer;font-size:12.5px;padding:0}
.manage-actions .danger:hover{color:var(--accent)}
.manage-actions .danger:disabled{color:var(--line);cursor:not-allowed}
.btn-danger{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--danger);color:#fff;font-size:13px;font-weight:500;padding:11px 18px;border-radius:10px;cursor:pointer;font-family:inherit;line-height:1;transition:background .15s ease}
.btn-danger:hover{background:var(--danger-deep)}
.btn-danger svg{flex-shrink:0}
.roomcount-link{border:0;background:none;color:var(--soft);font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.roomcount-link:hover{color:var(--accent)}
/* modals (pure CSS, opened via URL fragment) */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(12,26,56,.5);z-index:100;align-items:center;justify-content:center;padding:24px}
.modal-overlay:target{display:flex}
.modal-box{background:#fff;width:100%;max-width:440px;max-height:82vh;overflow-y:auto;overscroll-behavior:contain;padding:28px;position:relative;border-radius:16px;box-shadow:0 24px 60px -20px rgba(12,26,56,.45);animation:modal-in .18s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-box h3{font-size:18px;margin:0 0 6px;padding-right:34px}
.modal-box .sub{font-size:13px;line-height:1.65;color:var(--soft);margin:0 0 22px}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:19px;color:var(--muted);line-height:1;transition:background .15s ease,color .15s ease}
.modal-close:hover{background:var(--paper);color:var(--ink)}
.modal-warn{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.6;color:var(--danger-deep);background:var(--danger-tint);border:1px solid var(--danger-line);border-radius:10px;padding:11px 13px;margin:0 0 22px}
.modal-warn svg{flex-shrink:0;margin-top:1px;color:var(--danger)}
.modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.modal-actions form{margin:0}
.manage-add{border:1px dashed var(--line);padding:24px;margin-bottom:56px}
.manage-add h4{font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:600}
.manage-links{display:flex;gap:24px;margin-bottom:36px}
.manage-links a{font-size:13px;color:var(--soft)}
.manage-links a:hover{color:var(--accent)}
/* bookings table */
.table-scroll{overflow-x:auto;margin-bottom:20px}
.booking-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.booking-table-separator td{padding:14px 0 6px;border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.booking-table th{text-align:left;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 16px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.booking-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--soft);white-space:nowrap;vertical-align:top}
.booking-table td:first-child,.booking-table th:first-child{padding-left:0}
.booking-table td b{color:var(--ink);font-weight:500}
.status-pill{display:inline-block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);color:var(--muted)}
.status-pill.upcoming{color:var(--accent);border-color:var(--accent)}
.status-pill.cancelled{color:var(--soft);border-color:var(--soft);text-decoration:line-through}
/* payment verified by someone at the property, and its opposite */
.status-pill.confirmed{color:#1c6b45;border-color:#1c6b45;background:#eef7f2}
.status-pill.pending{color:#8a6212;border-color:#d8b56a;background:#fdf6e8}
/* the timing that used to sit alone in the status cell, now under the pill */
.status-sub{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.booking-table .danger{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0}
.booking-table .danger:hover{color:var(--accent)}
/* confirm sits beside cancel in the last column, so they stack on narrow screens */
.row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Thirteen columns of booking detail scroll sideways, which used to leave the
actions off the right edge - the Confirm button looked cut off until you
scrolled. Pinning the last column keeps it reachable at any scroll position.
The border-bottom is drawn as a shadow because a sticky cell drops its own
border under border-collapse. */
.booking-table th:last-child,
.booking-table td:last-child{
position:sticky;right:0;z-index:1;
background:var(--paper);
padding-right:0;padding-left:16px;
box-shadow:-10px 0 10px -10px rgba(15,25,50,.25), inset 0 -1px 0 var(--line);
}
.booking-table th:last-child{box-shadow:-10px 0 10px -10px rgba(15,25,50,.25)}
.booking-table .btn-mini{padding:6px 12px;font-size:12px;border-radius:8px}
.booking-table .linklike{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline}
.booking-table .linklike:hover{color:var(--ink)}
.reset-password-row{display:flex;gap:8px;align-items:center;white-space:nowrap}
.reset-password-row input{border:0;border-bottom:1px solid var(--line);padding:6px 0;font-size:12.5px;outline:0;background:none;width:140px}
.reset-password-row input:focus{border-color:var(--ink)}
.reset-password-row button{border:0;background:var(--ink);color:#fff;padding:6px 12px;font-size:12px;cursor:pointer}
.reset-password-row button:hover{background:var(--accent)}
/* ── console shell: shared atoms for manage / users / cart ── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.page-head-text{min-width:0}
.page-head h1{font-size:30px;margin:10px 0 6px}
.page-head .sub{margin:0;font-size:13.5px;color:var(--soft);max-width:520px}
.page-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;max-width:100%}
.btn-solid{display:inline-flex;align-items:center;gap:9px;border:0;background:var(--ink);color:#fff;font-size:12px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:13px 22px;border-radius:6px;cursor:pointer;line-height:1;transition:background .2s ease}
.btn-solid:hover{background:var(--accent);color:#fff}
.btn-outline{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--soft);font-size:11.5px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:11px 18px;border-radius:6px;cursor:pointer;line-height:1;transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-outline.danger{color:var(--danger);border-color:var(--danger-line);background:#fff}
.btn-outline.danger:hover{color:#fff;border-color:var(--danger);background:var(--danger)}
.btn-solid svg,.btn-outline svg{flex-shrink:0}
.surface{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(15,25,50,.06);overflow:hidden}
.surface + .surface{margin-top:20px}
.surface-head{display:flex;align-items:center;gap:13px;padding:18px 24px;border-bottom:1px solid var(--line)}
.surface-head h3{font-size:15px;margin:0;font-weight:600}
.surface-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.surface-head .count{margin-left:auto;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}
.surface-body{padding:24px}
.surface-foot{padding:14px 24px;border-top:1px solid var(--line);background:var(--paper);font-size:12px;color:var(--muted)}
.icon-tile{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--paper);color:var(--accent);flex-shrink:0}
.icon-tile.ink{background:rgba(21,34,56,.06);color:var(--ink)}
.empty-state{text-align:center;padding:60px 24px;color:var(--soft)}
.empty-state svg{color:var(--line);margin-bottom:12px}
.empty-state h3{font-size:17px;margin:0 0 6px;font-weight:500;color:var(--ink)}
.empty-state p{margin:0;font-size:13px;color:var(--muted)}
.meta-row{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:12.5px;color:var(--soft)}
.meta-row span{display:flex;align-items:center;gap:6px}
.meta-row svg{color:var(--muted);flex-shrink:0}
.note-line{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--accent);margin-top:6px}
.note-line svg{flex-shrink:0;margin-top:2px}
/* manage properties */
.prop-list{display:grid;gap:12px}
.prop-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.prop-card:hover{border-color:#c4c9d3;box-shadow:0 14px 28px -20px rgba(15,25,50,.5);transform:translateY(-2px)}
.prop-card-main{flex:1;min-width:0}
.prop-card-main h4{font-size:16px;margin:0 0 6px;font-weight:600}
.prop-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* users */
.user-cell{display:flex;align-items:center;gap:11px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-navy);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:600;letter-spacing:.4px;flex-shrink:0}
.role-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--paper);white-space:nowrap}
.role-tag svg{flex-shrink:0}
.role-tag.is-superadmin{color:#6d46c4;border-color:#d8c9f2;background:#f7f3ff}
.role-tag.is-admin{color:var(--accent);border-color:#e6d5ae;background:#fbf7ec}
.role-tag.is-staff{color:var(--brand-blue);border-color:#c8daf9;background:#f0f5fe}
.cell-muted{display:flex;align-items:center;gap:6px;color:var(--soft)}
.cell-muted svg{color:var(--muted);flex-shrink:0}
.rowhover tbody tr{transition:background .12s ease}
.rowhover tbody tr:hover{background:var(--paper)}
.table-inset{padding:4px 24px 4px}
.table-inset .booking-table th:first-child,.table-inset .booking-table td:first-child{padding-left:0}
.reset-inline{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;max-width:238px;transition:border-color .15s ease}
.reset-inline:focus-within{border-color:var(--ink)}
.reset-inline input{border:0;padding:8px 11px;font-size:12.5px;outline:0;background:none;width:100%;min-width:0;color:var(--ink)}
.reset-inline button{border:0;border-left:1px solid var(--line);background:var(--paper);color:var(--soft);padding:8px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;font-family:inherit;transition:background .15s ease,color .15s ease}
.reset-inline button:hover{background:var(--ink);color:#fff}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
/* cart */
.cart-line{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;transition:border-color .18s ease}
.cart-line.is-unavailable{border-color:var(--accent);background:#fffdf8}
.cart-thumb{width:74px;height:74px;border-radius:10px;flex-shrink:0;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--base) 0%,var(--accent-tint,var(--base)) 100%);background-size:cover;background-position:center}
.cart-thumb::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 14%,rgba(255,255,255,.28),transparent 52%),repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
.cart-line-main{flex:1;min-width:0}
.cart-line-main h4{font-size:15.5px;margin:0 0 4px;font-weight:600}
.cart-line-main .loc{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:8px}
.cart-line-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}
.cart-line-side b{font-size:19px;font-weight:600;color:var(--ink);display:block;line-height:1.2}
.cart-line-side .rate{font-size:11.5px;color:var(--muted);display:block}
.cart-line-side form{margin:0}
.btn-remove{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:0;font-family:inherit}
.btn-remove:hover{color:var(--accent)}
.cart-aside{align-self:stretch}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(15,25,50,.06);padding:24px;position:sticky;top:24px}
.summary-card h3{font-size:16px;margin:0 0 18px;font-weight:600;display:flex;align-items:center;gap:9px}
.summary-card h3 svg{color:var(--accent);flex-shrink:0}
.summary-card .reserve{border-radius:10px}
.trust-line{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);margin-top:14px}
.trust-line svg{flex-shrink:0}
/* ── wide console shell (opt-in via body class) ───────────── */
body.shell-wide{--shell:max(960px,min(1600px,92vw))}
.shell-wide .detailpage{max-width:none;padding-left:32px;padding-right:32px}
.shell-wide .foot{padding-left:32px;padding-right:32px}
.shell-wide .split-wrap{grid-template-columns:1fr 360px;gap:48px}
/* boxed form controls inside console cards */
.surface .formfield label{font-size:11px;letter-spacing:.4px;color:var(--muted);font-weight:500}
.surface .formfield input,.surface .formfield textarea,.surface .formfield select{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background-color:#fff;font-size:14px;color:var(--ink);width:100%;transition:border-color .15s ease,background .15s ease}
.surface .formfield input:hover,.surface .formfield textarea:hover,.surface .formfield select:hover{border-color:#c4c9d3}
.surface .formfield input:focus,.surface .formfield textarea:focus,.surface .formfield select:focus{border-color:var(--ink);background-color:#fff;outline:0}
.surface .formfield input.input-validation-error,.surface .formfield textarea.input-validation-error,.surface .formfield select.input-validation-error{border-color:var(--accent)}
.surface .formfield input[type=color]{padding:4px;height:44px;cursor:pointer}
.surface .formfield textarea{min-height:96px}
/* dropdowns */
.formfield select,.surface .formfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.formfield select:focus,.surface .formfield select:focus{background-image:url("data:image/svg+xml;utf8,")}
.formfield select option{color:var(--ink);background:#fff}
/* wider form grids */
.formgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.formfield.span2{grid-column:span 2}
.color-preview{height:44px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(135deg,var(--base) 0%,var(--accent-tint,var(--base)) 100%);position:relative;overflow:hidden}
.color-preview::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 18% 14%,rgba(255,255,255,.3),transparent 55%),repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 14px)}
/* The hex sits in the field's own label, so the swatch column stays exactly
as tall as the two colour inputs beside it. */
.formfield label .hexval{margin-left:auto;letter-spacing:.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.surface .formfield label{display:flex;align-items:center;gap:8px}
/* A miniature of the real card, so it is obvious which parts of it the two
colours drive. Shares its markup shape with Views/Shared/_PropertyCard. */
.artwork-demo{margin-top:18px;max-width:320px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--card-line)}
.artwork-demo__art{position:relative;height:140px;background-size:cover;background-position:center}
.artwork-demo__tag{position:absolute;top:0;left:0;right:0;box-sizing:border-box;padding:9px 14px;font-size:11px;color:#fff;background:linear-gradient(rgba(23,20,15,.36),rgba(23,20,15,.36)),var(--base,#17140f)}
.artwork-demo__body{padding:14px 16px 16px;background:var(--card-bg)}
.artwork-demo__body b{display:block;font-family:var(--display);font-size:19px;font-weight:500;text-transform:lowercase;color:var(--card-ink)}
.artwork-demo__body span{font-size:12px;color:var(--muted)}
.artwork-demo__bar{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--card-ink);border-top:3px solid var(--accent-tint,var(--card-accent))}
.artwork-demo__bar span{padding:11px 6px;text-align:center;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.8);border-right:1px solid rgba(255,255,255,.22)}
.artwork-demo__bar span:last-child{border-right:0}
/* stat strip */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:28px}
.stat-tile{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat-tile b{display:block;font-size:20px;font-weight:600;line-height:1.2}
.stat-tile span{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* room type cards */
.room-card{margin-bottom:16px}
.room-card .surface-head .price{margin-left:auto;text-align:right;white-space:nowrap}
.room-card .surface-head .price b{display:block;font-size:17px;font-weight:600}
.room-card .surface-head .price span{display:block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line);background:var(--paper)}
.card-actions-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12px;color:var(--soft);cursor:pointer;font-family:inherit;transition:border-color .15s ease,color .15s ease}
.chip-link:hover{border-color:var(--ink);color:var(--ink)}
.chip-link svg{color:var(--muted);flex-shrink:0}
.chip-link:hover svg{color:var(--ink)}
.btn-quiet-danger{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:0;font-family:inherit}
.btn-quiet-danger:hover{color:var(--accent)}
.locked-note{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.locked-note svg{flex-shrink:0}
.form-stage{max-width:1080px}
/* ── search results ───────────────────────────────────────── */
.search-summary{max-width:var(--shell);margin:0 auto;padding:20px 24px 0}
.shell-wide .search-summary{padding-left:32px;padding-right:32px}
.summary-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.summary-bar .meta-row{gap:8px 22px}
.summary-bar .meta-row b{color:var(--ink);font-weight:600}
.summary-bar .meta-row svg{color:var(--accent)}
.results-topline{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.results-topline h2{font-size:26px;margin:8px 0 0}
.sort-control{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sort-control label{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sort-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:9px;background-color:#fff;padding:9px 34px 9px 13px;font-size:13px;color:var(--ink);cursor:pointer;outline:0;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center;background-size:14px;transition:border-color .15s ease}
.sort-select:hover{border-color:#c4c9d3}
.sort-select:focus{border-color:var(--ink)}
.grid.results-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:36px 28px}
.shell-wide .results-wrap{grid-template-columns:270px 1fr;gap:40px;padding-left:32px;padding-right:32px}
.filters{position:sticky;top:24px}
.filters form{display:block}
.filter-card .fgroup{border-bottom:1px solid var(--line);padding:18px 20px}
.filter-card .fgroup:last-of-type{border-bottom:0}
.filter-card .fgroup h4{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.filter-card .fgroup h4 svg{color:var(--accent);flex-shrink:0}
.filter-card .fgroup label:last-of-type{margin-bottom:0}
.filter-card .fgroup label:hover{color:var(--ink)}
.filter-card select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:1px solid var(--line);border-radius:9px;background-color:#fff;padding:10px 34px 10px 12px;font-size:13px;color:var(--ink);cursor:pointer;outline:0;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 11px center;background-size:14px;transition:border-color .15s ease}
.filter-card select:hover{border-color:#c4c9d3}
.filter-card select:focus{border-color:var(--ink)}
.filter-card .formfield{margin-bottom:0}
.filter-card .formfield label{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.filter-card .formfield input[type=date]{border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12.5px;background-color:#fff;width:100%;color:var(--ink);outline:0}
.filter-card .formfield input[type=date]:focus{border-color:var(--ink)}
.filter-card .surface-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.filter-card .clearlink{margin:0;color:var(--soft)}
.filter-card .clearlink:hover{color:var(--accent)}
.filter-count{margin-left:auto;font-size:10px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:3px 9px;white-space:nowrap}
/* ── wide shell: guest-facing pages ───────────────────────── */
.shell-wide .hero{padding-left:32px;padding-right:32px}
.shell-wide .collection{padding-left:32px;padding-right:32px}
.shell-wide .story{padding-left:32px;padding-right:32px}
.shell-wide .grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:32px 24px}
.shell-wide .search{max-width:960px}
.shell-wide .hero-intro{max-width:520px}
.shell-wide .story-inner{grid-template-columns:1fr 1.6fr;gap:80px}
.shell-wide .amgrid{grid-template-columns:repeat(4,1fr)}
.shell-wide .tabpanel p{max-width:760px}
.shell-wide .search-summary{padding-left:32px;padding-right:32px}
/* filter card: stack the date fields so the native picker never clips */
.filter-card .date-pair{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.filter-card .formfield input[type=date]{min-width:0;font-size:13px;padding:9px 11px}
@media(max-width:860px){
.grid{grid-template-columns:1fr 1fr}
.perks{grid-template-columns:1fr 1fr}
.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;height:340px}
.gallery-grid .g-item:first-child{grid-column:1/3}
.room-grid{grid-template-columns:1fr 1fr}
.room-showcase-card{height:400px}
.rooms-head{gap:24px}
.facility-split{grid-template-columns:1fr}
.facility-hero-img{height:260px}
.facility-row-img{width:110px;height:85px}
.test-grid{grid-template-columns:1fr}
.story-inner{grid-template-columns:1fr}
.shell-wide .story-inner{grid-template-columns:1fr;gap:40px}
.shell-wide .amgrid{grid-template-columns:1fr 1fr}
.results-wrap{grid-template-columns:1fr}
.shell-wide .results-wrap{grid-template-columns:1fr;gap:32px}
.split-wrap{grid-template-columns:1fr}
.formgrid{grid-template-columns:1fr}
.shell-wide .stepbar{max-width:none}
.detailpage{max-width:none}
.manage-grid{grid-template-columns:1fr 1fr}
.amenity-checklist{grid-template-columns:1fr}
.formgrid.cols-3{grid-template-columns:1fr 1fr}
.formfield.span2{grid-column:span 2}
.shell-wide .split-wrap{grid-template-columns:1fr;gap:40px}
.summary-card{position:static}
.confirm-hero{margin-bottom:28px}
.filters{position:static}
.results-topline{align-items:flex-start}
.auth-card{grid-template-columns:1fr}
.auth-aside{display:none}
}
@media(max-width:560px){
.auth-stage{padding:32px 16px 70px}
.auth-form-panel{padding:40px 26px}
.nav{padding:16px 20px}
.hero{padding:70px 20px 90px;min-height:0}
.search-wrap{margin-top:-40px;padding:0 16px}
.perks{grid-template-columns:1fr;padding:56px 20px 0;gap:28px}
.collection{padding:0 20px 70px}
.grid{grid-template-columns:1fr}
.room-grid{grid-template-columns:1fr}
.room-showcase-card{height:340px}
.rooms-showcase{padding:44px 16px}
.facility-showcase{padding:44px 16px}
.hotel-reviews{padding:44px 16px}
.story{padding:60px 20px}
.foot{padding:28px 20px;flex-direction:column;gap:8px}
.search{flex-wrap:wrap}
.field{flex:1 1 45%;border-right:0;border-bottom:1px solid var(--line);padding-bottom:10px}
.search button{margin-top:8px;padding:14px 0;width:100%;justify-content:center}
.page-head{align-items:flex-start}
.prop-card{flex-wrap:wrap}
.prop-card-actions{width:100%;justify-content:space-between}
.cart-line{flex-wrap:wrap}
.cart-line-side{width:100%;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
.stepbar{padding-left:20px;padding-right:20px;font-size:11px}
.stepbar .rail{margin:0 9px}
.stepbar .step .lbl-step{display:none}
.stepbar .step.active .lbl-step{display:inline}
.stay-row{flex-wrap:wrap;padding:16px 20px}
.stay-row-price{width:100%;display:flex;align-items:baseline;justify-content:space-between;text-align:left}
.stay-row-price span{margin-top:0}
.itin-rows{grid-template-columns:1fr 1fr}
.ref-card{padding:16px 18px}
.itin .surface-head{flex-wrap:wrap}
.pay-head{flex-wrap:wrap}
.card-brands{flex-basis:100%;margin-left:0}
.itin .surface-head .status-pill{margin-left:0}
.confirm-actions a{width:100%;justify-content:center}
.surface-body{padding:20px}
.table-inset{padding:4px 20px}
.formgrid.cols-3{grid-template-columns:1fr}
.formfield.span2{grid-column:auto}
.shell-wide .detailpage{padding-left:20px;padding-right:20px}
.shell-wide .foot{padding-left:20px;padding-right:20px}
.card-actions{padding:14px 20px}
.stat-strip{grid-template-columns:1fr 1fr}
}
/* ==========================================================================
Manage > property content panels and their modals
Hero carousel, gallery, amenities, room numbers, and room photos - the
things a manager edits here and a guest sees on the details page.
========================================================================== */
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-bottom:8px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(15,25,50,.06);display:flex;flex-direction:column;overflow:hidden}
.content-card .surface-head{padding:16px 18px}
.content-card .surface-head h3{font-size:14px}
.content-preview{display:flex;gap:6px;padding:16px 18px;flex:1;align-items:flex-start}
.content-preview .shot{position:relative;flex:1;min-width:0;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.content-preview .shot img{width:100%;height:100%;object-fit:cover;display:block}
.content-preview .shot .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,26,56,.62);color:#fff;font-size:12.5px;font-weight:600}
.content-preview .none{flex:1;border:1px dashed var(--line);border-radius:9px;padding:18px 12px;text-align:center;font-size:12px;color:var(--muted)}
.content-card .surface-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 12px;font-size:12.5px;color:var(--soft);cursor:pointer;font-family:inherit;line-height:1;transition:border-color .15s ease,color .15s ease,background .15s ease}
.btn-chip:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.btn-chip svg{flex-shrink:0}
.count-pill{font-size:11px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;color:var(--muted);white-space:nowrap}
/* wider variants, since media grids need more room than a confirm dialog */
.modal-box.modal-wide{max-width:600px}
.modal-box.modal-xwide{max-width:760px}
.modal-head{display:flex;align-items:flex-start;gap:13px;margin:0 0 20px;padding-right:34px}
.modal-head .icon-tile{flex-shrink:0}
.modal-head h3{margin:0 0 2px;padding-right:0;font-size:17px}
.modal-head p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.modal-section{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.modal-section:first-of-type{border-top:0;padding-top:0;margin-top:0}
.modal-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.modal-section-head h4{margin:0;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.modal-empty{border:1px dashed var(--line);border-radius:12px;padding:22px 16px;text-align:center;font-size:12.5px;color:var(--muted);margin-bottom:14px}
/* inline add row: one text field plus its button */
.field-row{display:flex;gap:8px;align-items:stretch}
.field-row input[type=text]{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--ink);background:#fff;outline:0;transition:border-color .15s ease}
.field-row input[type=text]:focus{border-color:var(--ink)}
.field-row button{border:0;background:var(--ink);color:#fff;border-radius:10px;padding:0 18px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease}
.field-row button:hover{background:var(--brand-navy)}
.field-hint{font-size:11.5px;color:var(--muted);margin:9px 0 0}
/* room numbers */
.unit-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.unit-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 7px 6px 14px;font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.unit-chip form{display:flex;margin:0}
.unit-chip button{border:0;background:none;color:var(--muted);cursor:pointer;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;padding:0;transition:background .15s ease,color .15s ease}
.unit-chip button:hover{background:var(--danger-tint);color:var(--danger)}
/* amenity checklist as selectable cards */
.amenity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin-bottom:16px}
.amenity-toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.35;color:var(--soft);background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.amenity-toggle:hover{border-color:#c4c9d3;background:var(--paper)}
.amenity-toggle.on{border-color:var(--accent);background:#fbf7ef;color:var(--ink);font-weight:500}
.amenity-toggle form{display:contents}
.amenity-toggle input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex-shrink:0;margin:0}
/* photo grids */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.photo-grid.dense{grid-template-columns:repeat(4,1fr)}
.photo-tile{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.photo-tile .tag{position:absolute;left:6px;top:6px;background:rgba(12,26,56,.82);color:#fff;font-size:9px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:999px}
.photo-tile form{position:absolute;top:6px;right:6px;margin:0;opacity:0;pointer-events:none;transition:opacity .15s ease}
.photo-tile:hover form,.photo-tile:focus-within form{opacity:1;pointer-events:auto}
.photo-tile form button{border:0;background:rgba(12,26,56,.78);color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;padding:0}
.photo-tile form button:hover{background:var(--danger)}
/* file picker styled as a drop target, with the chosen name echoed back */
.upload-form{display:flex;gap:8px;align-items:stretch}
.upload-drop{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:9px;border:1px dashed var(--line);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;background:var(--paper);transition:border-color .15s ease,color .15s ease}
.upload-drop:hover{border-color:var(--ink);color:var(--soft)}
.upload-drop svg{flex-shrink:0}
.upload-drop .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload-form button{border:0;background:var(--ink);color:#fff;border-radius:10px;padding:0 18px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease}
.upload-form button:hover{background:var(--brand-navy)}
/* ordered slide list (hero carousel) */
.slide-row{display:flex;align-items:center;gap:12px;padding:9px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff}
.slide-row img{width:80px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--paper)}
.slide-meta{min-width:0;flex:1}
.slide-meta b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide-meta span{font-size:11.5px;color:var(--muted)}
.slide-tools{display:flex;gap:5px;margin-left:auto;flex-shrink:0}
.slide-tools form{margin:0}
.icon-btn{border:1px solid var(--line);background:#fff;width:29px;height:29px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--soft);padding:0;transition:border-color .15s ease,color .15s ease,background .15s ease}
.icon-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.icon-btn:disabled{opacity:.3;cursor:default}
.icon-btn.danger:hover:not(:disabled){border-color:var(--danger-line);background:var(--danger-tint);color:var(--danger)}
/* per-amenity editor rows */
.amenity-editor{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;background:#fff}
.amenity-editor-top{display:flex;gap:12px;align-items:center;margin-bottom:13px}
.amenity-editor-top img{width:72px;height:54px;object-fit:cover;border-radius:9px;flex-shrink:0;background:var(--paper)}
.amenity-editor-top .noimg{width:72px;height:54px;border-radius:9px;flex-shrink:0;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted)}
/* The shared default standing in for a photo the manager hasn't uploaded. */
.thumb-default{position:relative;flex-shrink:0;line-height:0}
.thumb-default img{opacity:.72}
.thumb-default em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;background:rgba(23,20,15,.72);color:#fff;border-radius:4px;padding:2px 5px}
.amenity-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.amenity-fields .full{grid-column:1/-1}
.mini-field label{display:block;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.mini-field input,.mini-field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--ink);background:#fff;outline:0;font-family:inherit;transition:border-color .15s ease}
.mini-field textarea{min-height:66px;resize:vertical;line-height:1.5}
.mini-field input:focus,.mini-field textarea:focus{border-color:var(--ink)}
.amenity-editor-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.amenity-editor-actions .upload-form{flex:1}
.btn-mini{border:0;background:var(--ink);color:#fff;border-radius:9px;padding:9px 15px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s ease}
.btn-mini:hover{background:var(--brand-navy)}
/* the rating picker, matching the text fields it sits beside */
.mini-field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--ink);background:#fff;outline:0;font-family:inherit;transition:border-color .15s ease}
.mini-field select:focus{border-color:var(--ink)}
/* testimonials: the content card has a quote to show rather than a photo */
.content-preview .quote-preview{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:var(--paper)}
.content-preview .quote-preview .stars{font-size:11px;color:#b8912f;letter-spacing:1px}
.content-preview .quote-preview p{margin:5px 0 7px;font-size:12px;line-height:1.5;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.content-preview .quote-preview b{font-size:11.5px;font-weight:600}
/* date-window picker above the bookings table */
.range-filter{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.range-filter label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600}
.range-filter select{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink);background:#fff;outline:0;font-family:inherit;cursor:pointer;min-width:190px;transition:border-color .15s ease}
.range-filter select:hover{border-color:var(--soft)}
.range-filter select:focus{border-color:var(--ink)}
/* a starter row nobody has rewritten yet, called out in the manage list */
.row-badge{display:inline-block;margin-left:6px;vertical-align:middle;font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;background:rgba(23,20,15,.72);color:#fff;border-radius:4px;padding:2px 5px}
@media (max-width:640px){
.amenity-fields{grid-template-columns:1fr}
.photo-grid,.photo-grid.dense{grid-template-columns:repeat(2,1fr)}
.upload-form,.amenity-editor-actions{flex-wrap:wrap}
.modal-box{padding:22px 18px}
}
/* Feedback while a manage edit round-trips: every action is a full page load,
so without this the page looks frozen and gets clicked a second time. */
body.is-saving{cursor:progress}
body.is-saving::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:saving-sweep .9s ease-in-out infinite}
@keyframes saving-sweep{0%{background-position:-40% 0}100%{background-position:140% 0}}
.detailpage button[disabled],.detailpage input[type=checkbox][disabled]{opacity:.55;cursor:progress}
.detailpage button[disabled]:hover{background-color:inherit}
/* ============ Receiving QR: manage screen and checkout ============ */
/* A QR is only scannable against a white ground and only if it is shown whole,
so the frame never crops - whatever the manager uploaded is fitted inside it,
full screenshot or bare code alike. */
/* The image is positioned against the frame rather than sized with max-height:100%:
a percentage height does not resolve against a height that came from aspect-ratio,
so a portrait screenshot would overflow the square and get cropped - the one thing
this frame exists to prevent. */
.qr-frame{position:relative;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qr-frame img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;display:block}
.content-preview .shot.qr-shot{background:#fff}
.content-preview .shot.qr-shot img{object-fit:contain;padding:6px}
.qr-manage{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:start;margin-bottom:14px}
.qr-manage-side{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.qr-manage-side b{font-size:13.5px;color:var(--ink)}
/* Wraps on the width of this column, not the window. The checkout aside squeezes the
left column to ~300px between 861px and roughly 1100px, which a fixed QR column plus
a text column cannot share - the text collapsed to nothing. auto-fit stacks them on
the space actually available, whatever the viewport is doing. */
.qr-pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;align-items:start}
.qr-pay-grid .qr-frame{max-width:250px}
.qr-pay-side{min-width:0}
.qr-account{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.qr-amount{font-size:12.5px;color:var(--soft);margin:0 0 14px}
.qr-amount b{color:var(--ink)}
/* Makes it plain that the two fields are alternatives, not both required. */
.qr-or{display:flex;align-items:center;gap:10px;margin:2px 0 14px;color:var(--muted);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.qr-or::before,.qr-or::after{content:'';flex:1;height:1px;background:var(--line)}
.qr-attached{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11.5px;color:var(--accent)}
/* The page-wide disabled style means "saving" (a progress cursor). A confirm button
held back for missing payment proof is waiting on the guest, not on the server. */
.reserve.is-blocked,.detailpage button.reserve.is-blocked{cursor:not-allowed}
.fine.is-blocked{color:var(--accent)}
@media (max-width:720px){
.qr-manage{grid-template-columns:1fr}
.qr-frame{max-width:280px}
}
/* Choosing between the QR transfer and the card form. Same container-driven wrapping
as the QR grid above, for the same squeezed-column reason. */
.pay-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pay-choice{position:relative;display:block;cursor:pointer}
.pay-choice input{position:absolute;opacity:0;width:0;height:0}
.pay-choice-body{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--paper);transition:border-color .15s ease,background-color .15s ease}
.pay-choice-body svg{color:var(--muted);margin-bottom:7px;display:block}
.pay-choice-body b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.pay-choice-body small{display:block;font-size:11.5px;color:var(--muted);line-height:1.5}
.pay-choice:hover .pay-choice-body{border-color:var(--soft)}
.pay-choice input:checked + .pay-choice-body{border-color:var(--accent);background:var(--card,#fff)}
.pay-choice input:checked + .pay-choice-body svg{color:var(--accent)}
.pay-choice input:focus-visible + .pay-choice-body{outline:2px solid var(--accent);outline-offset:2px}
/* ==========================================================================
Narrow screens: the header menu, and the gaps the breakpoints further up
don't cover. Last in the file so these win over the base rules they refine.
========================================================================== */
@media (max-width:900px){
/* The links and the account menu stop fitting beside the brand around here -
a signed-in super admin's menu alone is ~430px wide, which used to push the
whole document to 564px on a 375px phone - so they fold into a drop panel. */
.nav{gap:12px}
.nav-burger{
display:flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:11px;margin-right:-11px;
cursor:pointer;color:var(--ink);
}
.nav-burger span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible + .nav-burger{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
/* .nav wraps, so a full-width panel drops onto its own row under the bar. */
.nav-panel{
display:none;order:3;width:100%;
flex-direction:column;align-items:stretch;
margin-top:4px;padding-top:6px;
border-top:1px solid rgba(23,20,15,.12);
}
.nav-toggle:checked ~ .nav-panel{display:flex}
/* the panel hangs over the page below it, so the bar has to stop being see-through */
.site-header:has(.nav-toggle:checked){background:var(--cream)}
.nav-panel .navlinks{flex-direction:column;gap:0}
.nav-panel .navlinks a{padding:13px 2px}
/* the hover underline is drawn across the full row here, which reads as a rule */
.nav-panel .navlinks a::after{display:none}
.nav-panel .usermenu{
flex-direction:column;align-items:stretch;gap:0;
margin-top:6px;padding-top:6px;
border-top:1px solid rgba(23,20,15,.12);
font-size:14px;
}
.nav-panel .usermenu .divider{display:none}
.nav-panel .usermenu a{padding:13px 2px}
.nav-panel .usermenu .who{padding:13px 2px 4px}
.nav-panel .usermenu .role-badge{align-self:flex-start;margin-bottom:8px}
.nav-panel .usermenu button{padding:13px 2px;text-align:left}
.nav-panel .cta-button-primary{margin-top:12px;padding:16px 24px;text-align:center}
}
@media (max-width:560px){
.nav{padding-top:14px;padding-bottom:14px}
/* two columns of form fields at phone width leave neither one usable */
.manage-grid{grid-template-columns:1fr}
.modal-overlay{padding:12px}
.modal-box{max-height:88vh}
.surface-head{padding:16px 18px;flex-wrap:wrap}
.surface-head .count{margin-left:0}
.page-head h1{font-size:26px}
.range-filter{gap:7px}
.range-filter select{min-width:0;width:100%}
.content-preview{flex-wrap:wrap}
/* an input and its button side by side leave the input too short to read */
.field-row,.upload-form{flex-wrap:wrap}
.field-row button,.upload-form button{width:100%;padding:12px 18px}
.amenity-editor-actions{flex-direction:column;align-items:stretch}
.form-actions{flex-direction:column;align-items:stretch}
.form-actions .btn-solid,.form-actions .btn-outline,.form-actions .btn-danger{justify-content:center}
/* the confirming action ends up on top once they stack */
.modal-actions{flex-direction:column-reverse;align-items:stretch}
.modal-actions form{width:100%}
.modal-actions .btn-solid,.modal-actions .btn-outline,
.modal-actions .btn-danger,.modal-actions button{width:100%;justify-content:center}
.prop-card-actions .btn-solid,.prop-card-actions .btn-outline{flex:1;justify-content:center}
.summary-bar{align-items:flex-start;flex-direction:column;gap:12px}
}
@media (max-width:400px){
.stat-strip{grid-template-columns:1fr}
.amenity-grid{grid-template-columns:1fr}
.itin-rows{grid-template-columns:1fr}
.booking-table{min-width:600px}
.surface-body{padding:16px}
.table-inset{padding:4px 16px}
}
/* Several base rules here set display explicitly (.fine, for one), which outranks the
browser's own [hidden] rule and leaves a hidden element on screen. Toggling `hidden`
is how the payment panels switch, so make the attribute win outright. */
[hidden]{display:none !important}