/* ===========================================================================
   StayIn page-specific styles.
   =========================================================================== */

/* ---------- Listing pages ---------- */
.page-head { margin-block-end: var(--space-5); }
.page-head__title { font-family: var(--font-display); }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size: var(--text-sm); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { color: var(--text); font-weight:550; }
/* ---------- Property detail ---------- */
.gallery { display:grid; grid-template-columns: 2fr 1fr; gap:8px; border-radius: var(--radius-xl); overflow:hidden; margin-block-end: var(--space-5); background: var(--surface); }
.gallery__main { overflow:hidden; }
.gallery__main-image { width:100%; height:340px; object-fit:cover; }
.gallery__strip { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.gallery__thumb { border:none; background:none; padding:0; cursor:pointer; border-radius:var(--radius-md); overflow:hidden; border:2px solid transparent; transition: border-color var(--transition-fast); }
.gallery__thumb img { width:100%; height:90px; object-fit:cover; }
.gallery__thumb:hover, .gallery__thumb.is-active { border-color: var(--brand); }
.gallery__thumb:hover img, .gallery__thumb.is-active img { filter: brightness(1.1); }
.property-content { padding-block: var(--space-5); }
.property-layout { display:grid; grid-template-columns:1fr 340px; gap:var(--space-6); align-items:start; }
.property-header__meta { display:flex; gap:8px; flex-wrap:wrap; margin-block-end: var(--space-2); }
.property-header__region { color: var(--text-muted); font-size: var(--text-sm); }
.property-title { font-family: var(--font-display); margin-block-end: var(--space-2); }
.property-rating { display:flex; align-items:center; gap:8px; color: var(--text-muted); }
.property-rating strong { color: var(--brand); font-size: var(--text-xl); }
.property-section { margin-block-start: var(--space-6); padding-block: var(--space-4); border-block-start:1px solid var(--border); }
.property-section h2 { font-size: var(--text-xl); margin-block-end: var(--space-3); }
.prose { color: var(--text-muted); white-space:pre-line; line-height:1.7; }
.room-list { display:flex; flex-direction:column; gap:var(--space-3); }
.room-card { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4); }
.room-card__name { font-size: var(--text-lg); margin-block-end: var(--space-1); }
.room-card__desc { color: var(--text-muted); font-size: var(--text-sm); margin-block-end: var(--space-2); }
.room-card__details { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size: var(--text-sm); color: var(--text-muted); }
.room-card__details li { display:flex; gap:8px; align-items:flex-start; }
.room-card__details i { color: var(--text-faint); margin-block-start: 2px; }
.room-card__price { text-align:right; flex-shrink:0; }
.room-card__price-value { margin-block-end: var(--space-1); }
.room-card__equiv { display:block; color: var(--text-faint); font-size: var(--text-xs); margin-block-start: 4px; }
.price-value__amount { font-size: var(--text-xl); font-weight:700; }
.price-value__note { color: var(--text-muted); font-size: var(--text-sm); }
.price-value--large { font-size: var(--text-2xl); }
.booking-card { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:var(--space-4); margin-block: var(--space-5); }
.booking-card__price { padding-block: var(--space-3); border-block-end:1px solid var(--border); }
.booking-card__equiv { color: var(--text-faint); font-size: var(--text-sm); margin-block-end: var(--space-3); }
.booking-form { display:flex; flex-direction:column; gap:var(--space-4); }
.booking-form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.booking-form label { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size: var(--text-xs); color: var(--text-muted); font-weight:600; }
.booking-input { width:100%; }
.booking-card__note { margin-block-start: var(--space-3); text-align:center; }
.host-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4); }
.host-card__header { display:flex; gap:var(--space-3); align-items:center; }
.host-card__avatar { width:42px; height:42px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--text-sm); }
.host-card__name { font-weight:650; }
.review { padding-block: var(--space-4); border-block-end:1px solid var(--border); }
.review__header { display:flex; gap:var(--space-3); align-items:center; margin-block-end: var(--space-2); }
.review__avatar { width:36px; height:36px; border-radius:50%; background:var(--surface-2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--text-sm); }
.review__author { font-weight:650; }
.review__meta { color: var(--text-muted); font-size: var(--text-sm); display:flex; align-items:center; gap:6px; }
.review__meta strong { color: var(--brand); }
.review__body { color: var(--text-muted); white-space:pre-line; line-height:1.6; }
.lightbox { position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; }
.lightbox[hidden] { display:none; }
.lightbox__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.92); }
.lightbox__image { position:relative; z-index:1; max-width:92vw; max-height:90vh; object-fit:contain; border-radius:var(--radius-md); }
.lightbox__close { position:absolute; top:16px; right:16px; z-index:2; background:var(--surface); border:1px solid var(--border-strong); color:var(--text); width:40px; height:40px; border-radius:50%; cursor:pointer; }
.booking-form__row--inline { grid-template-columns:1fr 1fr; }
/* ---------- Auth ---------- */
.auth-card { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow: var(--shadow-2); }
.auth-card__logo { display:flex; justify-content:center; margin-block-end: var(--space-4); }
.auth-card__logo img { height:42px; }
.auth-card__heading { text-align:center; margin-block-end: var(--space-1); }
.auth-card__sub { text-align:center; color: var(--text-muted); font-size: var(--text-sm); margin-block-end: var(--space-4); }
.auth-links { display:flex; justify-content:space-between; font-size: var(--text-sm); margin-block-end: var(--space-4); }
.auth-divider { display:flex; align-items:center; gap:12px; margin-block: var(--space-4); color: var(--text-faint); font-size: var(--text-sm); }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background: var(--border); }

/* ---------- User areas ---------- */
.user-shell { display:flex; gap:var(--space-6); }
.user-shell__sidebar { width:260px; flex-shrink:0; }
.user-shell__content { flex:1; min-width:0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:var(--space-4) var(--space-5); }
.card__header { display:flex; justify-content:space-between; align-items:center; margin-block-end: var(--space-3); padding-block-end: var(--space-3); border-block-end:1px solid var(--border); }
.card__header h3 { font-size: var(--text-lg); margin:0; }
.card__table th, .card__table td { padding:10px 12px; border-block-end:1px solid var(--border); text-align:start; font-size: var(--text-sm); }
.card__table th { color:var(--text-muted); font-weight:600; background:var(--surface-2); }
.card__table tbody tr:hover { background: var(--bg-elevated); }
.kpi-row { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:var(--space-3); margin-block-end: var(--space-5); }
.nav-tab { display:flex; gap:4px; margin-block-end: var(--space-4); border-block-end:1px solid var(--border); }
.nav-tab a { padding:10px 14px; color:var(--text-muted); font-weight:550; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nav-tab a:hover { color:var(--text); background: var(--bg-elevated); }
.nav-tab a.is-active { color:var(--brand); background: var(--brand-soft); }
.empty-state { text-align:center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }
.empty-state i { font-size: 2.4rem; color: var(--text-faint); margin-block-end: var(--space-3); }
.empty-state h3 { color: var(--text); margin-block-end: 6px; }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-block-start: var(--space-2); }
.form-section { background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:var(--space-4) var(--space-5); margin-block-end: var(--space-4); }
.form-section__header { display:flex; justify-content:space-between; align-items:center; margin-block-end: var(--space-4); }
.form-section__header h3 { font-size: var(--text-lg); margin:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.form-grid .full { grid-column:1 / -1; }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight:650; }
.status-pill--published { background: var(--success-soft); color: var(--success); }
.status-pill--pending { background: var(--warning-soft); color: var(--warning); }
.status-pill--draft { background: var(--surface-2); color: var(--text-muted); }
.status-pill--suspended { background: var(--danger-soft); color: var(--danger); }
.status-pill--verified { background: var(--success-soft); color: var(--success); }
.status-pill--review { background: var(--warning-soft); color: var(--warning); }
.form-grid label { display:flex; flex-direction:column; gap:6px; }
/* ---------- Booking / checkout ---------- */
.checkout-shell { max-width: 820px; margin-inline: auto; }
.checkout-header { background:var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding:var(--space-4) var(--space-5); border-block-end:1px solid var(--border); }
.checkout-header__ref { font-weight:700; letter-spacing:0.04em; color: var(--brand); }
.checkout-summary { background:var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding:var(--space-4) var(--space-5); margin-block-start: var(--space-4); }
.checkout-summary__row { display:flex; justify-content:space-between; padding-block:8px; border-block-end:1px solid var(--border); font-size: var(--text-sm); }
.checkout-summary__row.total { border-block-start:1px solid var(--border-strong); padding-block-start: var(--space-3); font-weight:700; font-size: var(--text-lg); }
.checkout-summary__row.total .checkout-summary__value { color: var(--brand); }
.checkout-summary__row.zero { color: var(--text-faint); }
.nights-list { margin-block-start: var(--space-3); }
.night-row { display:flex; justify-content:space-between; padding-block:6px; font-size: var(--text-sm); color: var(--text-muted); border-block-end:1px solid var(--border); }
.night-row:last-child { border-block-end:none; }

/* ---------- Admin ---------- */
.admin-shell { display:flex; flex-direction:column; gap:var(--space-5); }
.admin-shell__topbar { display:flex; justify-content:space-between; align-items:center; }
.admin-shell__tabs { display:flex; gap:4px; border-block-end:1px solid var(--border); padding-block-end: var(--space-3); flex-wrap:wrap; }
.admin-shell__tabs a { padding:10px 14px; color:var(--text-muted); font-weight:550; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.admin-shell__tabs a:hover { color:var(--text); }
.admin-shell__tabs a.is-active { color:var(--brand); background: var(--brand-soft); border-block-end:2px solid var(--brand); }
.admin-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:var(--space-3); }
.audit-row { display:flex; gap:12px; align-items:center; padding-block:8px; border-block-end:1px solid var(--border); font-size: var(--text-sm); }
.audit-row:last-child { border-block-end:none; }
.audit-time { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .hero__inner { grid-template-columns:1fr; gap:var(--space-5); }
  .hero__media-grid { grid-template-columns:1fr 1fr; }

  .hero__stats { flex-direction:column; }
  .property-layout { grid-template-columns:1fr; }
  .room-card { flex-direction:column; }
  .room-card__price { text-align:left; }
  .gallery { grid-template-columns:1fr; }
  .gallery__main-image { height:220px; }
  .gallery__strip { display:none; }
  .user-shell__sidebar { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .search-card__row { grid-template-columns:1fr 1fr; }
  .search-card__row--filter { grid-template-columns:1fr; }
  .admin-shell__tabs { gap:2px; }
  .admin-shell__tabs a { padding:8px 10px; font-size: var(--text-sm); }
}
.breadcrumb i { font-size:0.6em; color:var(--text-faint); }
/* ---------- Public browsing: architectural editorial ---------- */
.eyebrow { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-block-end: 1rem; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; font-size: .9375rem; font-weight: 600; color: var(--text); padding-block: .5rem; border-block-end: 1px solid var(--border-strong); }
.text-link i { font-size: .75rem; transition: transform var(--transition-fast); }
.text-link:hover i { transform: translateX(3px); }
.hero { padding-block: var(--space-5) var(--space-7); }
.hero__inner { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hero__content { padding-block: 2rem; }
.hero__title { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.06; letter-spacing: -.045em; font-weight: 400; margin-block: 1.25rem 1.75rem; }
.hero__sub { color: var(--text-muted); font-size: 1.125rem; max-width: 34ch; margin-block-end: 1.75rem; }
.hero__footnote { display: flex; align-items: center; gap: .75rem; margin-block-start: 3.5rem; font-size: .8125rem; color: var(--text-muted); }
.hero__rule { width: 2rem; height: 1px; background: var(--brand); }
.hero__feature { display: block; color: var(--text); }
.hero__feature > img { width: 100%; aspect-ratio: 1.05; height: auto; object-fit: cover; border-radius: var(--radius-sm); }
.hero__caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-block-start: .8rem; font-size: .8125rem; color: var(--text-muted); }
.hero__caption span:first-child { color: var(--text); }
.hero__caption i { margin-inline-start: .5rem; font-size: .7rem; }
.hero__empty-media { min-height: 350px; background: var(--surface-2); display: grid; place-content: center; gap: 1rem; text-align: center; }
.search-bar { display: grid; grid-template-columns: 1.5fr 1fr 1fr .65fr auto; gap: .5rem; padding: 1rem; margin-block-start: 2.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); align-items: center; }
.search-bar__field { display: block; min-width: 0; padding: .25rem .75rem; border-radius: 0; }
.search-bar__field:hover { background: transparent; }
.search-bar__field label { font-size: .75rem; color: var(--text-muted); }
.search-bar__field input { padding: .25rem 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.search-bar__field input::placeholder { font-size: .9375rem; }
.search-bar > .btn { min-height: 56px; }
.section.featured { background: var(--bg); }
.section.popular { background: var(--bg); }
.destinations { background: var(--bg-sunken); }
.section-intro { color: var(--text-muted); max-width: 30ch; }
.grid--destinations { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; }
.destination-card { display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: center; gap: 1rem; padding-block: 1.6rem; border-block-end: 1px solid var(--border-strong); color: var(--text); }
.destination-card__index { font-size: .75rem; color: var(--text-muted); }
.destination-card__name { font-family: var(--font-display); font-size: 1.6rem; }
.destination-card__count { font-size: .8125rem; color: var(--text-muted); }
.destination-card i { font-size: .75rem; }
.service-note { border-block-start: 1px solid var(--border); }
.service-note__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.service-note h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.service-note p:not(.eyebrow) { max-width: 45ch; color: var(--text-muted); font-size: 1.125rem; margin-block-end: 1.5rem; }
.page-head { padding-block: 1.5rem 2.5rem; }
.page-head__title { font-weight: 400; margin-block-end: 1rem; }
.page-head .btn { margin-block-start: 1rem; }
.search-layout { display: grid; grid-template-columns: 17rem minmax(0,1fr); gap: 3rem; align-items: start; }
.search-results { min-width: 0; }
.search-sidebar { border-block-start: 1px solid var(--border-strong); }
.filter-panel > summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 600; padding-block: 1.25rem; }
.search-form { padding-block: .75rem; }
.more-filters { border-block: 1px solid var(--border); margin-block: .5rem 1.5rem; padding-block: 1rem; }
.more-filters summary { cursor: pointer; font-weight: 600; margin-block-end: .75rem; }
.filter-clear { display: block; text-align: center; padding-block: 1rem; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.search-results__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-block-end: 1px solid var(--border); padding-block: 1rem; margin-block-end: 2rem; }
.search-results__header .eyebrow { margin: 0; }
.search-results__header p { color: var(--text-muted); }
.search-results__header strong { color: var(--text); }
.property-header { padding-block: 1.5rem 2rem; }
.property-title { font-weight: 400; }
.property-header__meta { align-items: center; gap: 1rem; color: var(--text-muted); }
.gallery { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2,minmax(0,1fr)); gap: .75rem; max-height: 540px; border-radius: var(--radius-md); aspect-ratio: 2.3; }
.gallery__main { grid-row: span 2; }
.gallery a { overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery:has(> a:only-child) { grid-template-columns: 1fr; }
.gallery__placeholder { grid-column: 1/-1; grid-row: 1/-1; display: grid; place-content: center; gap: 1rem; text-align: center; color: var(--text-muted); }
.photo-collection { margin-block: 1rem 2rem; }
.photo-collection summary { cursor: pointer; padding-block: .75rem; }
.photo-collection img { aspect-ratio: 4/3; object-fit: cover; }
.property-layout { grid-template-columns: minmax(0,1fr) 360px; gap: clamp(2rem,5vw,5rem); }
.property-main { min-width: 0; }
.property-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-block: 1rem; border-block-end: 1px solid var(--border); }
.property-nav a { color: var(--text-muted); font-size: .9375rem; }
.property-section { margin-block-start: 2rem; padding-block: 1.5rem; }
.property-section h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.property-section h3 { font-size: 1.125rem; }
.amenities-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-block: 1.5rem; }
.amenities-list li { display: flex; align-items: baseline; gap: .75rem; }
.amenities-list i { font-size: .75rem; color: var(--brand); }
.room-card { padding: 1.5rem; border-color: var(--border); border-radius: var(--radius-md); }
.room-card__price { max-width: 50%; }
.booking-card { padding: 1.75rem; margin-block: 0 1rem; border-color: var(--border); box-shadow: var(--shadow-2); }
.booking-card h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; }
.booking-card__intro { color: var(--text-muted); font-size: .9375rem; margin-block: .75rem 1.5rem; }
.booking-form label { font-size: .8125rem; }
.booking-form input, .booking-form select { min-width: 0; }
.quote { padding-block: 1.5rem; }
.quote__dates { font-size: .875rem; color: var(--text-muted); margin-block-end: 1rem; }
.quote__row { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; margin-block: .5rem; }
.quote__row strong { font-variant-numeric: tabular-nums; }
.quote__row--total { border-block-start: 1px solid var(--border); padding-block-start: 1rem; margin-block-start: 1rem; font-size: 1.125rem; }
.inquiry-link { display: flex; justify-content: center; align-items: center; gap: .75rem; font-size: .875rem; padding-block: 1rem; }
.mobile-booking { display: none; }
.photo-dialog { margin: auto; padding: 0; border: 0; background: var(--bg-sunken); max-width: 94vw; max-height: 92dvh; overflow: visible; }
.photo-dialog::backdrop { background: rgb(0 0 0 / 85%); }
.photo-dialog img { max-width: 94vw; max-height: 85dvh; object-fit: contain; }
.photo-dialog__close { position: absolute; right: .5rem; top: .5rem; width: 48px; height: 48px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-full); cursor: pointer; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); padding-block: 2rem; align-items: start; }
.contact-layout h1 { font-family: var(--font-display); font-weight: 400; margin-block-end: 1.5rem; }
.contact-copy { max-width: 36ch; color: var(--text-muted); font-size: 1.125rem; }
.contact-form { padding: clamp(1.25rem,3vw,2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-form textarea { min-height: 160px; }
.contact-form .btn { margin-block-start: 1rem; }
.contact-context { padding: 1rem; background: var(--bg-sunken); margin-block-end: 1.5rem; }
.contact-status { padding: 2rem; background: var(--surface); border: 1px solid var(--border); }