/*
 * Termin buchen page (page-termin-buchen.php) — dark-editorial split.
 * Dark persistent left column + ivory right column (VSTT reservation wizard,
 * repainted gold via re-scoped --mr-* custom properties — no plugin edit).
 * Reuses fsr-* tokens. Mobile-first; stacks ≤860px. Base specificity, no !important.
 */

/* Booking engine has visual priority: it gets the wider track (round-4 rebalance).
   Dark media/context panel is the supporting ~42%; ivory booking column ~58%. */
.bk-split { display:grid; grid-template-columns:0.85fr 1fr; align-items:stretch; background:var(--fsr-ivory); }

/* ---------- Dark left column (supporting context) ---------- */
.bk-side { background:var(--fsr-black); }
/* Vertical rhythm only — horizontal padding (left rail + inner gutter) is owned by
   salon.css round-4 (.bk-side__in { padding-left: var(--fsr-layout-edge) }) so the
   booking side panel aligns to the same rail as header/footer/sections. */
.bk-side__in { position:sticky; top:calc(var(--fsr-headh, 88px) + 4px); padding-block:clamp(44px,4.5vw,68px); }
.bk-side .fsr-h1 { color:#fff; margin:0; font-size:clamp(40px,4.4vw,60px); }
.bk-rule { display:block; width:64px; height:2px; background:var(--fsr-gold); margin:22px 0; }
.bk-side__lead { color:rgba(243,237,227,.82); font-size:15.5px; line-height:1.7; margin:0 0 28px; max-width:30em; }
/* smaller supporting photo so media no longer out-sizes the booking engine */
.bk-side__photo { position:relative; aspect-ratio:16/10; max-height:280px; overflow:hidden; border-radius:3px; margin-bottom:28px; }
.bk-side__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bk-side__contact { display:flex; flex-direction:column; gap:15px; margin-bottom:28px; }
.bk-channel { display:flex; align-items:center; gap:14px; color:rgba(243,237,227,.88); font-family:var(--fsr-sans); font-size:15px; text-decoration:none; }
.bk-channel:hover { color:#fff; }
.bk-channel__ic { width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(198,161,91,.5); display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); }
.bk-side__box { border:1px solid rgba(198,161,91,.5); border-radius:3px; padding:20px 22px; display:flex; flex-direction:column; gap:7px; }
.bk-side__box strong { font-family:var(--fsr-serif); font-size:18px; color:#fff; }
.bk-side__box span { color:rgba(243,237,227,.72); font-size:14px; line-height:1.6; }

/* ---------- Ivory right column (booking engine sits DIRECTLY on ivory — no card) ---------- */
.bk-main { background:var(--fsr-ivory); }
/* Fill the whole column: no narrow max-width, generous rail so Bookly uses the width. */
/* Right column: inner gutter on the left (split boundary), right edge pinned to the
   shared rail so the Bookly panel ends where header/footer/sections end. */
.bk-main__in { padding-block:clamp(40px,4vw,68px); padding-left:clamp(30px,3.5vw,56px); padding-right:var(--fsr-layout-edge); max-width:none; }
@media (max-width:860px){ .bk-main__in { padding-left:var(--fsr-layout-pad); padding-right:var(--fsr-layout-pad); } }
/* Bookly renders on the ivory surface — NO white plugin card, border, or shadow. */
.bk-form--bookly { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
/* Force every Bookly container to fill the column width (override plugin max-widths). */
.bk-form--bookly .bookly-form,
.bk-form--bookly .bookly-form > *,
.bk-form--bookly .bookly-box { width:100% !important; max-width:none !important; }
.bk-fallback { font-size:16px; color:var(--fsr-black); }
.bk-fallback a { color:var(--fsr-gold-ink); border-bottom:1px solid var(--fsr-gold); }
.bk-note { display:flex; gap:13px; align-items:flex-start; margin-top:28px; padding-top:24px; border-top:1px solid rgba(20,17,14,.12); }
.bk-note__ic { width:32px; height:32px; flex:0 0 auto; border:1px solid var(--fsr-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--fsr-gold-ink); font-size:15px; }
.bk-note p { margin:0; color:#5a5148; font-size:14px; line-height:1.65; }
.bk-note strong { color:var(--fsr-black); }

/* Reservation wizard — repaint the plugin's own theming vars (GOD-ISO bridge). */
.bk-form { min-height:360px; }
.bk-form .mr-step {
	--mr-primary: var(--fsr-gold-deep, #b08d46);
	--mr-primary-hover: #171310;
	--mr-focus: rgba(198,161,91,.20);
	--mr-border: #d9cdb6;
	--mr-input-bg: #fdfbf6;
	--mr-radius: 3px;
	border:1px solid #e4dac6;
	border-radius:4px;
	box-shadow:none;
	max-width:none;
	margin:0;
	padding:clamp(20px,3vw,30px);
}
/* Keep gold-outlined states legible as text-on-white (WCAG). */
.bk-form .mr-time-btn.active { color:var(--fsr-gold-ink); }

/* ---------- Trust strip ---------- */
.bk-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.bk-trust__item { display:flex; gap:16px; align-items:flex-start; }
.bk-trust__ic { flex:0 0 auto; width:46px; height:46px; color:var(--fsr-gold-ink); display:inline-flex; }
.bk-ico { width:100%; height:100%; }
.bk-trust__head { font-family:var(--fsr-serif); font-size:20px; color:var(--fsr-black); margin:0 0 8px; }
.bk-trust__item p { margin:0; color:#5a5148; font-size:14px; line-height:1.65; }

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
	.bk-split { grid-template-columns:1fr; }
	.bk-side__in { position:static; }
	.bk-main__in { max-width:none; }
	.bk-trust { grid-template-columns:1fr; gap:28px; }
}

/* ============================================================
   REAL Bookly widget — sits directly on the ivory surface (NO card).
   CSS-only repaint of the migrated plugin; flow untouched. Mobile-first and
   readable: min type sizes + >=44px touch targets, no font-shrinking to force
   desktop layout onto mobile. Uses .bk-form--bookly.bk-form--bookly for extra
   specificity where Bookly's own stylesheet fights back.
   ============================================================ */
.bk-form--bookly { min-height:360px; }
.bk-form--bookly .bookly-form { font-family:var(--fsr-sans); color:var(--fsr-black); font-size:16px; line-height:1.5; }
.bk-form--bookly .bookly-box { border:0; }

/* Progress tracker (desktop steps): readable, gold active. */
.bk-form--bookly .bookly-progress-tracker { color:#8a7f70; font-size:14px; letter-spacing:.02em; }
.bk-form--bookly .bookly-progress-tracker > .bookly-step-active,
.bk-form--bookly .bookly-progress-tracker > .active { color:var(--fsr-gold-ink); font-weight:600; }
.bk-form--bookly .bookly-progress-tracker .step > div:last-child { background:#e0d5c0; border-radius:2px; height:5px; }
.bk-form--bookly .bookly-progress-tracker .bookly-step-active > div:last-child,
.bk-form--bookly .bookly-progress-tracker .active > div:last-child { background:var(--fsr-gold); }

/* Field labels — readable uppercase gold-ink. */
.bk-form--bookly .bookly-col-label,
.bk-form--bookly .bookly-form-group > label,
.bk-form--bookly .bookly-form-group legend {
  font-family:var(--fsr-sans); font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fsr-gold-ink); line-height:1.4; display:block; margin-bottom:6px;
}

/* Inputs & selects — outlined on ivory, >=46px tall, 15px+, clean truncation. */
.bk-form--bookly.bk-form--bookly select,
.bk-form--bookly.bk-form--bookly input[type="text"],
.bk-form--bookly.bk-form--bookly input[type="email"],
.bk-form--bookly.bk-form--bookly input[type="tel"],
.bk-form--bookly.bk-form--bookly input[type="number"],
.bk-form--bookly.bk-form--bookly textarea {
  box-sizing:border-box; width:100%; font-family:var(--fsr-sans); font-size:15px !important; color:var(--fsr-black);
  background:#fdfbf6; border:1px solid #d9cdb6; border-radius:2px;
  min-height:46px !important; height:auto !important; padding:11px 40px 11px 14px; line-height:1.45;
}
/* selects: keep the value legible + truncate cleanly with ellipsis, room for arrow. */
.bk-form--bookly.bk-form--bookly select { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b08d46' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; }
.bk-form--bookly.bk-form--bookly textarea { min-height:104px; padding-right:14px; }
.bk-form--bookly.bk-form--bookly select:focus,
.bk-form--bookly.bk-form--bookly input:focus,
.bk-form--bookly.bk-form--bookly textarea:focus { border-color:var(--fsr-gold); box-shadow:0 0 0 1px var(--fsr-gold); outline:none; }

/* Buttons (ladda) — gold, readable, >=48px. */
.bk-form--bookly.bk-form--bookly .bookly-btn,
.bk-form--bookly.bk-form--bookly .ladda-button {
  background:var(--fsr-gold); color:#171310; border:0; border-radius:2px;
  font-family:var(--fsr-sans); font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 26px; min-height:48px; cursor:pointer; transition:.22s ease;
}
.bk-form--bookly.bk-form--bookly .bookly-btn:hover,
.bk-form--bookly.bk-form--bookly .ladda-button:hover { background:var(--fsr-gold-deep); color:#100d0b; }
.bk-form--bookly .bookly-left .bookly-btn,
.bk-form--bookly .bookly-js-back-step { background:transparent; border:1px solid rgba(20,17,14,.28); color:var(--fsr-gold-ink); }

/* Datepicker calendar: gold selection. */
.bk-form--bookly .bookly-js-datepicker-calendar .bookly-available-date.selected,
.bk-form--bookly .bookly-js-datepicker-calendar .selected,
.bk-form--bookly .picker__day--selected { background:var(--fsr-gold); color:#171310; border-radius:50%; }

/* ---------- Mobile Bookly (<=600px): stack full-width, larger type/touch ---------- */
@media (max-width:600px){
  .bk-form--bookly .bookly-form { font-size:16px; }
  /* break Bookly's table layout so each control is full width */
  .bk-form--bookly .bookly-table,
  .bk-form--bookly .bookly-table > .bookly-form-group { display:block; width:100%; }
  .bk-form--bookly .bookly-form-group { display:block; width:100%; margin-bottom:16px; }
  .bk-form--bookly.bk-form--bookly select,
  .bk-form--bookly.bk-form--bookly input,
  .bk-form--bookly.bk-form--bookly textarea { font-size:16px !important; min-height:50px !important; }
  .bk-form--bookly .bookly-col-label,
  .bk-form--bookly .bookly-form-group > label { font-size:13px; }
  .bk-form--bookly.bk-form--bookly .bookly-btn,
  .bk-form--bookly.bk-form--bookly .ladda-button { width:100%; font-size:16px; min-height:52px; }
  .bk-form--bookly .bookly-mobile-next-step,
  .bk-form--bookly .bookly-mobile-prev-step { font-size:16px !important; min-height:50px; width:100%; justify-content:center;
    background:var(--fsr-gold); color:#171310; border:0; border-radius:2px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    display:inline-flex; align-items:center; margin-top:8px; }
  .bk-form--bookly .bookly-mobile-prev-step { background:transparent; border:1px solid rgba(20,17,14,.28); color:var(--fsr-gold-ink); }
  .bk-form--bookly .bookly-progress-tracker { font-size:13px; }
}

/* Email row: address link nested inside .bk-channel (icon outside the anchor
   so the Email Shield cannot strip it). Inherit the row's styling. */
.bk-channel__link { color:inherit; text-decoration:none; }
.bk-channel__link:hover { color:#fff; }