/* ══════════════════════════════════════════════════════════
   DOR Studio — Full-screen mobile editor (v2.5)
   Loaded alongside widget.css. Mobile-only (<=768px).
   Desktop is untouched — the editor never appears.
   ══════════════════════════════════════════════════════════ */

.dor-editor { display: none; }

@media (max-width: 768px) {
  /* Mobile = plain normal-flow page. Kill the desktop sticky gallery column
     so it stops overlapping the price/description. The editor (opened on tap)
     handles all the live-preview work, so the page itself stays simple. */
  #brxe-col_l {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* The mobile toggle becomes an "open editor" launcher; the inline
     form is hidden on mobile (it lives inside the overlay instead). */
  body.dor-has-editor #dorWidgetForm { display: none !important; }

  .dor-editor {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 99999;
    background: var(--dor-white, #FFFDF9);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  body.dor-editor-open { overflow: hidden; }
  body.dor-editor-open .dor-editor { transform: translateY(0); }

  .dor-editor * { box-sizing: border-box; }

  /* Header */
  .dor-ed-head {
    flex-shrink: 0; height: 54px; display: flex; align-items: center;
    justify-content: space-between; padding: 0 16px;
    border-bottom: 1px solid rgba(200,169,122,.25);
    background: var(--dor-white, #FFFDF9);
  }
  .dor-ed-cancel, .dor-ed-done {
    background: none; border: none; cursor: pointer; font-size: 15px;
    font-family: inherit; padding: 8px 4px;
  }
  .dor-ed-cancel { color: var(--dor-gray, #8C8884); }
  .dor-ed-done   { color: var(--dor-wood-dk, #9E7A50); font-weight: 700; }
  .dor-ed-title  { font-family: 'Georgia', serif; font-size: 16px; font-weight: 700; color: var(--dor-char, #2C2A26); }

  /* Fixed preview — never resizes */
  .dor-ed-preview {
    flex-shrink: 0; height: 40%; position: relative;
    background: var(--dor-bg, #F5F2EE);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .dor-ed-preview .dor-ed-canvas-wrap {
    position: relative; height: 86%; display: flex; align-items: center; justify-content: center;
  }
  .dor-ed-preview canvas {
    display: block; max-height: 100%; max-width: 92%; width: auto !important; height: auto !important;
    border-radius: 6px; box-shadow: 0 4px 18px rgba(44,42,38,.14);
  }
  /* Active-zone highlight box */
  .dor-ed-zone-hl {
    position: absolute; border: 2px solid var(--dor-wood-dk, #9E7A50);
    box-shadow: 0 0 0 4px rgba(200,169,122,.28);
    border-radius: 4px; pointer-events: none; opacity: 0;
    transition: opacity .2s ease, left .2s ease, top .2s ease, width .2s ease, height .2s ease;
  }
  .dor-ed-zone-hl.on { opacity: 1; }
  .dor-ed-badge {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(44,42,38,.72); color: rgba(240,224,200,.97);
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 20px; display: flex; align-items: center; gap: 6px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none;
  }
  .dor-ed-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #7ED9A8; }

  /* Tab bar — one tab per zone, scrolls horizontally */
  .dor-ed-tabs {
    flex-shrink: 0; display: flex; gap: 8px; overflow-x: auto;
    padding: 12px 16px 10px; border-bottom: 1px solid rgba(200,169,122,.25);
    background: var(--dor-white, #FFFDF9); -webkit-overflow-scrolling: touch;
  }
  .dor-ed-tabs::-webkit-scrollbar { display: none; }
  .dor-ed-tab {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 20px; cursor: pointer;
    border: 1.5px solid rgba(200,169,122,.4); background: #fff;
    font-size: 13px; font-weight: 600; color: var(--dor-gray, #8C8884);
    white-space: nowrap; transition: all .2s ease; font-family: inherit;
  }
  .dor-ed-tab.active { border-color: var(--dor-wood-dk, #9E7A50); background: var(--dor-wood-lt, #F0E0C8); color: var(--dor-wood-dk, #9E7A50); }
  .dor-ed-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(200,169,122,.5); flex-shrink: 0; }
  .dor-ed-tab.filled .dot { background: var(--dor-success, #4A7C59); }

  /* Sheet — controls for active zone */
  .dor-ed-sheet { flex: 1; overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 15px; -webkit-overflow-scrolling: touch; }
  .dor-ed-panel { display: none; flex-direction: column; gap: 15px; }
  .dor-ed-panel.active { display: flex; }
  .dor-ed-hint {
    font-size: 12px; color: var(--dor-gray, #8C8884); background: var(--dor-bg, #F5F2EE);
    border-radius: 7px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  }
  .dor-ed-hint b { color: var(--dor-char, #2C2A26); margin: 0 2px; }

  .dor-ed-field { display: flex; flex-direction: column; gap: 6px; }
  .dor-ed-field-head { display: flex; justify-content: space-between; align-items: center; }
  .dor-ed-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--dor-char, #2C2A26); }
  .dor-ed-optional { font-weight: 400; color: var(--dor-gray, #8C8884); font-size: 11px; }
  .dor-ed-counter { font-size: 12px; color: var(--dor-gray, #8C8884); }
  .dor-ed-counter.warn { color: var(--dor-warn, #D4780A); }
  .dor-ed-counter.err  { color: var(--dor-error, #C03030); font-weight: 700; }
  .dor-ed-input {
    width: 100%; padding: 12px 14px; border: 1.5px solid rgba(200,169,122,.5);
    border-radius: 8px; background: #fff; color: var(--dor-char, #2C2A26);
    font-size: 16px; font-family: 'Georgia', serif; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .dor-ed-input:focus { border-color: var(--dor-wood-dk, #9E7A50); box-shadow: 0 0 0 3px rgba(200,169,122,.22); }
  .dor-ed-input::placeholder { color: rgba(140,136,132,.65); font-style: italic; font-size: 14px; }

  .dor-ed-fonts { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; -webkit-overflow-scrolling: touch; }
  .dor-ed-fonts::-webkit-scrollbar { display: none; }
  .dor-ed-font {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 14px; border: 1.5px solid rgba(200,169,122,.35); border-radius: 8px;
    background: #fff; cursor: pointer; min-width: 64px; transition: all .2s ease;
  }
  .dor-ed-font.active { border-color: var(--dor-wood-dk, #9E7A50); background: var(--dor-wood-lt, #F0E0C8); }
  .dor-ed-font-sample { font-size: 21px; color: #5C3A1E; line-height: 1; }
  .dor-ed-font-name { font-size: 9px; color: var(--dor-gray, #8C8884); }

  .dor-ed-addphoto {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border: 1.5px dashed rgba(200,169,122,.55); border-radius: 8px;
    background: #fff; color: var(--dor-wood-dk, #9E7A50); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .dor-ed-photo-mount { display: none; }
  .dor-ed-photo-mount.open { display: block; }
  .dor-ed-addphoto.hidden { display: none; }

  .dor-ed-nav { display: flex; gap: 10px; margin-top: 6px; }
  .dor-ed-nav-btn {
    flex: 1; border: 1.5px solid var(--dor-wood, #C8A97A); background: #fff;
    color: var(--dor-wood-dk, #9E7A50); border-radius: 8px; padding: 13px;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .dor-ed-nav-btn.primary { background: var(--dor-wood, #C8A97A); color: #fff; border-color: var(--dor-wood, #C8A97A); }
}

/* Conditional hide for variable products (beats the #dorWidget display:block !important) */
#dorWidget.dor-hidden { display: none !important; }

/* Mobile: once a variation is picked, make the launcher an inviting CTA */
@media (max-width:768px){
  #dorWidget.dor-cta-ready .dor-toggle{
    border-color: var(--dor-wood-dk, #9E7A50);
    background: var(--dor-wood-lt, #F0E0C8);
    box-shadow: 0 2px 10px rgba(200,169,122,.25);
  }
  #dorWidget.dor-cta-ready .dor-toggle::after{
    content: 'Apasă pentru a personaliza →';
    display:block; width:100%; margin-top:6px;
    font-size:12px; font-weight:700; color: var(--dor-wood-dk, #9E7A50);
  }
}