/* ═══════════════════════════════════════════════════════════
   Barber Shop Ivan — Booking Widget v3 (Premium)
   @version    1.11
   @updated    2026-04-23 18:30
   @changes    Spillover visual parity (v1.22 JS): (1) .bk-cal-spillover .bk-avail-bubble { opacity:0.45 } — Nino/Petra pillovi u spillover danima muted, dijele vizualnu priču s brojem dana. (2) .bk-cal-spillover.bk-cal-holiday { opacity:0.4 } — blagdani u spilloveru zadržavaju ljubičasti accent ali blijedi, ne dominiraju. (3) Cijela spillover ćelija ostaje klikabilna za month jump.
   @path       ~/barbershopivan.hr/assets/booking.css
   ═══════════════════════════════════════════════════════════ */

/* ── Progress Bar ── */
.bk-progress { display:flex; gap:3px; padding:10px 0 4px; }
.bk-prog-seg { flex:1; height:3px; background:#1a1a1a; border-radius:2px; transition:background 0.4s ease; }
.bk-seg-done { background:#1a4a35; }
.bk-seg-active { background:#c5a55a; }
.bk-step-label { font-size:0.6rem; color:#444; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:8px; }

/* ── Title ── */
.bk-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; margin:0 0 2px; color:#f0ebe0; }
.bk-subtitle { font-size:0.82rem; color:#666; margin:0 0 16px; }

/* ── Back Button ── */
.bk-back-btn {
  display:inline-flex; align-items:center; gap:4px; background:none;
  border:1px solid #222; border-radius:6px; color:#666; font-size:0.72rem;
  cursor:pointer; font-family:inherit; margin-bottom:10px; padding:6px 12px;
  line-height:1;
  transition:all 0.2s;
}
.bk-back-btn:hover { color:#c5a55a; border-color:#c5a55a; }
.bk-back-arrow {
  display:inline-block; font-size:0.95rem; line-height:1;
  transform:translateY(-1px);
}

/* ── Service Cards ── */
.bk-services { display:grid; grid-template-columns:1fr; gap:6px; }
.bk-service-card {
  text-align:left; padding:12px 16px; background:#111; border:1.5px solid #1e1e1e;
  border-radius:12px; cursor:pointer; font-family:inherit; color:#f0ebe0;
  transition:all 0.25s ease; display:flex; align-items:center; width:100%;
  gap:14px; position:relative; overflow:hidden;
}
.bk-service-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(135deg, rgba(197,165,90,0.08), transparent);
  transition:width 0.3s ease;
}
.bk-service-card:hover { border-color:#333; }
.bk-service-card:hover::before { width:100%; }
.bk-service-card:active { transform:scale(0.98); }
.bk-svc-selected { border-color:#c5a55a !important; background:#0f0f0f !important; }
.bk-svc-selected::before { width:100% !important; }
.bk-svc-img { width:96px; height:96px; border-radius:10px; object-fit:cover; flex-shrink:0; filter:sepia(0.15) brightness(0.9); opacity:0.85; transition:all 0.25s; }
.bk-service-card:hover .bk-svc-img { opacity:1; filter:sepia(0) brightness(1); }
.bk-svc-selected .bk-svc-img { opacity:1; filter:sepia(0) brightness(1); }
.bk-svc-top { display:flex; justify-content:space-between; align-items:center; flex:1; min-width:0; }
.bk-svc-info { flex:1; min-width:0; }
.bk-svc-name { font-family:'Playfair Display',serif; font-weight:600; font-size:0.95rem; }
.bk-svc-price { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:#c5a55a; letter-spacing:0.04em; flex-shrink:0; }
.bk-svc-desc { font-size:0.72rem; color:#555; line-height:1.4; margin:3px 0 0; }
.bk-svc-meta { display:none; }

/* ── Category Labels ── */
.bk-cat-label { font-size:0.72rem; font-weight:600; color:#c5a55a; letter-spacing:0.12em; margin-bottom:6px; }
.bk-cat-opt { color:#444; font-weight:400; letter-spacing:0; font-size:0.68rem; }

/* ── Beard Grid ── */
.bk-beard-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; }
.bk-beard-card {
  padding:8px 6px; background:#111; border:1.5px solid #1e1e1e; border-radius:10px;
  text-align:center; cursor:pointer; font-family:inherit; color:#f0ebe0;
  transition:all 0.25s ease; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.bk-beard-card:hover { border-color:#333; }
.bk-beard-card:active { transform:scale(0.96); }
.bk-beard-selected { border-color:#c5a55a !important; background:#0f0f0f !important; }
.bk-beard-img { width:36px; height:36px; border-radius:50%; object-fit:cover; filter:sepia(0.2); opacity:0.8; transition:all 0.25s; }
.bk-beard-card:hover .bk-beard-img { opacity:1; filter:sepia(0); }
.bk-beard-selected .bk-beard-img { opacity:1; filter:sepia(0); }
.bk-beard-name { font-size:0.78rem; font-weight:500; margin-bottom:2px; color:#999; }
.bk-beard-selected .bk-beard-name { color:#f0ebe0; }
.bk-beard-price { font-size:0.95rem; font-weight:800; color:#c5a55a; }

/* ── Total ── */
.bk-total { border-top:1px solid #1a1a1a; padding-top:10px; margin-top:12px; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; }
.bk-total span { font-size:0.82rem; color:#666; }
.bk-total strong { font-size:1.5rem; color:#c5a55a; font-family:'Bebas Neue',sans-serif; }

/* ── Calendar ── */
.bk-cal { background:#111; border-radius:10px; padding:14px 14px; margin-bottom:10px; border:1px solid #1a1a1a; }
.bk-cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.bk-cal-month { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; }
.bk-cal-nav {
  background:none; border:none; color:#c5a55a; cursor:pointer;
  padding:8px 14px; font-size:1.35rem; line-height:1;
  min-width:40px; min-height:40px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
  -webkit-appearance:none; appearance:none;
}
.bk-cal-nav:hover:not(:disabled) { background:rgba(197,165,90,0.08); color:#d4b46a; }
.bk-cal-nav:disabled { opacity:0.15; cursor:default; }

/* v1.9: subtle pulse na › kad je user u zadnjih 7 dana mjeseca (signal "postoji više") */
@keyframes bk-cal-nav-pulse {
  0%, 100% { transform:translateX(0); color:#c5a55a; }
  50%      { transform:translateX(3px); color:#e3c477; }
}
.bk-cal-nav-pulse { animation:bk-cal-nav-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bk-cal-nav-pulse { animation:none; }
}
.bk-cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.bk-cal-weekdays div { text-align:center; font-size:0.65rem; color:#444; font-weight:700; padding:3px 0; letter-spacing:0.06em; text-transform:uppercase; }
.bk-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.bk-cal-day {
  min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:5px 1px 3px; gap:2px; border:1px solid #1e1e1e; background:#0f0f0f; color:#f0ebe0;
  font-size:0.88rem; font-family:inherit; cursor:pointer; border-radius:8px;
  transition:all 0.15s;
}
.bk-cal-day:hover:not(:disabled) { border-color:#333; background:rgba(197,165,90,0.06); }
.bk-cal-disabled { color:#2a2a2a; cursor:default; border-color:transparent; background:transparent; }
.bk-cal-sunday { color:#3a2020; border-color:transparent; background:transparent; }
.bk-cal-selected { background:#c5a55a !important; color:#0a0a0a !important; font-weight:700; border-color:#c5a55a !important; }
.bk-cal-today { border:1.5px solid rgba(197,165,90,0.8); color:#c5a55a; }
.bk-cal-holiday { background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.3) !important; }
.bk-cal-holiday .bk-cal-day-num { color:#a78bfa; text-decoration:line-through; }
/* v1.9+: Spillover days — dani prev/next mjeseca, faded */
/* v1.10: klikabilni (jump na taj mjesec + select), disabled samo kad je prev mjesec past */
.bk-cal-spillover {
  color:#2a2a2a; border-color:transparent !important; background:transparent !important;
  cursor:pointer;
}
.bk-cal-spillover:hover:not(:disabled) {
  background:rgba(197,165,90,0.04) !important;
  border-color:rgba(197,165,90,0.15) !important;
}
.bk-cal-spillover:disabled {
  cursor:default; pointer-events:none;
}
.bk-cal-spillover .bk-cal-day-num { opacity:0.5; }
/* v1.11: bubbles i blagdani u spilloveru muted — vizualno drže istu priču bez da preuzimaju pažnju */
.bk-cal-spillover .bk-avail-bubble { opacity:0.45; }
.bk-cal-spillover.bk-cal-holiday {
  background:rgba(139,92,246,0.05) !important;
  border-color:rgba(139,92,246,0.15) !important;
  opacity:0.55;
}
.bk-cal-day-num { line-height:1; }
.bk-avail-bubbles { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; width:100%; }
.bk-avail-bubble { font-size:8px; font-weight:700; line-height:1; padding:2px 4px; border-radius:8px; color:#fff; text-align:center; flex:1; min-width:0; }
.bk-avail-nino  { background:#378ADD; }
.bk-avail-petra { background:#D4537E; }
/* v1.3: "radi ali full" — muted pill s "0", vizualno kaže "ne bookaj" bez da sakriva info */
.bk-avail-bubble.bk-avail-full { opacity:0.35; }

/* ── Availability Legend ── */
.bk-avail-legend {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px; padding:6px 10px;
  background:#0a0a0a; border:1px solid #1a1a1a; border-radius:8px;
  font-size:11px; color:#aaa;
}
.bk-avail-legend-label { color:#888; margin-right:2px; }
.bk-avail-legend-item { display:flex; align-items:center; gap:4px; color:#d0d0d0; }
/* v1.3: čist colored dot za legendu (bez broja unutra) — naslijeđuje background iz .bk-avail-nino / .bk-avail-petra */
.bk-avail-legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* ── Time Slots ── */
.bk-slots { display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.bk-slot {
  padding:10px 2px; background:#111; border:1.5px solid #1e1e1e; border-radius:8px;
  color:#888; font-size:0.85rem; font-family:'Bebas Neue',sans-serif;
  letter-spacing:0.04em; cursor:pointer; transition:all 0.2s; text-align:center;
}
.bk-slot:hover { border-color:#333; color:#f0ebe0; }
.bk-slot:active { transform:scale(0.95); }
.bk-slot-selected { background:#1a4a35 !important; border-color:#39ff7f !important; color:#39ff7f !important; }
.bk-slot-group-label { font-size:0.72rem; color:#c5a55a; font-weight:600; margin:10px 0 5px; letter-spacing:0.04em; }
.bk-slots-header {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:0.78rem; color:#c5a55a; font-weight:500;
  margin:8px 0 4px; padding-top:8px;
  border-top:1px solid #1a1a1a;
}
.bk-slots-date { flex:0 0 auto; }

/* v1.5: stalni barber chip pored datuma — uvijek vidljiv kontekst */
.bk-barber-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px;
  border:1.5px solid var(--chip-color, #c5a55a);
  background:#0f0f0f; color:#f0ebe0;
  font-size:10px; font-weight:600; letter-spacing:0.02em;
  transition:all 0.25s ease;
}
.bk-chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* v1.5: pulse glow na chip-u i aktivnom switcher pill-u — trigger iz S.barberPulse */
@keyframes bk-pulse-glow {
  0%, 100% { box-shadow:0 0 0 0 transparent; }
  50%      { box-shadow:0 0 14px 3px var(--chip-color, var(--pill-color, #c5a55a)); }
}
.bk-chip-pulse { animation:bk-pulse-glow 600ms ease-in-out 2; }
.bk-pill-pulse { animation:bk-pulse-glow 600ms ease-in-out 2; }

/* v1.5: slot fade-in kad stignu novi slotovi nakon barber switch */
@keyframes bk-slots-enter {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.bk-slots-enter .bk-slots,
.bk-slots-enter .bk-slot-group-label,
.bk-slots-enter .bk-empty,
.bk-slots-enter .bk-empty-smart { animation:bk-slots-enter 400ms ease-out both; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bk-chip-pulse, .bk-pill-pulse,
  .bk-slots-enter .bk-slots,
  .bk-slots-enter .bk-slot-group-label,
  .bk-slots-enter .bk-empty,
  .bk-slots-enter .bk-empty-smart { animation:none; }
}

/* ── Form ── */
.bk-form { display:flex; flex-direction:column; gap:0; }
.bk-field { margin-bottom:16px; }
.bk-field label { display:block; font-size:0.72rem; color:#555; margin-bottom:5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.bk-field input {
  width:100%; padding:14px 16px; background:#111; border:1.5px solid #1e1e1e;
  border-radius:10px; color:#f0ebe0; font-size:1rem; font-family:inherit;
  outline:none; transition:all 0.25s; box-sizing:border-box;
  -webkit-appearance:none;
}
.bk-field input:focus { border-color:#c5a55a; background:#0f0f0f; }
.bk-field input::placeholder { color:#333; }
.bk-field input:-webkit-autofill,
.bk-field input:-webkit-autofill:hover,
.bk-field input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 50px #111 inset !important;
  -webkit-text-fill-color:#f0ebe0 !important;
  border-color:#1e1e1e !important;
}

/* ── Input Wrap + Validation Checkmarks ── */
.bk-input-wrap { position:relative; }
.bk-input-wrap input { width:100%; padding-right:40px; }
.bk-check { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#39ff7f; font-size:15px; font-weight:700; pointer-events:none; opacity:0; transition:opacity 0.3s; }
.bk-check:not(:empty) { opacity:1; }

/* ── Summary ── */
.bk-summary { background:#111; border-radius:12px; padding:20px; border:1px solid #1a1a1a; }
.bk-sum-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.bk-sum-row span { font-size:0.78rem; color:#555; letter-spacing:0.02em; }
.bk-sum-row strong { font-size:0.9rem; text-align:right; color:#f0ebe0; }
.bk-sum-divider { height:1px; background:#1a1a1a; margin:2px 0; }
.bk-gold { color:#c5a55a !important; }

/* ── Primary Button ── */
.bk-primary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; background:#c5a55a; border:none; border-radius:10px;
  color:#0a0a0a; font-size:0.92rem; font-weight:700; font-family:inherit;
  cursor:pointer; transition:all 0.2s; margin-top:6px;
  letter-spacing:0.02em;
}
.bk-primary:hover { filter:brightness(1.1); }
.bk-primary:active { transform:scale(0.98); }
.bk-primary:disabled { opacity:0.4; cursor:default; transform:none; }
.bk-confirm-btn { background:#1a4a35; color:#39ff7f; }
.bk-confirm-btn:hover { background:#236b4e; }

/* ── Done ── */
.bk-done { text-align:center; padding:20px 0; }
.bk-done-icon {
  width:76px; height:76px; border-radius:50%; background:#1a4a35; color:#39ff7f;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.8rem; margin-bottom:14px; animation:bk-pop 0.4s ease-out;
}
@keyframes bk-pop { 0%{transform:scale(0);opacity:0} 50%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }
.bk-done-title { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; margin:0 0 6px; }
.bk-done-text { color:#666; font-size:0.88rem; margin:0 0 6px; }
.bk-done-note { font-size:0.78rem; color:#555; margin-top:12px; line-height:1.6; }
.bk-done-card { background:#111; border-radius:10px; padding:16px; margin:14px 0; border:1px solid #1a1a1a; text-align:left; }

/* ── Misc ── */
.bk-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:30px 0; color:#666; }
.bk-spinner { width:20px; height:20px; border:2px solid #1a1a1a; border-top:2px solid #c5a55a; border-radius:50%; animation:bk-spin 0.8s linear infinite; }
@keyframes bk-spin { to { transform:rotate(360deg); } }
.bk-empty { color:#555; font-size:0.85rem; text-align:center; padding:24px 0; }

/* v1.4: Smart empty — personalizirana poruka + CTA za prebacivanje na drugog barbera */
.bk-empty-smart {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:20px 16px; background:#0a0a0a;
  border:1px solid #1a1a1a; border-radius:10px;
  color:#888;
}
.bk-empty-smart .bk-empty-msg {
  color:#c5a55a; font-size:0.9rem; font-weight:600; text-align:center;
}
.bk-empty-smart .bk-empty-alt {
  color:#aaa; font-size:0.82rem; text-align:center; line-height:1.4;
}
.bk-empty-smart .bk-empty-alt strong { color:#f0ebe0; font-weight:700; }
.bk-empty-cta {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:4px; padding:8px 18px; border-radius:22px;
  border:1.5px solid var(--pill-color, #c5a55a); background:#111;
  color:#f0ebe0; font-size:12px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:all 0.2s;
}
.bk-empty-cta:hover { background:var(--pill-color, #c5a55a); color:#000; }
.bk-empty-cta:active { transform:scale(0.97); }
.bk-empty-cta .bk-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bk-error { color:#ff6b6b; font-size:0.82rem; text-align:center; margin:10px 0; }

/* ── Barber Cards (FIFA) ── */
.bk-barbers { display:grid; grid-template-columns:1fr 1fr; gap:10px; justify-items:center; }
.bk-barber-card { background:transparent; border:none; cursor:pointer; padding:0; transition:all 0.25s ease; border-radius:16px; }
.bk-fifa-card { padding:0; background:transparent; border:2px solid transparent; border-radius:16px; overflow:hidden; transition:all 0.3s ease; }
.bk-fifa-card:hover { transform:scale(1.04); }
.bk-fifa-card:active { transform:scale(0.97); }
.bk-fifa-img { width:100%; max-width:200px; height:auto; display:block; border-radius:14px; margin:0 auto; }

/* ── Fullscreen Overlay ── */
.bk-fullscreen {
  position:fixed !important; inset:0; z-index:10000;
  background:#0a0a0a; overflow-y:auto; overflow-x:hidden;
  padding:14px 20px 32px; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center;
}
.bk-fullscreen > * { width:100%; max-width:480px; }
.bk-noscroll { overflow:hidden !important; }
.bk-close {
  position:sticky; top:12px; z-index:10; align-self:flex-end;
  background:#111; border:1px solid #1e1e1e; border-radius:50%;
  width:32px; height:32px; color:#666; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; margin-bottom:-32px; flex-shrink:0;
}
.bk-close:hover { border-color:#c5a55a; color:#c5a55a; background:#1a1a1a; }

/* ── Barber Switcher Pills ── */
.bk-barber-switcher { display:flex; gap:8px; margin-bottom:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.bk-switcher-label {
  font-size:12px; color:#888; font-weight:500;
  letter-spacing:0.01em;
}
.bk-barber-pill {
  display:flex; align-items:center; gap:5px;
  padding:6px 16px; border-radius:20px;
  border:1.5px solid #1e1e1e; background:#0f0f0f;
  color:#666; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all 0.25s;
}
.bk-barber-pill:hover { border-color:var(--pill-color); }
.bk-pill-active { border-color:var(--pill-color); color:#f0ebe0; background:#111; box-shadow:0 0 12px rgba(0,0,0,0.3); }
.bk-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Privacy / Consent ── */
.bk-privacy { font-size:0.75rem; color:#555; margin:12px 0 16px; line-height:1.5; }
.bk-consent-card { background:#111; border:1px solid #1a1a1a; border-radius:10px; padding:12px 14px; margin:10px 0 16px; }
.bk-consent { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:0.78rem; color:#888; line-height:1.5; }
.bk-consent input[type="checkbox"] { margin-top:2px; accent-color:#c5a55a; width:18px; height:18px; flex-shrink:0; cursor:pointer; border-radius:4px; }
.bk-consent span { flex:1; }
.bk-consent a { color:#c5a55a; }

/* ── Field Hints ── */
.bk-field-hint { font-size:0.78rem; line-height:1.5; margin-top:6px; padding:8px 12px; border-radius:8px; }
.bk-field-hint-warn { background:rgba(197,165,90,0.08); border:1px solid rgba(197,165,90,0.2); color:#c5a55a; }
.bk-field-hint-error { background:rgba(196,30,58,0.06); border:1px solid rgba(196,30,58,0.15); color:#ff8a95; }
.bk-field-hint a, .bk-hint-fix, .bk-hint-cancel { color:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }

/* ── Confetti ── */
.bk-confetti { position:fixed; top:0; left:0; right:0; height:100vh; pointer-events:none; overflow:hidden; z-index:10001; max-width:none !important; }
.bk-confetti-piece { position:absolute; top:-10px; width:8px; height:8px; border-radius:2px; animation:bk-fall linear forwards; opacity:0.9; }
@keyframes bk-fall { 0%{transform:translateY(0) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }

/* ── Entry Screen ── */
.bk-entry { text-align:center; padding:20px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:280px; }
.bk-entry-title { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:#f0ebe0; margin:0 0 6px; }
.bk-entry-sub { font-size:0.85rem; color:#666; margin:0 0 20px; line-height:1.5; }
.bk-entry-btn { max-width:320px; margin:0 auto; }

/* ── Responsive ── */
@media (min-width: 768px) {
  .bk-fullscreen { padding:32px 20px 40px; background:#050505; }
  .bk-fullscreen > * { max-width:480px; }
  .bk-barbers { gap:16px; }
  .bk-fifa-img { max-width:200px; }
  .bk-close { top:20px; width:36px; height:36px; }
}
@media (max-width: 500px) {
  .bk-barbers { grid-template-columns:1fr 1fr; gap:8px; }
  .bk-beard-grid { grid-template-columns:repeat(2, 1fr); }
  .bk-fullscreen { padding:12px 14px 28px; }
  .bk-fullscreen > * { max-width:100%; }
  .bk-fifa-img { max-width:160px; }
  .bk-title { font-size:1.2rem; }
  .bk-service-card { padding:10px 14px; gap:12px; }
  .bk-svc-img { width:76px; height:76px; border-radius:8px; }
}
@media (max-width: 380px) {
  .bk-svc-name { font-size:0.85rem; }
  .bk-svc-price { font-size:1.1rem; }
  .bk-service-card { padding:8px 12px; gap:10px; }
  .bk-svc-img { width:60px; height:60px; }
}

/* Hide ALL page elements when booking is fullscreen */
body.bk-noscroll::before { display:none !important; }
body.bk-noscroll nav { display:none !important; }
body.bk-noscroll .pole-premium { display:none !important; }
body.bk-noscroll .divider { display:none !important; }
body.bk-noscroll .scroll-top { display:none !important; }
body.bk-noscroll #brat-bubble { display:none !important; }
body.bk-noscroll .booking { position:static !important; overflow:visible !important; }
body.bk-noscroll .booking::before { display:none !important; }
body.bk-noscroll section:not(.booking) { display:none !important; }
body.bk-noscroll .hero { display:none !important; }
body.bk-noscroll footer { display:none !important; }

/* ── Flip Hint Peek Animation (v1.8) ── */
/* Pokazuje se samo jednom po sesiji na odabiru frizera.
   Staggered preko JS-a (Nino prvo, Petra 150ms kasnije). */
@keyframes bk-flip-peek {
  0%   { transform:rotateY(0deg); }
  40%  { transform:rotateY(15deg); }
  70%  { transform:rotateY(-5deg); }
  100% { transform:rotateY(0deg); }
}
.bk-barber-card.bk-flip-hint .bk-fifa-flipper {
  animation: bk-flip-peek 900ms cubic-bezier(.4,.1,.3,1);
  transform-origin:center center;
}