/* =============================================================================
   creator-skin.css — skórka motywu na kreator (wtyczka Mockup Creator)
   -----------------------------------------------------------------------------
   Wczytywany PO creator.css wtyczki. Nadpisuje tylko warstwę wyglądu:
   kroje, kolory z tokenów (tokens.css), promienie, „naklejkowe” cienie.
   NIE dotyka reguł układu — grid sceny, sticky, a zwłaszcza trybu telefonu
   (body:fixed, dolny arkusz, obsługa klawiatury) — to część działania
   kreatora, nie jego wyglądu.
   ========================================================================== */

/* --- podstawy ------------------------------------------------------------- */
body.bfmc-app {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.bfmc-app button, .bfmc-app input, .bfmc-app select, .bfmc-app textarea { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .01em; }
.muted { color: var(--text-muted); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--lg { width: 28px; height: 28px; }

/* Etykieta „techniczna” jak w mockupie: mono, wersaliki, rozstrzelona. */
.bfmc-slider, .bfmc-field, .bfmc-variants-label, .bfmc-charcount {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}

/* --- nagłówek aplikacji --------------------------------------------------- */
.bfmc-app-header {
  background: var(--header-bg); color: var(--header-text);
  padding: 10px 24px; min-height: 64px;
  border-bottom: var(--line-w) solid var(--ink); box-shadow: none;
}
.bfmc-app-brand img { max-height: 44px; }
.bfmc-app-brand span { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; }
.bfmc-app-back {
  color: var(--header-muted); font-size: var(--fs-2); font-weight: 600;
  padding: 8px 16px; border: 2px solid rgba(255,255,255,.18); border-radius: var(--radius-pill);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease-bounce);
}
.bfmc-app-back:hover { background: var(--cta); color: var(--cta-contrast); border-color: var(--cta); transform: translateY(-1px); }

/* --- tło sceny: siatka kropek jak w mockupie ------------------------------ */
.bfmc-app-root {
  background-color: var(--bg-alt);
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1.6px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.bfmc-app-loading { color: var(--text-muted); font-weight: 500; }
.bfmc-spinner { border-color: var(--border); border-top-color: var(--cta); }
.bfmc-stage { gap: 28px; padding: 28px 24px 40px; }

/* Kanwa: biała karta z obrysem 2 px i twardym cieniem — „odbitka na stole”. */
.bfmc-canvas-frame {
  background: var(--surface);
  border: var(--line-w) solid var(--ink); border-radius: var(--radius-md);
  box-shadow: var(--sticker); padding: 24px;
}
.bfmc-canvas-tip { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .01em; color: var(--text-muted); }
.bfmc-canvas-loading { background: rgba(255,255,255,.86); color: var(--text-muted); font-weight: 600; }

/* --- panel boczny --------------------------------------------------------- */
.bfmc-panel {
  background: var(--surface);
  border: var(--line-w) solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: none; padding: 22px;
}
.bfmc-panel-head h1 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-5);
  line-height: 1.1; letter-spacing: .01em; color: var(--text);
}
.bfmc-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-6); color: var(--text); }
.bfmc-price del { color: var(--text-faint); font-family: var(--font-body); font-weight: 500; }

/* Karty stref */
.bfmc-zone-card {
  background: var(--surface-2);
  border: 2px solid var(--border); border-radius: var(--radius-md); padding: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .25s var(--ease-bounce);
}
.bfmc-zone-card:hover { border-color: var(--border-strong); }
.bfmc-zone-card.active { background: var(--surface); border-color: var(--ink); box-shadow: var(--sticker-sm); transform: translate(-1px, -1px); }
.bfmc-zone-card.filled { background: var(--surface); }
.bfmc-zone-card-head { font-weight: 700; font-size: var(--fs-2); color: var(--text); }

/* Plakietki „zdjęcie” / „tekst” — naklejki lekko przekręcone, jak w mockupie. */
.bfmc-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; padding: 3px 9px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg);
}
.bfmc-badge.img { background: var(--cta); color: var(--cta-contrast); }
.bfmc-badge.txt { background: var(--mint); color: #141418; }

/* Strefa wgrywania */
.bfmc-dropzone {
  border: 2px dashed var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.bfmc-dropzone:hover, .bfmc-dropzone.drag { border-color: var(--ink); background: var(--brand-soft); color: var(--text); }
.bfmc-dropzone .material-icons { color: var(--brand); }
.bfmc-dropzone:hover .material-icons, .bfmc-dropzone.drag .material-icons { color: var(--ink); }
.bfmc-dropzone-label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0; text-transform: none; color: var(--text); }

/* Suwaki: żółty uchwyt z obrysem i mini-cieniem (jak .cr-range w mockupie). */
.bfmc-slider input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; accent-color: var(--cta); }
.bfmc-slider input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--border-strong); }
.bfmc-slider input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border-strong); }
.bfmc-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--cta); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.bfmc-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--cta); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* Małe przyciski regulacji → chipy */
.bfmc-mini {
  border: 2px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); font-family: var(--font-body); font-weight: 700;
  transition: border-color .18s var(--ease), transform .18s var(--ease-bounce), box-shadow .18s var(--ease);
}
.bfmc-mini:hover { background: var(--surface); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sticker-sm); }

/* Ocena jakości */
.bfmc-quality { border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.bfmc-quality.ok  { background: var(--success-soft); color: var(--success); }
.bfmc-quality.mid { background: var(--warning-soft); color: var(--warning); }
.bfmc-quality.bad { background: var(--danger-soft);  color: var(--danger); }

/* Pola tekstowe i wybory */
.bfmc-textinput, .bfmc-field select, .bfmc-field input {
  border: 2px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-3); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.bfmc-textinput:focus, .bfmc-field select:focus, .bfmc-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.bfmc-charcount { color: var(--text-faint); }

/* Warianty wzoru */
.bfmc-variant { border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); transition: border-color .18s var(--ease), transform .25s var(--ease-bounce), box-shadow .18s var(--ease); }
.bfmc-variant img { border-radius: 6px; background: var(--photo-tile); }
.bfmc-variant span { font-family: var(--font-body); font-weight: 600; }
.bfmc-variant:hover { border-color: var(--ink); transform: translateY(-2px); }
.bfmc-variant.is-active { border-color: var(--ink); color: var(--text); box-shadow: var(--sticker-sm); transform: translate(-1px, -1px); }

/* Zakładki (telefon) */
.bfmc-tab { border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-family: var(--font-body); font-weight: 700; }
.bfmc-tab.active { background: var(--brand); border-color: var(--ink); color: var(--brand-contrast); box-shadow: var(--sticker-sm); }
.bfmc-tab-dot { color: var(--success); }
.bfmc-tab.active .bfmc-tab-dot { color: var(--mint); }

/* --- zakup ---------------------------------------------------------------- */
.bfmc-buy { border-top: 2px dashed var(--border); }
.bfmc-buy-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--text-muted); }

.bfmc-btn {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-3);
  border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: transform .18s var(--ease-bounce), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.bfmc-btn-primary { background: var(--cta); color: var(--cta-contrast); border-color: var(--ink); box-shadow: var(--sticker-sm); }
.bfmc-btn-primary:not(:disabled):hover { background: var(--cta-hover); transform: translate(-2px, -2px); box-shadow: var(--sticker); }
.bfmc-btn-primary:not(:disabled):active { transform: translate(0, 0); box-shadow: var(--sticker-sm); }
.bfmc-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.bfmc-btn-ghost:not(:disabled):hover { background: var(--surface); border-color: var(--ink); transform: translateY(-2px); }
.bfmc-btn:disabled { opacity: .5; box-shadow: none; }

/* Pomoc „?” i toast */
.bfmc-help-fab {
  background: var(--ink); color: var(--cta); font-family: var(--font-display);
  border: 2px solid var(--ink); box-shadow: var(--sticker-sm);
}
.bfmc-help-fab:hover { background: var(--cta); color: var(--cta-contrast); transform: translate(-1px, -1px); box-shadow: var(--sticker); }
.bfmc-toast { background: var(--ink); color: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-3); font-family: var(--font-body); font-weight: 500; }

/* Okno sukcesu (kod projektu) */
.bfmc-overlay { background: var(--overlay); }
.bfmc-success { border: var(--line-w) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--sticker); }
.bfmc-success h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-6); line-height: 1.05; }
.bfmc-success p { color: var(--text-muted); }
.bfmc-success-preview { border: 2px solid var(--border-strong); border-radius: var(--radius-sm); }
.bfmc-success-close { color: var(--text-faint); }
.bfmc-success-close:hover { color: var(--danger); }
.bfmc-code { font-family: var(--font-mono); font-weight: 500; color: var(--text); background: var(--surface-2); border: 2px dashed var(--border-input); border-radius: var(--radius-sm); }
.bfmc-success-note { background: var(--warning-soft); border: 0; border-radius: var(--radius-sm); color: var(--warning); font-weight: 500; }

/* --- pasek pomocy pod aplikacją (template-parts/creator-help.php) --------- */
.cr-help { background: var(--brand-soft); padding: var(--space-7) 24px; border-top: var(--line-w) solid var(--border); }
.cr-help__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.1fr); gap: var(--gutter); align-items: stretch; max-width: 1400px; margin: 0 auto; }
.cr-help__card { display: flex; align-items: flex-start; gap: 14px; padding: var(--space-5); border: var(--line-w) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); transition: border-color .18s var(--ease), transform .25s var(--ease-bounce), box-shadow .18s var(--ease); }
.cr-help__card:hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--sticker); }
.cr-help__card > .icon--lg, .cr-help__contact > .icon--lg { flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.cr-help__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cr-help__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); line-height: 1.15; }
.cr-help__text { font-size: var(--fs-2); line-height: 1.5; color: var(--text-muted); }
.cr-help__contact { display: flex; align-items: flex-start; gap: 14px; padding: var(--space-5); border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--cta); color: var(--cta-contrast); box-shadow: var(--sticker); transform: rotate(-1deg); }
.cr-help__contact > div { display: flex; flex-direction: column; gap: 4px; }
.cr-help__contact > .icon--lg { background: var(--ink); color: var(--cta); }
.cr-help__contact .muted { color: inherit; opacity: .8; }
.cr-help__phone { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-6); line-height: 1; color: inherit; text-decoration: none; margin: 4px 0; }
.cr-help__phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- telefon: te same klasy, tylko kolory — układ zostawia creator.css ----- */
@media (max-width: 1200px) { .cr-help__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .cr-help { display: none; }              /* aplikacja jest przypięta do okna — pasek byłby nieosiągalny */

  /* --- Budżet wysokości (pomiar 390×844 przed zmianą: obszar edycji 101 px,
         a karta ze zdjęciem i suwakami potrzebuje 345 px). Oddajemy miejsce
         edycji: krótszy nagłówek, podgląd najwyżej 34% ekranu, bez wskazówki,
         pasek zakupu w jednym rzędzie z ilością, niższe zakładki. ----------- */
  .bfmc-app-header { min-height: 0; padding: 8px 14px; }
  .bfmc-app-brand img { max-height: 36px; }
  .bfmc-canvas-host { flex: 0 1 auto; max-height: 34%; padding: 8px 12px 0; }
  .bfmc-canvas-tip { display: none; }      /* „dotknij strefę…” — to samo mówi pusta strefa */
  .bfmc-panel { flex: 1 1 auto; max-height: none; }
  .bfmc-panel-head { padding: 8px 14px 0; }
  .bfmc-tabs:not([hidden]) { padding: 8px 14px; gap: 6px; }
  .bfmc-tab { min-height: 36px; padding: 6px 12px; font-size: 12px; }
  .bfmc-zones { padding: 10px 14px 4px; }
  .bfmc-zone-card-head { margin-bottom: 8px; }
  .bfmc-dropzone { padding: 16px 12px; }
  .bfmc-dropzone .material-icons { font-size: 28px; margin-bottom: 2px; }
  .bfmc-adjust { gap: 8px; }
  .bfmc-slider input[type=range] { height: 30px; }

  /* Pasek zakupu: ilość + „Dodaj do koszyka” + zapis w JEDNYM rzędzie (było 164 px, jest ~66). */
  .bfmc-buy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .bfmc-variations { flex: 1 1 100%; gap: 6px; }
  /* Etykieta „Ilość” jako tekst o zerowym rozmiarze: czytnik ekranu ją czyta,
     a przycisk „Dodaj do koszyka” dostaje miejsce na jedną linię. */
  .bfmc-qty-field { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0; font-size: 0; }
  .bfmc-qty-field input { width: 54px; min-height: 44px; padding: 8px 4px; text-align: center; font-size: 16px; }
  .bfmc-buy-actions { flex: 1 1 0; min-width: 0; gap: 6px; }
  .bfmc-buy-actions .bfmc-btn { min-height: 44px; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  .bfmc-buy-actions .bfmc-btn-primary { flex: 1 1 auto; }
  .bfmc-mini { padding: 9px 8px; min-height: 40px; font-size: 12px; white-space: nowrap; }
  .bfmc-buy-actions .bfmc-btn-ghost { flex: 0 0 auto; font-size: 0; padding: 0 12px; }
  .bfmc-buy-actions .bfmc-btn-ghost .material-icons { font-size: 20px; }
  .bfmc-buy-note { display: none; }
  .bfmc-app-root { background-image: none; background-color: var(--bg); }
  .bfmc-canvas-frame { padding: 8px; border-radius: 12px; box-shadow: none; border-color: var(--border-strong); }
  .bfmc-panel { border: 0; border-top: var(--line-w) solid var(--ink); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(var(--shadow-color), .16); }
  .bfmc-panel-head h1 { font-size: var(--fs-3); }
  .bfmc-price { font-size: var(--fs-4); }
  .bfmc-tabs:not([hidden]) { border-bottom-color: var(--border); }
  .bfmc-buy { border-top: 1px solid var(--border); }
  .bfmc-app-back { border-color: transparent; padding: 8px 10px; }
  .bfmc-help-fab { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; box-shadow: none; }
  .bfmc-help-fab:hover { background: var(--cta); color: var(--cta-contrast); transform: none; box-shadow: none; }
  .bfmc-zone-card.active { box-shadow: none; transform: none; }
}