/*
 * iPear Fast Customize — UI (F5 redesign).
 *
 * Reuses the Custom Studio v3 visual tokens (colours, radii, shadows, spacing,
 * tap size, transitions) — redeclared locally on .ipear-fc-root because the
 * Studio stylesheet is NOT enqueued on product pages. Light surface, lime only
 * for active/CTA, WCAG-AA contrast, every rule scoped under .ipear-fc-root.
 * Loads no font of its own — inherits the theme (iPear/WoodMart Zona Pro).
 */

.ipear-fc-root {
  /* ── Studio tokens (same values) ── */
  --fc-brand:#8AE900; --fc-brand-hover:#7fd800; --fc-brand-ink:#1a5c00; --fc-brand-tint:#f0ffd6;
  --fc-ink:#0a0a0a; --fc-ink-soft:#333333; --fc-muted:#6b6b6b;
  --fc-border:#e5e5e5; --fc-surface:#ffffff; --fc-bg:#f7f7f7; --fc-bg-sunk:#efefef;
  --fc-danger:#d64545; --fc-warning:#f5a623;
  --fc-r-sm:8px; --fc-r-md:12px; --fc-r-lg:18px; --fc-r-pill:999px;
  --fc-sh-sm:0 1px 2px rgba(0,0,0,.06); --fc-sh-md:0 4px 12px rgba(0,0,0,.08); --fc-sh-lg:0 8px 24px rgba(0,0,0,.10);
  --fc-tap:44px;
}
.ipear-fc-root, .ipear-fc-root * { box-sizing: border-box; font-family: inherit; }

/* launch button on the product page */
.ipear-fc-launch { margin:12px 0; }
.ipear-fc-open {
  font-family:inherit; min-height:var(--fc-tap);
  padding:12px 22px; border:0; border-radius:var(--fc-r-pill);
  background:#111; color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.ipear-fc-open:hover { background:#000; }
.ipear-fc-open:active { transform:scale(.98); }
.ipear-fc-open:focus-visible { outline:3px solid rgba(138,233,0,.5); outline-offset:2px; }

.ipear-fc-lock { overflow:hidden !important; }

/* ── overlay + dialog ── */
.ipear-fc-overlay {
  position:fixed; inset:0; z-index:100050;
  background:rgba(10,12,8,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px; color:var(--fc-ink);
}
.ipear-fc-dialog {
  background:var(--fc-surface); color:var(--fc-ink);
  width:100%; max-width:1040px; max-height:calc(100vh - 48px);
  border-radius:var(--fc-r-lg);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--fc-sh-lg);
  animation:ipearFcIn .18s ease-out;
}
@keyframes ipearFcIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* header */
.ipear-fc-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px; border-bottom:1px solid var(--fc-border);
}
.ipear-fc-head-titles { min-width:0; }
.ipear-fc-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fc-brand-ink);
}
.ipear-fc-title {
  font-family:var(--wd-title-font, inherit);
  font-size:20px; font-weight:700; line-height:1.2; margin:2px 0 2px; color:var(--fc-ink);
  letter-spacing:-.01em;
}
.ipear-fc-help { font-size:13px; color:var(--fc-muted); margin:0; line-height:1.45; }
.ipear-fc-x {
  flex:none; width:var(--fc-tap); height:var(--fc-tap); border-radius:50%;
  border:1.5px solid var(--fc-border); background:var(--fc-surface); color:var(--fc-ink-soft);
  font-size:18px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.ipear-fc-x:hover { border-color:var(--fc-ink); color:var(--fc-ink); background:var(--fc-bg); }
.ipear-fc-x:focus-visible { outline:3px solid rgba(138,233,0,.35); outline-offset:2px; }

/* 3-step progress */
.ipear-fc-progress { display:flex; gap:6px; padding:12px 20px 0; }
.ipear-fc-pstep { flex:1; display:flex; flex-direction:column; gap:6px; }
.ipear-fc-pbar { height:4px; border-radius:var(--fc-r-pill); background:var(--fc-border); transition:background .2s ease; }
.ipear-fc-pstep.is-active .ipear-fc-pbar, .ipear-fc-pstep.is-done .ipear-fc-pbar { background:var(--fc-brand); }
.ipear-fc-plabel { font-size:11px; font-weight:600; color:var(--fc-muted); letter-spacing:.02em; }
.ipear-fc-pstep.is-active .ipear-fc-plabel { color:var(--fc-ink); }

/* main split: preview (left) + controls (right) */
.ipear-fc-main { display:flex; gap:0; flex:1; min-height:0; }
.ipear-fc-preview-col {
  flex:0 0 44%; max-width:460px; background:var(--fc-bg);
  border-right:1px solid var(--fc-border);
  padding:20px; display:flex; flex-direction:column; gap:12px;
  align-self:stretch;
}
.ipear-fc-controls {
  flex:1 1 auto; min-width:0; overflow-y:auto; padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
.ipear-fc-step-title { font-size:18px; font-weight:700; color:var(--fc-ink); margin:0; letter-spacing:-.01em; }
.ipear-fc-step-sub { font-size:13px; color:var(--fc-muted); margin:-6px 0 4px; line-height:1.5; }
.ipear-fc-pane { display:flex; flex-direction:column; gap:14px; animation:ipearFcStep .18s ease-out; }
@keyframes ipearFcStep { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* print-preview frame */
.ipear-fc-frame {
  position:relative; width:100%; aspect-ratio:3/4;
  background:var(--fc-surface); border:1px solid var(--fc-border); border-radius:var(--fc-r-md);
  box-shadow:var(--fc-sh-sm) inset; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ipear-fc-frame img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.ipear-fc-frame-empty { color:var(--fc-muted); font-size:13px; text-align:center; padding:20px; }
.ipear-fc-frame-badge {
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,.6); color:#fff; font-size:10px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--fc-r-pill);
}
/* text overlay on preview (approximation, not a final mockup) */
.ipear-fc-frame-text {
  position:absolute; left:8%; right:8%; text-align:center; font-weight:700;
  font-size:clamp(14px,4vw,26px); line-height:1.15; word-break:break-word;
  text-shadow:0 1px 3px rgba(0,0,0,.35); pointer-events:none;
}
.ipear-fc-frame-text.pos-center { top:50%; transform:translateY(-50%); }
.ipear-fc-frame-text.pos-top { top:8%; }
.ipear-fc-frame-text.pos-bottom { bottom:8%; }
.ipear-fc-frame-text.pos-full { top:50%; transform:translateY(-50%); font-size:clamp(20px,7vw,40px); }
.ipear-fc-preview-meta { font-size:12px; color:var(--fc-muted); text-align:center; line-height:1.5; }
.ipear-fc-preview-meta b { color:var(--fc-ink-soft); font-weight:600; }

/* upload card */
.ipear-fc-upload {
  border:1.5px dashed var(--fc-border); border-radius:var(--fc-r-md);
  padding:22px; text-align:center; background:var(--fc-bg);
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.ipear-fc-file { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.ipear-fc-progress-track { width:100%; height:8px; background:var(--fc-bg-sunk); border-radius:var(--fc-r-pill); overflow:hidden; }
.ipear-fc-progress-fill { height:100%; width:0; background:var(--fc-brand); transition:width .12s linear; }
.ipear-fc-uploaded { display:flex; gap:12px; align-items:center; width:100%; flex-wrap:wrap; }
.ipear-fc-uploaded img { width:56px; height:56px; object-fit:cover; border-radius:var(--fc-r-sm); border:1px solid var(--fc-border); flex:none; }
.ipear-fc-uploaded-meta { flex:1 1 140px; min-width:0; text-align:left; }
/* long filenames (incl. spaceless Greek) wrap at sensible points, never 1/char */
.ipear-fc-filename { font-weight:600; color:var(--fc-ink); font-size:14px; overflow-wrap:anywhere; word-break:normal; }
.ipear-fc-dims { font-size:12px; color:var(--fc-muted); }
.ipear-fc-uploaded-actions { display:flex; gap:6px; flex:1 0 100%; }
@media (min-width:520px) { .ipear-fc-uploaded-actions { flex:0 0 auto; } }

/* fields */
.ipear-fc-field { display:flex; flex-direction:column; gap:6px; }
.ipear-fc-label { font-size:13px; font-weight:600; color:var(--fc-ink); }
.ipear-fc-input {
  font-family:inherit; width:100%; min-height:var(--fc-tap);
  padding:10px 12px; border:1.5px solid var(--fc-border); border-radius:var(--fc-r-md);
  background:var(--fc-surface); color:var(--fc-ink); font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ipear-fc-input:focus { outline:none; border-color:var(--fc-brand); box-shadow:0 0 0 3px rgba(138,233,0,.2); }
.ipear-fc-input::placeholder { color:var(--fc-muted); }
textarea.ipear-fc-input { min-height:84px; resize:vertical; }
.ipear-fc-counter { font-size:12px; color:var(--fc-muted); align-self:flex-end; }
.ipear-fc-inline { display:flex; gap:10px; align-items:center; }
.ipear-fc-color { width:var(--fc-tap); height:var(--fc-tap); border:1.5px solid var(--fc-border); border-radius:var(--fc-r-md); padding:3px; background:var(--fc-surface); cursor:pointer; }

/* selectable option cards (radios replaced) */
.ipear-fc-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ipear-fc-opt {
  position:relative; display:flex; align-items:center; gap:10px;
  min-height:var(--fc-tap); padding:12px 14px;
  border:1.5px solid var(--fc-border); border-radius:var(--fc-r-md);
  background:var(--fc-surface); color:var(--fc-ink); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.ipear-fc-opt:hover { border-color:var(--fc-brand); background:var(--fc-brand-tint); }
.ipear-fc-opt:focus-within { outline:3px solid rgba(138,233,0,.35); outline-offset:2px; }
.ipear-fc-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.ipear-fc-opt-name { flex:1; font-size:14px; font-weight:600; }
.ipear-fc-opt-sub { font-size:12px; color:var(--fc-muted); font-variant-numeric:tabular-nums; }
.ipear-fc-opt-check {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--fc-border); flex:none;
  display:flex; align-items:center; justify-content:center; color:transparent; font-size:12px; font-weight:700;
}
.ipear-fc-opt.is-selected { border-color:var(--fc-brand); background:var(--fc-brand-tint); }
.ipear-fc-opt.is-selected .ipear-fc-opt-check { border-color:var(--fc-brand); background:var(--fc-brand); color:#0a0a0a; }
.ipear-fc-opt.is-disabled { opacity:.55; cursor:not-allowed; background:var(--fc-bg); }
.ipear-fc-opt.is-disabled:hover { border-color:var(--fc-border); background:var(--fc-bg); }

/* approval consent */
.ipear-fc-consent {
  display:flex; gap:10px; align-items:flex-start; padding:14px;
  border:1.5px solid var(--fc-border); border-radius:var(--fc-r-md); background:var(--fc-bg);
}
.ipear-fc-consent input { width:20px; height:20px; margin-top:1px; accent-color:var(--fc-brand); }
.ipear-fc-consent label { font-size:13px; color:var(--fc-ink-soft); line-height:1.45; }

/* summary */
.ipear-fc-summary { border:1px solid var(--fc-border); border-radius:var(--fc-r-md); overflow:hidden; }
.ipear-fc-srow { display:flex; justify-content:space-between; gap:14px; padding:10px 14px; border-bottom:1px solid var(--fc-border); font-size:14px; }
.ipear-fc-srow:last-child { border-bottom:0; }
.ipear-fc-srow dt { color:var(--fc-muted); margin:0; }
.ipear-fc-srow dd { color:var(--fc-ink); font-weight:600; margin:0; text-align:right; word-break:break-word; }
.ipear-fc-total { background:var(--fc-bg); font-size:16px; }
.ipear-fc-total dd { color:var(--fc-ink); font-weight:800; }
.ipear-fc-notice { font-size:13px; color:var(--fc-ink-soft); background:var(--fc-brand-tint); border-radius:var(--fc-r-sm); padding:10px 12px; line-height:1.45; }

.ipear-fc-hint { font-size:13px; color:var(--fc-muted); margin:0; line-height:1.45; }
.ipear-fc-error { font-size:13px; color:var(--fc-danger); font-weight:600; margin:0; }
.ipear-fc-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* footer bar: Back | total | primary */
.ipear-fc-foot {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--fc-border); background:var(--fc-surface);
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
}
.ipear-fc-foot-total { text-align:center; line-height:1.15; }
.ipear-fc-foot-total .lab { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fc-muted); }
.ipear-fc-foot-total .amt { display:block; font-size:17px; font-weight:800; color:var(--fc-ink); font-variant-numeric:tabular-nums; }

.ipear-fc-btn {
  font-family:inherit; min-height:var(--fc-tap); padding:11px 22px;
  border-radius:var(--fc-r-pill); border:1.5px solid transparent; cursor:pointer;
  font-size:15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.ipear-fc-btn-primary { background:var(--fc-brand); color:#0a0a0a; }
.ipear-fc-btn-primary:hover { background:var(--fc-brand-hover); }
.ipear-fc-btn-primary:active { transform:scale(.98); }
.ipear-fc-btn-primary:disabled, .ipear-fc-btn-primary.is-disabled {
  background:var(--fc-bg-sunk); color:var(--fc-muted); cursor:not-allowed; pointer-events:none;
}
.ipear-fc-btn-primary.is-loading { color:transparent; position:relative; }
.ipear-fc-btn-primary.is-loading::after {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(0,0,0,.35); border-top-color:#0a0a0a; animation:ipearFcSpin .7s linear infinite;
}
@keyframes ipearFcSpin { to { transform:rotate(360deg); } }
.ipear-fc-btn-ghost { background:var(--fc-surface); border-color:var(--fc-border); color:var(--fc-ink-soft); }
.ipear-fc-btn-ghost:hover { border-color:var(--fc-ink); color:var(--fc-ink); background:var(--fc-bg); }
.ipear-fc-btn-sm { min-height:36px; padding:6px 14px; font-size:13px; font-weight:600; }
.ipear-fc-btn:focus-visible { outline:3px solid rgba(138,233,0,.45); outline-offset:2px; }

/* ── mobile: bottom sheet ── */
@media (max-width:768px) {
  .ipear-fc-overlay { align-items:flex-end; padding:0; }
  .ipear-fc-dialog {
    max-width:100%; max-height:94vh; height:94vh;
    border-radius:var(--fc-r-lg) var(--fc-r-lg) 0 0; animation:ipearFcSheet .22s ease-out;
  }
  @keyframes ipearFcSheet { from{transform:translateY(100%)} to{transform:none} }
  .ipear-fc-main { flex-direction:column; overflow:hidden; }
  .ipear-fc-preview-col {
    flex:none; max-width:none; width:100%;
    border-right:0; border-bottom:1px solid var(--fc-border);
    flex-direction:row; gap:12px; padding:14px; align-items:center;
  }
  .ipear-fc-preview-col .ipear-fc-frame { width:96px; aspect-ratio:3/4; flex:none; }
  .ipear-fc-preview-meta { text-align:left; flex:1; }
  .ipear-fc-controls { padding:16px; }
  .ipear-fc-options { grid-template-columns:1fr; }
  .ipear-fc-title { font-size:18px; }
}

/* smaller phones */
@media (max-width:400px) {
  .ipear-fc-foot { grid-template-columns:auto 1fr auto; gap:8px; padding-left:14px; padding-right:14px; }
  .ipear-fc-btn { padding:11px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  .ipear-fc-dialog, .ipear-fc-pane { animation:none; }
  .ipear-fc-progress-fill, .ipear-fc-btn, .ipear-fc-opt, .ipear-fc-input { transition:none; }
  .ipear-fc-btn-primary.is-loading::after { animation:none; }
}