/* ═══════════════════════════════════════════════
   SICILIA VIBE — фото-бот оператора
   Палитра: терракота / охра / слоновая кость / тёмный камень
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:          #1c1814;
  --bg2:         #251e18;
  --bg3:         #2e2620;
  --surface:     rgba(255,245,235,0.06);
  --surface2:    rgba(255,245,235,0.10);
  --border:      rgba(200,160,100,0.22);
  --border2:     rgba(200,160,100,0.40);
  --terra:       #c8603a;
  --terra2:      #e07a50;
  --ochre:       #c9923a;
  --ochre2:      #e5b060;
  --cream:       #f5ead8;
  --cream2:      #fff8ef;
  --stone:       #8a7a6a;
  --stone2:      #b0a090;
  --text:        #f0e4d0;
  --text2:       #c8b89a;
  --text3:       #8a7a6a;
  --grad:        linear-gradient(135deg, #c8603a, #c9923a);
  --grad2:       linear-gradient(135deg, #2e1e12, #3a2a1a);
  --radius:      16px;
  --radius-sm:   10px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h2 {
    font-family: 'Playfair Display', serif;
    text-align: center;
    padding: 12px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--cream);
    letter-spacing: 0.3px;
}

.sub { color: var(--stone2); font-size: 14px; text-align: center; }

/* ── QTY CHIPS ── */
.qty-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.qty-chip {
    flex:1; min-width:48px; padding:9px 4px; border-radius:var(--radius-sm);
    background: var(--bg3); border: 1.5px solid var(--border);
    color: var(--text2); font-size:15px; font-weight:600;
    cursor:pointer; transition:all .18s;
}
.qty-chip:active, .qty-chip.active {
    background: var(--grad); border-color: var(--terra2);
    color: var(--cream2);
}

/* ── PRESET CHIPS ── */
.preset-chip { min-width:110px; font-size:13px; padding:9px 10px; flex:0 1 auto; }
.preset-chip.active { background: var(--grad); border-color: var(--terra2); color: var(--cream2); }

/* ── UNIT SWITCH ── */
.unit-switch { display:flex; gap:8px; margin-bottom:12px; }
.unit-btn {
    flex:1; padding:10px; border-radius: var(--radius-sm);
    background: var(--bg3); border: 1.5px solid var(--border);
    color: var(--stone2); font-size:15px; font-weight:600;
    cursor:pointer; transition:all .18s;
}
.unit-btn.active { background: var(--grad); border-color: var(--terra2); color: var(--cream2); }

/* ── SCREENS ── */
.screen { display:none; flex-direction:column; min-height:100vh; min-height:100dvh; padding:14px; overflow-y:auto; }
.screen.active { display:flex; }

/* ── CENTER BOX ── */
.center-box {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px;
}
.big-icon { font-size:68px; filter: drop-shadow(0 4px 16px rgba(200,96,58,0.4)); }

/* ── CAMERA ── */
.cam-wrap {
    position:relative; flex:1; border-radius: var(--radius);
    overflow:hidden; background:#000;
    max-height:72vh;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#video { width:100%; height:100%; object-fit:cover; display:block; }
#geo-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background: rgba(28,24,20,0.82);
    backdrop-filter: blur(6px);
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}
#overlay-text {
    font: 11px/1.5 'Courier New', monospace;
    color: var(--ochre2);
    white-space: pre-line;
}
.btn-circle {
    width:72px; height:72px; border-radius:50%; font-size:30px;
    background: var(--grad);
    border: 3px solid rgba(255,245,235,0.25);
    align-self:center; margin:10px 0; cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(200,96,58,0.45);
}
.btn-circle:active { transform:scale(0.9); }

/* ── FLASH ── */
.btn-flash {
    position:absolute; top:12px; right:12px; z-index:10;
    width:44px; height:44px; border-radius:50%; border:none;
    background: rgba(28,24,20,0.65); backdrop-filter:blur(6px);
    font-size:18px; cursor:pointer; transition:all .2s;
    display:flex; align-items:center; justify-content:center;
    color: var(--cream); font-weight:bold;
}
.btn-flash.on { background: rgba(201,146,58,0.7); }
.btn-flash:active { transform:scale(0.9); }

/* ── CAMERA BADGE ── */
.camera-badge {
    display:none; position:absolute; top:12px; left:12px; z-index:10;
    padding:6px 14px; border-radius:20px;
    background: rgba(28,24,20,0.75); backdrop-filter:blur(6px);
    border: 1px solid var(--border);
    font-size:13px; font-weight:600; color: var(--ochre2);
}
.camera-badge.visible { display:block; }

/* ── CLEAN PREVIEW BADGE ── */
.clean-badge {
    text-align:center; padding:12px 16px; font-size:14px; font-weight:600;
    background: rgba(201,146,58,0.12); color: var(--ochre2);
    border-bottom: 1px solid rgba(201,146,58,0.25);
}

/* ── PREVIEW ── */
.screen-preview { padding:0 !important; }
.preview-wrap { overflow:hidden; }
#canvas-preview { width:100%; display:block; }

/* ── BUTTONS ── */
.btn {
    padding:14px 24px; border:none; border-radius: var(--radius);
    font-size:16px; font-weight:600; cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    font-family: 'Inter', sans-serif;
}
.btn:active { transform:scale(0.96); }
.btn:disabled { opacity:0.35; cursor:not-allowed; }

.btn-primary {
    background: var(--grad);
    color: var(--cream2);
    box-shadow: 0 4px 18px rgba(200,96,58,0.35);
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(200,96,58,0.5); }

.btn-secondary {
    background: var(--surface2);
    color: var(--text2);
    border: 1.5px solid var(--border);
}
.btn-danger {
    background: rgba(200,60,60,0.15);
    color: #f08080;
    border: 1px solid rgba(200,60,60,0.3);
}

.btn-row {
    display:flex; gap:10px; padding:10px 12px;
    position:sticky; bottom:0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.btn-row .btn { flex:1; text-align:center; }
.btn-full { width:100%; margin-top:12px; }
.btn-sm { padding:8px 14px; font-size:13px; border-radius:var(--radius-sm); }

/* ── FORM ── */
.form-scroll { flex:1; overflow-y:auto; padding-bottom:24px; }
.form-label {
    display:block; font-size:13px; font-weight:600;
    margin:16px 0 8px; color: var(--stone2);
    text-transform: uppercase; letter-spacing: 0.8px;
}
.form-input {
    width:100%; padding:13px 16px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg3); color: var(--cream);
    font-size:16px; outline:none;
    transition: border-color .18s;
}
.form-input:focus { border-color: var(--ochre); }
.form-input::placeholder { color: var(--text3); }

select.form-input option { background: var(--bg2); color: var(--text); }

/* ── STATUS ── */
.status { font-size:13px; color: var(--stone2); text-align:center; padding:4px; }
.status.ok { color: #7ec89a; }
.status.err { color: #f08080; }

/* ── HISTORY ── */
.history-list {
    flex:1; overflow-y:auto; display:flex;
    flex-direction:column; gap:10px; padding-bottom:12px;
}
.history-card {
    background: var(--bg3); border-radius: var(--radius);
    overflow:hidden; border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.history-card img { width:100%; max-height:220px; object-fit:cover; display:block; }
.history-info { padding:10px 14px; font-size:13px; line-height:1.7; color: var(--text2); }
.history-info b { color: var(--cream); }
.history-actions { display:flex; gap:8px; padding:0 14px 12px; }
.history-empty { text-align:center; padding:40px 0; color: var(--stone); }

/* ── HISTORY SECTIONS ── */
.history-section {
    border-radius: var(--radius); overflow:hidden;
    background: var(--bg3); margin-bottom:4px;
    border: 1px solid var(--border);
}
.history-section-header {
    display:flex; align-items:center; gap:8px;
    padding:14px 16px; cursor:pointer;
    font-size:15px; font-weight:600; color: var(--cream);
    background: rgba(201,146,58,0.10);
    user-select:none; transition:background .15s;
}
.history-section-header:active { background: rgba(201,146,58,0.20); }
.section-arrow { font-size:12px; transition:transform .2s; color: var(--stone2); }
.history-section.collapsed .section-arrow { transform:rotate(-90deg); }
.section-count {
    margin-left:auto; background: rgba(200,96,58,0.25);
    padding:2px 10px; border-radius:20px; font-size:12px; color: var(--terra2);
}
.history-section-body { display:flex; flex-direction:column; gap:8px; padding:8px; }
.history-section.collapsed .history-section-body { display:none; }

/* ── MAP ── */
.mini-map {
    display:none; width:100%; height:160px; border-radius: var(--radius);
    overflow:hidden; margin:8px 0; border: 1.5px solid var(--border);
    cursor:pointer;
}
.map-overlay {
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column;
    background: var(--bg);
}
.map-full { flex:1; width:100%; min-height:300px; height:100%; }
.map-close-btn {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:10000; padding:12px 32px;
}

/* ── SPIN ── */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation: spin 1.5s linear infinite; }

/* ── MARKER SCREEN ── */
.screen-marker {
    padding:0 !important; height:100vh; height:100dvh;
    min-height:0 !important; max-height:100vh; max-height:100dvh;
    overflow:hidden !important;
}
.marker-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px;
    background: rgba(201,146,58,0.12);
    border-bottom: 1px solid var(--border2);
    gap:8px; flex-wrap:wrap;
}
.marker-hint { font-size:15px; font-weight:600; color: var(--ochre2); }
.marker-toolbar-actions {
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap; margin-left:auto; justify-content:flex-end;
}
.tool-switch { display:flex; gap:6px; }
.tool-switch .btn.selected {
    background: rgba(200,96,58,0.4);
    border: 1.5px solid rgba(200,96,58,0.7);
    color: var(--cream2);
}
.zoom-controls { display:flex; gap:6px; }
.zoom-controls .btn { min-width:46px; }
.marker-wrap {
    flex:1; min-height:0; overflow:auto; display:flex;
    align-items:center; justify-content:center;
    background: #0d0b09;
    touch-action:pan-x pan-y; padding:8px;
    max-height:calc(100dvh - 170px);
}
#canvas-marker { width:100%; max-height:none; display:block; cursor:crosshair; touch-action:none; object-fit:contain; }
#canvas-clean-preview { width:100%; max-height:none; display:block; cursor:crosshair; touch-action:none; object-fit:contain; }

/* ── SEND ALL BUTTON ── */
.btn-send-all { font-size:13px; padding:10px 14px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius:4px; }

@media (max-width: 520px) {
    .marker-hint { font-size:13px; }
    .marker-toolbar { padding:8px 10px; }
    .btn-sm { padding:7px 10px; font-size:12px; }
    .zoom-controls .btn { min-width:42px; }
    .marker-wrap { max-height:calc(100dvh - 190px); }
}


/* QTY CHIPS */
.qty-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.qty-chip {
    flex:1; min-width:48px; padding:8px 4px; border-radius:10px;
    background:#2a2a4a; border:2px solid #444; color:#fff;
    font-size:15px; font-weight:600; cursor:pointer; transition:all .15s;
}
.qty-chip:active, .qty-chip.active { background:#6c63ff; border-color:#6c63ff; }

/* PRESET CHIPS (quantity + price from admin) */
.preset-chip { min-width:100px; font-size:13px; padding:8px 8px; flex:0 1 auto; }
.preset-chip.active { background:#6c63ff; border-color:#6c63ff; }

/* UNIT SWITCH */
.unit-switch { display:flex; gap:8px; margin-bottom:12px; }
.unit-btn {
    flex:1; padding:10px; border-radius:12px;
    background:#2a2a4a; border:2px solid #444; color:#aaa;
    font-size:15px; font-weight:600; cursor:pointer; transition:all .15s;
}
.unit-btn.active { background:#6c63ff; border-color:#6c63ff; color:#fff; }

.screen { display:none; flex-direction:column; min-height:100vh; min-height:100dvh; padding:12px; overflow-y:auto; }
.screen.active { display:flex; }
h2 { text-align:center; padding:10px 0; font-size:20px; }

/* CENTER */
.center-box { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.big-icon { font-size:64px; }
.sub { color:#999; font-size:14px; text-align:center; }

/* CAMERA */
.cam-wrap { position:relative; flex:1; border-radius:16px; overflow:hidden; background:#000; max-height:72vh; }
#video { width:100%; height:100%; object-fit:cover; display:block; }
#geo-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); padding:10px 14px; }
#overlay-text { font:11px/1.5 'Courier New',monospace; color:#fff; white-space:pre-line; }
.btn-circle {
    width:70px; height:70px; border-radius:50%; font-size:30px;
    background:#fff; border:4px solid rgba(255,255,255,0.3);
    align-self:center; margin:10px 0; cursor:pointer; transition:transform .15s;
}
.btn-circle:active { transform:scale(0.9); }

/* FLASH */
.btn-flash {
    position:absolute; top:12px; right:12px; z-index:10;
    width:44px; height:44px; border-radius:50%; border:none;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
    font-size:18px; cursor:pointer; transition:all .2s;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:bold;
}
.btn-flash.on { background:rgba(255,214,0,0.6); }
.btn-flash:active { transform:scale(0.9); }

/* CAMERA BADGE */
.camera-badge {
    display:none; position:absolute; top:12px; left:12px; z-index:10;
    padding:6px 14px; border-radius:20px;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
    font-size:13px; font-weight:600; color:#fff;
}
.camera-badge.visible { display:block; }

/* CLEAN PREVIEW BADGE */
.clean-badge {
    text-align:center; padding:12px 16px; font-size:14px; font-weight:600;
    background:rgba(74,222,128,0.15); color:#4ade80;
    border-bottom:1px solid rgba(74,222,128,0.2);
}

/* PREVIEW */
.screen-preview { padding:0 !important; }
.preview-wrap { overflow:hidden; }
#canvas-preview { width:100%; display:block; }

/* BUTTONS */
.btn { padding:14px 24px; border:none; border-radius:14px; font-size:16px; font-weight:600; cursor:pointer; transition:transform .15s; }
.btn:active { transform:scale(0.96); }
.btn:disabled { opacity:0.35; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.btn-secondary { background:rgba(255,255,255,0.12); color:#fff; }
.btn-danger { background:rgba(248,113,113,0.2); color:#f87171; border:1px solid rgba(248,113,113,0.3); }
.btn-row { display:flex; gap:10px; padding:10px 12px; position:sticky; bottom:0; background:#1a1a2e; }
.btn-row .btn { flex:1; text-align:center; }
.btn-full { width:100%; margin-top:12px; }
.btn-sm { padding:8px 14px; font-size:13px; border-radius:10px; }

/* FORM */
.form-scroll { flex:1; overflow-y:auto; padding-bottom:24px; }
.form-label { display:block; font-size:14px; font-weight:600; margin:16px 0 8px; color:#ccc; }
.form-input {
    width:100%; padding:12px 16px; border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.08); color:#fff;
    font-size:16px; outline:none;
}
.form-input:focus { border-color:#667eea; }
.form-input::placeholder { color:#555; }
.chip-group { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
    padding:10px 18px; border-radius:20px;
    background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.1);
    color:#ccc; font-size:14px; cursor:pointer; transition:all .15s; user-select:none;
}
.chip.selected { background:rgba(102,126,234,0.3); border-color:#667eea; color:#fff; }
.chip:active { transform:scale(0.95); }

/* PRODUCT CATEGORIES */
.product-cat {
    margin-bottom:12px; border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
}
.product-cat-header {
    padding:10px 14px; font-size:13px; font-weight:700; color:#a0b4ff;
    background:rgba(102,126,234,0.1); cursor:pointer;
    user-select:none; display:flex; align-items:center; gap:6px;
}
.product-cat-header .cat-arrow { font-size:10px; color:#667eea; transition:transform .2s; }
.product-cat.collapsed .cat-arrow { transform:rotate(-90deg); }
.product-cat-body { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; }
.product-cat.collapsed .product-cat-body { display:none; }

/* QTY ROW */
.qty-row { display:flex; gap:10px; align-items:center; }
.qty-input { flex:1; }
.unit-toggle { display:flex; gap:0; border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,0.15); flex-shrink:0; }
.unit-btn {
    padding:12px 20px; border:none; background:rgba(255,255,255,0.06);
    color:#888; font-size:16px; font-weight:700; cursor:pointer;
    transition:all .15s;
}
.unit-btn.selected { background:rgba(102,126,234,0.4); color:#fff; }
.unit-btn:active { transform:scale(0.95); }

/* STATUS */
.status { font-size:13px; color:#aaa; text-align:center; padding:4px; }
.status.ok { color:#4ade80; }
.status.err { color:#f87171; }

/* HISTORY */
.history-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:12px; }
.history-card {
    background:rgba(255,255,255,0.06); border-radius:14px;
    overflow:hidden; border:1px solid rgba(255,255,255,0.08);
}
.history-card img {
    width:100%; max-height:200px; object-fit:cover; display:block;
}
.history-info { padding:10px 14px; font-size:13px; line-height:1.6; color:#ccc; }
.history-info b { color:#fff; }
.history-actions { display:flex; gap:8px; padding:0 14px 12px; }
.history-empty { text-align:center; padding:40px 0; color:#666; }

/* HISTORY SECTIONS */
.history-section { border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.04); margin-bottom:4px; }
.history-section-header {
    display:flex; align-items:center; gap:8px;
    padding:14px 16px; cursor:pointer;
    font-size:15px; font-weight:700; color:#fff;
    background:rgba(102,126,234,0.15);
    user-select:none; transition:background .15s;
}
.history-section-header:active { background:rgba(102,126,234,0.25); }
.section-arrow { font-size:12px; transition:transform .2s; color:#888; }
.history-section.collapsed .section-arrow { transform:rotate(-90deg); }
.section-count {
    margin-left:auto; background:rgba(102,126,234,0.3);
    padding:2px 10px; border-radius:20px; font-size:12px; color:#a0b4ff;
}
.history-section-body { display:flex; flex-direction:column; gap:8px; padding:8px; }
.history-section.collapsed .history-section-body { display:none; }

/* MAP */
.mini-map {
    display:none; width:100%; height:160px; border-radius:14px;
    overflow:hidden; margin:8px 0; border:2px solid rgba(255,255,255,0.1);
    cursor:pointer;
}
.map-overlay {
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column;
    background:#1a1a2e;
}
.map-full { flex:1; width:100%; min-height:300px; height:100%; }
.map-close-btn {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:10000; padding:12px 32px;
}

/* SPIN */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation: spin 1.5s linear infinite; }

/* MARKER SCREEN */
.screen-marker { padding:0 !important; height:100vh; height:100dvh; min-height:0 !important; max-height:100vh; max-height:100dvh; overflow:hidden !important; }
.marker-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px;
    background:rgba(102,126,234,0.2);
    border-bottom:1px solid rgba(102,126,234,0.3);
    gap:8px;
    flex-wrap:wrap;
}
.marker-hint {
    font-size:15px; font-weight:600; color:#a0b4ff;
}
.marker-toolbar-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-left:auto;
    justify-content:flex-end;
}

.tool-switch {
    display:flex;
    gap:6px;
}

.tool-switch .btn.selected {
    background:rgba(102,126,234,0.45);
    border:1px solid rgba(160,180,255,0.65);
}

.zoom-controls {
    display:flex;
    gap:6px;
}

.zoom-controls .btn {
    min-width:46px;
}

.marker-wrap {
    flex:1; min-height:0; overflow:auto; display:flex;
    align-items:center; justify-content:center; background:#000;
    touch-action:pan-x pan-y;
    padding:8px;
    max-height:calc(100dvh - 170px);
}
#canvas-marker { width:100%; max-height:none; display:block; cursor:crosshair; touch-action:none; object-fit:contain; }
#canvas-clean-preview { width:100%; max-height:none; display:block; cursor:crosshair; touch-action:none; object-fit:contain; }

@media (max-width: 520px) {
    .marker-hint { font-size:13px; }
    .marker-toolbar { padding:8px 10px; }
    .btn-sm { padding:7px 10px; font-size:12px; }
    .zoom-controls .btn { min-width:42px; }
    .marker-wrap { max-height:calc(100dvh - 190px); }
}