:root {
  /* Light theme (default) */
  --cream: #f4f1ea;
  --cream-deep: #ebe5d9;
  --sand: #ddd3bf;
  --saffron: #c4a57b;
  --saffron-deep: #8b6f47;
  --ink: #1a1613;
  --ink-soft: #3a322c;
  --stone: #6d5d4e;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-soft: 0 4px 20px rgba(26,22,19,0.08);
  --shadow-card: 0 12px 40px rgba(26,22,19,0.12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Dark theme — warm chalet at night, not cold "Twitter dark".
 * Same warm hues as light, but inverted lightness.
 * Cream becomes a warm dark brown, ink becomes warm cream.
 * Saffron stays as the unifying brand accent — slightly brightened. */
:root[data-theme="dark"] {
  --cream: #1d1815;          /* page background — deep warm brown */
  --cream-deep: #2a231e;     /* slightly raised surfaces (cards, sections) */
  --sand: #3d342c;           /* dividers, borders */
  --saffron: #d4b88c;         /* slightly brightened for contrast on dark */
  --saffron-deep: #b89665;    /* hover states on dark */
  --ink: #f0ebe1;            /* primary text — warm cream (was cream) */
  --ink-soft: #c8c0b3;       /* secondary text */
  --stone: #948775;          /* tertiary text, captions */
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-card: 0 12px 40px rgba(0,0,0,0.55);
}

/* Smooth transition when toggling theme */
html, body, .device-frame, .top-bar, .bottom-nav, .stay-card,
.travel-tile, .hosts-card, .quick-tile, .list-section, .list-item,
.partner-card-v2, .activity-card, .info-block, .topic-card,
.route-card, .rule-block, .quick-link, .chat-msg.bot, .chat-input,
.tip-toast, .install-modal-card, .sheet, .form-input, .season-tab,
.contact-card, .nav-tab, .check-item, .booking-card, .step-item,
.faq-item, .gallery-item {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { background:var(--cream); color:var(--ink); font-family:"Inter",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* DEVICE FRAME (DESKTOP PREVIEW) */
.device-shell { min-height:100vh; background:linear-gradient(135deg, #2a2422 0%, #1a1613 100%); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.device-frame { width:100%; max-width:430px; height:90vh; max-height:920px; background:var(--cream); border-radius:48px; box-shadow:0 32px 80px rgba(0,0,0,0.4), 0 0 0 12px #1a1613, 0 0 0 14px #2a2422; overflow:hidden; position:relative; }
.device-notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:32px; background:#0a0a0a; border-radius:20px; z-index:1000; }
@media(max-width:768px) {
  .device-shell { padding:0; align-items:stretch; }
  .device-frame { max-width:100%; max-height:none; height:100vh; height:100dvh; border-radius:0; box-shadow:none; }
  .device-notch { display:none; }
}

.app { width:100%; height:100%; display:flex; flex-direction:column; background:var(--cream); position:relative; overflow:hidden; }
.app-main { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:var(--safe-top); padding-bottom:calc(96px + var(--safe-bottom)); scroll-behavior:smooth; }
.app-main::-webkit-scrollbar { display:none; }

/* Page navigation with iOS-style slide transitions */
.page { display:none; }
.page.active { display:block; }

/* During an animated transition, both 'from' and 'to' pages are visible.
 * The wrapper needs to behave as a positioning context. */
.app-main {
  position:relative;
}

/* Outgoing page slides out to the left while new page slides in from the right (forward) */
.page.page-anim-out {
  display:block;
  position:absolute;
  inset:0;
  animation:pageSlideOutLeft 0.32s var(--ease) forwards;
  z-index:1;
}
.page.page-anim-in {
  animation:pageSlideInRight 0.32s var(--ease) forwards;
  z-index:2;
}

/* Backward navigation: outgoing slides out to the right, new slides in from the left */
.page.page-anim-out-back {
  display:block;
  position:absolute;
  inset:0;
  animation:pageSlideOutRight 0.32s var(--ease) forwards;
  z-index:1;
}
.page.page-anim-in-back {
  animation:pageSlideInLeft 0.32s var(--ease) forwards;
  z-index:2;
}

@keyframes pageSlideInRight {
  from { transform:translateX(100%); opacity:0.5; }
  to   { transform:translateX(0);    opacity:1; }
}
@keyframes pageSlideOutLeft {
  from { transform:translateX(0);     opacity:1; }
  to   { transform:translateX(-30%);  opacity:0.4; }
}
@keyframes pageSlideInLeft {
  from { transform:translateX(-30%); opacity:0.5; }
  to   { transform:translateX(0);    opacity:1; }
}
@keyframes pageSlideOutRight {
  from { transform:translateX(0);    opacity:1; }
  to   { transform:translateX(100%); opacity:0.4; }
}

/* Respect prefers-reduced-motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .page.page-anim-in,
  .page.page-anim-out,
  .page.page-anim-in-back,
  .page.page-anim-out-back {
    animation:none !important;
  }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

/* TOP BAR */
.top-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; position:sticky; top:0; background:rgba(244,241,234,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:50; border-bottom:1px solid rgba(221,211,191,0.3); }
.top-logo { display:flex; align-items:center; height:40px; }
.top-logo-img { height:40px; width:auto; display:block; }
.top-logo-dark { display:none; }
:root[data-theme="dark"] .top-logo-light { display:none; }
:root[data-theme="dark"] .top-logo-dark { display:block; }
.top-actions { display:flex; gap:8px; align-items:center; }
.theme-toggle {
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(26,22,19,0.05);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--stone);
  transition:all 0.2s;
  padding:0;
}
.theme-toggle:active { transform:scale(0.9); }
.theme-toggle svg { width:16px; height:16px; }
/* Show only the icon matching the current mode */
.theme-toggle .theme-icon-auto,
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark { display:none; }
:root[data-theme-pref="auto"] .theme-toggle .theme-icon-auto { display:block; }
:root[data-theme-pref="light"] .theme-toggle .theme-icon-light { display:block; }
:root[data-theme-pref="dark"] .theme-toggle .theme-icon-dark { display:block; }
/* Default fallback before JS runs: show auto icon */
:root:not([data-theme-pref]) .theme-toggle .theme-icon-auto { display:block; }
/* In dark mode, the toggle button itself uses lighter background */
:root[data-theme="dark"] .theme-toggle {
  background:rgba(240,235,225,0.08);
  color:var(--saffron);
}
.lang-toggle { display:flex; align-items:center; background:rgba(26,22,19,0.05); border-radius:100px; padding:3px; font-size:11px; font-weight:600; letter-spacing:0.06em; }
.lang-toggle button { background:none; border:none; cursor:pointer; padding:6px 12px; border-radius:100px; color:var(--stone); font-family:inherit; font-size:11px; font-weight:600; transition:all 0.2s; }
.lang-toggle button.active { background:var(--ink); color:var(--cream); }

/* HOME HERO */
.home-hero { position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:36px 24px 28px; overflow:hidden; color:#f4f1ea; }
.home-hero::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(26,22,19,0.4) 0%, rgba(26,22,19,0.85) 100%), var(--home-hero-img, url('/images/valmorel-chemin.jpg')) center/cover; }
.home-hero > * { position:relative; z-index:1; }
.welcome-eyebrow { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.welcome-eyebrow::before { content:"✦"; font-size:9px; }
.welcome-title { font-family:"DM Serif Display",serif; font-size:38px; line-height:1; font-weight:400; letter-spacing:-0.02em; margin-bottom:14px; }
.welcome-title em { font-style:italic; color:var(--saffron); }
.welcome-sub { font-family:"Fraunces",serif; font-size:14px; line-height:1.6; font-weight:300; color:rgba(244,241,234,0.85); }

/* STAY CARD */
.stay-card { margin:-20px 20px 0; background:var(--cream); border-radius:20px; padding:16px 20px; box-shadow:var(--shadow-card); position:relative; z-index:5; border-top:3px solid var(--saffron); }
.stay-row { display:grid; grid-template-columns:1fr 1px 1fr; gap:0; margin-bottom:0; }
.stay-cell { padding:0 4px; }
.stay-divider { background:var(--sand); }
.stay-label { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--stone); margin-bottom:4px; }
.stay-val { font-family:"DM Serif Display",serif; font-size:17px; color:var(--ink); line-height:1.1; }
.stay-cell:nth-child(3) { padding-left:14px; }
.stay-cell:nth-child(1) { padding-right:14px; }
.countdown { background:linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%); color:var(--cream); padding:8px 16px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.countdown > div:first-child { display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:wrap; }
.countdown-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.85; }
.countdown-val { font-family:"DM Serif Display",serif; font-style:italic; font-size:18px; line-height:1; }
.countdown-icon { width:26px; height:26px; border-radius:50%; background:rgba(244,241,234,0.18); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }

/* SECTIONS */
.section-pad { padding:32px 20px 8px; }
.section-eyebrow { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.section-eyebrow::before { content:""; width:18px; height:1px; background:var(--saffron-deep); }
.section-title { font-family:"DM Serif Display",serif; font-size:26px; line-height:1.05; font-weight:400; letter-spacing:-0.01em; margin-bottom:6px; }
.section-title em { font-style:italic; color:var(--saffron); }
.section-sub { font-family:"Fraunces",serif; font-size:14px; font-weight:300; color:var(--ink-soft); line-height:1.5; margin-bottom:22px; }

/* QUICK ACCESS GRID */
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; }
.quick-tile { background:var(--cream); border:1px solid var(--sand); border-radius:16px; padding:18px 16px; cursor:pointer; transition:all 0.25s var(--ease); display:flex; flex-direction:column; min-height:110px; position:relative; overflow:hidden; }
.quick-tile::after { content:""; position:absolute; bottom:-30px; right:-30px; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle, rgba(196,165,123,0.15), transparent 70%); transition:transform 0.4s; }
.quick-tile:active { transform:scale(0.98); background:var(--cream-deep); }
.quick-tile:active::after { transform:scale(1.5); }
.quick-icon { width:40px; height:40px; border-radius:12px; background:rgba(196,165,123,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:auto; }
.quick-icon svg { width:20px; height:20px; stroke:var(--saffron-deep); }
.quick-label { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); margin-top:14px; margin-bottom:4px; }
.quick-name { font-family:"DM Serif Display",serif; font-size:18px; line-height:1.1; color:var(--ink); }
.quick-name em { font-style:italic; color:var(--saffron); }
.quick-featured { grid-column:1 / -1; min-height:140px; background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); color:var(--cream); border:none; position:relative; }
.quick-featured::before { content:""; position:absolute; inset:0; background:url('/images/chalet-family-room.jpg') center/cover; opacity:0.25; z-index:0; }
.quick-featured.no-photo::before { display:none; }
.quick-featured > * { position:relative; z-index:1; }
.quick-featured .quick-icon { background:rgba(196,165,123,0.25); }
.quick-featured .quick-icon svg { stroke:var(--saffron); }
.quick-featured .quick-label { color:var(--saffron); }
.quick-featured .quick-name { color:var(--cream); }
.quick-featured .quick-name em { color:var(--saffron); }

/* HOSTS CARD */
.hosts-card { margin:24px 20px 0; background:var(--cream); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--sand); }
.hosts-img { height:160px; background:url('/images/hosts-guillaume-louise.jpg?v=2') center 30%/cover; position:relative; }
.hosts-body { padding:22px; }
.hosts-eyebrow { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:10px; }
.hosts-text { font-family:"DM Serif Display",serif; font-style:italic; font-size:18px; line-height:1.4; font-weight:400; color:var(--ink); margin-bottom:14px; }
.hosts-sig { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); }

/* DAILY TIP */
.tip-card { margin:24px 20px 0; background:var(--ink); color:var(--cream); border-radius:18px; padding:24px 22px; position:relative; overflow:hidden; }
.tip-card::before { content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, var(--saffron) 0%, transparent 70%); opacity:0.15; }
.tip-eyebrow { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron); margin-bottom:10px; }
.tip-text { font-family:"DM Serif Display",serif; font-style:italic; font-size:18px; line-height:1.4; font-weight:400; color:var(--cream); position:relative; }
.tip-author { margin-top:14px; font-size:11px; color:rgba(244,241,234,0.5); letter-spacing:0.06em; }

/* LIST ITEMS */
.list-section { padding:0 20px; }
.list-item { display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--sand); cursor:pointer; transition:background 0.2s; margin:0 -20px; padding-left:20px; padding-right:20px; }
.list-item:active { background:var(--cream-deep); }
.list-item:last-child { border-bottom:none; }
.list-icon { width:42px; height:42px; border-radius:12px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.list-icon svg { width:20px; height:20px; stroke:var(--saffron-deep); }
.list-body { flex:1; min-width:0; }
.list-title { font-family:"DM Serif Display",serif; font-size:16px; color:var(--ink); margin-bottom:2px; }
.list-meta { font-family:"Fraunces",serif; font-size:13px; font-weight:300; color:var(--stone); display:flex; align-items:center; gap:8px; }
.list-arrow { width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--stone); flex-shrink:0; }
.list-arrow svg { width:14px; height:14px; }

/* DETAIL */
.detail-hero { position:relative; height:280px; background:var(--ink); overflow:hidden; }
.detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,22,19,0.2) 0%, transparent 40%, rgba(26,22,19,0.85) 100%); }
.detail-back { position:absolute; top:16px; left:16px; width:40px; height:40px; border-radius:50%; background:rgba(244,241,234,0.92); backdrop-filter:blur(8px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; }
.detail-back svg { width:16px; height:16px; stroke:var(--ink); }
.detail-hero-text { position:absolute; bottom:24px; left:24px; right:24px; z-index:5; color:#f4f1ea; }
.detail-hero-eyebrow { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron); margin-bottom:8px; }
.detail-hero-title { font-family:"DM Serif Display",serif; font-size:34px; line-height:1; font-weight:400; letter-spacing:-0.01em; }
.detail-hero-title em { font-style:italic; color:var(--saffron); }
.detail-content { padding:28px 24px 40px; }
.detail-lead { font-family:"Fraunces",serif; font-size:16px; line-height:1.7; font-weight:300; color:var(--ink-soft); margin-bottom:28px; }

/* INFO BLOCKS */
.info-block { background:var(--cream); border:1px solid var(--sand); border-radius:14px; padding:18px 18px; margin-bottom:14px; }
.info-block-label { font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; }
.info-block-value { font-family:"DM Serif Display",serif; font-size:18px; color:var(--ink); word-break:break-all; }
.info-block-note { font-family:"Fraunces",serif; font-size:13px; font-weight:300; color:var(--ink-soft); margin-top:6px; line-height:1.5; }
.locked { position:relative; }
.locked .info-block-value { filter:blur(8px); user-select:none; pointer-events:none; }
.locked-overlay { display:none; }
.locked .locked-overlay { position:absolute; inset:0; background:rgba(244,241,234,0.6); backdrop-filter:blur(2px); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; cursor:pointer; }
.locked-overlay svg { width:20px; height:20px; stroke:var(--saffron-deep); }
.locked-overlay span { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--saffron-deep); font-weight:600; }

/* STEP LIST */
.step-list { margin:24px 0; }
.step-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--sand); }
.step-item:last-child { border-bottom:none; }
.step-num { width:28px; height:28px; border-radius:50%; background:var(--saffron); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:"DM Serif Display",serif; font-size:14px; flex-shrink:0; }
.step-text { font-family:"Fraunces",serif; font-size:14px; line-height:1.6; font-weight:300; color:var(--ink-soft); padding-top:4px; }
.step-text strong { font-weight:500; color:var(--ink); }

/* CTA */
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--cream); border:none; cursor:pointer; padding:16px 24px; border-radius:100px; font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; transition:all 0.2s; }
.cta:active { transform:scale(0.97); background:var(--ink-soft); }
.cta-saffron { background:var(--saffron); color:var(--ink); }
.cta-saffron:active { background:var(--saffron-deep); color:var(--cream); }

/* BOTTOM NAV */
.bottom-nav { position:absolute; bottom:0; left:0; right:0; background:rgba(244,241,234,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid rgba(221,211,191,0.4); padding:10px 0 calc(10px + var(--safe-bottom)); display:flex; justify-content:space-around; z-index:100; }
.nav-tab { flex:1; max-width:90px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; background:none; border:none; cursor:pointer; color:var(--stone); transition:color 0.2s; }
.nav-tab svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; transition:transform 0.2s; }
.nav-tab.active { color:var(--saffron-deep); }
.nav-tab.active svg { stroke-width:1.8; transform:translateY(-1px); }
.nav-tab-label { font-size:10px; letter-spacing:0.06em; font-weight:500; }

/* SHEET */
.sheet-overlay { position:absolute; inset:0; background:rgba(26,22,19,0.5); backdrop-filter:blur(4px); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.sheet-overlay.open { opacity:1; pointer-events:auto; }
.sheet { position:absolute; bottom:0; left:0; right:0; background:var(--cream); border-radius:24px 24px 0 0; padding:8px 24px calc(32px + var(--safe-bottom)); z-index:300; transform:translateY(100%); transition:transform 0.4s var(--ease); max-height:85%; overflow-y:auto; }
.sheet.open { transform:translateY(0); }
.sheet-grip { width:40px; height:4px; background:var(--sand); border-radius:2px; margin:0 auto 20px; }
.sheet-title { font-family:"DM Serif Display",serif; font-size:24px; line-height:1.1; margin-bottom:8px; }
.sheet-title em { font-style:italic; color:var(--saffron); }
.sheet-sub { font-family:"Fraunces",serif; font-size:14px; font-weight:300; color:var(--ink-soft); line-height:1.6; margin-bottom:24px; }

/* FORM */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; }
.form-input { width:100%; padding:14px 16px; background:var(--cream-deep); border:1px solid transparent; border-radius:12px; font-family:"Fraunces",serif; font-size:16px; font-weight:300; color:var(--ink); outline:none; transition:all 0.2s; }
.form-input:focus { border-color:var(--saffron); background:var(--cream); }
.form-hint { font-size:11px; color:var(--stone); margin-top:6px; font-family:"Fraunces",serif; font-style:italic; }
.form-error { background:#fef2f0; color:#a04030; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; display:none; }
.form-error.show { display:block; animation:shake 0.4s; }
@keyframes shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}

/* PARTNER CARDS */
.partner-card { background:var(--cream); border-radius:16px; overflow:hidden; margin-bottom:14px; border:1px solid var(--sand); cursor:pointer; transition:transform 0.25s var(--ease); display:flex; min-height:120px; }
.partner-card:active { transform:scale(0.99); }
.partner-img { width:120px; flex-shrink:0; background-size:cover; background-position:center; position:relative; }
.partner-img.placeholder { background:linear-gradient(135deg, var(--cream-deep) 0%, var(--sand) 100%); display:flex; align-items:center; justify-content:center; }
.partner-img.placeholder::after { content:attr(data-initial); font-family:"DM Serif Display",serif; font-size:38px; font-style:italic; color:var(--saffron-deep); }
.partner-body { flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.partner-tag { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:4px; font-weight:600; }
.partner-name { font-family:"DM Serif Display",serif; font-size:17px; line-height:1.1; margin-bottom:4px; }
.partner-name em { font-style:italic; color:var(--saffron); }
.partner-perk { font-family:"Fraunces",serif; font-size:12px; font-weight:300; color:var(--ink-soft); line-height:1.4; }
.partner-perk strong { font-weight:500; color:var(--saffron-deep); }
.partner-arrow { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--stone); }

/* TOAST */
.toast { position:absolute; top:80px; left:50%; transform:translateX(-50%) translateY(-20px); background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:100px; font-size:13px; z-index:500; opacity:0; pointer-events:none; transition:all 0.3s var(--ease); box-shadow:0 8px 24px rgba(0,0,0,0.2); white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* SEASON TABS */
.season-tabs { display:flex; gap:4px; margin:0 24px 20px; padding:4px; background:var(--cream-deep); border-radius:100px; }
.season-tab { flex:1; padding:10px 14px; background:transparent; border:none; cursor:pointer; border-radius:100px; font-family:"Inter",sans-serif; font-size:12px; font-weight:500; color:var(--stone); transition:all 0.25s var(--ease); display:flex; align-items:center; justify-content:center; gap:6px; }
.season-tab.active { background:var(--ink); color:var(--cream); box-shadow:var(--shadow-soft); }
.season-tab svg { width:14px; height:14px; }

/* ACTIVITY CARD */
.activity-card { background:var(--cream); border-radius:16px; overflow:hidden; margin-bottom:14px; border:1px solid var(--sand); cursor:pointer; transition:transform 0.25s var(--ease); }
.activity-card:active { transform:scale(0.99); }
.activity-img { height:140px; background-size:cover; background-position:center; position:relative; }
.activity-num { position:absolute; top:14px; left:14px; background:rgba(244,241,234,0.95); color:var(--ink); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"DM Serif Display",serif; font-size:16px; font-style:italic; }
.activity-credit { position:absolute; bottom:8px; right:10px; font-size:9px; color:rgba(244,241,234,0.8); letter-spacing:0.06em; font-style:italic; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
.activity-body { padding:14px 18px 18px; }
.activity-name { font-family:"DM Serif Display",serif; font-size:18px; line-height:1.1; margin-bottom:6px; }
.activity-name em { font-style:italic; color:var(--saffron); }
.activity-desc { font-family:"Fraunces",serif; font-size:13px; font-weight:300; color:var(--ink-soft); line-height:1.5; }

.season-group { display:none; }
.season-group.active { display:block; }

/* ─── EQUIPMENT GRID (Cuisine) ─── */
.equip-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 24px; }
.equip-tile { background:var(--cream); border:1px solid var(--sand); border-radius:14px; padding:14px 14px; display:flex; flex-direction:column; gap:8px; min-height:90px; }
.equip-icon { width:32px; height:32px; border-radius:8px; background:rgba(196,165,123,0.15); display:flex; align-items:center; justify-content:center; }
.equip-icon svg { width:18px; height:18px; stroke:var(--saffron-deep); fill:none; stroke-width:1.6; }
.equip-name { font-family:"DM Serif Display",serif; font-size:14px; line-height:1.1; color:var(--ink); }
.equip-meta { font-family:"Fraunces",serif; font-size:11px; font-weight:300; color:var(--stone); line-height:1.4; }

/* ─── CHIP / TAG ROW ─── */
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 24px; }
.chip { padding:6px 12px; background:var(--cream-deep); border-radius:100px; font-size:11px; color:var(--ink-soft); font-family:"Fraunces",serif; font-style:italic; font-weight:400; }

/* ─── FAMILY ROOM EXPERIENCE TILES ─── */
.exp-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 24px; }
.exp-tile { aspect-ratio:1/1; border-radius:14px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; color:var(--cream); position:relative; overflow:hidden; }
.exp-tile.full { grid-column:1 / -1; aspect-ratio:auto; min-height:120px; }
.exp-tile-bg { position:absolute; inset:0; background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); z-index:0; }
.exp-tile-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at top right, rgba(196,165,123,0.3), transparent 60%); }
.exp-tile > * { position:relative; z-index:1; }
.exp-tile-num { font-family:"DM Serif Display",serif; font-style:italic; font-size:16px; color:var(--saffron); opacity:0.7; }
.exp-tile-name { font-family:"DM Serif Display",serif; font-size:18px; line-height:1.05; }
.exp-tile-name em { font-style:italic; color:var(--saffron); }
.exp-tile-desc { font-family:"Fraunces",serif; font-size:11px; font-weight:300; color:rgba(244,241,234,0.75); line-height:1.4; margin-top:4px; }

/* ─── BEDROOMS PLAN ─── */
.floor-block { margin-bottom:24px; }
.floor-label { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.floor-label::before { content:""; width:18px; height:1px; background:var(--saffron-deep); }
.room-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--sand); gap:12px; }
.room-row:last-child { border-bottom:none; }
.room-id { width:32px; height:32px; border-radius:50%; background:var(--cream-deep); color:var(--saffron-deep); font-family:"DM Serif Display",serif; font-style:italic; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.room-info { flex:1; min-width:0; }
.room-name { font-family:"DM Serif Display",serif; font-size:15px; line-height:1.2; }
.room-meta { font-family:"Fraunces",serif; font-size:12px; font-weight:300; color:var(--stone); margin-top:2px; }
.room-cap { font-family:"Inter",sans-serif; font-size:11px; font-weight:500; letter-spacing:0.06em; color:var(--saffron-deep); white-space:nowrap; }

/* ─── CHECKLIST ─── */
.checklist { margin:20px 0 24px; }
.check-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--sand); cursor:pointer; transition:opacity 0.2s; }
.check-item:last-child { border-bottom:none; }
.check-item:active { background:rgba(196,165,123,0.05); }
.check-box { width:24px; height:24px; border-radius:8px; border:2px solid var(--sand); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s var(--ease); margin-top:1px; background:var(--cream); }
.check-box svg { width:14px; height:14px; stroke:var(--cream); fill:none; stroke-width:3; opacity:0; transition:opacity 0.2s; }
.check-item.done .check-box { background:var(--saffron); border-color:var(--saffron); }
.check-item.done .check-box svg { opacity:1; }
.check-item.done .check-text { opacity:0.5; text-decoration:line-through; }
.check-text { font-family:"Fraunces",serif; font-size:14px; line-height:1.6; font-weight:300; color:var(--ink-soft); transition:opacity 0.2s; }
.check-text strong { font-weight:500; color:var(--ink); }
.check-progress { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--cream-deep); border-radius:12px; margin-bottom:20px; }
.check-progress-bar { flex:1; height:6px; background:var(--sand); border-radius:3px; overflow:hidden; }
.check-progress-fill { height:100%; background:linear-gradient(90deg, var(--saffron) 0%, var(--saffron-deep) 100%); border-radius:3px; transition:width 0.4s var(--ease); }
.check-progress-label { font-size:11px; letter-spacing:0.06em; color:var(--stone); font-weight:500; white-space:nowrap; }

/* ─── EMERGENCY CONTACTS ─── */
.emergency-banner { background:#fef2f0; border:1px solid #f5d4ce; border-radius:14px; padding:16px 18px; margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.emergency-banner-icon { width:36px; height:36px; border-radius:50%; background:#a04030; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.emergency-banner-icon svg { width:18px; height:18px; stroke:#fef2f0; fill:none; stroke-width:2; }
.emergency-banner-text { font-family:"Fraunces",serif; font-size:13px; font-weight:300; color:#6b2a20; line-height:1.5; }
.emergency-banner-text strong { font-weight:500; }

.emergency-section { margin-bottom:22px; }
.emergency-section-title { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:10px; display:flex; align-items:center; gap:10px; padding:0 4px; }
.emergency-section-title::before { content:""; width:18px; height:1px; background:var(--saffron-deep); }

a.contact-card { display:flex; align-items:center; gap:14px; padding:16px 16px; background:var(--cream); border:1px solid var(--sand); border-radius:14px; margin-bottom:8px; text-decoration:none; color:inherit; transition:all 0.2s; }
a.contact-card:active { transform:scale(0.99); background:var(--cream-deep); }
.contact-icon { width:42px; height:42px; border-radius:12px; background:rgba(196,165,123,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon.urgent { background:#fef2f0; }
.contact-icon svg { width:20px; height:20px; stroke:var(--saffron-deep); fill:none; stroke-width:1.6; }
.contact-icon.urgent svg { stroke:#a04030; }
.contact-body { flex:1; min-width:0; }
.contact-name { font-family:"DM Serif Display",serif; font-size:15px; line-height:1.2; color:var(--ink); }
.contact-detail { font-family:"Fraunces",serif; font-size:13px; font-weight:300; color:var(--stone); margin-top:2px; }
.contact-action { font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; color:var(--saffron-deep); text-transform:uppercase; flex-shrink:0; }
.contact-action.urgent { color:#a04030; }

/* ─── BUS BANNER (after stay-card, before travel-tile) ─── */
.bus-banner {
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px 20px 0;
  padding:14px 16px;
  background:var(--cream);
  border:1px solid rgba(196,165,123,0.25);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.bus-banner:active {
  transform:scale(0.98);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.bus-banner-icon {
  flex-shrink:0;
  width:38px; height:38px;
  background:rgba(196,165,123,0.14);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.bus-banner-icon svg {
  width:22px; height:22px;
  stroke:var(--saffron-deep);
  fill:none;
}
.bus-banner-body {
  flex:1; min-width:0;
}
.bus-banner-eyebrow {
  font-family:"Inter",sans-serif;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:5px;
}
.bus-banner-row {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bus-banner-line {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:"Fraunces",serif;
  font-size:14px;
  line-height:1.35;
  color:var(--ink);
}
.bus-banner-dir {
  color:var(--saffron-deep);
  font-weight:500;
  flex-shrink:0;
}
.bus-banner-time {
  font-family:"DM Serif Display",serif;
  font-size:15px;
  color:var(--ink);
}
.bus-banner-min {
  color:var(--stone);
  font-size:13px;
  font-weight:300;
}
.bus-banner-arrow {
  flex-shrink:0;
  width:18px; height:18px;
  color:var(--stone);
  display:flex; align-items:center; justify-content:center;
}
.bus-banner-arrow svg {
  width:16px; height:16px;
}
/* Compact mode for very small screens — single-row layout */
@media (max-width: 360px) {
  .bus-banner-row {
    flex-direction:column;
    gap:2px;
  }
  .bus-banner-line { font-size:13px; }
}

/* ─── TIME-AWARE HOME TILE ─── */
.travel-tile {
  margin:24px 20px 0;
  background:linear-gradient(135deg, #1a1613 0%, #3a322c 100%);
  color:#f4f1ea;
  border-radius:18px;
  padding:24px 22px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform 0.25s var(--ease);
}
.travel-tile:active { transform:scale(0.98); }
.travel-tile::before {
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, var(--saffron) 0%, transparent 65%);
  opacity:0.18;
}
.travel-tile-bg-img {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.18;
}
.travel-tile > * { position:relative; z-index:1; }
.travel-tile-eyebrow {
  font-size:10px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--saffron);
  margin-bottom:10px;
}
.travel-tile-title {
  font-family:"DM Serif Display",serif;
  font-size:24px; line-height:1.1;
  margin-bottom:8px;
}
.travel-tile-title em { font-style:italic; color:var(--saffron); }
.travel-tile-desc {
  font-family:"Fraunces",serif;
  font-size:14px; font-weight:300;
  line-height:1.5;
  color:rgba(244,241,234,0.82);
  margin-bottom:16px;
}
.travel-tile-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--saffron);
}
.travel-tile-cta::after {
  content:"→"; font-size:14px; transition:transform 0.2s;
}
.travel-tile:hover .travel-tile-cta::after { transform:translateX(4px); }

/* ─── SUB-NAV ON DETAIL PAGES (mini menu inside a section) ─── */
.subpage-list { padding:0; margin:24px 0; }

/* ─── TRAVEL TOPIC CARDS ─── */
.topic-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 0 24px;
}
.topic-card {
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:14px;
  padding:16px 14px;
  cursor:pointer;
  transition:transform 0.2s var(--ease);
  display:flex; flex-direction:column;
  min-height:120px;
  text-decoration:none;
  color:inherit;
}
.topic-card:active { transform:scale(0.98); background:var(--cream-deep); }
.topic-card-icon {
  width:36px; height:36px; border-radius:10px;
  background:rgba(196,165,123,0.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:auto;
}
.topic-card-icon svg { width:18px; height:18px; stroke:var(--saffron-deep); fill:none; stroke-width:1.6; }
.topic-card-name {
  font-family:"DM Serif Display",serif;
  font-size:15px; line-height:1.15;
  color:var(--ink);
  margin-top:14px;
  margin-bottom:3px;
}
.topic-card-name em { font-style:italic; color:var(--saffron); }
.topic-card-meta {
  font-family:"Fraunces",serif;
  font-size:11px; font-weight:300;
  color:var(--stone);
}
.topic-card.full {
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  gap:14px;
  min-height:80px;
}
.topic-card.full .topic-card-icon { margin-bottom:0; }
.topic-card.full .topic-card-text { flex:1; }
.topic-card.full .topic-card-name { margin-top:0; margin-bottom:2px; font-size:16px; }

/* ─── PACKING CHECKLIST (different vibe from departure checklist) ─── */
.pack-section { margin:18px 0 14px; }
.pack-section-title {
  font-size:10px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--saffron-deep);
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.pack-section-title::before { content:""; width:18px; height:1px; background:var(--saffron-deep); }

.pack-list { padding:0; }
.pack-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  font-family:"Fraunces",serif;
  font-size:14px; font-weight:300;
  color:var(--ink-soft);
  line-height:1.5;
}
.pack-item-bullet {
  width:6px; height:6px; border-radius:50%;
  background:var(--saffron);
  flex-shrink:0;
}
.pack-item.optional { color:var(--stone); }
.pack-item.optional .pack-item-bullet { background:var(--sand); }

/* ─── ROUTE / TRANSPORT CARDS ─── */
.route-card {
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:14px;
  padding:18px 18px;
  margin-bottom:12px;
}
.route-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; margin-bottom:14px;
}
.route-name {
  font-family:"DM Serif Display",serif;
  font-size:17px; line-height:1.1;
}
.route-name em { font-style:italic; color:var(--saffron); }
.route-duration {
  font-family:"Inter",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.14em;
  color:var(--saffron-deep);
  text-transform:uppercase;
  white-space:nowrap;
  background:var(--cream-deep);
  padding:6px 10px; border-radius:100px;
}
.route-steps { font-family:"Fraunces",serif; font-size:13px; font-weight:300; line-height:1.7; color:var(--ink-soft); }
.route-steps strong { font-weight:500; color:var(--ink); }

/* ─── RULE PAGE COMPONENTS ─── */
.rule-block {
  display:flex; gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--sand);
}
.rule-block:last-child { border-bottom:none; }
.rule-icon {
  width:36px; height:36px; border-radius:10px;
  background:var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.rule-icon svg { width:18px; height:18px; stroke:var(--saffron-deep); fill:none; stroke-width:1.6; }
.rule-icon.warn { background:#fef2f0; }
.rule-icon.warn svg { stroke:#a04030; }
.rule-body { flex:1; }
.rule-title {
  font-family:"DM Serif Display",serif;
  font-size:16px; color:var(--ink);
  margin-bottom:4px;
}
.rule-text {
  font-family:"Fraunces",serif;
  font-size:13px; font-weight:300;
  color:var(--ink-soft); line-height:1.6;
}
.rule-text strong { font-weight:500; color:var(--ink); }

/* ─── DATE MODAL (set arrival date) ─── */
.date-modal-content {
  font-family:"Fraunces",serif;
  font-size:14px; font-weight:300;
  color:var(--ink-soft); line-height:1.6;
  margin-bottom:18px;
}
.stay-edit {
  position:absolute; top:12px; right:12px;
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px;
  color:var(--saffron-deep); cursor:pointer;
}
.stay-edit svg { width:17px; height:17px; }
.stay-edit:active { color:var(--saffron); }

/* ─── PARTNER CARD V2 — with action buttons ─── */
.partner-card-v2 {
  background:var(--cream);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--sand);
  display:flex; flex-direction:column;
}
.partner-card-v2-top {
  display:flex; min-height:120px;
}
.partner-card-v2 .partner-img {
  width:120px; flex-shrink:0;
  background-size:cover; background-position:center;
  position:relative;
}
.partner-card-v2 .partner-img.placeholder {
  background:linear-gradient(135deg, var(--cream-deep) 0%, var(--sand) 100%);
  display:flex; align-items:center; justify-content:center;
}
.partner-card-v2 .partner-img.placeholder::after {
  content:attr(data-initial);
  font-family:"DM Serif Display",serif;
  font-size:38px; font-style:italic;
  color:var(--saffron-deep);
}
.partner-card-v2 .partner-body {
  flex:1; padding:14px 16px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-width:0;
}
.partner-actions {
  display:flex; gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid var(--sand);
  background:var(--cream);
}
.partner-action {
  flex:1;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  padding:11px 12px;
  border:none; border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s;
}
.partner-action svg {
  width:14px; height:14px;
  fill:none; stroke-width:1.8;
}
.partner-action.primary {
  background:var(--ink); color:var(--cream);
}
.partner-action.primary:active {
  background:var(--ink-soft);
}
.partner-action.primary svg { stroke:var(--cream); }
/* Disabled state: applied via JS when a partner number/URL isn't yet configured */
.partner-action-disabled {
  opacity:0.45;
  cursor:not-allowed;
  filter:grayscale(0.4);
}
.partner-action-disabled:active {
  background:inherit !important;
  transform:none !important;
}
.partner-action.secondary {
  background:var(--cream-deep); color:var(--ink);
}
.partner-action.secondary:active {
  background:var(--sand);
}
.partner-action.secondary svg { stroke:var(--ink); }
.partner-action.saffron {
  background:var(--saffron); color:var(--ink);
}
.partner-action.saffron:active {
  background:var(--saffron-deep); color:var(--cream);
}
.partner-action.saffron svg { stroke:var(--ink); }

/* ─── ACTIVITY CARD WITH BOOK BUTTON ─── */
.activity-card .activity-body {
  display:flex; flex-direction:column; gap:10px;
}
.activity-actions {
  display:flex; gap:8px;
  margin-top:6px;
}
.activity-action {
  flex:1;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  padding:10px 12px;
  border:none; border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s;
  background:var(--ink); color:var(--cream);
}
.activity-action:active {
  background:var(--ink-soft);
}
.activity-action.secondary {
  background:var(--cream-deep); color:var(--ink);
}
.activity-action.secondary:active {
  background:var(--sand);
}
.activity-action svg {
  width:13px; height:13px;
  fill:none; stroke-width:1.8;
  stroke:currentColor;
}

/* ─── CHATBOT ─── */
.chat-fab {
  position:absolute;
  bottom:calc(96px + var(--safe-bottom) + 16px);
  right:20px;
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  border:none;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(139,111,71,0.35), 0 2px 6px rgba(0,0,0,0.15);
  cursor:pointer;
  z-index:120;
  transition:all 0.25s var(--ease);
  font-family:"DM Serif Display",serif;
}
.chat-fab:active { transform:scale(0.94); }
.chat-fab svg {
  width:26px; height:26px;
  fill:none; stroke:var(--cream); stroke-width:1.8;
}
.chat-fab.hidden { opacity:0; pointer-events:none; transform:translateY(20px); }
.chat-fab-pulse {
  position:absolute; top:0; left:0; right:0; bottom:0;
  border-radius:50%;
  background:var(--saffron);
  opacity:0.4;
  animation:chatPulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes chatPulse {
  0% { transform:scale(1); opacity:0.4; }
  100% { transform:scale(1.6); opacity:0; }
}

/* Chat panel — slides in from bottom, occupies most of screen */
.chat-panel {
  position:absolute;
  bottom:0; left:0; right:0;
  height:90%;
  background:var(--cream);
  border-radius:24px 24px 0 0;
  z-index:400;
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform 0.4s var(--ease);
  box-shadow:0 -8px 40px rgba(0,0,0,0.25);
  overflow:hidden;
}
.chat-panel.open { transform:translateY(0); }

.chat-header {
  display:flex; align-items:center; gap:14px;
  padding:18px 22px 16px;
  background:var(--cream);
  border-bottom:1px solid var(--sand);
  position:relative;
}
.chat-header-grip {
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  width:40px; height:4px;
  background:var(--sand);
  border-radius:2px;
}
.chat-avatar {
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:"DM Serif Display",serif;
  font-style:italic; font-size:18px;
  color:var(--saffron);
  flex-shrink:0;
}
.chat-avatar { position:relative; overflow:hidden; }
.chat-avatar svg.roger-mascot { width:30px; height:30px; fill:none; }
.roger-avatar-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.chat-fab .roger-fab-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; z-index:1; }
.chat-header-text { flex:1; min-width:0; }
.chat-header-name {
  font-family:"DM Serif Display",serif;
  font-size:17px; line-height:1.1;
}
.chat-header-name em { font-style:italic; color:var(--saffron); }
.chat-header-status {
  font-size:11px; color:var(--stone);
  margin-top:2px;
  font-family:"Fraunces",serif;
  font-style:italic;
  display:flex; align-items:center; gap:6px;
}
.chat-header-status::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:#5cb85c;
}
.chat-close {
  background:rgba(26,22,19,0.05);
  border:none;
  width:36px; height:36px; border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.chat-close:active { background:rgba(26,22,19,0.12); }
.chat-close svg { width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2; }

.chat-messages {
  flex:1; overflow-y:auto;
  padding:18px 18px 8px;
  display:flex; flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.chat-messages::-webkit-scrollbar { display:none; }

.chat-msg {
  max-width:80%;
  padding:12px 16px;
  border-radius:18px;
  font-family:"Fraunces",serif;
  font-size:14px;
  line-height:1.5;
  font-weight:300;
  animation:msgIn 0.3s var(--ease);
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.chat-msg.bot {
  align-self:flex-start;
  background:var(--cream);
  border:1px solid var(--sand);
  border-bottom-left-radius:6px;
  color:var(--ink-soft);
}
.chat-msg.bot strong { color:var(--ink); font-weight:500; }
.chat-msg.bot em { color:var(--saffron-deep); font-style:italic; }
.chat-msg.user {
  align-self:flex-end;
  background:var(--ink);
  color:var(--cream);
  border-bottom-right-radius:6px;
}
.chat-msg.bot a {
  color:var(--saffron-deep);
  text-decoration:underline;
  text-decoration-color:rgba(139,111,71,0.4);
}

.chat-typing {
  align-self:flex-start;
  display:flex; align-items:center; gap:4px;
  padding:14px 18px;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:18px;
  border-bottom-left-radius:6px;
}
.chat-typing-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--saffron);
  animation:dotBounce 1.4s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay:0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes dotBounce {
  0%, 60%, 100% { transform:translateY(0); opacity:0.4; }
  30% { transform:translateY(-6px); opacity:1; }
}

.chat-suggestions {
  display:flex; gap:6px; flex-wrap:wrap;
  padding:0 18px 12px;
}
.chat-suggestion {
  background:var(--cream);
  border:1px solid var(--saffron);
  color:var(--saffron-deep);
  padding:8px 14px;
  border-radius:100px;
  font-family:"Fraunces",serif;
  font-size:12px;
  font-style:italic;
  cursor:pointer;
  transition:all 0.2s;
}
.chat-suggestion:active {
  background:var(--saffron);
  color:var(--cream);
}

.chat-input-wrap {
  display:flex; gap:10px; align-items:center;
  padding:14px 18px calc(14px + var(--safe-bottom));
  background:var(--cream);
  border-top:1px solid var(--sand);
}
.chat-input {
  flex:1;
  padding:12px 16px;
  background:var(--cream-deep);
  border:1px solid transparent;
  border-radius:100px;
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:300;
  color:var(--ink);
  outline:none;
  transition:all 0.2s;
}
.chat-input:focus {
  border-color:var(--saffron);
  background:var(--cream);
}
.chat-send {
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background:var(--ink);
  color:var(--cream);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all 0.2s;
}
.chat-send:disabled {
  background:var(--sand);
  cursor:default;
}
.chat-send:active:not(:disabled) {
  transform:scale(0.94);
}
.chat-send svg {
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:2;
}

.chat-fallback {
  display:flex; flex-direction:column; gap:8px;
  margin-top:8px;
}
.chat-fallback-btn {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--cream);
  border:1px solid var(--saffron);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  font-family:"Fraunces",serif;
  font-size:13px;
  font-weight:300;
  transition:all 0.2s;
}
.chat-fallback-btn:active {
  background:var(--cream-deep);
}
.chat-fallback-btn svg {
  width:16px; height:16px;
  fill:none; stroke:var(--saffron-deep);
  stroke-width:1.8;
  flex-shrink:0;
}
.chat-fallback-btn strong {
  font-weight:500; color:var(--saffron-deep);
}

/* ─── CHECK-IN TIMELINE — visual progression with status states ─── */
.checkin-progress {
  background:var(--cream-deep);
  border-radius:14px;
  padding:14px 16px;
  margin-top:16px;
}
.checkin-progress-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--stone);
}
.checkin-progress-count {
  color:var(--saffron-deep);
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:normal;
  text-transform:none;
}
.checkin-progress-bar {
  height:6px;
  background:var(--sand);
  border-radius:3px;
  overflow:hidden;
}
.checkin-progress-fill {
  height:100%;
  background:linear-gradient(90deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  width:0%;
  transition:width 0.6s var(--ease);
  border-radius:3px;
}

.checkin-timeline {
  position:relative;
  padding-left:8px;
}
.checkin-step {
  display:flex;
  gap:14px;
  padding-bottom:24px;
  position:relative;
}
.checkin-step:last-child {
  padding-bottom:0;
}
/* Vertical connector line between steps */
.checkin-step:not(:last-child)::before {
  content:"";
  position:absolute;
  left:17px;
  top:38px;
  bottom:-2px;
  width:2px;
  background:var(--sand);
  z-index:0;
}
.checkin-step.done:not(:last-child)::before {
  background:var(--saffron);
}
.checkin-step-marker {
  position:relative;
  z-index:1;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--cream-deep);
  border:2px solid var(--sand);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.3s var(--ease);
}
.checkin-step-num {
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-size:15px;
  color:var(--stone);
  transition:all 0.2s;
}
.checkin-step-check {
  width:16px;
  height:16px;
  color:var(--cream);
  position:absolute;
  opacity:0;
  transform:scale(0.6);
  transition:all 0.3s var(--ease);
}
.checkin-step-body {
  flex:1;
  padding-top:4px;
}
.checkin-step-title {
  font-family:"DM Serif Display",serif;
  font-size:16px;
  color:var(--ink);
  margin-bottom:4px;
  transition:color 0.2s;
}
.checkin-step-text {
  font-family:"Fraunces",serif;
  font-size:13px;
  font-weight:300;
  line-height:1.5;
  color:var(--ink-soft);
}
.checkin-step-text strong { font-weight:500; color:var(--ink); }
.checkin-step-text a { color:var(--saffron-deep); }

/* DONE state */
.checkin-step.done .checkin-step-marker {
  background:var(--saffron);
  border-color:var(--saffron);
}
.checkin-step.done .checkin-step-num {
  opacity:0;
}
.checkin-step.done .checkin-step-check {
  opacity:1;
  transform:scale(1);
}
.checkin-step.done .checkin-step-title {
  color:var(--stone);
  text-decoration:line-through;
  text-decoration-color:rgba(109,93,78,0.4);
}

/* CURRENT state — saffron pulsing ring */
.checkin-step.current .checkin-step-marker {
  background:var(--cream);
  border-color:var(--saffron);
  box-shadow:0 0 0 4px rgba(196,165,123,0.2);
  animation:checkinPulse 2s ease-out infinite;
}
.checkin-step.current .checkin-step-num {
  color:var(--saffron-deep);
  font-weight:500;
}
.checkin-step.current .checkin-step-title {
  color:var(--saffron-deep);
}
@keyframes checkinPulse {
  0%, 100% { box-shadow:0 0 0 4px rgba(196,165,123,0.2); }
  50%      { box-shadow:0 0 0 8px rgba(196,165,123,0.06); }
}

/* PENDING (default) — slightly muted */
.checkin-step.pending .checkin-step-title {
  color:var(--stone);
}
.checkin-step.pending .checkin-step-text {
  color:var(--stone);
}

/* When all done, hide the unlock CTA (no longer relevant) */
:root[data-theme="dark"] .checkin-step.current .checkin-step-marker {
  background:var(--cream-deep);
}

/* ─── CTA GHOST variant — secondary action with transparent background ─── */
.cta-ghost {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--saffron);
}
.cta-ghost:active {
  background:rgba(196,165,123,0.1);
}
:root[data-theme="dark"] .cta-ghost {
  color:var(--ink);
  border-color:var(--saffron);
}
:root[data-theme="dark"] .cta-ghost:active {
  background:rgba(212,184,140,0.15);
}

/* ─── SHARE CARD (home) — invite the tribe ─── */
.share-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 18px 18px 16px;
  margin:8px 20px 24px;
  background:linear-gradient(135deg, rgba(196,165,123,0.12) 0%, rgba(196,165,123,0.04) 100%);
  border:1px solid rgba(196,165,123,0.35);
  border-radius:18px;
  cursor:pointer;
  transition:all 0.25s var(--ease);
}
.share-card:active {
  transform:scale(0.98);
  background:linear-gradient(135deg, rgba(196,165,123,0.2) 0%, rgba(196,165,123,0.08) 100%);
}
.share-card-icon {
  width:44px; height:44px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--saffron);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
}
.share-card-icon svg { width:22px; height:22px; }
.share-card-body { flex:1; min-width:0; }
.share-card-eyebrow {
  font-family:"Inter",sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--saffron-deep);
  margin-bottom:4px;
}
.share-card-title {
  font-family:"DM Serif Display",serif;
  font-size:18px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:4px;
}
.share-card-title em { font-style:italic; color:var(--saffron-deep); }
.share-card-meta {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.4;
}
.share-card-arrow {
  flex-shrink:0;
  color:var(--saffron-deep);
}
.share-card-arrow svg { width:18px; height:18px; }

:root[data-theme="dark"] .share-card {
  background:linear-gradient(135deg, rgba(212,184,140,0.12) 0%, rgba(212,184,140,0.04) 100%);
  border-color:rgba(212,184,140,0.3);
}
:root[data-theme="dark"] .share-card:active {
  background:linear-gradient(135deg, rgba(212,184,140,0.2) 0%, rgba(212,184,140,0.08) 100%);
}
:root[data-theme="dark"] .share-card-icon {
  color:#1d1815;
}

/* ─── SHARE SHEET — bottom sheet for editable share message ─── */
.share-textarea {
  resize:none;
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  min-height:140px;
}
.share-actions {
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.share-copy-btn {
  flex-shrink:0;
  padding:16px 18px;
}
.share-quick-actions {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.share-quick-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 8px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:all 0.2s;
}
.share-quick-btn:active {
  background:var(--sand);
  transform:scale(0.96);
}
.share-quick-btn svg {
  width:22px; height:22px;
  color:var(--saffron-deep);
}
.share-quick-btn:nth-child(1) svg { color:#25D366; }  /* WhatsApp green */
.share-quick-btn:nth-child(2) svg { color:#5856d6; }  /* SMS blue */

:root[data-theme="dark"] .share-quick-btn {
  background:var(--cream-deep);
  border-color:var(--sand);
}
:root[data-theme="dark"] .share-quick-btn:active {
  background:var(--sand);
}
:root[data-theme="dark"] .share-quick-btn:nth-child(1) svg { color:#4ae380; }

/* ─── SHARE CARD (home) + SHARE SHEET ─── */
.share-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 18px 18px 16px;
  margin-bottom:24px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-left:3px solid var(--saffron);
  border-radius:14px;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.share-card:active {
  background:var(--sand);
  transform:scale(0.99);
}
.share-card-icon {
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(196,165,123,0.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--saffron-deep);
}
.share-card-icon svg { width:20px; height:20px; }
.share-card-body { flex:1; min-width:0; }
.share-card-eyebrow {
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:4px;
}
.share-card-title {
  font-family:"DM Serif Display",serif;
  font-size:17px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:4px;
}
.share-card-title em { font-style:italic; color:var(--saffron); }
.share-card-meta {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  color:var(--ink-soft);
  font-style:italic;
}
.share-card-arrow {
  flex-shrink:0;
  color:var(--stone);
}
.share-card-arrow svg { width:14px; height:14px; }
:root[data-theme="dark"] .share-card-icon {
  background:rgba(212,184,140,0.15);
  color:var(--saffron);
}

/* Share sheet */
.share-textarea {
  resize:vertical;
  min-height:120px;
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:300;
  line-height:1.55;
}
.share-actions {
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.share-copy-btn {
  flex:0 0 auto;
  padding:14px 18px !important;
}
.share-quick-actions {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  padding-top:14px;
  border-top:1px solid var(--sand);
}
.share-quick-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 8px;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink-soft);
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.share-quick-btn:active {
  background:var(--saffron);
  color:var(--ink);
  border-color:var(--saffron);
  transform:scale(0.96);
}
.share-quick-btn svg {
  width:20px; height:20px;
  color:var(--saffron-deep);
}
.share-quick-btn:active svg { color:var(--ink); }
:root[data-theme="dark"] .share-quick-btn {
  background:var(--cream-deep);
  border-color:var(--sand);
  color:var(--ink);
}
:root[data-theme="dark"] .share-quick-btn svg { color:var(--saffron); }

.form-hint {
  margin-top:6px;
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:11px;
  color:var(--stone);
}

/* ─── TRIBE COLLABORATION (chalet-bedrooms page) ─── */

/* Tribe management card */
.tribe-card {
  margin:14px 0 20px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-left:3px solid var(--saffron);
  border-radius:14px;
  padding:14px 14px 14px 12px;
}
.tribe-card-empty,
.tribe-card-active {
  display:flex;
  align-items:center;
  gap:12px;
}
.tribe-card-icon {
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(196,165,123,0.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--saffron-deep);
}
.tribe-card-icon.active {
  background:var(--saffron);
  color:var(--ink);
}
.tribe-card-icon svg { width:22px; height:22px; }
.tribe-card-body { flex:1; min-width:0; }
.tribe-card-title {
  font-family:"DM Serif Display",serif;
  font-size:15px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:4px;
}
.tribe-card-title em { font-style:italic; color:var(--saffron); }
.tribe-card-eyebrow {
  font-size:9px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:2px;
}
.tribe-card-id {
  font-family:"DM Serif Display",serif;
  font-size:22px;
  font-style:italic;
  letter-spacing:0.18em;
  color:var(--saffron-deep);
  margin-bottom:2px;
}
.tribe-card-meta,
.tribe-card-meta-active {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  color:var(--ink-soft);
  font-style:italic;
}
.tribe-card-cta {
  flex-shrink:0;
  background:var(--saffron);
  color:var(--ink);
  border:none;
  padding:10px 16px;
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.tribe-card-cta:active { transform:scale(0.96); background:var(--saffron-deep); color:var(--cream); }
.tribe-card-cta-secondary {
  flex-shrink:0;
  background:rgba(196,165,123,0.12);
  border:1px solid var(--sand);
  border-radius:50%;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--saffron-deep);
  transition:all 0.2s var(--ease);
}
.tribe-card-cta-secondary:active { background:var(--saffron); color:var(--ink); transform:scale(0.94); }
.tribe-card-cta-secondary svg { width:14px; height:14px; }

/* Room row (existing) — make it look interactive */
.room-row[role="button"] {
  cursor:pointer;
  transition:background 0.2s var(--ease);
}
.room-row[role="button"]:active {
  background:rgba(196,165,123,0.08);
}
.room-row[role="button"]::after {
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-right:1.5px solid var(--stone);
  border-top:1.5px solid var(--stone);
  transform:rotate(45deg);
  margin-left:8px;
  flex-shrink:0;
  align-self:center;
}

/* Assigned member badge inside a room row */
.room-assigned {
  background:var(--saffron);
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  padding:5px 10px;
  border-radius:100px;
  margin-right:8px;
  white-space:nowrap;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* SVG floor plan: show assigned member name */
.fp-room-assigned rect {
  fill:rgba(196,165,123,0.4);
  stroke:var(--saffron-deep);
  stroke-width:1.6;
}
.fp-assigned {
  fill:var(--saffron-deep);
  font-family:"Inter",sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.04em;
  pointer-events:none;
}
:root[data-theme="dark"] .fp-room-assigned rect {
  fill:rgba(212,184,140,0.3);
  stroke:var(--saffron);
}
:root[data-theme="dark"] .fp-assigned {
  fill:var(--saffron);
}

/* Room assignment sheet — list of tribe members */
.room-assign-list {
  display:flex; flex-direction:column;
  gap:6px;
  margin-top:8px;
  max-height:50vh;
  overflow-y:auto;
}
.room-assign-option {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:12px;
  cursor:pointer;
  font-family:"Fraunces",serif;
  font-size:15px;
  color:var(--ink);
  transition:all 0.15s var(--ease);
  text-align:left;
}
.room-assign-option:active {
  background:var(--saffron);
  border-color:var(--saffron);
}
.room-assign-option.current {
  background:rgba(196,165,123,0.15);
  border-color:var(--saffron);
}
.room-assign-option.current svg {
  color:var(--saffron-deep);
  width:18px; height:18px;
}
.room-assign-option.unassign {
  background:transparent;
  border-color:rgba(160,64,48,0.3);
  color:rgba(160,64,48,0.85);
  font-style:italic;
}
.room-assign-option.unassign svg {
  width:14px; height:14px;
  color:rgba(160,64,48,0.85);
}
.room-assign-option.add-new {
  background:transparent;
  border-style:dashed;
  color:var(--saffron-deep);
  font-style:italic;
}
.room-assign-option.add-new svg {
  width:16px; height:16px;
  color:var(--saffron-deep);
}
.room-assign-name {
  font-weight:500;
}

:root[data-theme="dark"] .room-assign-option {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .room-assign-option:active {
  background:var(--saffron);
  color:#1d1815;
}

/* ─── TRIBE BANNER (chalet-bedrooms page) ─── */
.tribe-banner {
  margin:14px 0 18px;
  border-radius:14px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  overflow:hidden;
}
.tribe-banner.tribe-banner-empty {
  border-style:dashed;
  border-color:var(--saffron);
}

.tribe-banner-cta {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 18px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.tribe-banner-cta svg {
  flex-shrink:0;
  width:28px; height:28px;
  color:var(--saffron-deep);
}
.tribe-banner-cta span {
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.4;
}

.tribe-banner-active {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 18px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.tribe-banner-active-info {
  flex:1;
  min-width:0;
}
.tribe-banner-id-row {
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.tribe-banner-id {
  font-family:"DM Serif Display",serif;
  font-size:20px;
  font-style:italic;
  letter-spacing:0.06em;
  color:var(--saffron-deep);
}
.tribe-banner-me {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  color:var(--stone);
  font-style:italic;
}
.tribe-banner-me strong {
  color:var(--ink);
  font-weight:500;
  font-style:normal;
}
.tribe-banner-meta {
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--stone);
}
.tribe-banner-arrow {
  flex-shrink:0;
  width:16px; height:16px;
  color:var(--stone);
}

:root[data-theme="dark"] .tribe-banner {
  background:#2a231e;
}
:root[data-theme="dark"] .tribe-banner-id {
  color:var(--saffron);
}

/* ─── ROOM ASSIGNMENT BADGES ─── */
.room-assignment {
  margin-left:auto;
  flex-shrink:0;
}
.room-assign-btn {
  padding:6px 12px;
  background:transparent;
  border:1px solid var(--saffron);
  border-radius:100px;
  color:var(--saffron-deep);
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:all 0.15s var(--ease);
}
.room-assign-btn:active {
  background:var(--saffron);
  color:var(--ink);
  transform:scale(0.96);
}

.room-assigned {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 6px 8px;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:100px;
  color:var(--ink);
  font-family:"Fraunces",serif;
  font-size:13px;
  font-weight:400;
  cursor:pointer;
  transition:all 0.15s var(--ease);
}
.room-assigned-dot {
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--saffron);
  flex-shrink:0;
}
.room-assigned-name {
  white-space:nowrap;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.room-assigned-me {
  background:rgba(196,165,123,0.18);
  border-color:var(--saffron);
}
.room-assigned-me .room-assigned-dot {
  animation:tribePulse 2s ease-out infinite;
}
@keyframes tribePulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(196,165,123,0.5); }
  50%      { box-shadow:0 0 0 5px rgba(196,165,123,0); }
}
.room-assigned:active {
  background:var(--cream-deep);
  transform:scale(0.96);
}
:root[data-theme="dark"] .room-assigned {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .room-assigned-me {
  background:rgba(212,184,140,0.18);
  border-color:var(--saffron);
}

/* ─── FLOOR PLAN — assigned rooms ─── */
.fp-room-assigned rect {
  fill:rgba(196,165,123,0.22);
  stroke:var(--saffron);
}
.fp-assigned {
  fill:var(--saffron-deep);
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:9px;
  pointer-events:none;
}
:root[data-theme="dark"] .fp-room-assigned rect {
  fill:rgba(212,184,140,0.25);
}
:root[data-theme="dark"] .fp-assigned {
  fill:var(--saffron);
}

/* ─── TRIBE SHEET — pills, code display, dividers ─── */
.tribe-members-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.tribe-member-pill {
  padding:8px 14px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:100px;
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.15s var(--ease);
}
.tribe-member-pill:active {
  transform:scale(0.96);
}
.tribe-member-pill.active {
  background:var(--saffron);
  border-color:var(--saffron);
  color:var(--ink);
}
.tribe-no-members {
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:13px;
  font-weight:300;
  color:var(--stone);
  padding:8px 0;
}
.tribe-code-display {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:14px 18px;
  background:var(--cream-deep);
  border:1px solid var(--saffron);
  border-radius:14px;
  cursor:pointer;
  transition:all 0.15s var(--ease);
  font-family:inherit;
}
.tribe-code-display:active {
  background:var(--saffron);
  transform:scale(0.99);
}
.tribe-code-value {
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-size:24px;
  letter-spacing:0.16em;
  color:var(--saffron-deep);
}
.tribe-code-display svg {
  width:18px; height:18px;
  color:var(--stone);
  flex-shrink:0;
}
:root[data-theme="dark"] .tribe-member-pill {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .tribe-member-pill.active {
  background:var(--saffron);
  color:#1d1815;
}
:root[data-theme="dark"] .tribe-code-display {
  background:#3d342c;
}
:root[data-theme="dark"] .tribe-code-value {
  color:var(--saffron);
}

/* ─── TASKS PAGE — shared chores with multi-assignees ─── */
.tasks-empty {
  text-align:center;
  padding:32px 16px;
  background:var(--cream-deep);
  border-radius:18px;
  border:1px dashed var(--saffron);
  margin:14px 0 20px;
}
.tasks-empty-icon {
  display:flex; justify-content:center;
  margin-bottom:14px;
  color:var(--saffron-deep);
}
.tasks-empty-icon svg { width:42px; height:42px; }
.tasks-empty-title {
  font-family:"DM Serif Display",serif;
  font-size:22px;
  line-height:1.15;
  margin-bottom:8px;
  color:var(--ink);
}
.tasks-empty-title em { font-style:italic; color:var(--saffron); }
.tasks-empty-text {
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:300;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:18px;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
}

.tasks-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px 8px 14px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-left:3px solid var(--saffron);
  border-radius:10px;
  margin:14px 0 18px;
  font-family:"Inter",sans-serif;
}
.tasks-banner-eyebrow {
  font-size:9px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--stone);
}
.tasks-banner-id {
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-size:18px;
  letter-spacing:0.16em;
  color:var(--saffron-deep);
}

.tasks-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.task-card {
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:14px;
  padding:14px 14px 12px;
  transition:all 0.25s var(--ease);
}
.task-card.done {
  background:transparent;
  border-color:var(--sand);
  opacity:0.7;
}

.task-card-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.task-checkbox {
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--sand);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  transition:all 0.2s var(--ease);
  padding:0;
}
.task-checkbox svg {
  width:14px; height:14px;
  opacity:0;
  transform:scale(0.6);
  transition:all 0.2s var(--ease);
}
.task-checkbox:active {
  transform:scale(0.92);
}
.task-card.done .task-checkbox {
  background:var(--saffron);
  border-color:var(--saffron);
}
.task-card.done .task-checkbox svg {
  opacity:1;
  transform:scale(1);
}

.task-label-wrap {
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  cursor:pointer;
  padding:4px 0;
}
.task-emoji {
  font-size:18px;
  line-height:1;
  flex-shrink:0;
}
.task-label {
  font-family:"Fraunces",serif;
  font-size:15px;
  font-weight:400;
  color:var(--ink);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-card.done .task-label {
  text-decoration:line-through;
  text-decoration-color:rgba(109,93,78,0.5);
  color:var(--stone);
}

.task-delete {
  flex-shrink:0;
  background:none;
  border:none;
  cursor:pointer;
  width:30px; height:30px;
  border-radius:50%;
  color:var(--stone);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s var(--ease);
}
.task-delete:active {
  background:rgba(160,64,48,0.12);
  color:#a04030;
  transform:scale(0.92);
}
.task-delete svg { width:14px; height:14px; }

.task-assignees {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  padding-left:36px;  /* align with task-label */
}
.task-pill {
  display:inline-flex;
  align-items:center;
  background:var(--saffron);
  color:var(--ink);
  padding:4px 10px;
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:transform 0.2s var(--ease);
}
.task-pill:active {
  transform:scale(0.94);
}
.task-pill-add {
  background:transparent;
  color:var(--saffron-deep);
  border:1px dashed var(--saffron);
  padding:4px 10px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.task-pill-add:active {
  background:var(--saffron);
  color:var(--ink);
  transform:scale(0.94);
}

.task-assignees-empty {
  background:transparent;
  color:var(--stone);
  border:1px dashed var(--sand);
  padding:6px 12px;
  border-radius:100px;
  font-family:"Fraunces",serif;
  font-size:12px;
  font-style:italic;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.task-assignees-empty:active {
  background:var(--cream-deep);
  border-color:var(--saffron);
  color:var(--saffron-deep);
}

/* Courses — sous-articles assignables */
.course-items { padding-left:36px; display:flex; flex-direction:column; }
.course-item { display:flex; align-items:center; gap:8px; padding:7px 0; }
.course-item + .course-item { border-top:1px solid var(--sand); }
.course-item-check {
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:var(--cream); border:2px solid var(--sand); color:var(--cream);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:all 0.2s var(--ease);
}
.course-item-check svg { width:11px; height:11px; opacity:0; transform:scale(0.6); transition:all 0.2s var(--ease); }
.course-item.done .course-item-check { background:var(--saffron); border-color:var(--saffron); }
.course-item.done .course-item-check svg { opacity:1; transform:scale(1); }
.course-item-label {
  flex:1; min-width:0; font-family:"Fraunces",serif; font-size:14px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.course-item.done .course-item-label { text-decoration:line-through; color:var(--stone); }
.course-item-assignee {
  flex-shrink:0; max-width:40%; background:transparent; color:var(--stone);
  border:1px dashed var(--sand); padding:3px 9px; border-radius:100px;
  font-family:"Inter",sans-serif; font-size:11px; font-weight:600; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all 0.2s var(--ease);
}
.course-item-assignee.set { background:var(--saffron); color:var(--ink); border-style:solid; border-color:var(--saffron); }
.course-item-assignee:active { transform:scale(0.94); }
.course-item-del {
  flex-shrink:0; width:24px; height:24px; background:transparent; border:none; color:var(--stone);
  cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.course-item-del svg { width:14px; height:14px; }
.course-item-del:active { background:var(--cream); color:var(--ink); }
.course-add-btn {
  margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:transparent;
  color:var(--saffron-deep); border:1px dashed var(--saffron); padding:6px 12px; border-radius:100px;
  font-family:"Inter",sans-serif; font-size:11px; font-weight:700; letter-spacing:0.04em; cursor:pointer;
  transition:all 0.2s var(--ease);
}
.course-add-btn svg { width:14px; height:14px; }
.course-add-btn:active { background:var(--saffron); color:var(--ink); transform:scale(0.97); }

.tasks-add-btn {
  font-size:12px;
}

/* Task assignees sheet — multi-select toggles */
.task-assignees-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:60vh;
  overflow-y:auto;
  margin-top:8px;
}
.task-assignee-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:12px;
  cursor:pointer;
  font-family:"Inter",sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  transition:all 0.2s var(--ease);
}
.task-assignee-toggle:active {
  transform:scale(0.98);
}
.task-assignee-toggle.on {
  background:var(--saffron);
  border-color:var(--saffron);
  color:var(--ink);
}
.task-assignee-toggle.add-new {
  border-style:dashed;
  color:var(--saffron-deep);
  font-style:italic;
}
.task-assignee-name {
  flex:1;
  text-align:left;
}
.task-assignee-check {
  flex-shrink:0;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:var(--stone);
}
.task-assignee-toggle.on .task-assignee-check { color:var(--ink); }
.task-assignee-check svg { width:18px; height:18px; }

/* Dark mode support */
:root[data-theme="dark"] .task-card {
  background:var(--cream-deep);
}
:root[data-theme="dark"] .task-checkbox {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .task-card.done .task-checkbox {
  background:var(--saffron);
  border-color:var(--saffron);
}
:root[data-theme="dark"] .task-card.done .task-checkbox svg { color:#1d1815; }
:root[data-theme="dark"] .task-pill { color:#1d1815; }
:root[data-theme="dark"] .task-assignee-toggle {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .task-assignee-toggle.on {
  background:var(--saffron);
  color:#1d1815;
}

/* ─── PUSH NOTIFICATIONS — invitation sheet ─── */
.push-invite-icon {
  display:flex;
  justify-content:center;
  margin:8px 0 18px;
  color:var(--saffron-deep);
}
.push-invite-icon svg {
  width:48px; height:48px;
}
.push-invite-title {
  text-align:center;
  font-size:24px;
  line-height:1.2;
  margin-bottom:14px;
  padding:0 8px;
}
.push-invite-title em {
  font-style:italic;
  color:var(--saffron);
}
.sheet#sheet-push-invite .sheet-sub {
  text-align:center;
  margin-bottom:24px;
  padding:0 8px;
}
.push-benefits {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
  padding:14px 16px;
  background:var(--cream-deep);
  border-radius:12px;
  border:1px solid var(--sand);
}
.push-benefit {
  display:flex;
  align-items:center;
  gap:12px;
}
.push-benefit-icon {
  flex-shrink:0;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.push-benefit-text {
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:400;
  color:var(--ink-soft);
  line-height:1.4;
}
.push-invite-dismiss {
  display:block;
  width:100%;
  margin-top:14px;
  padding:8px;
  background:none;
  border:none;
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:12px;
  color:var(--stone);
  cursor:pointer;
  transition:color 0.2s;
  text-decoration:underline;
  text-decoration-color:var(--sand);
  text-underline-offset:3px;
}
.push-invite-dismiss:active {
  color:var(--ink);
}
:root[data-theme="dark"] .push-benefits {
  background:#3d342c;
  border-color:#5a4d40;
}

/* ─── DEMO MODE BANNER ─── */
.demo-banner {
  position:fixed;
  top:0; left:0; right:0;
  z-index:10000;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:#1d1815;
  color:#f4f1ea;
  font-family:"Inter",sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  border-bottom:1px solid var(--saffron);
  pointer-events:auto;
}
.demo-banner-dot {
  color:var(--saffron);
  font-size:8px;
  animation:demoBannerPulse 2s ease-in-out infinite;
}
@keyframes demoBannerPulse {
  0%, 100% { opacity:0.5; }
  50%      { opacity:1; }
}
.demo-banner-label {
  flex:1;
  font-weight:500;
}
.demo-banner-quit {
  background:transparent;
  border:1px solid rgba(244,241,234,0.3);
  color:#f4f1ea;
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:6px;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.demo-banner-quit:active {
  background:var(--saffron);
  border-color:var(--saffron);
  color:#1d1815;
  transform:scale(0.95);
}
/* Push everything down to make room for the banner */
body:has(.demo-banner) .device-shell,
body:has(.demo-banner) .top-bar,
body:has(.demo-banner) .app {
  /* nothing to do — the banner is at the body root level, before the shell */
}
body:has(.demo-banner) {
  padding-top:34px;
}

/* ─── SETTINGS PAGE ─── */
.settings-toggle {
  flex-shrink:0;
  width:36px;
  height:36px;
  background:none;
  border:none;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-soft);
  transition:all 0.2s var(--ease);
  padding:0;
}
.settings-toggle:active {
  background:var(--cream-deep);
  transform:scale(0.92);
}
.settings-toggle svg { width:20px; height:20px; }
:root[data-theme="dark"] .settings-toggle:active {
  background:#3d342c;
}

/* Lighter hero variant for the settings page (no photo) */
.detail-hero-light {
  background:var(--cream);
  height:auto;
  padding:60px 24px 24px;
  position:relative;
}
.detail-hero-light::after {
  display:none;
}
.detail-hero-light .detail-back {
  position:absolute;
  top:16px; left:12px;
  background:transparent;
  color:var(--ink-soft);
}
.detail-hero-text-light {
  position:relative;
  padding:0;
  background:transparent;
}
.detail-hero-text-light .detail-hero-eyebrow {
  color:var(--saffron-deep);
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.detail-hero-text-light .detail-hero-title {
  color:var(--ink);
  font-family:"DM Serif Display",serif;
  font-size:34px;
  line-height:1.05;
  text-shadow:none;
}

.settings-section {
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:14px;
  padding:6px 16px;
  margin-bottom:18px;
}
.settings-section-title {
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--saffron-deep);
  font-weight:600;
  padding:14px 0 4px;
  margin:0;
}
.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-top:1px solid var(--sand);
  min-height:54px;
}
.settings-row:first-of-type {
  border-top:none;
}
.settings-row.settings-row-stack {
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.settings-row-info {
  flex:1;
  min-width:0;
}
.settings-row-label {
  font-family:"Fraunces",serif;
  font-size:15px;
  font-weight:400;
  color:var(--ink);
  margin-bottom:2px;
}
.settings-row-meta {
  font-family:"Inter",sans-serif;
  font-size:12px;
  color:var(--stone);
  line-height:1.4;
}
.settings-row-meta strong {
  color:var(--saffron-deep);
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:0.1em;
}
.settings-row-action {
  flex-shrink:0;
  font-family:"Inter",sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--saffron-deep);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 4px;
  transition:opacity 0.2s;
}
.settings-row-action:active {
  opacity:0.5;
}
.settings-row-arrow {
  flex-shrink:0;
  color:var(--stone);
  font-size:18px;
  opacity:0.6;
}

/* Segmented control (Lang, Theme) */
.settings-segmented {
  display:inline-flex;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:8px;
  padding:2px;
  gap:0;
}
.settings-segmented-btn {
  background:transparent;
  border:none;
  padding:6px 11px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--stone);
  cursor:pointer;
  border-radius:6px;
  transition:all 0.18s var(--ease);
}
.settings-segmented-btn.active {
  background:var(--ink);
  color:var(--cream);
  font-weight:600;
}
:root[data-theme="dark"] .settings-segmented {
  background:#1d1815;
  border-color:#3d342c;
}
:root[data-theme="dark"] .settings-segmented-btn.active {
  background:var(--saffron);
  color:#1d1815;
}

/* Toggle switch (Haptic) */
.settings-toggle-switch {
  flex-shrink:0;
  width:46px;
  height:26px;
  background:var(--sand);
  border:none;
  border-radius:13px;
  position:relative;
  cursor:pointer;
  transition:background 0.25s var(--ease);
  padding:0;
}
.settings-toggle-switch.on {
  background:var(--saffron);
}
.settings-toggle-thumb {
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  background:var(--cream);
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
  transition:transform 0.25s var(--ease);
}
.settings-toggle-switch.on .settings-toggle-thumb {
  transform:translateX(20px);
}

/* Push CTA (full-width) */
.settings-push-cta {
  width:100%;
  justify-content:center;
}

/* Danger button (Reset app) */
.settings-danger-btn {
  display:block;
  width:100%;
  background:transparent;
  border:1px solid var(--sand);
  color:#a04030;
  font-family:"Inter",sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.06em;
  padding:14px;
  margin:18px 0 4px;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.settings-danger-btn:active {
  background:rgba(160,64,48,0.08);
  border-color:#a04030;
}
:root[data-theme="dark"] .settings-danger-btn {
  border-color:#3d342c;
  color:#d47a6c;
}
:root[data-theme="dark"] .settings-danger-btn:active {
  background:rgba(212,122,108,0.1);
}

/* Footer */
.settings-footer {
  text-align:center;
  padding:32px 0 16px;
}
.settings-footer-brand {
  font-family:"DM Serif Display",serif;
  font-size:20px;
  color:var(--ink);
  margin-bottom:6px;
}
.settings-footer-brand em {
  font-style:italic;
  color:var(--saffron);
}
.settings-footer-meta {
  font-family:"Inter",sans-serif;
  font-size:11px;
  color:var(--stone);
  letter-spacing:0.04em;
}

/* ─── WEATHER BANNER (home) — Valmorel current conditions ─── */
.weather-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  margin-bottom:18px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-left:3px solid var(--saffron);
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.weather-banner:active {
  transform:scale(0.99);
  background:var(--sand);
}
.weather-banner-left {
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
}
.weather-icon {
  flex-shrink:0;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color:var(--saffron-deep);
}
.weather-icon svg {
  width:100%; height:100%;
}
.weather-info {
  flex:1;
  min-width:0;
}
.weather-line {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:2px;
}
.weather-temp {
  font-family:"DM Serif Display",serif;
  font-size:24px;
  line-height:1;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.weather-condition {
  font-family:"Fraunces",serif;
  font-size:14px;
  font-weight:400;
  font-style:italic;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weather-meta {
  display:flex;
  align-items:center;
  gap:6px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  color:var(--stone);
  letter-spacing:0.04em;
}
.weather-eyebrow {
  font-weight:500;
}
.weather-sep {
  opacity:0.5;
}
.weather-minmax {
  font-weight:400;
}
.weather-banner-arrow {
  flex-shrink:0;
  width:18px; height:18px;
  color:var(--stone);
  opacity:0.6;
}
.weather-banner-arrow svg { width:100%; height:100%; }

:root[data-theme="dark"] .weather-banner {
  background:#2a231e;
  border-color:#3d342c;
  border-left-color:var(--saffron);
}
:root[data-theme="dark"] .weather-banner:active {
  background:#3d342c;
}

/* ─── FAVORITES — heart buttons + favorites section on home ─── */

/* Heart button overlaid on top-right of any [data-favorite-id] element */
.fav-heart {
  position:absolute;
  top:8px; right:8px;
  z-index:5;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(244,241,234,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--stone);
  transition:all 0.2s var(--ease);
  padding:0;
}
.fav-heart svg {
  width:16px; height:16px;
  transition:all 0.2s var(--ease);
}
.fav-heart:active {
  transform:scale(0.86);
}
/* Active state — heart filled with saffron */
.fav-heart.active {
  background:var(--saffron);
  color:var(--ink);
}
.fav-heart.active svg {
  fill:var(--ink);
  stroke:var(--ink);
  animation:favHeartPop 0.4s var(--ease);
}
@keyframes favHeartPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.4); }
  100% { transform:scale(1); }
}
:root[data-theme="dark"] .fav-heart {
  background:rgba(42,35,30,0.85);
  color:var(--ink-soft);
}
:root[data-theme="dark"] .fav-heart.active {
  background:var(--saffron);
  color:#1d1815;
}
:root[data-theme="dark"] .fav-heart.active svg {
  fill:#1d1815;
  stroke:#1d1815;
}

/* Adjust placement on activity cards (image starts at top) — push the heart
   into the safe area below the image counter */
.activity-card .fav-heart {
  top:8px;
  right:8px;
}

/* Adjust placement on partner cards (no image at top, structured layout) */
.partner-card-v2 .fav-heart {
  top:12px;
  right:12px;
}

/* Favorites section on the home */
.favorites-section {
  margin-bottom:24px;
}
.favorites-head {
  margin-bottom:12px;
}
.favorites-eyebrow {
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:6px;
}
.favorites-title {
  font-family:"DM Serif Display",serif;
  font-size:22px;
  line-height:1.15;
  color:var(--ink);
}
.favorites-title em {
  font-style:italic;
  color:var(--saffron);
}
.favorites-grid {
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;  /* Firefox */
  padding:4px 0 6px;
  margin:0 -20px;        /* Bleed to edges for scrolling effect */
  padding-left:20px;
  padding-right:20px;
}
.favorites-grid::-webkit-scrollbar { display:none; }
.fav-tile {
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px 10px 12px;
  background:var(--cream-deep);
  border:1px solid var(--sand);
  border-radius:100px;
  cursor:pointer;
  transition:all 0.2s var(--ease);
  font-family:"Inter",sans-serif;
}
.fav-tile:active {
  background:var(--saffron);
  border-color:var(--saffron);
  transform:scale(0.96);
}
.fav-tile-emoji {
  font-size:18px;
  line-height:1;
}
.fav-tile-label {
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink);
  white-space:nowrap;
}
:root[data-theme="dark"] .fav-tile {
  background:#3d342c;
  border-color:#5a4d40;
}
:root[data-theme="dark"] .fav-tile:active {
  background:var(--saffron);
  color:#1d1815;
}

/* ─── FLOOR PLAN (chalet-bedrooms page) ─── */
.floorplan-tabs {
  display:flex;
  gap:8px;
  margin:12px 0 14px;
  background:var(--cream-deep);
  padding:4px;
  border-radius:100px;
}
.floorplan-tab {
  flex:1;
  padding:10px 12px;
  background:none;
  border:none;
  border-radius:100px;
  cursor:pointer;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--stone);
  transition:all 0.2s var(--ease);
}
.floorplan-tab.active {
  background:var(--ink);
  color:var(--cream);
}
:root[data-theme="dark"] .floorplan-tab.active {
  background:var(--saffron);
  color:#1d1815;
}
.floorplan {
  background:var(--cream-deep);
  border-radius:18px;
  padding:16px 12px 12px;
  margin-bottom:12px;
}
.floorplan svg {
  width:100%;
  height:auto;
  display:block;
}
.fp-outline {
  fill:none;
  stroke:var(--saffron-deep);
  stroke-width:1.5;
  stroke-dasharray:4 3;
}
.fp-hall {
  fill:rgba(196,165,123,0.12);
  stroke:var(--sand);
  stroke-width:0.8;
  stroke-dasharray:2 2;
}
.fp-hall-label {
  fill:var(--stone);
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:9px;
}
.floorplan-wrap { position:relative; }
.fp-pin { position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:var(--saffron); color:var(--ink); border:2px solid #fff; font-family:"DM Serif Display",serif; font-style:italic; font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(26,22,19,0.35); padding:0; transition:transform 0.15s; }
.fp-pin:active { transform:translate(-50%,-50%) scale(0.92); }
.fp-pin-assigned { background:var(--ink); color:var(--saffron); border-color:var(--saffron); }
.floorplan-img { display:block; width:100%; height:auto; border-radius:14px; background:#fff; }
.fp-zone { fill:none; stroke:var(--saffron-deep); stroke-width:1; stroke-dasharray:5 4; opacity:0.45; rx:6; }
.fp-zone-label { font-family:"Inter",sans-serif; font-size:7px; letter-spacing:0.18em; text-transform:uppercase; fill:var(--saffron-deep); font-weight:600; }
.fp-balcony {
  fill:var(--saffron);
  opacity:0.4;
}
.fp-room rect {
  fill:var(--cream);
  stroke:var(--sand);
  stroke-width:1.2;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.fp-room:hover rect,
.fp-room:active rect {
  fill:var(--saffron);
  stroke:var(--saffron-deep);
}
.fp-room.fp-special rect {
  fill:rgba(196,165,123,0.18);
  stroke:var(--saffron);
}
.fp-num {
  fill:var(--ink);
  font-family:"DM Serif Display",serif;
  font-size:18px;
  font-style:italic;
  pointer-events:none;
}
.fp-tag {
  fill:var(--saffron-deep);
  font-family:"Inter",sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  pointer-events:none;
}
.fp-meta {
  fill:var(--stone);
  font-family:"Fraunces",serif;
  font-size:8px;
  font-weight:300;
  pointer-events:none;
}
.fp-stairs rect {
  fill:rgba(0,0,0,0.04);
  stroke:var(--sand);
  stroke-width:0.8;
}
.fp-stairs line {
  stroke:var(--sand);
  stroke-width:0.6;
}
.fp-stairs-label {
  fill:var(--stone);
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:9px;
}
:root[data-theme="dark"] .fp-room rect {
  fill:#3d342c;
  stroke:#5a4d40;
}
:root[data-theme="dark"] .fp-room.fp-special rect {
  fill:rgba(212,184,140,0.15);
  stroke:var(--saffron);
}
:root[data-theme="dark"] .fp-num { fill:var(--ink); }
:root[data-theme="dark"] .fp-stairs rect { fill:rgba(0,0,0,0.3); }
.floorplan-caption {
  text-align:center;
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:12px;
  color:var(--stone);
  margin-top:8px;
}
.floorplan-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  justify-content:center;
  padding:10px 0 18px;
  font-family:"Fraunces",serif;
  font-size:11px;
  font-weight:300;
  color:var(--ink-soft);
}
.fp-legend-item {
  display:flex;
  align-items:center;
  gap:6px;
}
.fp-legend-dot {
  width:12px;
  height:12px;
  border-radius:3px;
  background:var(--cream);
  border:1px solid var(--sand);
}
.fp-legend-dot.suite { background:rgba(196,165,123,0.18); border-color:var(--saffron); }
.fp-legend-dot.queen { background:var(--cream); border-color:var(--sand); }
.fp-legend-dot.dortoir { background:var(--cream); border-color:var(--sand); }
.fp-legend-balcony-icon {
  color:var(--saffron);
  font-size:14px;
  line-height:1;
}

/* Highlight a room when scrolled to from the plan */
.room-row.highlighted {
  animation:roomHighlight 1.4s ease-out;
}
@keyframes roomHighlight {
  0%   { background:transparent; }
  20%  { background:rgba(196,165,123,0.25); }
  100% { background:transparent; }
}

/* ─── QUICK LINKS BAR — Valmorel page (webcams, météo, pistes) ─── */
.quick-links {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin:16px 0 4px;
}
.quick-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:14px 8px 12px;
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:all 0.2s var(--ease);
}
.quick-link:active {
  background:var(--cream-deep);
  transform:scale(0.97);
}
.quick-link-icon {
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(196,165,123,0.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.quick-link-icon svg {
  width:18px; height:18px;
  stroke:var(--saffron-deep);
  fill:none;
}
.quick-link-label {
  font-family:"DM Serif Display",serif;
  font-size:14px;
  line-height:1.1;
  color:var(--ink);
  margin-bottom:2px;
}
.quick-link-meta {
  font-family:"Fraunces",serif;
  font-size:10px;
  font-weight:300;
  color:var(--stone);
  font-style:italic;
}

/* ─── VALMOBUS — Live shuttle page ─── */
.valmobus-line {
  background:var(--cream);
  border:1px solid var(--sand);
  border-radius:16px;
  padding:18px 18px 14px;
  margin-bottom:14px;
}
.valmobus-line-head {
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--sand);
}
.valmobus-line-badge {
  display:inline-block;
  font-family:"Inter",sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:100px;
  margin-bottom:10px;
}
.valmobus-line-title {
  font-family:"DM Serif Display",serif;
  font-size:20px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:4px;
}
.valmobus-line-meta {
  font-family:"Fraunces",serif;
  font-size:13px;
  font-weight:300;
  font-style:italic;
  color:var(--stone);
}
.valmobus-departures {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.valmobus-direction {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:8px 0;
}
.valmobus-direction-arrow {
  font-family:"Inter",sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--saffron);
  flex-shrink:0;
  width:24px;
  text-align:center;
  margin-top:2px;
}
.valmobus-direction-body {
  flex:1;
  min-width:0;
}
.valmobus-direction-label {
  font-family:"Inter",sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:6px;
}
.valmobus-times {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.valmobus-time {
  display:inline-flex;
  flex-direction:column;
  padding:6px 12px;
  background:var(--cream-deep);
  border-radius:8px;
  min-width:64px;
}
.valmobus-time:first-child {
  background:var(--saffron);
  color:var(--ink);
}
.valmobus-time-h {
  font-family:"DM Serif Display",serif;
  font-size:16px;
  line-height:1.1;
}
.valmobus-time-min {
  font-family:"Inter",sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:0.05em;
  color:var(--stone);
  margin-top:1px;
}
.valmobus-time:first-child .valmobus-time-min {
  color:var(--ink);
  opacity:0.7;
}
.valmobus-empty {
  font-family:"Fraunces",serif;
  font-size:13px;
  font-style:italic;
  font-weight:300;
  color:var(--stone);
  padding:6px 0;
}
.valmobus-cta {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:var(--ink);
  color:var(--cream);
  border-radius:16px;
  text-decoration:none;
  margin:8px 0 18px;
  transition:transform 0.2s var(--ease);
}
.valmobus-cta:active {
  transform:scale(0.98);
}
.valmobus-cta-icon {
  width:40px; height:40px;
  border-radius:50%;
  background:var(--saffron);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.valmobus-cta-icon svg {
  width:20px; height:20px;
  stroke:var(--ink);
}
.valmobus-cta-text { flex:1; min-width:0; }
.valmobus-cta-title {
  font-family:"DM Serif Display",serif;
  font-size:16px;
  line-height:1.15;
  margin-bottom:2px;
}
.valmobus-cta-meta {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  font-style:italic;
  color:var(--cream);
  opacity:0.65;
}
.valmobus-source {
  font-family:"Fraunces",serif;
  font-size:11px;
  font-style:italic;
  font-weight:300;
  color:var(--stone);
  text-align:center;
  margin-top:8px;
}
.valmobus-source a {
  color:var(--saffron-deep);
  text-decoration:underline;
  text-decoration-color:rgba(139,111,71,0.3);
}

/* dark mode */
:root[data-theme="dark"] .valmobus-line {
  background:#1f1a16;
  border-color:#2e2722;
}
:root[data-theme="dark"] .valmobus-line-head { border-color:#2e2722; }
:root[data-theme="dark"] .valmobus-time {
  background:#2a221c;
}
:root[data-theme="dark"] .valmobus-time-min { color:#988577; }


/* ─── CHAT ACTION SHORTCUTS — inline buttons in bot replies ─── */
.chat-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.chat-action-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background:var(--saffron);
  color:var(--ink);
  border:none;
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s;
  white-space:nowrap;
}
.chat-action-btn:active {
  background:var(--saffron-deep);
  color:var(--cream);
  transform:scale(0.96);
}
.chat-action-btn svg {
  width:13px;
  height:13px;
  stroke:currentColor;
  flex-shrink:0;
}
.chat-action-btn.urgent {
  background:#a04030;
  color:var(--cream);
}
.chat-action-btn.chat-action-disabled {
  opacity:0.45;
  cursor:not-allowed;
  filter:grayscale(0.4);
}
.chat-action-btn.urgent:active {
  background:#8a3525;
}

/* ─── INSTALL MODAL — full-screen, conversion-focused ─── */
.install-modal {
  position:absolute;
  inset:0;
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity 0.3s ease;
}
.install-modal.visible {
  display:flex;
  opacity:1;
}
.install-modal-overlay {
  position:absolute;
  inset:0;
  background:rgba(26,22,19,0.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.install-modal-card {
  position:relative;
  width:100%;
  max-width:330px;
  max-height:84%;
  background:var(--cream);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(24px) scale(0.96);
  opacity:0;
  transition:transform 0.4s var(--ease), opacity 0.3s ease;
  box-shadow:0 24px 64px rgba(0,0,0,0.35);
}
.install-modal.visible .install-modal-card {
  transform:translateY(0) scale(1);
  opacity:1;
}
.install-modal-close {
  position:absolute;
  top:16px; right:16px;
  z-index:10;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(244,241,234,0.92);
  backdrop-filter:blur(8px);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:all 0.2s;
}
.install-modal-close:active {
  background:var(--cream);
  transform:scale(0.92);
}
.install-modal-close svg { width:14px; height:14px; }

.install-modal-hero {
  position:relative;
  height:120px;
  overflow:hidden;
  flex-shrink:0;
}
.install-modal-img {
  width:100%; height:100%;
  object-fit:cover;
}
.install-modal-hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(26,22,19,0.2) 0%,
    rgba(26,22,19,0.4) 50%,
    rgba(26,22,19,0.85) 100%);
}
.install-modal-hero-text {
  position:absolute;
  bottom:14px; left:18px; right:18px;
  color:var(--cream);
}
.install-modal-eyebrow {
  font-size:10px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--saffron);
  margin-bottom:8px;
}
.install-modal-title {
  font-family:"DM Serif Display",serif;
  font-weight:400;
  font-size:23px;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--cream);
}
.install-modal-title em {
  font-style:italic;
  color:var(--saffron);
}

.install-modal-body {
  padding:14px 18px 8px;
  overflow-y:auto;
  flex:1;
}

.install-benefit {
  display:flex;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--sand);
}
.install-benefit:last-child {
  border-bottom:none;
}
.install-benefit-icon {
  width:32px; height:32px;
  border-radius:12px;
  background:rgba(196,165,123,0.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.install-benefit-icon svg {
  width:17px; height:17px;
  stroke:var(--saffron-deep);
  fill:none;
}
.install-benefit-body {
  flex:1; min-width:0;
}
.install-benefit-title {
  font-family:"DM Serif Display",serif;
  font-size:15px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:4px;
}
.install-benefit-text {
  font-family:"Fraunces",serif;
  font-size:12px;
  font-weight:300;
  line-height:1.5;
  color:var(--ink-soft);
}

.install-modal-actions {
  padding:12px 18px 16px;
  background:var(--cream);
  border-top:1px solid var(--sand);
  display:flex; flex-direction:column; gap:10px;
}
.install-modal-cta {
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:13px 20px;
  background:var(--saffron);
  color:var(--ink);
  border:none;
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 16px rgba(196,165,123,0.35);
}
.install-modal-cta:active {
  background:var(--saffron-deep);
  color:var(--cream);
  transform:scale(0.98);
}
.install-modal-cta svg {
  width:18px; height:18px;
  stroke:currentColor;
}
.install-modal-later {
  background:none;
  border:none;
  color:var(--stone);
  font-family:"Fraunces",serif;
  font-size:13px;
  font-style:italic;
  cursor:pointer;
  padding:8px;
  transition:color 0.2s;
}
.install-modal-later:active {
  color:var(--ink);
}

/* While the chat panel is open, hide bottom toasts to avoid overlap */
.chat-panel.open ~ .tip-toast { display:none !important; }

/* ─── FLOATING TIP TOAST ─── */
.tip-toast {
  position:absolute;
  left:16px; right:88px;  /* laisse le champ libre au bouton chat (56px + marges) */
  bottom:calc(96px + var(--safe-bottom) + 16px);
  z-index:88;  /* below install if both visible */
  display:none;
  align-items:flex-start;
  gap:10px;
  padding:14px 12px 14px 14px;
  background:var(--cream);
  color:var(--ink-soft);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(26,22,19,0.12), 0 2px 6px rgba(0,0,0,0.06);
  border:1px solid var(--saffron);
  border-left:3px solid var(--saffron);
  transform:translateY(20px);
  opacity:0;
  pointer-events:none;
  transition:transform 0.4s var(--ease), opacity 0.3s ease;
  cursor:pointer;
}
.tip-toast.visible {
  display:flex;
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.tip-toast-icon {
  width:32px; height:32px;
  border-radius:10px;
  background:rgba(196,165,123,0.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tip-toast-icon svg {
  width:18px; height:18px;
  stroke:var(--saffron-deep);
}
.tip-toast-body {
  flex:1; min-width:0;
}
.tip-toast-eyebrow {
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--saffron-deep);
  margin-bottom:4px;
  font-weight:600;
  font-family:"Inter",sans-serif;
}
.tip-toast-text {
  font-family:"DM Serif Display",serif;
  font-style:italic;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  /* Allow up to 3 lines visible, fade the rest */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tip-toast-close {
  background:rgba(26,22,19,0.06);
  border:none;
  width:28px; height:28px;
  border-radius:50%;
  color:var(--stone);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all 0.2s;
  margin-top:-2px;
}
.tip-toast-close:active {
  background:rgba(26,22,19,0.12);
  color:var(--ink);
}
.tip-toast-close svg { width:12px; height:12px; }

/* ═══════════════════════════════════════════════════════
   DARK MODE — overrides for hardcoded colors
   ═══════════════════════════════════════════════════════
   The :root[data-theme="dark"] block already redefines core variables.
   This section handles specific places where colors are hardcoded
   (translucent surfaces with literal RGB, sticky bars with rgba cream, etc.)
*/

:root[data-theme="dark"] .top-bar {
  background:rgba(29,24,21,0.92);
  border-bottom-color:rgba(61,52,44,0.5);
}
:root[data-theme="dark"] .lang-toggle {
  background:rgba(240,235,225,0.08);
}
:root[data-theme="dark"] .bottom-nav {
  background:rgba(29,24,21,0.94);
  border-top-color:rgba(61,52,44,0.5);
}
:root[data-theme="dark"] .detail-back {
  background:rgba(42,35,30,0.92);
  color:var(--ink);
}
:root[data-theme="dark"] .locked .locked-overlay {
  background:rgba(29,24,21,0.7);
}
:root[data-theme="dark"] .activity-num {
  background:rgba(42,35,30,0.95);
  color:var(--ink);
}
:root[data-theme="dark"] .countdown-icon {
  background:rgba(0,0,0,0.25);
}
:root[data-theme="dark"] .quick-icon,
:root[data-theme="dark"] .equip-icon,
:root[data-theme="dark"] .contact-icon,
:root[data-theme="dark"] .rule-icon,
:root[data-theme="dark"] .install-benefit-icon,
:root[data-theme="dark"] .quick-link-icon,
:root[data-theme="dark"] .topic-card-icon,
:root[data-theme="dark"] .tip-toast-icon {
  background:rgba(212,184,140,0.12);
}
:root[data-theme="dark"] .quick-featured .quick-icon {
  background:rgba(212,184,140,0.2);
}
:root[data-theme="dark"] .check-item:active {
  background:rgba(212,184,140,0.06);
}
:root[data-theme="dark"] .chat-close,
:root[data-theme="dark"] .install-toast-close {
  background:rgba(240,235,225,0.08);
  color:var(--ink-soft);
}
:root[data-theme="dark"] .chat-close:active {
  background:rgba(240,235,225,0.16);
}
:root[data-theme="dark"] .install-modal-close {
  background:rgba(42,35,30,0.92);
  color:var(--ink);
}
:root[data-theme="dark"] .tip-toast-close {
  background:rgba(240,235,225,0.08);
  color:var(--stone);
}
:root[data-theme="dark"] .tip-toast-close:active {
  background:rgba(240,235,225,0.16);
  color:var(--ink);
}
/* Emergency / error contexts — keep red signal but adapt to dark */
:root[data-theme="dark"] .form-error {
  background:rgba(160,64,48,0.18);
  color:#f5b8ad;
}
:root[data-theme="dark"] .emergency-banner {
  background:rgba(160,64,48,0.15);
  border-color:rgba(160,64,48,0.4);
}
:root[data-theme="dark"] .emergency-banner-text {
  color:#f5b8ad;
}
:root[data-theme="dark"] .rule-icon.warn {
  background:rgba(160,64,48,0.18);
}
:root[data-theme="dark"] .contact-icon.urgent {
  background:rgba(160,64,48,0.18);
}
/* Info blocks — keep their semantic colors but darken */
:root[data-theme="dark"] .info-block {
  background:var(--cream-deep) !important;
  border-color:var(--sand) !important;
}
:root[data-theme="dark"] .info-block-label,
:root[data-theme="dark"] .info-block-value,
:root[data-theme="dark"] .info-block-note {
  color:var(--ink) !important;
}

/* Hero overlays should remain visually similar in dark mode (the photo behind is dark already) */
:root[data-theme="dark"] .hero-bg::after,
:root[data-theme="dark"] .detail-hero::after,
:root[data-theme="dark"] .install-modal-hero-overlay {
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.9) 100%);
}

/* Chat panel surface */
:root[data-theme="dark"] .chat-panel {
  background:var(--cream);
  border-top-color:var(--sand);
}
:root[data-theme="dark"] .chat-messages {
  background:linear-gradient(180deg, var(--cream-deep) 0%, var(--cream) 100%);
}
:root[data-theme="dark"] .chat-msg.bot {
  background:var(--cream-deep);
  border-color:var(--sand);
  color:var(--ink-soft);
}
:root[data-theme="dark"] .chat-msg.bot strong { color:var(--ink); }
:root[data-theme="dark"] .chat-msg.user {
  background:var(--saffron-deep);
  color:var(--ink);
}
:root[data-theme="dark"] .chat-input {
  background:var(--cream-deep);
  color:var(--ink);
}
:root[data-theme="dark"] .chat-input:focus {
  background:var(--cream);
  border-color:var(--saffron);
}
:root[data-theme="dark"] .chat-send {
  background:var(--saffron);
  color:#1d1815;
}
:root[data-theme="dark"] .chat-suggestion {
  background:var(--cream-deep);
  border-color:var(--saffron);
  color:var(--saffron);
}
:root[data-theme="dark"] .chat-fallback-btn {
  background:var(--cream-deep);
  color:var(--ink);
}
:root[data-theme="dark"] .chat-fallback-btn:active {
  background:var(--sand);
}

/* Sheet (bottom sheet modal) */
:root[data-theme="dark"] .sheet-overlay {
  background:rgba(0,0,0,0.65);
}

/* Quick access tile background image overlay — make sure cards don't lose contrast */
:root[data-theme="dark"] .quick-tile,
:root[data-theme="dark"] .list-item,
:root[data-theme="dark"] .partner-card-v2,
:root[data-theme="dark"] .activity-card,
:root[data-theme="dark"] .topic-card,
:root[data-theme="dark"] .route-card,
:root[data-theme="dark"] .quick-link,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .check-item,
:root[data-theme="dark"] .faq-item {
  background:var(--cream-deep);
  border-color:var(--sand);
}

/* Footer / partner action buttons */
:root[data-theme="dark"] .partner-action.secondary,
:root[data-theme="dark"] .activity-action.secondary {
  background:var(--sand);
  color:var(--ink);
}

/* Booking card */
:root[data-theme="dark"] .booking-card {
  background:var(--cream-deep);
  border-color:var(--sand);
}

/* Install modal card */
:root[data-theme="dark"] .install-modal-card {
  background:var(--cream);
}
:root[data-theme="dark"] .install-modal-actions {
  background:var(--cream);
  border-top-color:var(--sand);
}

/* Tip toast already uses cream/sand, just gets the darker variant naturally */
:root[data-theme="dark"] .tip-toast {
  background:var(--cream-deep);
  border-color:var(--saffron);
  border-left-color:var(--saffron);
}

/* PRODUCTION OVERRIDE — disable the iPhone preview frame on guide.arpian-valmorel.com */
@media (min-width: 769px) {
  .device-shell {
    background: var(--cream) !important;
    padding: 0 !important;
    align-items: stretch !important;
    min-height: 100vh;
  }
  .device-frame {
    max-width: 480px !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: 0 0 60px rgba(26,22,19,0.08) !important;
  }
  .device-notch { display: none !important; }
}

/* ───────────────────────────────────────────────────────
   APP GATE — code d'accès à la première ouverture
   ─────────────────────────────────────────────────────── */
.app-gate { position:fixed; inset:0; z-index:1000; background:var(--cream); display:flex; align-items:center; justify-content:center; padding:32px 28px calc(32px + var(--safe-bottom, 0px)); opacity:1; transition:opacity 0.45s var(--ease); }
.app-gate-inner { width:100%; max-width:360px; text-align:center; }
.app-gate-logo { display:flex; justify-content:center; margin-bottom:28px; }
.app-gate-logo-img { height:44px; width:auto; }
.app-gate-title { font-family:"DM Serif Display",serif; font-weight:400; font-size:26px; line-height:1.15; color:var(--ink); margin-bottom:14px; }
.app-gate-title em { font-style:italic; color:var(--saffron-deep); }
.app-gate-sub { font-family:"Fraunces",serif; font-size:15px; font-weight:300; line-height:1.6; color:var(--stone); margin-bottom:24px; }
.app-gate-input { text-align:center; font-size:18px; letter-spacing:0.08em; margin-bottom:14px; }
.app-gate-cta { width:100%; justify-content:center; }
.app-gate .form-error { text-align:left; }
.app-gate-leaving { opacity:0; pointer-events:none; }

/* ── Attribution multi-occupants ── */
.tribe-capacity { font-family:"Inter",sans-serif; font-size:12px; letter-spacing:0.04em; color:var(--stone); background:var(--cream-deep); border-radius:10px; padding:10px 14px; text-align:center; margin:0 0 16px; font-weight:500; }
.tribe-capacity.full { background:var(--saffron); color:var(--ink); font-weight:600; }
.fp-pin-count { position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--ink); color:var(--cream); font-family:"Inter",sans-serif; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; }
.fp-pin-assigned { background:var(--ink); color:var(--saffron); }
.fp-pin-full { background:var(--saffron-deep); color:#fff; }
.room-assign-cap { font-family:"Inter",sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); text-align:center; padding:4px 0 12px; border-bottom:1px solid var(--sand); margin-bottom:8px; }
.room-assign-occupant { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--cream-deep); border-radius:12px; margin-bottom:8px; }
.room-assign-occupant .room-assign-name { font-family:"Fraunces",serif; font-size:15px; color:var(--ink); }
.room-assign-remove { width:30px; height:30px; border-radius:50%; border:none; background:rgba(26,22,19,0.06); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.room-assign-remove svg { width:15px; height:15px; stroke:var(--stone); }
.room-assign-remove:active { background:rgba(26,22,19,0.12); }
.room-assign-hint { font-family:"Inter",sans-serif; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--saffron-deep); }
.room-assign-option.disabled { opacity:0.4; pointer-events:none; }
.room-assign-note { font-family:"Fraunces",serif; font-size:13px; font-style:italic; color:var(--stone); text-align:center; padding:14px 0 4px; }

/* Placeholder plan appartement (en attendant le rendu) */
.floorplan-placeholder { aspect-ratio:4/3; border:2px dashed var(--sand); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--cream-deep); color:var(--stone); }
.floorplan-placeholder svg { width:36px; height:36px; opacity:0.5; }
.floorplan-placeholder span { font-family:"Fraunces",serif; font-style:italic; font-size:14px; }

/* ── Valmobus : accordéon tous les horaires ── */
.valmobus-allhours { margin-top:12px; border:1px solid var(--sand); border-radius:14px; overflow:hidden; }
.valmobus-allhours-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:var(--cream); border:none; cursor:pointer; font-family:"Inter",sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--ink); }
.valmobus-allhours-chevron { width:18px; height:18px; stroke:var(--saffron-deep); transition:transform 0.2s; flex-shrink:0; }
.valmobus-allhours.open .valmobus-allhours-chevron { transform:rotate(180deg); }
.valmobus-allhours-body { padding:4px 16px 16px; display:flex; flex-direction:column; gap:16px; }
.valmobus-allhours-col { }
.valmobus-allhours-dir { font-family:"Inter",sans-serif; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--saffron-deep); font-weight:600; margin-bottom:8px; }
.valmobus-allhours-times { display:flex; flex-wrap:wrap; gap:6px; }
.valmobus-allhours-times span { font-family:"Inter",sans-serif; font-size:13px; color:var(--ink); background:var(--cream-deep); border-radius:7px; padding:5px 9px; }