/* Riverside Chalets — v2 restrained palette.
   The compiled Tailwind bundles in this copy have the brand orange (rgb(228 74 0))
   replaced with neutral charcoal (rgb(34 34 34)), Airbnb-style. This file re-applies
   the orange ONLY to primary CTAs, and fixes accents that sit on dark sections. */

/* Primary CTAs: header booking button, in-form submit buttons, booking modal */
header button.bg-primary,
form button.bg-primary,
#booking-modal button[type="submit"] {
  background-color: #00758F !important;
  color: #ffffff !important;
}
header button.bg-primary:hover,
form button.bg-primary:hover,
#booking-modal button[type="submit"]:hover {
  background-color: #005E73 !important;
}

/* Overline labels that were dark-on-orange need to be light on the now-dark bands. */
.bg-primary .text-dark-wood-accent {
  color: rgba(249, 247, 242, 0.65) !important;
}

/* Decoration layer (Airbnb laurel-style): a gold-yellow reserved for the
   awards-and-reviews context — rating stars, award badges — nothing else.
   Works on light and dark surfaces. */
.text-warm-amber-highlight {
  color: #E5A50A !important;
}
.fill-warm-amber-highlight {
  fill: #E5A50A !important;
}
svg.lucide-award {
  color: #E5A50A;
}

/* Superhost medal: brand teal, the way Airbnb uses its red for the badge */
svg.lucide-medal {
  color: #00758F;
}

/* hero award chip ("Top 5% of Airbnb Listings"): white card instead of gray
   tint, hairline border like Airbnb's Guest-favorite banner */
.bg-primary\/10.border-2.border-primary {
  background-color: #ffffff !important;
  border-width: 1px;
  border-color: #DDDDDD !important;
}

/* ============================================================
   Design pass — tokens measured from airbnb.com and apple.com
   Airbnb: #222 on white · #6A6A6A secondary · #DDD borders
           radius 8 (controls) / 12+ (cards) · shadow 0 6px 16px rgba(0,0,0,.12)
   Apple:  #1D1D1F · #F5F5F7 alternate surfaces · tight tracking
           generous vertical rhythm · centered section intros
   ============================================================ */

/* surfaces: white page, Apple-gray alternate sections (was warm cream) */
body { background-color: #ffffff; -webkit-font-smoothing: antialiased; }
.bg-background { background-color: #F5F5F7 !important; }

/* content column: 1600px -> 1280px, an Airbnb-scale readable width */
.max-w-\[100rem\] { max-width: 80rem; }

/* typography: slight negative tracking on body text (Apple/Airbnb) */
.font-paragraph { letter-spacing: -0.011em; }

/* one display voice (Apple/Airbnb): all headings use the modern system
   stack (SF Pro on Apple devices) at semibold with tight tracking; the
   Playfair serif is retired in v2. Body text stays Open Sans. */
.font-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: -0.022em;
}

/* radii: Apple store-card scale (cards/images 16px, controls 8px) */
.rounded-sm { border-radius: 16px; }
.rounded-lg { border-radius: 16px; }
.rounded { border-radius: 8px; }

/* cards: Apple-style borderless with one soft diffuse drop shadow */
.shadow-sm { box-shadow: 2px 4px 12px rgba(0, 0, 0, .08); }
.shadow-xl { box-shadow: 2px 4px 16px rgba(0, 0, 0, .12); }
.border-foreground\/5 { border-color: transparent; }
.border-foreground\/10 { border-color: #DDDDDD; }

/* sticky booking CTA on property pages, phones/tablets only (on desktop the
   sidebar widget is always in view) */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: .75rem 1rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid #D2D2D7;
  transition: transform .25s ease, opacity .25s ease;
}
.sticky-cta.is-hidden {
  transform: translateY(130%);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta__btn {
  width: 100%;
  height: 3rem;
  border: 0;
  border-radius: 12px;
  background: #00758F;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  letter-spacing: -.011em;
  cursor: pointer;
  transition: background .15s;
}
.sticky-cta__btn:hover { background: #005E73; }
body.has-sticky-cta { padding-bottom: 5.5rem; }
/* keep the floating WhatsApp button clear of the bar */
body.has-sticky-cta a[href*="wa.me"] { bottom: 6rem; }
@media (min-width: 1024px) {
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }
  body.has-sticky-cta a[href*="wa.me"] { bottom: 1.5rem; }
}

/* On phones, photos are never letterboxed — landscape crops become square.
   Excluded on purpose: the chalet photo gallery (already square tiles) and
   the Matterport 3D tour (aspect-video, an interactive embed, not a photo). */
@media (max-width: 767px) {
  .aspect-\[21\/9\],
  .aspect-\[16\/9\],
  .aspect-\[4\/3\] {
    aspect-ratio: 1 / 1;
  }
}

/* hero card on the chalet detail pages: title, ratings and stats live on a
   white Apple-style card floating on the gray page */
.hero-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .hero-card { padding: 2.5rem; }
}
.hero-card > div:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* quick-booking widget: gray Apple module card for separation, one split
   period control, and all controls + CTA on one 3rem height line */
.qb-card {
  background: #F5F5F7;
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
}
@media (min-width: 768px) {
  .qb-card { padding: 2.5rem 3rem; }
}
.qb-card select,
.qb-card button[type="submit"],
.qb-card .qb-range {
  height: 3rem;
}
.qb-range { overflow: hidden; }
.qb-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 14px;
  cursor: pointer;
}
.qb-cell--end { border-left: 1px solid #DDDDDD; }
.qb-cell > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(30, 35, 48, .55);
  line-height: 1.4;
}
.qb-cell > input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  color: #222222;
  padding: 0;
  width: 100%;
  min-width: 0;
}

/* ============================================================
   Form fields, Apple-style: roomy 12px-radius boxes, hairline
   #D2D2D7 border, gray placeholder, calm teal focus ring.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  height: auto !important;
  padding: 14px 16px !important;
  font-size: 1.0625rem;
  line-height: 1.3;
  border: 1px solid #D2D2D7 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  color: #1D1D1F;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 150px; }
/* iOS Safari gives date inputs an intrinsic width that overflows the field and
   centers the value — pin them to the container and left-align the text */
input[type="date"] {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}
/* iOS only: the native control ignores width:100%, so drop its appearance —
   and restore the box it takes with it (the Tailwind `flex` class would
   otherwise collapse an empty date field to a sliver). */
@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-height: 52px;
    line-height: 1.3;
  }
  /* the compact booking-widget cells keep their own geometry */
  .qb-cell > input[type="date"] {
    min-height: 0;
    display: block;
  }
}
input::placeholder,
textarea::placeholder {
  color: #86868B;
  opacity: 1;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
  border-color: #86868B !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #00758F !important;
  box-shadow: 0 0 0 3px rgba(0, 117, 143, .18) !important;
}

/* selects: hide the native arrow, draw a calm Apple-style chevron */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2386868B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px !important;
}

/* selects that carry a leading icon keep room for it */
select.pl-10 { padding-left: 2.5rem !important; }

/* submit buttons share the field radius so rows read as one control set */
form button[type="submit"] { border-radius: 12px !important; }

/* the quick-booking widget (page widget AND header modal) keeps its own
   compact geometry: one 48px split period control, no nested field boxes */
.qb-card button[type="submit"],
#booking-modal button[type="submit"] { border-radius: 12px !important; }
.qb-card select,
#booking-modal select,
.qb-range { height: 3rem !important; }
.qb-range {
  padding: 0 !important;
  border-radius: 12px !important;
  border-color: #D2D2D7 !important;
}
.qb-range:focus-within {
  border-color: #00758F !important;
  box-shadow: 0 0 0 3px rgba(0, 117, 143, .18);
}
.qb-cell > input {
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: .95rem !important;
  box-shadow: none !important;
}
.qb-cell > input:focus { box-shadow: none !important; }
.qb-cell--end { border-left-color: #D2D2D7; }

/* legal pages: the compiled bundle has no list utilities, so style the
   rights list explicitly */
ul.list-disc {
  list-style: disc;
  padding-left: 1.5rem;
}

/* Apple two-color headlines: bold statement + muted continuation replaces
   the eyebrow-label pattern on the home page */
.hl-muted {
  color: #6E6E73;
}
.bg-primary .hl-muted,
.bg-dark-wood-accent .hl-muted {
  color: rgba(249, 247, 242, 0.55);
}

/* philosophy section: the "Discover our story" arrow link sits left-aligned,
   flush with the text column, instead of floating centered */
a[dir="rtl"][href="about/index.html"] {
  justify-content: flex-end; /* rtl: end = visually left */
}

/* home page: each chalet presented on its own white card for separation */
.chalet-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
  padding: 1.5rem;
}
@media (min-width: 1024px) {
  .chalet-card { padding: 3rem; }
}

/* buttons: consistent semibold weight */
a.bg-primary, button.bg-primary, a.bg-secondary, button.bg-secondary,
a.bg-dark-wood-accent, button.bg-dark-wood-accent {
  font-weight: 600;
}


/* ============================================================
   Palette v2 (Aug 2026): Alpine River Teal / Slate / Sage / Gold
   Primary #00758F (the stream) - CTAs, links, medal, map pin
   Slate   #314B5C - dark bands + footer (was near-black)
   Sage    #789A6E - nature accent (Obermuehle CI)
   ============================================================ */
section.bg-primary { background-color: #314B5C !important; }
div.bg-primary { background-color: #314B5C !important; } /* CTA bands built as divs */
div.bg-primary.rounded-full { background-color: #00758F !important; } /* map pin */
.bg-dark-wood-accent { background-color: #314B5C !important; }
/* the footer sits one step deeper than the dark CTA band above it, so the two
   don't merge into a single block */
footer.bg-dark-wood-accent { background-color: #25373F !important; }

/* dark bands: muted subtitles must be light, not gray-on-slate */
section.bg-primary .text-foreground\/70,
div.bg-primary .text-foreground\/70,
.bg-dark-wood-accent .text-foreground\/70 {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* dark CTA bands: breathing room between text and the button row */
section.bg-primary .justify-center.gap-4,
div.bg-primary .justify-center.gap-4,
.bg-dark-wood-accent .justify-center.gap-4,
section.bg-primary p + a,
div.bg-primary p + a,
.bg-dark-wood-accent p + a {
  margin-top: 2rem;
}

/* benefit checkmark circles: fresh emerald from the brand board (was sage) */
div.bg-secondary { background-color: #008F60 !important; }

/* the check is a stroke-only icon — a white fill turns the tick into a blob */
svg.lucide-check { fill: none !important; }
.bg-secondary > svg.lucide-check {
  stroke-width: 2.75;
  width: 1.05rem;
  height: 1.05rem;
}
a.bg-secondary, button.bg-secondary {
  background-color: #00758F !important;
  color: #ffffff !important;
}
a.bg-secondary:hover, button.bg-secondary:hover {
  background-color: #005E73 !important;
}

/* teal for text links and the nav active state — but NOT for outline buttons */
a.text-primary:not(.border-primary) { color: #00758F !important; }

/* nav hover was light sage (hover:text-secondary) -> teal */
.hover\:text-secondary:hover { color: #00758F !important; }

/* dark surfaces (footer): sage contact icons -> emerald (lightened for slate),
   and link hovers go white instead of teal for contrast */
.bg-dark-wood-accent svg.text-secondary { color: #31B583; }
.bg-dark-wood-accent .hover\:text-secondary:hover { color: #ffffff !important; }

/* outline buttons ("Explore Full Guide", "Contact Alex"-style): dark outline
   with dark text, calm light-gray hover fill — no color flip, no underline */
a.border-primary.text-primary {
  color: #222222 !important;
}
a.border-primary.text-primary:hover {
  background-color: #F5F5F7 !important;
  color: #222222 !important;
}

/* button-shaped links never underline on hover */
a[class*="whitespace-nowrap"]:hover,
button[class*="whitespace-nowrap"]:hover {
  text-decoration: none !important;
}