/* ============================================================
   DOR Studio — Laser Preview Widget v2 · Frontend
   ============================================================ */
:root {
  --dor-wood:      #C8A97A;
  --dor-wood-dk:   #9E7A50;
  --dor-wood-lt:   #F0E0C8;
  --dor-char:      #2C2A26;
  --dor-gray:      #8C8884;
  --dor-bg:        #F5F2EE;
  --dor-white:     #FFFDF9;
  --dor-success:   #4A7C59;
  --dor-warn:      #D4780A;
  --dor-error:     #C03030;
  --dor-r:         10px;
  --dor-r-sm:      7px;
  --dor-shadow:    0 3px 18px rgba(44,42,38,.10);
  --dor-t:         0.20s ease;
}

.dor-widget { margin: 18px 0 22px; font-family: -apple-system,'Helvetica Neue',Arial,sans-serif; }

/* ── Toggle ──────────────────────────────────────────────── */
.dor-toggle {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  background:var(--dor-bg);
  border:2px solid rgba(200,169,122,.35);
  border-radius:var(--dor-r);
  cursor:pointer; user-select:none;
  transition:border-color var(--dor-t),background var(--dor-t);
}
.dor-toggle:hover,
.dor-toggle:focus-visible { border-color:var(--dor-wood); background:#EDE4D8; outline:none; }
.dor-toggle.active {
  border-color:var(--dor-wood-dk);
  background:var(--dor-wood-lt);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

.dor-toggle-knob {
  width:22px; height:22px; border-radius:5px;
  border:2px solid var(--dor-wood);
  background:white; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dor-t),border-color var(--dor-t);
}
.dor-toggle.active .dor-toggle-knob { background:var(--dor-wood-dk); border-color:var(--dor-wood-dk); }
.dor-check { display:none; }
.dor-toggle.active .dor-check { display:block; }

.dor-toggle-content { flex:1; }
.dor-toggle-title { display:block; font-size:14px; font-weight:700; color:var(--dor-char); margin-bottom:1px; }
.dor-toggle-sub   { font-size:12px; color:var(--dor-gray); }
.dor-toggle-pill  {
  font-size:11px; font-weight:700; color:var(--dor-wood-dk);
  background:rgba(200,169,122,.18); padding:3px 10px;
  border-radius:20px; white-space:nowrap; flex-shrink:0;
}

/* ── Widget body ─────────────────────────────────────────── */
.dor-body {
  background:#FBF6F0;
  border:2px solid var(--dor-wood); border-top:none;
  border-radius:0 0 var(--dor-r) var(--dor-r);
  padding:20px;
  display:flex; flex-direction:column; gap:18px;
}

/* ── Canvas preview ──────────────────────────────────────── */
.dor-preview-container {
  position:relative;
  border-radius:var(--dor-r); overflow:hidden;
  box-shadow:var(--dor-shadow);
  background:var(--dor-bg);
}
.dor-canvas {
  display:block; width:100%; aspect-ratio:1/1;
  border-radius:var(--dor-r);
}
.dor-preview-badge {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(44,42,38,.62);
  color:rgba(240,224,200,.96);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  text-align:center; padding:7px 10px;
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; gap:5px;
}

/* ── Zone label ──────────────────────────────────────────── */
.dor-zone-label {
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dor-gray);
  margin-bottom:4px;
}

/* ── Field ───────────────────────────────────────────────── */
.dor-field { display:flex; flex-direction:column; gap:6px; }
.dor-field-head { display:flex; justify-content:space-between; align-items:center; }
.dor-label { font-size:12px; font-weight:700; color:var(--dor-char); letter-spacing:.04em; }
.dor-optional { font-weight:400; color:var(--dor-gray); font-size:11px; }

.dor-counter { font-size:12px; color:var(--dor-gray); transition:color var(--dor-t); }
.dor-counter.warning { color:var(--dor-warn); }
.dor-counter.error   { color:var(--dor-error); font-weight:700; }

.dor-text-input {
  width:100%; box-sizing:border-box;
  padding:10px 13px;
  border:1.5px solid rgba(200,169,122,.5);
  border-radius:var(--dor-r-sm);
  background:white; color:var(--dor-char);
  font-size:15px; font-family:'Georgia',serif;
  outline:none;
  transition:border-color var(--dor-t),box-shadow var(--dor-t);
}
.dor-text-input:focus {
  border-color:var(--dor-wood-dk);
  box-shadow:0 0 0 3px rgba(200,169,122,.22);
}
.dor-text-input::placeholder { color:rgba(140,136,132,.65); font-style:italic; font-size:13px; }
.dor-input-hint { font-size:11px; color:var(--dor-gray); }

/* ── Font picker ─────────────────────────────────────────── */
.dor-font-picker {
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px; background:white;
  border:1.5px solid rgba(200,169,122,.35);
  border-radius:var(--dor-r-sm);
}
.dor-font-btn {
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 12px;
  border:1.5px solid rgba(200,169,122,.35);
  border-radius:var(--dor-r-sm);
  background:white; cursor:pointer;
  transition:border-color var(--dor-t),background var(--dor-t);
  min-width:68px;
}
.dor-font-btn:hover  { border-color:var(--dor-wood); }
.dor-font-btn.active { border-color:var(--dor-wood-dk); background:var(--dor-wood-lt); }
.dor-font-sample { font-size:22px; color:#5C3A1E; line-height:1; }
.dor-font-name   { font-size:9px; color:var(--dor-gray); text-align:center; line-height:1.2; }

/* ── Upload area ─────────────────────────────────────────── */
.dor-upload-area {
  border:2px dashed rgba(200,169,122,.55);
  border-radius:var(--dor-r);
  background:white; cursor:pointer;
  min-height:120px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dor-t),background var(--dor-t);
  position:relative; overflow:hidden;
}
.dor-upload-area:hover,
.dor-upload-area.drag-over { border-color:var(--dor-wood-dk); background:#FBF6F0; }
.dor-upload-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px; text-align:center; color:var(--dor-gray);
}
.dor-upload-placeholder svg { opacity:.5; }
.dor-upload-placeholder span { font-size:13px; line-height:1.4; }
.dor-upload-hint { font-size:11px; color:var(--dor-gray); }
.dor-upload-preview {
  width:100%; height:100%; object-fit:contain;
  max-height:200px; padding:8px;
}

/* Quality messages */
.dor-quality-msg { font-size:12px; line-height:1.4; padding:8px 12px; border-radius:var(--dor-r-sm); margin-top:4px; }
.dor-quality-ok      { background:#EEF6F2; color:var(--dor-success); }
.dor-quality-warning { background:#FFF6E8; color:var(--dor-warn); }
.dor-quality-error   { background:#FEF0F0; color:var(--dor-error); }

/* ── Zone field divider ──────────────────────────────────── */
.dor-zone-field + .dor-zone-field {
  border-top:1px solid rgba(200,169,122,.25);
  padding-top:18px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:600px){
  .dor-toggle  { gap:10px; padding:12px 14px; }
  .dor-body    { padding:14px; gap:14px; }
  .dor-toggle-pill { display:none; }
  .dor-font-picker { gap:6px; padding:8px; }
  .dor-font-btn    { min-width:56px; padding:7px 8px; }
  .dor-font-sample { font-size:18px; }
}