/* ============================================================
   Ma.Ni Medica — CRO hotfix layer
   Isolated patch. Loaded after the inline <style> so it wins on
   equal specificity. Folded into the token sheet in Phase 2.
   ============================================================ */

/* ---- 1. WCAG AA fix for the primary CTA -------------------
   Resting state was --terra (#723f67) on --terra-ink (#ffffff)
   = 3.96:1, which fails AA for body-size text. --terra-2
   (#4a2745) is 5.41:1 and passes. Resting and hover swap:
   the button now darkens on hover instead of lightening.     */
.btn-primary {
  background: var(--terra-2);
  box-shadow: 0 16px 30px -16px rgba(166, 74, 43, .7);
}
.btn-primary:hover {
  background: #7a3766;
  box-shadow: 0 22px 40px -16px rgba(143, 61, 34, .8);
}

/* Visible keyboard focus everywhere. */
.btn:focus-visible,
.callbar a:focus-visible,
#bookForm input:focus-visible,
#bookForm select:focus-visible,
#bookForm textarea:focus-visible {
  outline: 3px solid var(--terra-2);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- 2. Submit spinner (replaces the Phosphor icon) ------- */
.spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.125em;
  animation: mn-spin .7s linear infinite;
}
@keyframes mn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 2.4s; }
}

/* ---- 3. Submission failure panel --------------------------
   The old code showed the success panel even when nothing was
   sent. Failure is now visible, and always offers the phone.  */
.form-error {
  margin-top: 22px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-md);
  background: rgba(166, 74, 43, .07);
  border: 1px solid rgba(166, 74, 43, .28);
  border-left: 4px solid var(--terra-2);
}
.form-error[hidden] { display: none; }
.form-error h4 {
  font-size: 1.18rem;
  color: var(--ink);
  margin: 0 0 8px;
}
.form-error .fe-msg {
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 48ch;
}
.form-error .fe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.form-error .fe-actions .btn {
  padding: 12px 20px;
  border-radius: var(--r-pill);
}

/* Error text on invalid fields — was silent for screen readers. */
#bookForm .field.invalid input,
#bookForm .field.invalid select,
#bookForm .field.invalid textarea {
  border-color: var(--terra-2);
  background: rgba(166, 74, 43, .04);
}

/* ---- 4. Persistent quick-action bar ----------------------- */
@media (max-width: 760px) {
  .callbar a {
    min-height: 52px;             /* >= 44px touch target */
    text-decoration: none;
  }
  /* Resting call action failed contrast on --surface; darken it. */
  .callbar .cb-call {
    color: var(--terra-2);
    font-weight: 700;
  }
  .callbar .cb-book {
    background: var(--terra-2);
    /* fallback: without it a page missing the token drops the whole
       declaration and the label inherits the dark body ink */
    color: var(--terra-ink, #ffffff);
  }
  /* Clear the bar *and* the notch inset, not a magic 62px. */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* Never let the bar cover the form's own submit button. */
@media (max-width: 760px) {
  #bookForm { scroll-margin-bottom: 96px; }
  .form-error { scroll-margin-bottom: 96px; }
}

/* ---- 5. Breadcrumbs ---------------------------------------
   The hero eyebrow was already the page label, so it was
   promoted to <nav class="eyebrow crumbs">. That keeps each
   hero's own accent colour, rule and margin — these rules only
   have to handle the link states and the separator.          */
.crumbs { text-transform: uppercase; }
.crumbs a {
  color: inherit;
  text-decoration: none;
  opacity: .72;
  transition: opacity .25s;
}
.crumbs a:hover,
.crumbs a:focus-visible { opacity: 1; text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.crumbs .sep { opacity: .4; margin-inline: -3px; }
.crumbs [aria-current="page"] { opacity: 1; }

/* ---- 6. Branded <select> ----------------------------------
   A native select's popup cannot be styled — it renders in OS
   chrome that ignores the rest of the form. assets/js/select.js
   builds a listbox beside the real control and hides it; these
   rules dress that listbox. The [data-msel-ready] guard means
   nothing here applies until the script has actually run, so
   the plain select stays usable without JS.               */
.msel { position: relative; }
.msel select[data-msel-ready] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  opacity: 0;
  pointer-events: none;
}
.msel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font: inherit;
  font-size: .98rem;
  font-family: 'Alegreya Sans', sans-serif;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.msel-trigger.is-empty { color: var(--faint); }
.msel-trigger:hover { border-color: var(--terra); }
.msel-trigger:focus-visible {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(114, 63, 103, .12);
}
.field.invalid .msel-trigger { border-color: var(--terra-2); }
.msel-caret {
  flex: 0 0 auto;
  font-size: 1.05rem;
  color: var(--muted);
  transition: transform .25s var(--ease), color .25s;
}
.msel.is-open .msel-caret { transform: rotate(180deg); color: var(--terra); }

.msel-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 22px 50px -28px rgba(18, 12, 26, .45),
              0 2px 8px -4px rgba(18, 12, 26, .18);
  animation: msel-in .18s var(--ease) both;
}
.msel-list[hidden] { display: none; }
@keyframes msel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.msel-opt {
  padding: 10px 12px;
  border-radius: calc(var(--r-md) - 6px);
  font-size: .96rem;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
}
.msel-opt.is-placeholder { color: var(--faint); }
.msel-opt.is-active { background: var(--bg-2); color: var(--ink); }
.msel-opt[aria-selected="true"] {
  background: var(--terra-2);
  color: #fff;
  font-weight: 600;
}
.msel-opt[aria-selected="true"].is-active { background: var(--terra); }
/* "Επιλέξτε..." is the empty state, not a choice — never show it as chosen */
.msel-opt.is-placeholder[aria-selected="true"] {
  background: transparent;
  color: var(--faint);
  font-weight: inherit;
}
.msel-opt.is-placeholder.is-active { background: var(--bg-2); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .msel-list { animation: none; }
  .msel-caret { transition: none; }
}

/* ---- 7. Keep Leaflet underneath the header ----------------
   .lm-map is position:relative with z-index:auto, so it never
   opened a stacking context of its own. That let Leaflet's
   internal layers — panes at z-index 400, the zoom control at
   1000 — compete directly with header.nav at 120 and win, so
   the control painted over the menu. isolate confines all of
   them inside the card; z-index:0 is the same fix for anything
   too old to know `isolation`.                              */
.lm-map {
  isolation: isolate;
  position: relative;
  z-index: 0;
}