/* =====================================================================
   LIVDEN STAY — SITE STYLESHEET (premium hospitality-grade revision)
   Palette: teal / gold / ivory / charcoal, per the brand system.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root{
  --teal: #0F4C4C;
  --teal-light: #1B6E6C;
  --teal-deep: #0A3535;
  --gold: #C9A45C;
  --gold-light: #E4C989;
  --gold-deep: #A9843F;
  --ivory: #F7F4EC;
  --ivory-border: #E4DEC9;
  --sage: #6F8F82;
  --charcoal: #1F2933;
  --muted: #4B5A5A;
  --faint: #9BAAA4;
  --success: #2E8B74;
  --danger: #B3261E;
  --warning: #E4796B;
  --white: #FFFFFF;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: 'Manrope', sans-serif; color: var(--teal); margin: 0 0 12px 0; letter-spacing: -0.01em; }
h1{ font-weight: 800; font-size: 44px; line-height: 1.1; }
h1 .serif{ font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; }
h2{ font-weight: 800; font-size: 30px; }
h3{ font-weight: 700; font-size: 19px; }
p{ margin: 0 0 14px 0; color: var(--muted); }
a{ color: var(--gold-deep); text-decoration: none; transition: color .2s var(--ease); }
a:hover{ color: var(--teal); }
.mono{ font-family: 'IBM Plex Mono', monospace; }
::selection{ background: var(--gold-light); color: var(--teal-deep); }

.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section{ padding: 72px 0; }
.section-tight{ padding: 44px 0; }

/* --- scroll reveal --- */
.reveal{ opacity: 0; transform: translateY(38px) scale(.94); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal-delay-1.in{ transition-delay: .08s; }
.reveal-delay-2.in{ transition-delay: .16s; }
.reveal-delay-3.in{ transition-delay: .24s; }
.reveal-delay-4.in{ transition-delay: .32s; }
.reveal-delay-5.in{ transition-delay: .40s; }
.reveal-delay-6.in{ transition-delay: .48s; }

/* Auto-stagger cards inside a 3/4-col grid without needing a delay
   class per item — later cards in the row animate in slightly after
   earlier ones. */
.grid-3 > .reveal:nth-child(1).in, .grid-4 > .reveal:nth-child(1).in{ transition-delay: 0s; }
.grid-3 > .reveal:nth-child(2).in, .grid-4 > .reveal:nth-child(2).in{ transition-delay: .1s; }
.grid-3 > .reveal:nth-child(3).in, .grid-4 > .reveal:nth-child(3).in{ transition-delay: .2s; }
.grid-3 > .reveal:nth-child(4).in, .grid-4 > .reveal:nth-child(4).in{ transition-delay: .3s; }
.grid-3 > .reveal:nth-child(5).in, .grid-4 > .reveal:nth-child(5).in{ transition-delay: .4s; }
.grid-3 > .reveal:nth-child(6).in, .grid-4 > .reveal:nth-child(6).in{ transition-delay: .5s; }
.grid-3 > a:has(.reveal):nth-child(1) .reveal.in{ transition-delay: 0s; }
.grid-3 > a:has(.reveal):nth-child(2) .reveal.in{ transition-delay: .1s; }
.grid-3 > a:has(.reveal):nth-child(3) .reveal.in{ transition-delay: .2s; }
.grid-3 > a:has(.reveal):nth-child(4) .reveal.in{ transition-delay: .3s; }
.grid-3 > a:has(.reveal):nth-child(5) .reveal.in{ transition-delay: .4s; }
.grid-3 > a:has(.reveal):nth-child(6) .reveal.in{ transition-delay: .5s; }

/* Icon "pop" inside feature cards — plays right after the card itself
   has faded/risen into place. */
.feature-card .icon{ transform: scale(0) rotate(-20deg); transition: transform .5s var(--ease) .35s; }
.feature-card.reveal.in .icon{ transform: scale(1) rotate(0deg); }

/* Stepper "how it works" — the connecting line draws left-to-right,
   and each step number pops in with its own delay, when the section
   scrolls into view. */
.stepper::before{ transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }
.stepper.reveal.in::before{ transform: scaleX(1); }
.stepper .step .num{ transform: scale(0); transition: transform .45s var(--ease); }
.stepper.reveal.in .step:nth-child(1) .num{ transition-delay: .15s; transform:scale(1); }
.stepper.reveal.in .step:nth-child(2) .num{ transition-delay: .35s; transform:scale(1); }
.stepper.reveal.in .step:nth-child(3) .num{ transition-delay: .55s; transform:scale(1); }
.stepper.reveal.in .step:nth-child(4) .num{ transition-delay: .75s; transform:scale(1); }
.stepper.reveal.in .step:nth-child(5) .num{ transition-delay: .95s; transform:scale(1); }
.stepper.reveal.in .step:nth-child(6) .num{ transition-delay: 1.15s; transform:scale(1); }

/* --- buttons / pills --- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
  padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{ background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); box-shadow: 0 14px 28px -12px rgba(15,76,76,0.55); }
.btn-primary:hover{ color: var(--white); transform: translateY(-3px); box-shadow: 0 22px 38px -14px rgba(15,76,76,0.6); }
.btn-gold{ background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: var(--teal-deep); box-shadow: 0 14px 28px -12px rgba(169,132,63,0.5); }
.btn-gold:hover{ color: var(--teal-deep); transform: translateY(-3px); box-shadow: 0 22px 38px -14px rgba(169,132,63,0.55); }
.btn-ghost{ background: rgba(255,255,255,0.6); color: var(--teal); border: 1px solid var(--ivory-border); backdrop-filter: blur(6px); }
.btn-ghost:hover{ border-color: var(--teal); background: var(--white); transform: translateY(-2px); }
.btn-block{ width: 100%; justify-content: center; }
.btn-sm{ padding: 9px 18px; font-size: 12.5px; }

.pill{ border-radius: 999px; }
.card{ border-radius: 22px; }
.shadow-soft{ box-shadow: 0 18px 40px -24px rgba(15,76,76,0.32); }
.shadow-lift{ box-shadow: 0 36px 70px -24px rgba(15,76,76,0.4); }

.tag{
  display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(135deg,#EFE6C9,#E2D2A3); color: #7C5C22; padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(169,132,63,0.5);
}

/* --- header / nav --- */
.site-header{ padding: 20px 0; position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, var(--ivory) 60%, rgba(247,244,236,0)); padding-bottom: 14px; }
/* Widens just the header row (not the rest of the site) so all 8 nav
   links + the logo + Sign In + Find Your Place fit on one line instead
   of "About"/"Contact" dropping to a second row. Raise/lower this if
   you add or remove nav links. */
.nav-wrap{ max-width: 1400px; }
.nav-shell{
  background: rgba(255,255,255,0.86); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px; padding: 10px 12px 10px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 20px 44px -26px rgba(15,76,76,0.38);
  transition: box-shadow .3s var(--ease);
}
.logo-badge{ display: flex; align-items: center; flex-shrink: 0; }
.logo-badge img{ height: 44px; width: auto; max-width: 230px; object-fit: contain; display: block; }
.nav-links{ display: flex; align-items: center; gap: 18px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--muted); flex-wrap: nowrap; white-space: nowrap; }
.nav-links a{ color: var(--muted); position: relative; padding: 4px 0; }
.nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--gold); border-radius: 2px; transition: right .28s var(--ease); }
.nav-links a.active, .nav-links a:hover{ color: var(--teal); }
.nav-links a.active::after, .nav-links a:hover::after{ right: 0; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta{ background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(15,76,76,0.55); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.nav-cta:hover{ background: var(--teal-light); color: var(--white); transform: translateY(-2px); }

.account-menu{ position: relative; }
.account-btn{ display:flex; align-items:center; gap:8px; background: var(--ivory); border: 1px solid var(--ivory-border); padding: 10px 20px; border-radius: 999px; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color: var(--teal); white-space: nowrap; }
.account-btn:has(.account-avatar){ padding: 6px 16px 6px 6px; }
.account-avatar{ width:26px; height:26px; border-radius:50%; background: linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.account-dropdown{ position:absolute; right:0; top: calc(100% + 10px); background: var(--white); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(15,76,76,0.4); padding: 10px; min-width: 190px; opacity:0; visibility:hidden; transform: translateY(-8px); transition: all .25s var(--ease); border:1px solid var(--ivory-border); }
.account-menu:hover .account-dropdown, .account-menu:focus-within .account-dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.account-dropdown a{ display:block; padding:9px 12px; border-radius:10px; font-size:13px; font-weight:600; color: var(--muted); }
.account-dropdown a:hover{ background: var(--ivory); color: var(--teal); }
.signin-dropdown{ position:absolute; right:0; top: calc(100% + 10px); background: var(--white); border-radius:16px; box-shadow: 0 30px 60px -20px rgba(15,76,76,0.4); padding: 8px; min-width: 190px; opacity:0; visibility:hidden; transform: translateY(-8px); transition: all .25s var(--ease); border:1px solid var(--ivory-border); }
.account-menu:hover .signin-dropdown, .account-menu:focus-within .signin-dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.signin-dropdown a{ display:block; padding:10px 12px; border-radius:10px; font-size:12.5px; font-weight:700; color: var(--teal); }
.signin-dropdown a:hover{ background: var(--ivory); }
.signin-dropdown .sub{ font-weight:500; color: var(--faint); font-size:11px; margin-top:1px; }

/* --- hero --- */
.hero{ padding: 64px 0 48px 0; position: relative; overflow: hidden; }
.hero::before{ content:''; position:absolute; top:-160px; right:-160px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(201,164,92,0.25), transparent 70%); pointer-events:none; }
.hero::after{ content:''; position:absolute; bottom:-200px; left:-200px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle at 60% 40%, rgba(15,76,76,0.12), transparent 70%); pointer-events:none; }
.hero .eyebrow{ margin-bottom: 20px; }
.hero h1 span{ color: var(--gold-deep); font-family:'Playfair Display', serif; font-style: italic; font-weight: 600; }
.hero-lead{ max-width: 540px; font-size: 16.5px; }
.hero-stats{ display:flex; gap:32px; flex-wrap:wrap; margin-top:34px; }
.hero-stat{ }
.hero-stat .num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:24px; color:var(--teal); }
.hero-stat .label{ font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.02em; }

/* --- grid helpers --- */
.grid{ display: grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }
/* Below this width the 8 nav links no longer fit on one line, so they
   are hidden in favour of the hamburger button + slide-in mobile menu
   (below), which carries every link plus sign-in/dashboard actions. */
@media (max-width: 1080px){ .nav-links{ display:none; } }
@media (max-width: 860px){ .hero .wrap{ grid-template-columns: 1fr !important; } }

/* --- mobile hamburger + slide-in menu (tablet & phone) --- */
.nav-hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; border-radius:50%; background: var(--ivory); border:1px solid var(--ivory-border); flex-shrink:0; }
.nav-hamburger span{ display:block; width:18px; height:2px; border-radius:2px; background: var(--teal); }
@media (max-width: 1080px){ .nav-hamburger{ display:flex; } }
@media (max-width: 380px){ .nav-cta{ display:none; } }

.mobile-nav-overlay{ position:fixed; inset:0; background:rgba(10,53,53,0.45); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity .3s var(--ease); z-index:198; }
.mobile-nav-overlay.open{ opacity:1; visibility:visible; }
.mobile-nav{
  position:fixed; top:0; right:0; height:100%; width:min(340px, 86vw);
  background: var(--white); z-index:199; padding:22px 22px 30px 22px;
  box-shadow: -30px 0 60px -20px rgba(15,76,76,0.35);
  transform: translateX(100%); transition: transform .35s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-nav-close{ width:36px; height:36px; border-radius:50%; background: var(--ivory); border:none; font-size:22px; line-height:1; color: var(--teal); cursor:pointer; }
.mobile-nav-links{ display:flex; flex-direction:column; gap:4px; margin-bottom:24px; }
.mobile-nav-links a{ padding:13px 10px; border-radius:12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; color: var(--muted); }
.mobile-nav-links a.active, .mobile-nav-links a:hover{ background: var(--ivory); color: var(--teal); }
.mobile-nav-account{ margin-top:auto; padding-top:20px; border-top:1px solid var(--ivory-border); }
body.mobile-nav-locked{ overflow:hidden; }
@media (min-width: 1081px){ .mobile-nav, .mobile-nav-overlay{ display:none; } }

/* --- feature / benefit cards (3D tilt-ready) --- */
.tilt-wrap{ perspective: 1200px; }
.feature-card{
  background: var(--white); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  transform-style: preserve-3d; will-change: transform;
  border: 1px solid rgba(228,222,201,0.6);
}
.feature-card:hover{ box-shadow: 0 34px 60px -24px rgba(15,76,76,0.4); }
.feature-card .icon{ width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg,var(--ivory),#fff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--ivory-border); }
.feature-card.dark{ background: linear-gradient(150deg, var(--teal), var(--teal-deep)); color: var(--white); }
.feature-card.dark h3{ color: var(--white); }
.feature-card.dark p{ color: #B7CAC4; }
.feature-card.dark .icon{ background: rgba(255,255,255,0.12); box-shadow:none; }

/* --- property cards --- */
.property-card{ background: var(--white); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px -24px rgba(15,76,76,0.32); transition: transform .45s var(--ease), box-shadow .45s var(--ease); border: 1px solid rgba(228,222,201,0.5); }
.property-card:hover{ transform: translateY(-8px); box-shadow: 0 40px 70px -26px rgba(15,76,76,0.42); }
.property-card .thumb{ height: 200px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); background-size: 220% 220%; position: relative; overflow:hidden; }
.property-card .thumb::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 75% 25%, rgba(201,164,92,0.35), transparent 55%); }
.property-card .thumb::after{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 26px 26px; }
.property-card:hover .thumb{ background-position: 100% 100%; }
.property-card .thumb .price-pill{ position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,0.94); backdrop-filter: blur(4px); color: var(--teal); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 999px; box-shadow: 0 10px 20px -10px rgba(0,0,0,0.3); }
.property-card .body{ padding: 20px 22px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.property-card .amenities{ display: flex; flex-wrap: wrap; gap: 6px; }
.property-card .amenities span{ font-size: 10.5px; color: var(--muted); background: var(--ivory); padding: 4px 10px; border-radius: 999px; }

/* --- filter bar --- */
.filter-bar{ background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 22px; padding: 22px; box-shadow: 0 18px 40px -24px rgba(15,76,76,0.32); display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; border: 1px solid rgba(228,222,201,0.6); }
.filter-field{ display: flex; flex-direction: column; gap: 7px; min-width: 150px; flex: 1; }
.filter-field label{ font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.filter-field select, .filter-field input{
  border: 1px solid var(--ivory-border); border-radius: 12px; padding: 12px 15px;
  font-family: 'Public Sans', sans-serif; font-size: 13px; color: var(--charcoal); background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.filter-field select:focus, .filter-field input:focus{ outline:none; border-color: var(--teal-light); box-shadow: 0 0 0 4px rgba(15,76,76,0.1); }

/* --- forms (premium) --- */
.form-card{
  background: linear-gradient(180deg, #fff, #fffdf8); border-radius: 24px; padding: 36px;
  box-shadow: 0 24px 50px -24px rgba(15,76,76,0.35); border: 1px solid rgba(228,222,201,0.7);
  position: relative;
}
.form-card::before{ content:''; position:absolute; top:0; left:32px; right:32px; height:3px; background: linear-gradient(90deg, var(--gold), var(--teal)); border-radius: 0 0 6px 6px; }
.form-row{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-row label{ font-size: 13px; font-weight: 600; color: var(--charcoal); }
.form-row .hint{ font-size: 11.5px; color: var(--faint); font-weight: 500; margin-top: -3px; }
.form-row input, .form-row select, .form-row textarea{
  border: 1.5px solid var(--ivory-border); border-radius: 13px; padding: 13px 16px;
  font-family: 'Public Sans', sans-serif; font-size: 14px; color: var(--charcoal); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 4px rgba(15,76,76,0.1);
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover{ border-color: var(--sage); }
.form-row textarea{ min-height: 110px; resize: vertical; }
.form-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px){ .form-grid-2{ grid-template-columns: 1fr; } }
.alert{ border-radius: 14px; padding: 15px 20px; font-size: 13.5px; margin-bottom: 20px; animation: alertIn .4s var(--ease); }
.alert-success{ background: #F0F7F4; color: var(--success); border: 1px solid #CDE7DD; }
.alert-error{ background: #FBEEEC; color: var(--danger); border: 1px solid #F2CFC9; }
@keyframes alertIn{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform: translateY(0);} }

.form-side-note{ font-size: 12.5px; color: var(--muted); display:flex; align-items:center; gap:8px; margin-top:14px; }
.form-side-note svg{ flex-shrink:0; }

/* --- auth pages --- */
.auth-shell{ min-height: calc(100vh - 260px); display:flex; align-items:center; justify-content:center; padding: 40px 0; position: relative; overflow:hidden; }
.auth-shell::before{ content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%); width:640px; height:640px; border-radius:50%; background: radial-gradient(circle, rgba(201,164,92,0.14), transparent 65%); pointer-events:none; }
.auth-card{ width: 100%; max-width: 440px; background: var(--white); border-radius: 26px; padding: 42px 38px; box-shadow: 0 40px 80px -30px rgba(15,76,76,0.45); border: 1px solid rgba(228,222,201,0.6); position: relative; z-index: 1; }
.auth-badge{ width:52px; height:52px; border-radius: 16px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); display:flex; align-items:center; justify-content:center; margin: 0 auto 18px auto; box-shadow: 0 16px 30px -14px rgba(15,76,76,0.55); }
.auth-tabs{ display:flex; gap:6px; background: var(--ivory); border-radius: 999px; padding: 5px; margin-bottom: 26px; }
.auth-tabs a{ flex:1; text-align:center; padding: 10px 12px; border-radius: 999px; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color: var(--muted); transition: all .25s var(--ease); }
.auth-tabs a.active{ background: var(--white); color: var(--teal); box-shadow: 0 10px 20px -12px rgba(15,76,76,0.4); }
.password-field{ position: relative; }
.password-toggle{ position:absolute; right:14px; top:50%; transform:translateY(calc(-50% + 8px)); cursor:pointer; color: var(--faint); font-size: 11px; font-weight:700; user-select:none; }

/* --- dashboard --- */
.dash-hero{ background: linear-gradient(150deg, var(--teal), var(--teal-deep)); border-radius: 28px; padding: 40px; color: #fff; position: relative; overflow: hidden; }
.dash-hero .ring{ position:absolute; border-radius:50%; border:1px solid rgba(201,164,92,0.25); }
.dash-hero h1{ color:#fff; }
.dash-hero p{ color:#BFD2CC; }
.dash-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top: -46px; position:relative; z-index:2; }
@media (max-width:900px){ .dash-grid{ grid-template-columns: 1fr; } }
.dash-card{ background:#fff; border-radius:20px; padding:24px; box-shadow: 0 24px 50px -26px rgba(15,76,76,0.35); border:1px solid rgba(228,222,201,0.6); }
.dash-card .k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--faint); font-weight:700; }
.dash-card .v{ font-family:'Manrope',sans-serif; font-weight:800; font-size:22px; color:var(--teal); margin-top:6px; }

/* --- stepper (how it works) --- */
.stepper{ display: flex; justify-content: space-between; position: relative; flex-wrap: wrap; row-gap: 28px; }
.stepper::before{ content:''; position: absolute; top: 19px; left: 40px; right: 40px; height: 2px; background: var(--ivory-border); }
@media (max-width: 760px){
  .stepper{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  .stepper::before{ display: none; }
}
@media (max-width: 480px){
  .stepper{ grid-template-columns: repeat(2, 1fr); }
}
.step{ display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; flex: 1; text-align: center; }
.step .num{ width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13px; box-shadow: 0 14px 26px -12px rgba(15,76,76,0.5); transition: transform .3s var(--ease); }
.step:hover .num{ transform: scale(1.12) translateY(-2px); }
.step .num.gold{ background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: var(--teal-deep); box-shadow: 0 14px 26px -12px rgba(169,132,63,0.5); }

/* --- CTA band --- */
.cta-band{ background: linear-gradient(150deg, var(--teal), var(--teal-deep)); border-radius: 28px; padding: 60px; text-align: center; position: relative; overflow: hidden; }
.cta-band h2{ color: var(--white); }
.cta-band p{ color: #B7CAC4; max-width: 480px; margin: 0 auto 24px auto; }
.cta-band .ring{ position: absolute; border-radius: 50%; border: 1px solid rgba(201,164,92,0.3); }

/* --- FAQ accordion (CSS-only, using <details>) --- */
.faq-item{ background: var(--white); border-radius: 18px; padding: 4px 24px; margin-bottom: 12px; box-shadow: 0 18px 36px -24px rgba(15,76,76,0.3); border:1px solid rgba(228,222,201,0.5); transition: box-shadow .3s var(--ease); }
.faq-item[open]{ box-shadow: 0 26px 46px -22px rgba(15,76,76,0.4); }
.faq-item summary{ font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--teal); padding: 17px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content:'+'; font-size:20px; color: var(--gold-deep); transition: transform .3s var(--ease); }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: 18px; margin: 0; }

/* --- footer --- */
.site-footer{ background: linear-gradient(160deg, var(--teal), var(--teal-deep)); color: #DCE6E1; padding: 60px 0 28px 0; margin-top: 40px; position: relative; overflow: hidden; }
.site-footer::before{ content:''; position:absolute; top:-160px; right:-100px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(201,164,92,0.14), transparent 70%); }
.site-footer h4{ color: var(--white); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.site-footer a{ color: #B7CAC4; display: block; margin-bottom: 9px; font-size: 13px; }
.site-footer a:hover{ color: var(--gold); }
.footer-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 24px; position:relative; z-index:1; }
.footer-logo-badge{ display:inline-flex; align-items:center; background:#fff; padding:9px 16px; border-radius:10px; margin-bottom:14px; }
.footer-logo-badge img{ height:36px; width:auto; max-width:190px; object-fit:contain; display:block; }
.footer-contact-block{ margin-top:12px; }
.footer-contact-block a{ color:#fff; display:block; margin-bottom:9px; font-size:13px; }
.footer-contact-block a:last-child{ margin-bottom:0; }
.footer-contact-block a:hover{ color: var(--gold); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.12); margin-top: 40px; padding-top: 20px; font-size: 12px; color: #9FB3A8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; position:relative; z-index:1; }

/* --- misc --- */
.badge{ display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.badge-success{ background: #F0F7F4; color: var(--success); }
.badge-warning{ background: #FDF1E7; color: var(--gold-deep); }
.badge-danger{ background: #FBEEEC; color: var(--danger); }
.section-lead{ max-width: 640px; }
.divider{ height: 1px; background: var(--ivory-border); margin: 32px 0; }

/* =====================================================================
   SHARED "FIND A ROOM" SEARCH CARD + CITY CARDS + QUICK-ENQUIRY POP-UP
   Used on the home page and the Find Your Place page — both replace
   individual property browsing with a search card, "Explore by City"
   cards and a Quick Enquiry pop-up (see includes/quick_enquiry_modal.php).
   ===================================================================== */
.lv-search-card{ position:relative; z-index:3; max-width:1020px; margin:-96px auto 0 auto; background:#fff; border-radius:24px; padding:26px 28px; box-shadow:0 44px 90px -30px rgba(15,76,76,0.5); border:1px solid rgba(228,222,201,0.6); }
.lv-search-card.static{ margin-top:0; }
.lv-search-tabs{ display:flex; gap:22px; margin-bottom:18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:var(--muted); }
.lv-search-tabs span{ padding-bottom:10px; border-bottom:2px solid transparent; }
.lv-search-tabs span.on{ color:var(--teal); border-color:var(--gold); }
.lv-search-form{ display:grid; grid-template-columns: 1.2fr 1fr auto; gap:14px; align-items:end; }
@media (max-width: 700px){
  .lv-search-form{ grid-template-columns: 1fr 1fr; }
  .lv-search-card{ margin-left:16px; margin-right:16px; padding:22px 20px; }
  .lv-search-form button{ grid-column: 1 / -1; width:100%; }
}
@media (max-width: 480px){ .lv-search-form{ grid-template-columns: 1fr; } }
.lv-search-form .sw-field{ display:flex; flex-direction:column; gap:6px; text-align:left; min-width:0; }
.lv-search-form label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.lv-search-form select, .lv-search-form input{ width:100%; box-sizing:border-box; border:1.5px solid var(--ivory-border); border-radius:13px; padding:13px 14px; font-family:'Public Sans',sans-serif; font-size:13.5px; color:var(--charcoal); background:var(--ivory); transition: border-color .2s, box-shadow .2s; }
.lv-search-form select:focus, .lv-search-form input:focus{ outline:none; border-color:var(--teal-light); box-shadow:0 0 0 4px rgba(15,76,76,0.1); background:#fff; }
.lv-search-form button{ height:47px; padding:0 28px; }

.lv-trust-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px; margin:44px 0 8px 0; }
.lv-trust-bar .item{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted); }
.lv-trust-bar .item svg{ flex-shrink:0; }

.lv-city-strip{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
.lv-city-strip-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px){ .lv-city-strip-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .lv-city-strip-3{ grid-template-columns: 1fr; } }
.lv-city-tile{ position:relative; border-radius:18px; overflow:hidden; height:120px; display:flex; align-items:flex-end; padding:14px; color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow:0 16px 32px -20px rgba(15,76,76,0.4); cursor:pointer; }
.lv-city-tile:hover{ transform:translateY(-5px); box-shadow:0 26px 44px -20px rgba(15,76,76,0.5); }
.lv-city-tile::before{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, var(--teal), var(--teal-deep)); }
.lv-city-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.35), transparent 60%); }
.lv-city-tile span{ position:relative; z-index:1; }

.lv-stats-band{ background:linear-gradient(150deg, var(--teal), var(--teal-deep)); border-radius:28px; padding:44px 30px; display:flex; flex-wrap:wrap; justify-content:space-around; gap:28px; position:relative; overflow:hidden; }
.lv-stats-band::before{ content:''; position:absolute; top:-140px; right:-100px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(201,164,92,0.22), transparent 65%); }
.lv-stat{ text-align:center; position:relative; z-index:1; min-width:130px; }
.lv-stat-icon{ width:52px; height:52px; margin:0 auto 10px auto; border-radius:50%; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; }
.lv-stat-label{ font-size:13px; color:#fff; font-weight:700; margin-top:4px; }

/* Quick-enquiry pop-up */
.lv-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,53,53,0.55); backdrop-filter:blur(2px); z-index:400; align-items:center; justify-content:center; padding:20px; }
.lv-modal-overlay.open{ display:flex; }
.lv-modal{ background:#fff; border-radius:22px; max-width:440px; width:100%; padding:30px 28px; position:relative; box-shadow:0 40px 90px -30px rgba(15,76,76,0.5); max-height:90vh; overflow-y:auto; }
.lv-modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; }
.lv-modal h3{ margin:0 0 4px 0; color:var(--teal); }
.lv-modal p.lv-modal-sub{ font-size:13px; color:var(--muted); margin:0 0 18px 0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   OTA-STYLE COMPONENTS — illustrated "photo" tiles, galleries, ratings,
   trust badges and a sticky price-summary card, in the pattern of
   Agoda / MakeMyTrip / Taj listing pages. Until real photography is
   supplied, tiles are built from layered gradients + line-art icons
   rather than flat color blocks.
   ===================================================================== */

/* -- illustrated tile backgrounds, keyed by a rotating palette -- */
.tile-1{ background: linear-gradient(135deg, #0F4C4C, #1B6E6C); }
.tile-2{ background: linear-gradient(135deg, #1B6E6C, #3C8C82); }
.tile-3{ background: linear-gradient(135deg, #A9843F, #C9A45C); }
.tile-4{ background: linear-gradient(135deg, #0A3535, #0F4C4C); }
.tile-5{ background: linear-gradient(135deg, #6F8F82, #0F4C4C); }

.illus-tile{ position: relative; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.illus-tile::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 78% 22%, rgba(255,255,255,0.22), transparent 55%); }
.illus-tile::after{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.illus-tile svg{ position: relative; z-index: 1; opacity: 0.9; }
.illus-tile .tile-caption{ position:absolute; left:14px; bottom:12px; z-index:1; color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.03em; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* -- gallery grid (property detail page) -- */
.gallery-grid{ display:grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, 150px); gap:10px; border-radius: 22px; overflow:hidden; margin-bottom: 22px; box-shadow: 0 24px 50px -26px rgba(15,76,76,0.4); }
.gallery-grid .illus-tile:first-child{ grid-row: 1 / 3; }
@media (max-width: 700px){ .gallery-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: 130px 130px; } .gallery-grid .illus-tile:first-child{ grid-column: 1 / 3; grid-row: 1; } }

/* -- rating / trust badges -- */
.rating-badge{ display:inline-flex; align-items:center; gap:6px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px; padding: 6px 12px; border-radius: 10px; box-shadow: 0 10px 20px -10px rgba(15,76,76,0.5); }
.rating-badge .stars{ color: var(--gold-light); letter-spacing: 1px; }
.trust-strip{ display:flex; flex-wrap:wrap; gap: 10px; margin: 18px 0; }
.trust-chip{ display:flex; align-items:center; gap:7px; background: var(--white); border:1px solid var(--ivory-border); padding: 9px 14px; border-radius: 999px; font-size: 12px; font-weight:600; color: var(--muted); box-shadow: 0 10px 22px -16px rgba(15,76,76,0.3); }
.trust-chip svg{ flex-shrink:0; }
.urgency-chip{ display:inline-flex; align-items:center; gap:6px; background:#FDF1E7; color:var(--gold-deep); font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; }

/* -- price summary card (sticky, Agoda-style breakdown) -- */
.price-summary{ background: linear-gradient(180deg, #fff, #fffdf8); border-radius: 22px; padding: 24px; border: 1px solid rgba(228,222,201,0.7); margin-bottom: 20px; }
.price-summary .row{ display:flex; justify-content:space-between; align-items:center; font-size: 13px; color: var(--muted); padding: 9px 0; border-bottom: 1px dashed var(--ivory-border); }
.price-summary .row:last-of-type{ border-bottom:none; }
.price-summary .row.total{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color: var(--teal); padding-top:14px; }
.price-summary .row .val{ font-family:'IBM Plex Mono', monospace; font-weight:600; color: var(--charcoal); }

/* -- split-panel auth / onboarding card (benefits panel + form) -- */
.split-card{ display:grid; grid-template-columns: 1fr 1.15fr; max-width: 900px; margin: 0 auto; border-radius: 28px; overflow:hidden; box-shadow: 0 44px 90px -34px rgba(15,76,76,0.5); }
@media (max-width: 780px){ .split-card{ grid-template-columns: 1fr; } }
.split-panel-dark{ background: linear-gradient(160deg, var(--teal), var(--teal-deep)); color:#fff; padding: 44px 38px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.split-panel-dark::before{ content:''; position:absolute; top:-140px; right:-120px; width:320px; height:320px; border-radius:50%; background: radial-gradient(circle, rgba(201,164,92,0.22), transparent 65%); }
.split-panel-dark .tag{ background: rgba(255,255,255,0.14); color:#fff; box-shadow:none; margin-bottom:18px; }
.split-panel-dark h2{ color:#fff; font-size:26px; margin-bottom:14px; }
.split-panel-dark p{ color:#BFD2CC; font-size:13.5px; }
.check-list{ list-style:none; margin: 22px 0 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#E4EEEA; }
.check-list li svg{ flex-shrink:0; margin-top:1px; }
.split-panel-light{ background:#fff; padding: 44px 40px; }
.split-panel-light h1{ font-size:23px; margin-bottom:6px; }
.split-panel-light .sub{ font-size:13px; color:var(--muted); margin-bottom:26px; }

/* -- segmented pill control (radio-based, no JS needed) -- */
.segmented{ display:flex; background: var(--ivory); border-radius: 999px; padding:4px; gap:2px; margin-bottom:18px; }
.segmented input{ position:absolute; opacity:0; width:0; height:0; }
.segmented label{ flex:1; text-align:center; padding:11px 10px; border-radius:999px; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color:var(--muted); transition: all .25s var(--ease); }
.segmented input:checked + label{ background:#fff; color:var(--teal); box-shadow: 0 10px 20px -12px rgba(15,76,76,0.4); }

/* -- property-type icon strip on cards -- */
.type-icon-badge{ position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:10px; background: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 16px -8px rgba(0,0,0,0.35); z-index:1; }

/* =====================================================================
   PARTNER PORTAL — sidebar admin layout (portal-*.php pages)
   ===================================================================== */
.portal-body{ background: var(--ivory); }
.portal-shell{ display:flex; min-height:100vh; }
.portal-sidebar{ width:236px; flex-shrink:0; background: linear-gradient(180deg, var(--teal-deep), var(--teal)); color:#fff; display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh; }
.portal-logo{ display:flex; align-items:center; gap:8px; color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; padding:6px 8px 22px 8px; letter-spacing:-0.02em; }
.portal-logo small{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:9px; letter-spacing:0.14em; color: var(--gold-light); margin-left:1px; }
.portal-logo:hover{ color:#fff; }
.portal-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.portal-nav a{ color: rgba(255,255,255,0.72); font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; padding:11px 12px; border-radius:10px; transition: all .2s var(--ease); }
.portal-nav a:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.portal-nav a.on{ background: rgba(255,255,255,0.14); color:#fff; box-shadow: inset 3px 0 0 var(--gold); }
.portal-sidebar-foot{ display:flex; align-items:center; gap:10px; padding:14px 8px; border-top:1px solid rgba(255,255,255,0.12); margin-top:10px; }
.portal-avatar{ width:34px; height:34px; border-radius:50%; background: linear-gradient(135deg,var(--gold),var(--gold-deep)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex-shrink:0; }
.portal-sidebar-foot .who{ font-size:12.5px; font-weight:700; color:#fff; }
.portal-sidebar-foot .role{ font-size:10.5px; color: rgba(255,255,255,0.6); }
.portal-sidebar-links{ display:flex; flex-direction:column; gap:6px; padding:4px 8px 0 8px; }
.portal-sidebar-links a{ font-size:11px; color: rgba(255,255,255,0.55); }
.portal-sidebar-links a:hover{ color:#fff; }
.portal-main{ flex:1; padding:32px 40px 60px 40px; max-width:1240px; }
.portal-topbar{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.portal-date{ font-size:12.5px; color: var(--faint); font-family:'IBM Plex Mono',monospace; }

.portal-stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:26px; }
.portal-stat{ background:#fff; border:1px solid var(--ivory-border); border-radius:16px; padding:18px 20px; }
.portal-stat-top{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color: var(--sage); font-weight:600; margin-bottom:10px; }
.portal-stat .pill{ background: var(--ivory); color: var(--teal); font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; }
.portal-stat .pill.warn{ background: rgba(179,38,30,0.1); color: var(--danger); }
.portal-stat-num{ font-family:'Manrope',sans-serif; font-weight:800; font-size:26px; color: var(--teal); letter-spacing:-0.01em; }
.portal-stat-num.good{ color: var(--success); }
.portal-stat-num.bad{ color: var(--danger); }

.portal-cols{ display:grid; grid-template-columns: 1.6fr 1fr; gap:20px; align-items:start; }
.portal-side{ display:flex; flex-direction:column; gap:20px; }
.portal-card{ background:#fff; border:1px solid var(--ivory-border); border-radius:16px; padding:22px 24px; }
.portal-card h3{ font-size:14.5px; margin-bottom:14px; }
.portal-card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.portal-card-head h3{ margin-bottom:0; }
.portal-card-head a{ font-size:12px; font-weight:700; }
.portal-actions{ display:flex; flex-direction:column; gap:10px; }
.portal-actions form{ margin:0; }

.portal-card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.portal-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.portal-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--faint); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--ivory-border); }
.portal-table td{ padding:12px 14px; border-bottom:1px solid var(--ivory-border); vertical-align:middle; }
.portal-table tr:last-child td{ border-bottom:none; }
.portal-table select{ font-size:12px; padding:5px 8px; border-radius:8px; border:1px solid var(--ivory-border); }

.ptag{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:0.01em; }
.ptag-paid{ background: rgba(46,139,116,0.12); color: var(--success); }
.ptag-pending{ background: rgba(228,121,107,0.14); color:#B8562F; }
.ptag-overdue{ background: rgba(179,38,30,0.12); color: var(--danger); }

.portal-mini{ flex:1; background: var(--ivory); border-radius:12px; padding:12px 14px; }
.portal-mini .n{ font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; color: var(--teal); }
.portal-mini .l{ font-size:10.5px; color: var(--sage); }
.portal-mini.bad{ background: rgba(179,38,30,0.08); }
.portal-mini.bad .n{ color: var(--danger); }
.portal-line{ font-size:12.5px; padding:8px 0; border-top:1px solid var(--ivory-border); }
.portal-line:first-of-type{ border-top:none; }
.portal-line.bad{ color: var(--danger); font-weight:600; }
.portal-empty{ font-size:12.5px; color: var(--faint); }
.portal-empty-block{ background:#fff; border:1px dashed var(--ivory-border); border-radius:16px; padding:40px; text-align:center; font-size:13.5px; color: var(--sage); }

.portal-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.portal-tabs a{ font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--ivory-border); color: var(--muted); }
.portal-tabs a.on{ background: var(--teal); border-color: var(--teal); color:#fff; }

.portal-legend{ display:flex; align-items:center; gap:16px; font-size:12px; color: var(--sage); margin-bottom:16px; }
.portal-legend span{ display:flex; align-items:center; gap:6px; }
.portal-legend .dot, .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.vacant{ background: var(--faint); }
.dot.occupied{ background: var(--success); }
.dot.maintenance{ background: var(--danger); }

.portal-inline-form{ display:none; background:#fff; border:1px solid var(--ivory-border); border-radius:16px; padding:20px 22px; margin-bottom:20px; }
.portal-inline-form.open{ display:block; }
.form-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 720px){ .form-grid-3{ grid-template-columns:1fr; } }

.portal-room-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.portal-room-card{ background:#fff; border:1px solid var(--ivory-border); border-radius:14px; padding:14px 16px; border-top:3px solid var(--faint); }
.portal-room-card.status-occupied{ border-top-color: var(--success); }
.portal-room-card.status-maintenance{ border-top-color: var(--danger); }
.portal-room-card .rn{ display:flex; justify-content:space-between; align-items:center; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color: var(--teal); margin-bottom:2px; }
.portal-room-card .pn{ font-size:10.5px; color: var(--faint); margin-bottom:4px; }
.portal-room-card .meta{ font-size:11.5px; color: var(--sage); margin-bottom:6px; }
.portal-room-card .status-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color: var(--faint); margin-bottom:10px; }
.room-actions{ display:flex; align-items:center; gap:6px; }
.room-actions form{ margin:0; }
.room-actions select{ flex:1; font-size:11px; padding:5px 6px; border-radius:8px; border:1px solid var(--ivory-border); }
.room-actions .del{ width:24px; height:24px; border-radius:50%; border:1px solid var(--ivory-border); background:#fff; color: var(--danger); font-size:14px; line-height:1; cursor:pointer; }
.room-actions .del:hover{ background: var(--danger); color:#fff; border-color: var(--danger); }

@media (max-width: 980px){
  .portal-shell{ flex-direction:column; }
  .portal-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; flex-wrap:wrap; align-items:center; padding:14px 16px; }
  .portal-nav{ flex-direction:row; flex-wrap:wrap; }
  .portal-sidebar-foot, .portal-sidebar-links{ display:none; }
  .portal-main{ padding:24px 18px 50px 18px; }
  .portal-stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .portal-cols{ grid-template-columns: 1fr; }
}

.portal-room-thumb{ height:86px; margin:-14px -16px 10px -16px; border-radius:14px 14px 0 0; background-size:cover; background-position:center; background-color: var(--ivory); }
.portal-room-photo-form{ margin-top:0; }