:root {
  --charcoal: #0f2a4d;
  --charcoal-light: #17406e;
  --cream: #f4f8fc;
  --gold: #2f6fed;
  --gold-dark: #1a4fc9;
  --blue: #1e40af;
  --blue-dark: #142f7a;
  --text: #16233b;
  --text-light: #5b6b85;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* Foldable/narrow-phone safety net: nothing on the site should ever be able
   to force a horizontal scrollbar on the page itself, no matter how narrow
   the viewport gets (down to real foldable cover-screen widths, ~240px).
   Individual components should still fit on their own -- this is a backstop
   for anything that doesn't, not a substitute for fixing those.
   Deliberately only on <html>, not <body>: overflow-x set to anything but
   visible forces the browser to compute overflow-y as auto instead of
   visible on that same element (per the CSS overflow spec), and doing that
   on <body> turns body into its own scrolling container instead of the
   page scrolling at the viewport/<html> level. That silently breaks every
   position: sticky element on the page (e.g. the Block/Make available/Set
   price bar on the host availability calendar), which then just sits in
   normal document flow instead of floating -- found live on a phone right
   after this rule first shipped. <html> already is the viewport's own
   scrolling element in standards mode, so putting it there only doesn't
   introduce a second one. */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--cream);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

/* Touch responsiveness, site-wide: mobile browsers wait ~300ms after a tap
   on any of these before firing "click", in case it turns into the start of
   a double-tap-to-zoom gesture -- that delay makes every button/link feel
   laggy on a phone even though nothing is actually wrong. "manipulation"
   tells the browser this element is never a zoom target, so taps register
   immediately; it still allows normal scrolling through/past the element,
   it just drops the double-tap-zoom affordance specifically on interactive
   controls (page-level pinch zoom elsewhere is untouched). Applied broadly
   rather than element-by-element so nothing new added later is missed. */
a, button, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}

.site-header {
  background: var(--charcoal);
  color: #fff;
  padding: 14px 28px;
  /* max() with env(safe-area-inset-*) so the header never sits flush
     against a notch, punch-hole/rounded corner, or (on a foldable) the
     inset a hinge/camera cutout can impose on one edge -- env() reads as
     0 on a normal screen, so this is a no-op there and only adds room on
     a device that actually needs it. Requires viewport-fit=cover on the
     <meta viewport> tag (set in base.html) for env() to be non-zero. */
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  padding-top: max(14px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  /* Lets the brand shrink below its own text's natural width instead of
     forcing .nav-toggle to wrap onto a second row when the two together
     don't fit -- see .brand-text/.brand-name/.sub below, which turn that
     shrink into a clean ellipsis truncation rather than a broken layout.
     Below ~275px wide (a real width for several foldables' cover
     screens, e.g. the Z Flip line) this was wrapping the hamburger button
     onto its own line under the logo. */
  min-width: 0;
  flex-shrink: 1;
}

.site-header .brand img {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.site-header .brand-text {
  min-width: 0;
  overflow: hidden;
}

.site-header .brand-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-header .brand .sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-header nav a {
  color: #eee;
  margin-left: 20px;
  font-size: 0.92rem;
}

.site-header nav a:hover { color: var(--gold); }

.hero {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-light) 100%);
  color: #fff;
  padding: 48px 28px 36px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 1.9rem;
}

.hero p {
  color: #c3d6f0;
  margin: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.card { position: relative; }

/* browse.html: the card itself is a <div> so the wishlist <button> can sit
   next to (not inside) the listing link -- an interactive element nested in
   an <a> is invalid HTML and made click/focus behaviour unpredictable. The
   link fills the card and keeps the flex column so .body's margin-top:auto
   price line still sits at the bottom. */
.card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.card .thumb {
  height: 180px;
  background: #ddd;
  background-size: cover;
  background-position: center;
}

.card .body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.card .loc {
  color: var(--text-light);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.card .price {
  margin-top: auto;
  font-weight: 700;
  color: var(--blue-dark);
}

.card .price .from { font-weight: 400; color: var(--text-light); font-size: 0.8rem; }

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
}

.btn:hover { background: var(--blue-dark); }

.btn-gold {
  background: var(--gold);
  color: #fff;
}
.btn-gold:hover { background: var(--gold-dark); }

.btn-block { width: 100%; text-align: center; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}

/* Detail page */
.detail-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: flex-start;
}

@media (max-width: 800px) {
  .detail-wrap { grid-template-columns: 1fr; }
}

.gallery-main {
  position: relative;
  width: 100%;
  height: 360px;
  background: #ddd;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery-thumbs img {
  height: 64px;
  width: 90px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.75;
  border: 2px solid transparent;
}

.gallery-thumbs img:hover, .gallery-thumbs img.active {
  opacity: 1;
  border-color: var(--gold);
}

.detail-title h1 {
  margin: 18px 0 4px;
  font-size: 1.6rem;
}

.detail-title .loc { color: var(--text-light); margin-bottom: 16px; }

.desc { white-space: pre-line; line-height: 1.6; color: var(--text); }

.booking-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.1);
  position: sticky;
  top: 20px;
}

.booking-card .rate {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 2px;
}

.booking-card .rate .unit { font-size: 0.85rem; font-weight: 400; color: var(--text-light); }

.tier-list {
  font-size: 0.82rem;
  color: var(--text-light);
  margin: 4px 0 16px;
}

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.82rem; margin-bottom: 4px; color: var(--text-light); }
.field input, .field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d6e2f0;
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 3px 0;
}
.summary-line.total { font-weight: 700; border-top: 1px solid #dbe6f5; margin-top: 8px; padding-top: 8px; }

/* Booking-card live quote (detail.html #quoteBox) and the plain-English
   cancellation terms shown under it. Same cream/border language as the
   .tier-list / .notice-msg blocks so it reads as part of the card. */
.quote-box {
  background: var(--cream);
  border: 1px solid #dbe6f5;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 4px 0 14px;
}
.quote-box .summary-line { font-size: 0.86rem; }
.quote-box .summary-line.total { border-top-color: #c9d8ec; }
.quote-foot { margin: 6px 0 0; font-size: 0.74rem; color: var(--text-light); }
.policy-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dbe6f5;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-light);
}
.policy-note strong { color: var(--text); }
.policy-note .policy-fee { display: block; margin-top: 6px; }

.error-msg {
  background: #fbe4e4;
  color: #a33;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  display: none;
}
.success-msg {
  background: #e3f3e8;
  color: #2f7a48;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  display: none;
}

.confirm-wrap {
  max-width: 560px;
  margin: 60px auto;
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.1);
}
.confirm-wrap .icon { font-size: 2.6rem; margin-bottom: 8px; }
.confirm-wrap.ok .icon { color: #3a9d5b; }
.confirm-wrap.cancel .icon { color: #c96b3b; }

.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--text-light);
  font-size: 0.82rem;
}

/* Account nav */
.nav-account {
  color: var(--gold);
  margin-left: 20px;
  font-size: 0.92rem;
}

.nav-inline-form {
  display: inline;
  margin-left: 20px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #eee;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.link-btn:hover { color: var(--gold); }

.nav-host-link {
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 20px;
}

/* Nav group dropdowns (Guest / Host / Admin / Support) -- collapses what
   used to be a long flat list of links into a handful of "X ▾" triggers. */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 20px;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  color: #eee;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger { color: var(--gold); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 190px;
  background: var(--charcoal-light);
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  z-index: 50;
}

.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a,
.nav-dropdown-menu .nav-inline-form { display: block; margin: 0; }

.nav-dropdown-menu a,
.nav-dropdown-menu .link-btn {
  display: block;
  width: 100%;
  padding: 9px 16px;
  margin: 0;
  color: #eee;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu .link-btn:hover { background: rgba(255,255,255,0.08); color: var(--gold); }

.nav-dropdown-menu .nav-badge { margin-left: 6px; }

/* Auth pages */
.auth-wrap {
  max-width: 420px;
  margin: 40px auto;
}

.auth-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.auth-sub {
  color: var(--text-light);
  font-size: 0.88rem;
  margin: 0 0 18px;
}

.auth-switch {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 16px;
}

.auth-switch a { color: var(--blue); font-weight: 600; }

/* Booking-card login gate */
.login-prompt p { margin: 0 0 12px; color: var(--text-light); font-size: 0.9rem; }

.booking-as {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0 0 14px;
}

.booking-as .link-btn { color: var(--blue); text-decoration: underline; }

/* Host dashboard */
.page-title { margin: 0 0 20px; font-size: 1.5rem; }

.review-row {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.review-head { margin-bottom: 6px; }

.tag-host {
  background: var(--gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.review-row details { margin-top: 8px; font-size: 0.85rem; }
.review-row summary { cursor: pointer; color: var(--blue); }

.btn-danger { background: #a33; color: #fff; }
.btn-danger:hover { background: #822; }

/* Nav booking-alert badge */
.nav-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 9px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Host bookings list */
/* display:flex + wrap/gap (rather than plain inline links with only a
   right-margin) so that on narrow screens, where these wrap to a second
   line, the wrapped line gets real vertical breathing room instead of
   sitting flush against the row above it. */
.bookings-filter { display: flex; flex-wrap: wrap; row-gap: 6px; column-gap: 14px; margin-bottom: 16px; font-size: 0.88rem; }
.bookings-filter a { color: var(--text-light); padding-bottom: 3px; }
.bookings-filter a.active { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--blue); }

.booking-row {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.booking-row .info strong { display: block; margin-bottom: 3px; }
.booking-row .info .meta { color: var(--text-light); font-size: 0.85rem; }

.tag-new {
  background: #c0392b;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.tag-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tag-status.pending { background: #fbe9d0; color: #96650f; }
.tag-status.confirmed { background: #d9f0e1; color: #1d7a45; }
.tag-status.host_review { background: #e4ecfa; color: var(--blue-dark); }
.tag-status.cancelled { background: #eee; color: var(--text-light); }
.tag-status.open { background: #fbe0d0; color: #a3450f; }
.tag-status.resolved { background: #d9f0e1; color: #1d7a45; }
.tag-status.closed { background: #eee; color: var(--text-light); }

/* Message thread */
.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.msg-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.msg-bubble .meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 4px;
}

.msg-bubble.mine {
  align-self: flex-end;
  background: var(--gold);
  color: #fff;
}
.msg-bubble.mine .meta { color: rgba(255,255,255,0.8); }

.msg-bubble.theirs {
  align-self: flex-start;
  background: #eef2f9;
  color: var(--text);
}

.msg-empty { color: var(--text-light); font-size: 0.88rem; margin: 16px 0; }

.msg-image {
  display: block;
  max-width: 260px;
  width: 100%;
  border-radius: 8px;
  margin: 0;
}

/* Photo attachments: drop the bubble's solid mine/theirs fill and heavy
   9px padding around a photo -- that previously showed as a thick colored
   mat around the image instead of a normal chat attachment. Now it's a
   thin neutral frame, and any caption text/timestamp below the photo gets
   its own padded wrapper (.msg-bubble-text) instead of sitting flush. */
.msg-bubble.has-image {
  padding: 4px;
  background: rgba(20, 34, 61, 0.06);
}
.msg-bubble.has-image .msg-bubble-text {
  padding: 6px 5px 0;
}
.msg-bubble.mine.has-image,
.msg-bubble.mine.has-image .msg-bubble-text {
  color: var(--text);
}
.msg-bubble.mine.has-image .meta {
  color: var(--text-light);
}

.msg-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.msg-form textarea { flex: 1; min-width: 180px; resize: vertical; min-height: 44px; }

/* Photo-attach control (message composer): a compact drag-and-drop
   .photo-dropzone (see the Airbnb-style uploader block further down) that
   opens the native file picker on click, plus a .msg-attach-grid of
   .photo-tile thumbnails -- one per selected photo, each independently
   removable -- once files are chosen. The real <input type=file> stays in
   the DOM (so the form still submits it) but is visually hidden inside the
   dropzone rather than display:none, so it keeps normal tab-focus/keyboard
   behavior. See base.html's delegated 'change'/'drop'/click-remove
   handlers for the JS that builds/rebuilds the grid and the input's
   FileList together. */
.msg-attach { display: flex; flex-direction: column; gap: 4px; }

/* Availability calendar */
.avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.avail-day {
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  font-size: 0.78rem;
}

.avail-day .d { font-weight: 700; margin-bottom: 2px; }
.avail-day .s { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }

.avail-day.open { background: #d9f0e1; color: #1d7a45; }
.avail-day.blocked { background: #eee; color: var(--text-light); }
/* Booked/taken days: solid black with white text -- distinct at a glance
   from every other status color on the calendar (all light pastels), and
   the white-on-black date number stays readable even at the small cell
   sizes a narrow phone forces the calendar grid down to. */
.avail-day.booked { background: #000; color: #fff; }

.avail-day form { margin: 0; }
.avail-day button {
  width: 100%;
  background: none;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 3px;
  font-size: 0.68rem;
  cursor: pointer;
  color: inherit;
  margin-top: 4px;
}

.avail-legend {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 4px;
}
.avail-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}
.avail-legend .lg-open::before { background: #d9f0e1; }
.avail-legend .lg-blocked::before { background: #eee; }
.avail-legend .lg-booked::before { background: #000; }

/* Guest-facing listing-detail month calendar (see detail.html) */
.stay-cal {
  margin: 14px 0 26px;
}
.stay-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stay-cal-nav {
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text);
}
.stay-cal-nav:disabled { opacity: 0.3; cursor: default; }
.stay-cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 720px) {
  .stay-cal-months { grid-template-columns: 1fr; }
}
.stay-cal-month-title {
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}
.stay-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.stay-cal-dow {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
}
.stay-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.82rem;
  position: relative;
}
.stay-cal-cell.pad { visibility: hidden; }
.stay-cal-cell.open { background: #d9f0e1; color: #1d7a45; cursor: pointer; touch-action: none; user-select: none; }
.stay-cal-cell.open:hover { background: #c2e6cf; }
.stay-cal-cell.booked { background: #000; color: #fff; }
.stay-cal-cell.blocked { background: #eee; color: var(--text-light); }
.stay-cal-cell.past { color: var(--text-light); opacity: 0.35; }
.stay-cal-cell.in-range { background: var(--cream); box-shadow: inset 0 0 0 2px var(--gold); color: var(--charcoal); }
.stay-cal-cell.range-end {
  background: var(--gold);
  color: #fff;
  font-weight: 700;
}
.stay-cal-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  min-height: 1.2em;
  margin-top: 6px;
}

/* Host availability calendar (host_listing_availability.html) -- shares
   the .stay-cal-* structure/colors above with the guest booking calendar,
   but here a tap/drag builds a scattered multi-select SET (.picked) for a
   bulk block/open/price action, rather than a single check-in/check-out
   range, so blocked dates are also press-and-draggable (not just open
   ones), scoped to this page only via .host-avail-cal so the guest
   calendar's own scroll behavior over blocked/booked cells is unaffected. */
.host-avail-cal .stay-cal-cell.open,
.host-avail-cal .stay-cal-cell.blocked {
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.stay-cal-cell.picked { box-shadow: inset 0 0 0 3px var(--charcoal); }

.avail-action-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.1);
  border: 1px solid #eaf0f8;
  padding: 14px 18px;
  margin: 6px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: opacity 0.15s ease;
}
.avail-action-bar.empty { opacity: 0.55; }
.avail-action-count { font-weight: 700; font-size: 0.92rem; color: var(--text); white-space: nowrap; }
.avail-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.avail-action-buttons .btn { padding: 8px 14px; font-size: 0.86rem; }
.avail-price-group { display: flex; align-items: center; gap: 6px; }
.avail-price-group input {
  width: 110px;
  padding: 8px 10px;
  border: 1px solid #d6e2f0;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
}
@media (max-width: 640px) {
  .avail-action-bar { flex-direction: column; align-items: stretch; }
  .avail-action-buttons { justify-content: flex-start; }
}

/* Search filters (browse page) */
.filter-bar {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(15,42,77,0.08);
  border: 1px solid #eaf0f8;
}
.filter-bar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 16px;
}
.filter-bar-title svg { flex-shrink: 0; color: var(--gold); }
.filter-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.filter-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-field input, .filter-field select {
  padding: 11px 13px;
  border: 1.5px solid #dde6f2;
  border-radius: 8px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--cream);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.filter-field input:hover, .filter-field select:hover { border-color: #c3d4ea; }
.filter-field input:focus, .filter-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
}
.filter-input-guests { max-width: 90px; }
.filter-input-price { max-width: 100px; }
.amenity-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.amenity-checks label { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.amenity-checks input { width: auto; }

/* Mobile: the host-side "Amenities" checklist (host_listing_form.html) has
   ~16 items -- flex-wrap packs them raggedly at narrow widths (line breaks
   land in different spots per row, nothing lines up). A fixed 2-column grid
   reads as organized instead, and a slightly bigger checkbox plus a little
   vertical padding on each label makes each one easier to tap accurately. */
@media (max-width: 700px) {
  .amenity-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .amenity-checks label { padding: 6px 0; font-size: 0.88rem; }
  .amenity-checks input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; }
}

/* Amenities filter dropdown (browse page) -- reuses the .nav-dropdown click
   toggle from base.html's script, but needs its own light styling since it
   sits inside the white filter bar rather than the dark header. Replaces
   what used to be a long always-visible row of checkboxes. */
.filter-amenities-dropdown { margin-left: 0; width: 100%; }

.filter-dropdown-trigger {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid #dde6f2;
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.filter-dropdown-trigger:hover,
.filter-amenities-dropdown.open .filter-dropdown-trigger { border-color: var(--gold); background: #fff; color: var(--gold-dark); }

.filter-dropdown-menu {
  left: 0;
  right: auto;
  background: #fff;
  border: 1px solid #d6e2f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  max-height: 320px;
  overflow-y: auto;
  /* A plain min-width: 260px would spill past the right edge of the
     viewport (forcing a horizontal scrollbar on the whole page) on a
     foldable's ~240-280px cover screen, since this menu is positioned
     absolute at left:0 regardless of how narrow its container is. Its
     anchor (.nav-dropdown, inside .filter-row/.filter-bar/.container) sits
     a fixed ~36px in from the viewport's left edge at every narrow width
     (16px .container padding + 20px .filter-bar padding, neither of which
     shrinks further below 640px) -- subtracting 44px (that 36px plus a
     small margin) keeps the menu's right edge on-screen everywhere, while
     still using the full 260px on anything wide enough to fit it. */
  min-width: min(260px, calc(100vw - 44px));
  max-width: calc(100vw - 44px);
  padding: 10px;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px;
}
.filter-dropdown-item:hover { background: #f4f8fc; }
.filter-dropdown-item input { width: auto; margin: 0; }

/* Standalone search button, placed below the filter grid instead of
   sharing a grid cell with another field -- keeps it from ever being
   squeezed next to Amenities (which was causing the trigger text to
   overflow/clip on mobile) and makes it read as the primary action. */
.filter-search-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  padding-bottom: 13px;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid #eaf0f8;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Mobile: lay the filter bar out as a clean 2-column grid instead of
   letting flex-wrap decide pairing from each field's incidental intrinsic
   width -- Location, Amenities and Sort by (declared .filter-field-full
   below) each span both columns on their own row, everything else pairs
   up predictably (check-in/check-out, guests/min rating, min price/max
   price). The search button sits outside the grid entirely, below it. */
@media (max-width: 700px) {
  .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
  .filter-field { min-width: 0; }
  .filter-field-full { grid-column: 1 / -1; }
  .filter-input-guests, .filter-input-price { max-width: none; width: 100%; }
  .filter-search-btn { margin-top: 14px; padding-top: 14px; }
}

/* Badges (Featured / Guest Favorite / Instant Book) */
.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 6px;
}
.badge-featured { background: var(--gold); color: #fff; }
.badge-favorite { background: #1d7a45; color: #fff; }
.badge-instant { background: #eef2f9; color: var(--blue-dark); }
.badge-request { background: #f3efe6; color: #7a5c14; }

.card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 56px);
}

/* Wishlist heart */
.wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15,42,77,0.55);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  color: #fff;
  z-index: 2;
  line-height: 1;
}
.wishlist-btn.active { color: #e0455a; }
.wishlist-btn.active::before { content: "\2665"; }
.wishlist-btn:not(.active)::before { content: "\2661"; }

/* Share button (mirrors .wishlist-btn's circular style, top-left of the
   main photo instead of top-right) plus its "Link copied!" confirmation,
   which is positioned relative to .gallery-main (the nearest ancestor
   with position set) so it floats just under the button regardless of
   viewport width. */
.share-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15,42,77,0.55);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 2;
  line-height: 1;
}
.share-btn:hover { background: rgba(15,42,77,0.75); }

.share-toast {
  position: absolute;
  top: 50px;
  left: 10px;
  background: rgba(15,42,77,0.9);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  z-index: 3;
  white-space: nowrap;
  animation: share-toast-fade 1.8s ease forwards;
}
@keyframes share-toast-fade {
  0% { opacity: 0; transform: translateY(-4px); }
  12% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.rating-line { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; }

/* Map (Leaflet) */
.map-embed { height: 260px; border-radius: var(--radius); margin: 12px 0 20px; }

/* Amenities / house rules on detail page */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
  margin: 12px 0 20px;
}
.amenity-grid div { font-size: 0.88rem; }
.house-rules { white-space: pre-line; line-height: 1.6; font-size: 0.9rem; color: var(--text); margin: 8px 0 20px; }

/* Featured-placement (auction) bid rows */
.bid-row {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bid-row .price-to-beat { font-size: 0.82rem; color: var(--text-light); margin-top: 3px; }

/* "Continue with Google" button + divider on the login/signup forms */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.btn-google:hover { background: #f7f7f8; }
.btn-google svg { flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-light);
  font-size: 0.8rem;
  margin: 14px 0;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e3e3e3;
}
.auth-divider span { padding: 0 10px; }

/* Identity verification status badges + upload page */
.tag-status.unverified { background: #eee; color: var(--text-light); }
.tag-status.verified { background: #d9f0e1; color: #1d7a45; }
.tag-status.rejected { background: #fbe4e4; color: #a33; }
.notice-msg {
  background: #eaf1fb;
  color: #2a5a94;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.verify-doc-preview { max-width: 260px; border-radius: 8px; margin: 10px 0; display: block; }

/* ============================================================
   Mobile nav (hamburger toggle) -- collapses the header nav into
   a stacked panel under ~760px. Desktop click-dropdown behavior
   (see the nav-dropdown script in base.html) is unchanged; on
   mobile the same trigger click just expands the group in place
   within the stacked list instead of a floating overlay.
   ============================================================ */
.nav-toggle {
  /* min-width/min-height give this a proper ~44px touch target (the usual
     mobile accessibility minimum) without changing how big the three bars
     themselves look -- the padding alone (8px around 22x2px bars) only
     works out to about 38x30px, tight for a thumb. */
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  order: 2;
  flex-shrink: 0; /* never the thing that gives -- .brand truncates first */
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .site-header {
    padding: 12px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .nav-toggle { display: flex; }

  .site-header nav {
    display: none;
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 6px;
  }
  .site-header nav.nav-mobile-open { display: flex; }

  .site-header nav > a,
  .site-header nav > .nav-dropdown,
  .site-header nav > .nav-inline-form {
    margin-left: 0;
    width: 100%;
  }
  .site-header nav > a {
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header nav .nav-host-link { border-left: none; padding-left: 4px; }

  .nav-dropdown-trigger {
    width: 100%;
    text-align: left;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header nav .nav-dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    box-shadow: none;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    margin: 0 0 4px;
    padding: 2px 0;
  }
  .site-header nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a, .nav-dropdown-menu .link-btn { padding-left: 22px; }

  .site-header nav > .nav-inline-form { margin: 4px 0; }
  .site-header nav > .nav-inline-form .link-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
  }
}

/* ============================================================
   Sitewide responsive pass -- phone-width tweaks for pages that
   otherwise assume a desktop-ish viewport.
   ============================================================ */
@media (max-width: 800px) {
  .booking-card { position: static; }
}

@media (max-width: 640px) {
  .hero { padding: 30px 18px 24px; }
  .hero h1 { font-size: 1.45rem; }
  .hero p { font-size: 0.92rem; }
  .container { padding: 22px 16px 44px; }
  .page-title { font-size: 1.25rem; }
  .gallery-main { height: 220px; }
  .detail-title h1 { font-size: 1.3rem; margin-top: 14px; }
  .confirm-wrap { margin: 30px 14px; padding: 24px 18px; }
  .auth-wrap { margin: 24px auto; }
  .booking-row, .review-row, .bid-row { padding: 13px 14px; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; gap: 0; }
  .site-header .brand img { height: 38px; width: 38px; }
  .site-header .brand-name { font-size: 0.92rem; }
}

@media (max-width: 300px) {
  /* A handful of real devices (several foldables' cover screens among
     them) render this narrow. The logo/toggle no longer wrap here (see
     .brand/.brand-text/.brand-name/.sub/.nav-toggle above), but there's
     little value in showing "Nomad Adventures" this small when it just
     gets clipped to a few letters -- drop it and give "Nomad Stays" a
     touch more room instead. */
  .site-header .brand .sub { display: none; }
  .site-header .brand img { height: 32px; width: 32px; }

  /* The message composer's textarea normally refuses to shrink below
     180px so it never gets too cramped to type in -- on the very
     narrowest foldable cover screens the card's own padding can leave
     less room than that, which would either force the textarea (and the
     rest of the toolbar row) to overflow the page horizontally, or rely
     entirely on the overflow-x: hidden safety net above to hide it. A
     smaller floor here keeps it a usable, fully visible single column
     instead. */
  .msg-form textarea { min-width: 120px; }
}

@media (max-width: 700px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   Messaging redesign -- avatars, date dividers, grouped
   consecutive bubbles, a proper chat "card", and a modernized
   conversation list. Builds on the existing .msg-thread/.msg-bubble/
   .msg-form/.msg-attach* rules above rather than replacing them.
   ============================================================ */
.msg-thread-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.msg-thread-head-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--charcoal-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.msg-thread-sub { margin: 4px 0 0; color: var(--text-light); font-size: 0.85rem; }

.msg-thread-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
  padding: 18px 18px 14px;
  max-width: 680px;
}

.msg-thread { max-height: 55vh; gap: 0; }

.msg-date-divider {
  text-align: center;
  margin: 14px 0 8px;
}
.msg-date-divider span {
  background: var(--cream);
  color: var(--text-light);
  font-size: 0.72rem;
  padding: 3px 12px;
  border-radius: 10px;
}

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.msg-row.grouped { margin-top: 2px; }
.msg-row.mine { justify-content: flex-end; }

.msg-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--charcoal-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
}

.msg-bubble.mine { border-bottom-right-radius: 4px; }
.msg-bubble.theirs { border-bottom-left-radius: 4px; }
.msg-bubble .meta { font-size: 0.7rem; }

.msg-thread-notice { margin: 10px 0 0; }

.msg-form {
  border-top: 1px solid #edf1f7;
  padding-top: 12px;
  position: sticky;
  bottom: 0;
  background: #fff;
}
.msg-form textarea {
  resize: none;
  min-height: 42px;
  max-height: 42px;
  padding-top: 11px;
}

/* Message inbox list */
.msg-inbox-list { display: flex; flex-direction: column; gap: 8px; }
.msg-inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius);
  padding: 13px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.msg-inbox-row:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); transform: translateY(-1px); }
.msg-inbox-row.unread { box-shadow: 0 2px 10px rgba(47,111,237,0.18); border-left: 3px solid var(--gold); }
.msg-inbox-avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.msg-inbox-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-inbox-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-inbox-row.unread .msg-inbox-title { font-weight: 700; }
.msg-inbox-preview {
  color: var(--text-light);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-inbox-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.msg-inbox-time { font-size: 0.74rem; color: var(--text-light); }

@media (max-width: 640px) {
  .msg-thread-card { padding: 14px 12px 10px; max-width: none; }
  .msg-thread { max-height: 48vh; }
  .msg-bubble { max-width: 86%; }
  .msg-inbox-preview { max-width: 44vw; }
  .msg-thread-head-avatar { width: 40px; height: 40px; font-size: 1rem; }
}

/* ============================================================
   Airbnb-style photo uploader -- shared by the listing-photo
   grid (host_listing_form.html, both the new-listing pending
   grid and the edit-listing uploaded grid) and the message
   composer's photo attachments (host_message_thread.html /
   account_message_thread.html). One drag-and-drop dropzone plus
   one tiled thumbnail grid, with per-tile remove and (listings
   only) drag-to-reorder for the cover photo. See base.html's
   delegated 'change'/'drop'/'dragstart' handlers for the JS.
   ============================================================ */
.photo-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  text-align: center;
  border: 2px dashed #d6e2f0;
  border-radius: var(--radius);
  padding: 22px 16px;
  cursor: pointer;
  color: var(--text-light);
  background: #f9fbfe;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.photo-dropzone:hover,
.photo-dropzone:focus-visible { border-color: var(--gold); background: #f3f7ff; }
.photo-dropzone.dragover { border-color: var(--gold); background: #eef2f9; color: var(--text); }
.photo-dropzone-icon { color: var(--text-light); }
.photo-dropzone.dragover .photo-dropzone-icon { color: var(--gold-dark); }
.photo-dropzone-text { font-size: 0.92rem; color: var(--text); font-weight: 600; }
.photo-dropzone-text .link { color: var(--gold-dark); text-decoration: underline; }
.photo-dropzone-hint { font-size: 0.78rem; color: var(--text-light); }
.photo-dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Compact dropzone variant for the message composer, where it sits inline
   in the toolbar row instead of as a standalone block. */
.photo-dropzone.compact {
  flex-direction: row;
  padding: 8px 14px;
  border-radius: 20px;
  display: inline-flex;
  width: auto;
}
.photo-dropzone.compact .photo-dropzone-text { font-size: 0.82rem; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2f9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.photo-tile[draggable="true"] { cursor: grab; }
.photo-tile.dragging { opacity: 0.35; }
.photo-tile.drag-over { outline: 3px solid var(--gold); outline-offset: -3px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-tile-cover-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(15,42,77,0.85); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}
.photo-tile-remove {
  /* 30px, not the smaller icon a mouse cursor would suggest -- this is the
     one control in the photo grid a thumb has to hit precisely on a phone,
     so it gets a bit more room than its visual weight alone would call for. */
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(15,42,77,0.72); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
}
.photo-tile-remove:hover { background: #a33; }
.photo-tile-spinner-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.photo-tile-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #d6e2f0; border-top-color: var(--gold);
  animation: photo-spin 0.7s linear infinite;
}
@keyframes photo-spin { to { transform: rotate(360deg); } }

/* Message-composer grid: same tiles, smaller and no reorder/cover badge. */
.msg-attach-grid {
  grid-template-columns: repeat(auto-fill, minmax(56px, 56px));
  gap: 6px;
  margin: 10px 0 0;
}
.msg-attach-grid .photo-tile { border-radius: 6px; }
.msg-attach-grid .photo-tile-remove { width: 24px; height: 24px; font-size: 0.75rem; top: 2px; right: 2px; }

@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* Long-form legal pages (Terms, Privacy, Cancellation Policy). */
.legal-content { max-width: 760px; line-height: 1.65; color: var(--text); }
.legal-content .legal-updated { color: var(--text-light); font-size: 0.85rem; margin: 0 0 24px; }
.legal-content h2 { font-size: 1.1rem; margin: 26px 0 8px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { margin: 0 0 14px; }