/*
 * Location: /public_html/assets/css/main.css
 * File: main.css
 * Function: All custom styles — Between Psychodietetyk Warszawa
 * Version: 7.0.0
 *
 * Changelog:
 * v7.0.0 - 2025-04-16 - 8:1 contrast on all text tokens;
 *                        books full-width (no rail-grid); multi-slot
 *                        booking (up to 3 proposals, multi-time, multi-contact)
 * v6.0.0 - 2025-04-15
 * v5.0.0 - 2025-04-15 - New primary colour #FFD04E (gold); full palette swap;
 *                        dynamic per-request image regeneration with 6 pastel
 *                        theme variants; gold focus ring, gold CTA colour
 * v4.0.0 - 2025-04-15 - Removed .btn-booksy entirely; added booking-
 *                        calendar, timeslot grid, availability badge,
 *                        confirmation modal, booking-status styles;
 *                        .btn-primary is now the sole primary CTA
 * v3.1.0 - 2025-04-15 - Extracted from index.php
 * v3.0.0 - 2025-04-15 - Full content rewrite
 */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --gold:        #FFD04E;
  --gold-mid:    #C6A23C;
  --gold-light:  #FFE9AF;
  --gold-pale:   #FFF3D2;
  --gold-ultra:  #FFFAED;
  --terra:       #C6703E;
  --terra-light: #EFCFB8;
  --terra-pale:  #F7EDE3;
  --ink:         #1A160C;
  --ink-80:      #28241C;
  --ink-60:      #423B30;
  --ink-40:      #3C342C;
  --ink-20:      #5A5142;
  --cream:       #FFFBF0;
  --gold-text:   #5A3E00;  /* 9.9:1 on white — links/accents */
  --badge-dark:  #503700;  /* 11.1:1 on gold-pale */
  --white:       #ffffff;
  --line:        rgba(26,22,12,.10);
  --line-mid:    rgba(26,22,12,.16);
  --error:       #c0392b;
  --success:     #1A6B3A;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'DM Sans', system-ui, sans-serif;
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;
  --shadow-card: 0 4px 24px rgba(26,22,12,.06);
  --shadow-lift: 0 16px 48px rgba(26,22,12,.09);
  --focus-ring:  0 0 0 3px rgba(255,208,78,.40);
  --t: .2s ease;
}

/* ═══════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.7; overflow-x: hidden; }
::selection { background: var(--gold-light); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; }
h1 { font-family: var(--serif); font-size: clamp(42px,6vw,76px); font-weight: 300; color: var(--ink); }
h2 { font-family: var(--serif); font-size: clamp(28px,4vw,52px); font-weight: 300; color: var(--ink); }
h1 em, h2 em { font-style: italic; color: var(--gold); }

/* ═══════════════════════════════════════════════
   3. WCAG 2.2
   ═══════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible, .f-input:focus-visible, .f-sel:focus-visible, .f-ta:focus-visible {
  box-shadow: var(--focus-ring) !important; outline: none;
}
.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #fff; padding: 10px 24px;
  border-radius: 0 0 var(--r-md) var(--r-md); font-size: 14px; font-weight: 500;
  z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════
   4. LAYOUT
   ═══════════════════════════════════════════════ */
.section { padding: 96px 0; }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.divider { border: none; border-top: .5px solid var(--line); margin: 0; }
.rail-grid { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
.rail-label { padding-top: 4px; position: sticky; top: 90px; }
.rail-num { font-family: var(--serif); font-size: 12px; font-weight: 300; color: var(--ink-20); letter-spacing: .06em; margin-bottom: 6px; }
.rail-name { font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.rail-line { display: block; width: 28px; height: 1px; background: var(--gold); margin-top: 8px; }
.tag-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tag-label::before { content: ''; width: 22px; height: 1px; background: var(--gold); flex-shrink: 0; }
.tag-label.light { color: var(--gold-light); }
.tag-label.light::before { background: var(--gold-light); }
.section-lead { font-size: 16px; color: var(--ink-60); line-height: 1.75; max-width: 500px; margin: 14px 0 44px; }

/* ═══════════════════════════════════════════════
   5. BUTTONS — only btn-primary + btn-ghost
   ═══════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r-sm); border: none;
  cursor: pointer; transition: background var(--t), transform var(--t);
  text-decoration: none; white-space: nowrap;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--sage-dark, #8C722A); color: var(--white);
  transform: translateY(-2px); text-decoration: none;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r-sm);
  border: .5px solid var(--line-mid); cursor: pointer;
  transition: all var(--t); text-decoration: none; white-space: nowrap;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════
   6. NAVBAR
   ═══════════════════════════════════════════════ */
.navbar-between {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040; padding: 0 5%;
  background: rgba(250,248,244,.93); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: .5px solid var(--line); height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--t);
}
.nav-brand { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--ink); letter-spacing: .02em; }
.nav-brand b { color: var(--gold); font-weight: 400; }
.nav-brand small { font-family: var(--sans); font-size: 10px; font-weight: 400; color: var(--ink-40); letter-spacing: .07em; text-transform: uppercase; margin-left: 8px; }
.nav-links-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 26px; align-items: center; }
.nav-links-list a { font-size: 11.5px; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-60); transition: color var(--t); padding: 4px 0; position: relative; }
.nav-links-list a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--t); }
.nav-links-list a:hover::after, .nav-links-list a:focus-visible::after { width: 100%; }
.nav-links-list a:hover { color: var(--gold); }
.nav-cta {
  background: var(--ink) !important; color: var(--gold) !important;
  padding: 9px 20px; border-radius: var(--r-sm);
  font-size: 11px !important; font-weight: 500 !important;
  transition: background var(--t) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: #8C722A !important; color: var(--white) !important; }
.navbar-toggler-custom { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; }
.navbar-toggler-custom span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: all .25s; border-radius: 1px; }
.offcanvas-overlay { display: none; position: fixed; inset: 0; background: rgba(26,22,12,.4); z-index: 1045; backdrop-filter: blur(3px); }
.offcanvas-overlay.open { display: block; }
.offcanvas-nav {
  position: fixed; top: 0; right: -100%; width: min(320px,88vw); height: 100vh;
  background: var(--cream); z-index: 1050; padding: 84px 40px 40px;
  display: flex; flex-direction: column; gap: 28px;
  transition: right .35s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 40px rgba(26,22,12,.1);
}
.offcanvas-nav.open { right: 0; }
.offcanvas-nav a { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--ink); transition: color var(--t); }
.offcanvas-nav a:hover { color: var(--gold); }
.offcanvas-close { position: absolute; top: 22px; right: 24px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════
   7. HERO
   ═══════════════════════════════════════════════ */
#hero { min-height: 100svh; padding-top: 120px; padding-bottom: 80px; background: var(--cream); position: relative; overflow: hidden; }
.hero-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-ring-1 { width: 600px; height: 600px; top: -160px; right: -120px; border: .5px solid rgba(122,148,117,.18); animation: ringPulse 8s ease-in-out infinite; }
.hero-ring-2 { width: 380px; height: 380px; top: -40px; right: 60px; border: .5px solid rgba(122,148,117,.12); animation: ringPulse 8s ease-in-out infinite .5s; }
.hero-ring-3 { width: 200px; height: 200px; bottom: 80px; left: 4%; background: var(--terra-pale); opacity: .6; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.04);opacity:.7;} }
.hero-content > * { animation: fadeUp .7s ease both; }
.hero-content > *:nth-child(1){animation-delay:.05s;}
.hero-content > *:nth-child(2){animation-delay:.15s;}
.hero-content > *:nth-child(3){animation-delay:.25s;}
.hero-content > *:nth-child(4){animation-delay:.35s;}
.hero-content > *:nth-child(5){animation-delay:.45s;}
.hero-content > *:nth-child(6){animation-delay:.55s;}
.hero-desc { font-size: 17px; color: var(--ink-60); line-height: 1.75; max-width: 460px; margin-bottom: 32px; }
.mode-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 40px; border: .5px solid var(--line-mid); font-size: 13px; color: var(--ink-60); background: var(--white); white-space: nowrap; }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-gold  { background: var(--gold); }
.dot-terra { background: var(--terra); }
.hero-card { background: var(--white); border: .5px solid var(--line); border-radius: var(--r-xl); padding: 34px; animation: fadeUp .9s .3s ease both; box-shadow: var(--shadow-card); }
.hero-card-quote { font-family: var(--serif); font-size: 19px; font-weight: 300; font-style: italic; line-height: 1.55; color: var(--ink); margin-bottom: 20px; padding-left: 16px; border-left: 2px solid var(--gold); }
.hero-card-author { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 20px; }
.hero-card-author strong { color: var(--gold); }
.hero-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: .5px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.stat-cell { background: var(--cream); padding: 13px; text-align: center; }
.stat-n { display: block; font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--ink); line-height: 1; }
.stat-l { display: block; font-size: 9px; color: var(--ink-40); letter-spacing: .07em; text-transform: uppercase; margin-top: 3px; }
.mode-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.badge-sage { background: var(--gold-pale); color: var(--gold); padding: 5px 11px; border-radius: 40px; font-size: 11px; font-weight: 500; }
.badge-warm { background: var(--terra-pale); color: #8a6a44; padding: 5px 11px; border-radius: 40px; font-size: 11px; font-weight: 500; }

/* ── Hero CTA box ── */
.hero-cta-box {
  margin-top: 20px; padding-top: 18px;
  border-top: .5px solid var(--line);
}
.hero-cta-label {
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════
   8. TRUST BAR
   ═══════════════════════════════════════════════ */
.trust-bar { background: var(--white); border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); padding: 18px 5%; }
.trust-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-60); font-weight: 400; letter-spacing: .04em; }
.trust-icon { color: var(--gold); font-size: 15px; }

/* ═══════════════════════════════════════════════
   9. ABOUT
   ═══════════════════════════════════════════════ */
.about-visual { background: var(--gold-pale); border-radius: var(--r-xl); aspect-ratio: 4/5; position: relative; overflow: hidden; }
.about-visual-bg { position: absolute; inset: 0; background: linear-gradient(145deg,var(--gold-light) 0%,var(--gold-pale) 55%,var(--terra-pale) 100%); }
.about-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; }
.about-chip { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border: .5px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; }
.about-chip-label { font-size: 9px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 2px; }
.about-chip-val { font-size: 13px; color: var(--ink); font-weight: 500; }
.about-quote { font-family: var(--serif); font-size: 19px; font-weight: 300; font-style: italic; line-height: 1.6; color: var(--ink-60); margin-bottom: 24px; padding-left: 18px; border-left: 2px solid var(--gold); }
.about-body { font-size: 15px; color: var(--ink-60); line-height: 1.75; margin-bottom: 26px; }
.cred-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.cred-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-60); }
.cred-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 8px; }
.ebm-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-pale); color: var(--badge-dark); padding: 7px 13px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; letter-spacing: .06em; margin-bottom: 20px; }
.gallup-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.gallup-chip { padding: 6px 14px; border-radius: 40px; background: var(--terra-pale); color: #4A2800; font-size: 12px; font-weight: 500; letter-spacing: .05em; }

/* ═══════════════════════════════════════════════
   10. STEPS
   ═══════════════════════════════════════════════ */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); background: var(--line); gap: 1px; border: .5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.step-card { background: var(--white); padding: 32px 24px; transition: background var(--t); }
.step-card:hover { background: var(--gold-ultra); }
.step-num { display: block; font-family: var(--serif); font-size: 48px; font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 16px; }
.step-title { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.step-desc { font-size: 13px; color: var(--ink-40); line-height: 1.65; }

/* ═══════════════════════════════════════════════
   11. SPECIALISATIONS (dark)
   ═══════════════════════════════════════════════ */
.bg-ink { background: var(--ink); }
.spec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.06); border: .5px solid rgba(255,255,255,.06); border-radius: var(--r-lg); overflow: hidden; }
.spec-card { background: rgba(255,255,255,.04); padding: 28px 22px; transition: background var(--t); }
.spec-card:hover { background: rgba(255,255,255,.08); }
.spec-icon { font-size: 22px; margin-bottom: 14px; display: block; line-height: 1; }
.spec-title { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--cream); margin-bottom: 7px; line-height: 1.3; }
.spec-desc { font-size: 13px; color: rgba(250,248,244,.4); line-height: 1.65; }

/* ═══════════════════════════════════════════════
   12. SERVICES
   ═══════════════════════════════════════════════ */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card { background: var(--white); border: .5px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; transition: transform var(--t), box-shadow var(--t); position: relative; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.service-card.featured { border-color: var(--gold); border-width: 1.5px; }
.featured-badge { position: absolute; top: 14px; right: 14px; background: var(--gold-pale); color: var(--gold); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 40px; }
.service-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--gold-pale); display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 14px; color: var(--gold); }
.service-title { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.service-desc { font-size: 13px; color: var(--ink-40); line-height: 1.65; margin-bottom: 20px; }
.service-price { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); }
.service-price small { font-family: var(--sans); font-size: 11px; color: var(--ink-40); font-weight: 400; }
.service-note { font-size: 11px; color: var(--gold-text); margin-top: 6px; }

/* ═══════════════════════════════════════════════
   13. BOOKS
   ═══════════════════════════════════════════════ */
.book-card { background: var(--white); border: .5px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; gap: 18px; align-items: flex-start; transition: box-shadow var(--t); }
.book-card:hover { box-shadow: var(--shadow-lift); }
.book-cover { width: 64px; height: 80px; border-radius: var(--r-sm); background: linear-gradient(135deg,var(--gold-pale),var(--terra-pale)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.book-title { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
.book-desc { font-size: 13px; color: var(--ink-60); line-height: 1.65; margin-bottom: 10px; }
.book-link { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-text); display: inline-flex; align-items: center; gap: 5px; }
.book-link:hover { color: #8C722A; }

/* ═══════════════════════════════════════════════
   14. TESTIMONIALS
   ═══════════════════════════════════════════════ */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.t-card { background: var(--cream); border: .5px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.t-stars { color: var(--terra); font-size: 12px; letter-spacing: 3px; margin-bottom: 10px; }
.t-text { font-family: var(--serif); font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.6; color: var(--ink); margin-bottom: 14px; }
.t-author { font-size: 11px; color: var(--ink-40); letter-spacing: .07em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════
   15. FAQ ACCORDION
   ═══════════════════════════════════════════════ */
.faq-accordion .accordion-item { border: .5px solid var(--line)!important; border-radius: var(--r-md)!important; background: var(--white); margin-bottom: 8px; overflow: hidden; }
.faq-accordion .accordion-button { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink); background: var(--white); padding: 18px 22px; box-shadow: none!important; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--gold); background: var(--gold-ultra); }
.faq-accordion .accordion-button::after { filter: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M1 1l5.5 6 5.5-6' stroke='%235A3E00' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 13px; width: 18px; height: 18px; }
.faq-accordion .accordion-body { font-size: 15px; color: var(--ink-60); line-height: 1.75; padding: 0 22px 18px; }

/* ═══════════════════════════════════════════════
   16. CONTACT
   ═══════════════════════════════════════════════ */
.contact-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--gold-pale); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 15px; flex-shrink: 0; }
.contact-lbl { font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 2px; }
.contact-val { font-size: 14px; color: var(--ink); }
.contact-val a { color: var(--ink); transition: color var(--t); }
.contact-val a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════
   17. NATIVE BOOKING SYSTEM
   ═══════════════════════════════════════════════ */

/* ── Booking wrapper ── */
.booking-form {
  background: var(--white); border: .5px solid var(--line);
  border-radius: var(--r-xl); padding: 36px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-card);
}
.booking-form::before {
  content: ''; position: absolute; top: -70px; right: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--gold-pale); pointer-events: none;
}
.form-title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 4px; position: relative; z-index: 1; }
.form-subtitle { font-size: 13px; color: var(--ink-40); margin-bottom: 22px; position: relative; z-index: 1; }

/* ── Progress ── */
.f-progress { display: flex; gap: 4px; margin-bottom: 24px; }
.f-prog-step { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .3s; }
.f-prog-step.done { background: var(--gold-light); }
.f-prog-step.active { background: var(--gold); }
.f-step-label { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); padding-bottom: 12px; margin-bottom: 18px; border-bottom: .5px solid var(--line); }
.f-panel { display: none; }
.f-panel.on { display: block; }

/* ── Inputs ── */
.f-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 6px; }
.f-req { color: var(--gold); margin-left: 2px; }
.f-group { margin-bottom: 15px; }
.f-hint { font-size: 11px; color: var(--ink-40); margin-top: 4px; }
.f-input, .f-sel, .f-ta {
  width: 100%; border: .5px solid var(--line-mid); border-radius: var(--r-sm);
  padding: 10px 13px; font-family: var(--sans); font-size: 14px;
  color: var(--ink); background: var(--cream); outline: none;
  transition: border-color var(--t), background var(--t);
  appearance: none; -webkit-appearance: none;
}
.f-input:focus, .f-sel:focus, .f-ta:focus { border-color: var(--gold); background: var(--white); box-shadow: var(--focus-ring); }
.f-ta { height: 78px; resize: vertical; }
.f-sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233C342C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; }
.f-input.err, .f-sel.err { border-color: var(--error); }
.f-err { font-size: 11px; color: var(--error); margin-top: 4px; display: none; }
.f-err.show { display: block; }

/* ── Calendar month navigator ── */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav-title {
  font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--ink);
}
.cal-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-pale); border: .5px solid var(--gold-light);
  color: var(--gold); font-size: 14px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: background var(--t);
}
.cal-nav-btn:hover { background: var(--gold-light); }
.cal-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Calendar grid ── */
.cal-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 4px; margin-bottom: 6px;
}
.cal-day-header {
  text-align: center; font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40); padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: 13px; cursor: pointer;
  border: .5px solid transparent; transition: all .15s;
  position: relative;
}
.cal-day.empty { cursor: default; }
.cal-day.past { color: var(--ink-20); cursor: not-allowed; }
.cal-day.today { font-weight: 600; color: var(--gold); }
.cal-day.has-slots { background: var(--gold-pale); color: var(--ink); }
.cal-day.has-slots:hover { background: var(--gold-light); border-color: var(--gold); }
.cal-day.has-slots.sel { background: var(--gold); color: var(--white); border-color: var(--gold); }
.cal-day.no-slots { color: var(--ink-20); cursor: not-allowed; }
/* Availability dot */
.cal-day.has-slots::after {
  content: ''; position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%); width: 4px; height: 4px;
  border-radius: 50%; background: var(--gold);
}
.cal-day.has-slots.sel::after { background: var(--white); }
.cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; margin-bottom: 16px;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-40);
}
.cal-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dot-available { background: var(--gold-pale); border: 1px solid var(--gold-light); }
.dot-selected  { background: var(--gold); }
.dot-unavail   { background: var(--line); }

/* ── Time slots ── */
.timeslots-wrap {
  background: var(--cream); border: .5px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
  margin-bottom: 14px;
}
.timeslots-date {
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}
.timeslots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px,1fr));
  gap: 7px;
}
.timeslot {
  padding: 9px 4px; border-radius: var(--r-sm);
  border: .5px solid var(--line-mid); font-size: 13px; font-weight: 500;
  color: var(--ink-60); background: var(--white); cursor: pointer;
  text-align: center; transition: all .15s;
}
.timeslot:hover { border-color: var(--gold); color: var(--gold); }
.timeslot.sel { background: var(--gold); border-color: var(--gold); color: var(--white); }
.timeslot.taken { background: var(--line); color: var(--ink-20); cursor: not-allowed; border-color: transparent; }
.timeslots-empty {
  font-size: 13px; color: var(--ink-40); text-align: center;
  padding: 16px 0;
}
.no-date-selected {
  font-size: 13px; color: var(--ink-40); text-align: center;
  padding: 22px 0; border: .5px dashed var(--line-mid);
  border-radius: var(--r-md);
}

/* ── Visit mode cards (inline, no Booksy) ── */
.term-card { border: .5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 9px; background: var(--cream); }
.term-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.term-badge { width: 21px; height: 21px; border-radius: 50%; background: var(--gold-pale); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.term-lbl { font-size: 13px; font-weight: 500; color: var(--ink); }
.term-sub { font-size: 11px; color: var(--ink-40); margin-left: auto; }
.term-sub.req { color: var(--gold); }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.f-chip { padding: 7px 13px; border-radius: 40px; border: .5px solid var(--line-mid); font-size: 13px; color: var(--ink-60); background: var(--white); cursor: pointer; transition: all .15s; user-select: none; }
.f-chip:hover { border-color: var(--gold); color: var(--gold); }
.f-chip.sel { background: var(--gold); border-color: var(--gold); color: var(--white); }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-card { border: .5px solid var(--line-mid); border-radius: var(--r-md); padding: 12px; cursor: pointer; transition: all .15s; display: flex; align-items: flex-start; gap: 9px; background: var(--white); }
.opt-card:hover { border-color: var(--gold); }
.opt-card.sel { border-color: var(--gold); background: var(--gold-pale); }
.opt-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--gold-pale); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.opt-title { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 1px; }
.opt-desc { font-size: 11px; color: var(--ink-40); line-height: 1.4; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: .5px solid var(--line); border-radius: var(--r-md); background: var(--white); margin-bottom: 8px; }
.toggle-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.toggle-desc { font-size: 11px; color: var(--ink-40); margin-top: 1px; }
.toggle-sw { width: 38px; height: 21px; border-radius: 11px; background: var(--line-mid); position: relative; cursor: pointer; border: none; outline: none; transition: background .2s; flex-shrink: 0; }
.toggle-sw.on { background: var(--gold); }
.toggle-sw::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform .2s; }
.toggle-sw.on::after { transform: translateX(17px); }
.dojazd-info { background: var(--gold-pale); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--ink-60); line-height: 1.65; }
.dojazd-info strong { color: var(--gold); display: block; margin-bottom: 4px; }

/* ── Booking confirmation banner ── */
.booking-confirm-banner {
  background: var(--gold-pale); border: 1px solid var(--gold-light);
  border-radius: var(--r-md); padding: 14px 16px;
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.booking-confirm-banner .bi { color: var(--gold); font-size: 18px; flex-shrink: 0; }
.booking-confirm-text { font-size: 13px; color: var(--ink-60); line-height: 1.5; }
.booking-confirm-text strong { color: var(--gold); }

/* ── Summary ── */
.sum-card { background: var(--cream); border: .5px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 14px; }
.sum-sec { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.sum-sec::after { content: ''; flex: 1; height: .5px; background: var(--gold-light); }
.sum-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: .5px solid var(--line); }
.sum-row:last-child { border-bottom: none; padding-bottom: 0; }
.sum-k { font-size: 12px; color: var(--ink-40); flex-shrink: 0; }
.sum-v { font-size: 12px; color: var(--ink); font-weight: 500; text-align: right; }
.sum-term { background: var(--gold-pale); border-radius: var(--r-sm); padding: 6px 10px; margin-bottom: 5px; font-size: 12px; color: var(--ink-60); display: flex; align-items: center; gap: 6px; }
.sum-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.sum-gdpr { background: var(--gold-ultra); border-radius: var(--r-md); padding: 11px 13px; font-size: 11px; color: var(--ink-40); line-height: 1.65; margin-bottom: 14px; }
.sum-gdpr a { color: var(--gold); text-decoration: underline; }
.f-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.f-back { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-40); background: transparent; border: none; display: flex; align-items: center; gap: 5px; padding: 0; cursor: pointer; transition: color var(--t); }
.f-back:hover { color: var(--ink); }
.f-next { background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; border: none; padding: 11px 22px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 7px; cursor: pointer; transition: background var(--t), transform var(--t); }
.f-next:hover { background: var(--gold); transform: translateY(-1px); }
.f-submit { background: var(--gold); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; border: none; padding: 14px 28px; border-radius: var(--r-sm); width: 100%; margin-top: 2px; cursor: pointer; transition: background var(--t); display: flex; align-items: center; justify-content: center; gap: 8px; }
.f-submit:hover { background: #8C722A; }
.form-success { text-align: center; padding: 34px 16px; }
.success-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--gold-pale); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--gold); }
.success-h { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
.success-p { font-size: 14px; color: var(--ink-60); line-height: 1.65; max-width: 320px; margin: 0 auto; }

/* ── Availability badge in services ── */
.avail-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: var(--success);
  background: rgba(39,174,96,.1); border-radius: 40px;
  padding: 3px 10px; margin-top: 8px;
}
.avail-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ═══════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════ */
footer { background: var(--ink); color: rgba(250,248,244,.6); padding: 52px 5% 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-brand { font-family: var(--serif); font-size: 19px; font-weight: 300; color: var(--cream); margin-bottom: 6px; }
.footer-brand b { color: var(--gold-mid); font-weight: 300; }
.footer-tagline { font-size: 13px; line-height: 1.65; max-width: 220px; }
.footer-col-h { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,248,244,.28); margin-bottom: 12px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 13px; color: rgba(250,248,244,.48); transition: color var(--t); }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom { border-top: .5px solid rgba(255,255,255,.07); padding: 15px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-copy, .footer-policy { font-size: 11px; color: rgba(250,248,244,.22); }
.footer-policy:hover { color: var(--gold-light); }

/* ═══════════════════════════════════════════════
   19. COOKIE BAR
   ═══════════════════════════════════════════════ */
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1060; background: var(--ink); border-top: .5px solid rgba(255,255,255,.08); padding: 14px 5%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cookie-txt { font-size: 13px; color: rgba(250,248,244,.55); max-width: 560px; line-height: 1.5; }
.cookie-txt a { color: var(--gold-light); text-decoration: underline; }
.cookie-acc { background: var(--gold); color: var(--ink); border: none; padding: 8px 18px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background var(--t); white-space: nowrap; }
.cookie-acc:hover { background: #8C722A; }
.cookie-dec { background: transparent; color: rgba(250,248,244,.4); border: .5px solid rgba(255,255,255,.15); padding: 8px 14px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: all var(--t); white-space: nowrap; }
.cookie-dec:hover { color: var(--cream); border-color: rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════
   20. ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════
   21. RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .rail-grid{grid-template-columns:1fr;} .rail-label{display:none;}
  .hero-card{display:none;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .spec-grid{grid-template-columns:1fr 1fr;}
  .services-grid{grid-template-columns:1fr;}
  .testimonials-grid{grid-template-columns:1fr;}
  .about-visual{aspect-ratio:3/2;max-height:280px;}
  .timeslots-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));}
}
@media(max-width:768px){
  .section{padding:68px 0;}
  .nav-links-list{display:none;} .navbar-toggler-custom{display:flex;}
  .steps-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
  .opt-grid{grid-template-columns:1fr;}
  .cookie-bar{flex-direction:column;align-items:flex-start;}
  .hero-ring-1,.hero-ring-2{display:none;}
  .booking-form{padding:22px 16px;}
  .hero-stats-grid{grid-template-columns:1fr 1fr;}
  .cal-grid{gap:2px;}
  .cal-day{font-size:12px;}
  .timeslots-grid{grid-template-columns:repeat(4,1fr);}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
@media(forced-colors:active){
  .btn-primary,.f-next,.f-submit{border:2px solid ButtonText;}
}

/* ═══════════════════════════════════════════════
   DYNAMIC THEME INDICATOR (per-request variant)
   ═══════════════════════════════════════════════ */
.theme-badge {
  position: fixed;
  bottom: 80px; right: 12px;
  z-index: 900;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: .7;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(26,22,12,.12);
}

/* ════ v6.0.0 ADDITIONS ════ */
.badge-gold  { background:var(--gold-pale);  color:#6B4C0A; padding:5px 11px; border-radius:40px; font-size:11px; font-weight:500; }
.badge-terra { background:var(--terra-pale); color:#7A3B1E; padding:5px 11px; border-radius:40px; font-size:11px; font-weight:500; }
.hero-cred { font-size:13px; color:var(--ink-40); letter-spacing:.04em; margin-bottom:18px; }
.hero-cred .bi { color:var(--gold); }
.stat-unit { font-size:14px; }
.contact-list { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.contact-row  { display:flex; align-items:flex-start; gap:13px; }
.about-activity-row { display:flex; gap:10px; margin:16px 0 22px; }
.about-activity { flex:1; position:relative; border-radius:var(--r-md); overflow:hidden; }
.about-act-img { width:100%; height:120px; object-fit:cover; display:block; }
.about-act-label { position:absolute; bottom:0; left:0; right:0; background:rgba(26,22,12,.55); color:var(--gold-light); font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; text-align:center; }
.booking-form-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.booking-price-badge { background:var(--gold); color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.04em; padding:6px 14px; border-radius:var(--r-sm); white-space:nowrap; flex-shrink:0; }
.f-step-num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--gold); color:var(--ink); font-size:10px; font-weight:700; margin-right:7px; flex-shrink:0; }
.f-step-label { display:flex; align-items:center; }
.confirm-clear { background:transparent; border:none; color:var(--gold); font-size:18px; padding:0 4px; cursor:pointer; line-height:1; margin-left:auto; flex-shrink:0; }
.confirm-clear:hover { color:var(--ink); }
.submit-error { background:rgba(192,57,43,.08); border:.5px solid rgba(192,57,43,.3); border-radius:var(--r-sm); padding:11px 13px; font-size:13px; color:#c0392b; margin-bottom:12px; }
.success-alt { margin-top:14px; font-size:13px; color:var(--ink-40); }
.footer-social { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); border:.5px solid rgba(255,255,255,.12); color:rgba(255,251,240,.5); display:flex; align-items:center; justify-content:center; font-size:14px; transition:background var(--t),color var(--t); }
.footer-social:hover { background:var(--gold); color:var(--ink); }
.opt-grid-4 { grid-template-columns:repeat(4,1fr); }
.timeslots-section { margin-top:14px; }
.timeslots-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.timeslots-hint { font-size:11px; color:var(--ink-40); }
.cal-wrap { margin-bottom:6px; }
@media(max-width:600px){.opt-grid-4{grid-template-columns:1fr 1fr;}}

/* ════ Books full-width override ════ */
.books-full { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.book-card-full {
  background: var(--white);
  border: .5px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px 1fr;
  transition: box-shadow var(--t), transform var(--t);
  text-decoration: none;
  color: inherit;
}
.book-card-full:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.book-card-full:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.book-cover-full {
  background: var(--gold-pale);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
}
.book-cover-full img { width: 110px; height: 138px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(26,22,12,.18); }
.book-body { padding: 28px 24px; display: flex; flex-direction: column; }
.book-tag  { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--badge-dark); background: var(--gold-pale); padding: 3px 9px; border-radius: 4px; display: inline-block; margin-bottom: 10px; }
.book-title-lg { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.book-author { font-size: 12px; color: var(--ink-40); margin-bottom: 12px; }
.book-desc-lg  { font-size: 14px; color: var(--ink-60); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.book-buy {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--r-sm); align-self: flex-start;
  transition: background var(--t);
}
.book-buy:hover { background: #C6A23C; color: var(--ink); }

@media(max-width:768px) {
  .books-grid          { grid-template-columns: 1fr; }
  .book-card-full      { grid-template-columns: 120px 1fr; }
  .book-cover-full img { width: 80px; height: 100px; }
  .book-body           { padding: 18px 16px; }
  .book-title-lg       { font-size: 20px; }
}
@media(max-width:480px) {
  .book-card-full      { grid-template-columns: 1fr; }
  .book-cover-full     { padding: 20px; height: 180px; }
}

/* ════ Multi-slot / multi-contact booking ════ */

/* Proposal counter badge */
.slots-counter {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gold-pale); border: .5px solid var(--gold-light);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
}
.slots-counter-label { font-size: 12px; color: var(--badge-dark); font-weight: 500; }
.slots-counter-dots  { display: flex; gap: 6px; }
.slot-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--gold-mid); background: transparent;
  transition: background .15s;
}
.slot-dot.filled { background: var(--gold); border-color: var(--gold-mid); }

/* Chosen proposals list */
.proposals-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.proposal-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gold-pale); border: .5px solid var(--gold-light);
  border-radius: var(--r-sm); padding: 8px 12px;
}
.proposal-text { font-size: 12px; color: var(--badge-dark); font-weight: 500; }
.proposal-num  { font-size: 10px; font-weight: 700; color: var(--gold-mid);
                 background: var(--gold-light); width: 18px; height: 18px;
                 border-radius: 50%; display: flex; align-items: center;
                 justify-content: center; flex-shrink: 0; margin-right: 8px; }
.proposal-del  { background: transparent; border: none; color: var(--ink-40);
                 cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; }
.proposal-del:hover { color: var(--error); }

/* Add-proposal button */
.btn-add-slot {
  width: 100%; background: transparent;
  border: 1.5px dashed var(--gold-mid);
  border-radius: var(--r-sm); padding: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--badge-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--t), border-color var(--t);
  margin-bottom: 14px;
}
.btn-add-slot:hover  { background: var(--gold-pale); border-color: var(--gold); }
.btn-add-slot:disabled { opacity: .45; cursor: not-allowed; }

/* Multi-contact chips (allow multiple) */
.contact-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.contact-chip {
  display: flex; align-items: center; gap: 7px;
  border: .5px solid var(--line-mid); border-radius: var(--r-sm);
  padding: 9px 13px; cursor: pointer; background: var(--white);
  font-size: 13px; color: var(--ink-60);
  transition: all .15s;
}
.contact-chip .ci { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--gold-pale); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.contact-chip .ct { font-size: 12px; font-weight: 500; color: var(--ink); display: block; }
.contact-chip .cd { font-size: 11px; color: var(--ink-40); display: block; }
.contact-chip:hover { border-color: var(--gold-text); }
.contact-chip.sel  { border-color: var(--gold); background: var(--gold-pale); }
.contact-chip.sel .ct { color: var(--badge-dark); }
.contact-chip .chip-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--gold-mid); background: transparent; margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: transparent; }
.contact-chip.sel .chip-check { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Time-of-day period selector (multi) */
.period-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 12px; }
.period-chip {
  display: flex; align-items: center; gap: 6px;
  border: .5px solid var(--line-mid); border-radius: 40px;
  padding: 7px 14px; cursor: pointer; background: var(--white);
  font-size: 13px; color: var(--ink-60); transition: all .15s;
}
.period-chip.sel { background: var(--gold-pale); border-color: var(--gold); color: var(--badge-dark); font-weight: 500; }
.period-chip .pi { font-size: 14px; }

.cal-day.proposed { background: var(--gold-light); color: var(--badge-dark); font-weight:600; border: 1.5px solid var(--gold-mid); cursor: pointer; }
.cal-day.proposed::after { background: var(--badge-dark); }

/* ════ Contact section — 1-column stacked layout ════ */
#contact .rail-grid {
  display: block;  /* override grid — no sidebar */
}
#contact .rail-label {
  display: none;   /* hide the §09 sidebar label */
}
#contact .row.g-5 {
  flex-direction: column;
}
#contact .col-lg-4,
#contact .col-lg-8 {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
#contact .section-lead {
  max-width: 640px;
}
/* Info row goes horizontal on desktop */
#contact .contact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
  margin-bottom: 24px;
}
@media(max-width:600px) {
  #contact .contact-list { grid-template-columns: 1fr; }
}
/* Social links inline */
#contact .d-flex.flex-wrap.gap-2.mt-3 {
  margin-bottom: 32px;
}

/* ════ Contact section v7.1 — 1-column stacked ════ */
.contact-top {
  margin-bottom: 40px;
}
.contact-top-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 48px;
  align-items: start;
  margin-bottom: 28px;
}
.contact-top-desc {
  font-size: 16px; color: var(--ink-60); line-height: 1.75;
  padding-top: 8px; max-width: 580px;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  margin-bottom: 20px;
}
.booking-form-wrap {
  /* full width below the info block */
}

/* Calendar + timeslots side-by-side inside the form */
.cal-booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 14px;
}
.cal-col { min-width: 0; }
.slots-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.no-date-selected {
  flex: 1;
  font-size: 13px; color: var(--ink-40); text-align: center;
  padding: 28px 16px; border: .5px dashed var(--line-mid);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
}
.no-date-selected .bi { font-size: 24px; color: var(--gold-light); }

/* Period chips inside slots col — smaller */
.slots-col .period-chips { flex-wrap: wrap; gap: 6px; }
.slots-col .period-chip  { font-size: 12px; padding: 6px 10px; }

.f-step-hint {
  font-size: 11px; color: var(--ink-40); font-weight: 400; margin-left: 6px;
}

/* Cal legend — add proposed dot */
.dot-proposed { background: var(--gold-light); border: 1.5px solid var(--gold-mid); }

@media(max-width: 900px) {
  .contact-top-head { grid-template-columns: 1fr; gap: 12px; }
  .cal-booking-grid  { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
  .contact-info-grid { grid-template-columns: 1fr; gap: 10px; }
}