/* =====================================================
   Crypto Exchanger Pro v2 — Styles
   ===================================================== */

/* ── Переменные тем ─────────────────────────────────── */
.ce-theme-light {
    --ce-bg:         #ffffff;
    --ce-surface:    #f8f9fa;
    --ce-border:     #e5e7eb;
    --ce-text:       #1a1a2e;
    --ce-text-2:     #6b7280;
    --ce-accent:     #f7931a;
    --ce-accent-h:   #e8820a;
    --ce-success:    #22c55e;
    --ce-error:      #ef4444;
    --ce-input-bg:   #ffffff;
    --ce-shadow:     0 4px 24px rgba(0,0,0,.08);
}
.ce-theme-dark {
    --ce-bg:         #1a1a2e;
    --ce-surface:    #16213e;
    --ce-border:     #2d3748;
    --ce-text:       #f0f0f0;
    --ce-text-2:     #a0aec0;
    --ce-accent:     #f7931a;
    --ce-accent-h:   #e8820a;
    --ce-success:    #22c55e;
    --ce-error:      #fc8181;
    --ce-input-bg:   #2d3748;
    --ce-shadow:     0 4px 24px rgba(0,0,0,.4);
}

/* ── Виджет: обёртка ───────────────────────────────── */
.ce-widget {
    background:    var(--ce-bg);
    color:         var(--ce-text);
    border:        1px solid var(--ce-border);
    border-radius: 16px;
    padding:       28px;
    max-width:     520px;
    margin:        0 auto;
    box-shadow:    var(--ce-shadow);
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ce-widget-title {
    font-size:     1.4em;
    font-weight:   700;
    margin:        0 0 20px;
    color:         var(--ce-text);
}

/* ── Направление ────────────────────────────────────── */
.ce-direction-wrap {
    display:        flex;
    gap:            10px;
    margin-bottom:  20px;
}
.ce-dir-btn {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        12px 10px;
    border:         2px solid var(--ce-border);
    background:     var(--ce-surface);
    color:          var(--ce-text-2);
    border-radius:  10px;
    cursor:         pointer;
    font-size:      0.9em;
    font-weight:    500;
    transition:     all .2s;
}
.ce-dir-btn .ce-dir-icon { font-size: 1.2em; font-weight: 700; }
.ce-dir-btn.active {
    border-color:  var(--ce-accent);
    background:    rgba(247,147,26,.08);
    color:         var(--ce-accent);
}

/* ── Суммы ──────────────────────────────────────────── */
.ce-exchange-block { margin-bottom: 4px; }

.ce-amount-row { margin-bottom: 10px; }

.ce-label {
    display:       block;
    font-size:     0.8em;
    font-weight:   600;
    color:         var(--ce-text-2);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ce-amount-input {
    display: flex;
    gap:     8px;
}
.ce-amount-input .ce-input { flex: 1; }
.ce-amount-input .ce-select { width: 100px; flex-shrink: 0; }

.ce-input,
.ce-select {
    width:         100%;
    padding:       10px 14px;
    background:    var(--ce-input-bg);
    border:        1px solid var(--ce-border);
    border-radius: 8px;
    color:         var(--ce-text);
    font-size:     0.95em;
    box-sizing:    border-box;
    transition:    border .2s;
    outline:       none;
}
.ce-input:focus,
.ce-select:focus { border-color: var(--ce-accent); }

.ce-swap-arrow {
    text-align:    center;
    font-size:     1.4em;
    color:         var(--ce-text-2);
    margin:        6px 0;
}

.ce-rate-note {
    font-size:   0.8em;
    color:       var(--ce-text-2);
    margin:      4px 0 16px;
}

.ce-limit-hint {
    font-size:   0.78em;
    color:       var(--ce-accent);
    margin:      4px 0 0;
}

/* ── Банки ──────────────────────────────────────────── */
.ce-bank-section { margin-bottom: 16px; }

.ce-banks-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin:    8px 0;
}
.ce-bank-btn {
    display:       flex;
    align-items:   center;
    padding:       8px 14px;
    border:        1.5px solid var(--ce-border);
    background:    var(--ce-surface);
    color:         var(--ce-text);
    border-radius: 8px;
    cursor:        pointer;
    font-size:     0.88em;
    font-weight:   500;
    transition:    all .15s;
    white-space:   nowrap;
}
.ce-bank-btn:hover { border-color: var(--ce-accent); }
.ce-bank-btn.active {
    border-color: var(--ce-accent);
    background:   rgba(247,147,26,.1);
    color:        var(--ce-accent);
}

.ce-banks-loading,
.ce-banks-empty { font-size: 0.85em; color: var(--ce-text-2); }

.ce-selected-bank-info {
    background:    var(--ce-surface);
    border:        1px solid var(--ce-border);
    border-radius: 8px;
    padding:       12px 14px;
    margin-top:    8px;
    font-size:     0.9em;
}
.ce-bank-req-label { font-weight: 600; margin-bottom: 6px; color: var(--ce-text); }
.ce-bank-req-value { color: var(--ce-text); line-height: 1.6; white-space: pre-wrap; }
.ce-bank-limits    { font-size: 0.82em; color: var(--ce-text-2); margin-top: 6px; }

/* ── Разделитель ────────────────────────────────────── */
.ce-divider {
    border:     none;
    border-top: 1px solid var(--ce-border);
    margin:     18px 0;
}

/* ── Секции ─────────────────────────────────────────── */
.ce-section-title {
    font-size:   1em;
    font-weight: 600;
    color:       var(--ce-text);
    margin:      0 0 12px;
}
.ce-contact-section,
.ce-client-req-section { margin-bottom: 4px; }

.ce-field-row { margin-bottom: 12px; }
.ce-field-row textarea.ce-input { resize: vertical; }

.ce-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 400px) { .ce-two-cols { grid-template-columns: 1fr; } }

.ce-wallet-label { /* динамически меняется JS */ }
.ce-description  { font-size: 0.78em; color: var(--ce-text-2); margin: 3px 0 0; }

/* ── Кнопка отправки ─────────────────────────────────── */
.ce-submit-btn {
    width:         100%;
    padding:       14px;
    background:    linear-gradient(135deg, var(--ce-accent), var(--ce-accent-h));
    color:         #fff;
    border:        none;
    border-radius: 10px;
    font-size:     1em;
    font-weight:   700;
    cursor:        pointer;
    transition:    opacity .2s, transform .1s;
    margin-top:    8px;
    letter-spacing: 0.02em;
}
.ce-submit-btn:hover    { opacity: .92; transform: translateY(-1px); }
.ce-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ce-terms {
    font-size:   0.75em;
    color:       var(--ce-text-2);
    text-align:  center;
    margin:      8px 0 0;
}

/* ── Уведомления ────────────────────────────────────── */
.ce-notice {
    padding:       12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size:     0.9em;
}
.ce-error-notice {
    background: rgba(239,68,68,.08);
    border:     1px solid var(--ce-error);
    color:      var(--ce-error);
}

/* ── Экран успеха ──────────────────────────────────── */
.ce-success-screen { text-align: center; padding: 20px 0; }
.ce-success-icon   { font-size: 3em; margin-bottom: 10px; }
.ce-success-title  { font-size: 1.3em; font-weight: 700; color: var(--ce-success); margin: 0 0 10px; }
.ce-success-msg    { color: var(--ce-text); line-height: 1.6; }

.ce-success-requisites {
    background:    var(--ce-surface);
    border:        1px solid var(--ce-border);
    border-radius: 10px;
    padding:       14px;
    margin:        16px 0;
    text-align:    left;
}
.ce-req-label { font-weight: 600; margin-bottom: 8px; }
.ce-req-box   { white-space: pre-wrap; font-family: monospace; font-size: 0.9em; }

.ce-btn-link {
    background:    none;
    border:        none;
    color:         var(--ce-accent);
    cursor:        pointer;
    font-size:     0.9em;
    margin-top:    12px;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   КАБИНЕТ ОПЕРАТОРА
═══════════════════════════════════════════════════ */
.ce-cabinet {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width:   100%;
}
.ce-cabinet-title { font-size: 1.3em; margin-bottom: 16px; }

.ce-filter-bar {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 20px;
}
.ce-filter-chip {
    padding:       6px 14px;
    border:        1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    color:         #555;
    font-size:     0.85em;
    transition:    all .2s;
}
.ce-filter-chip.active,
.ce-filter-chip:hover {
    background:   #f7931a;
    border-color: #f7931a;
    color:        #fff;
}

.ce-cab-list        { display: flex; flex-direction: column; gap: 14px; }
.ce-empty-state     { color: #aaa; text-align: center; padding: 32px; }

.ce-cab-card {
    border:        1px solid #e0e0e0;
    border-radius: 12px;
    overflow:      hidden;
    background:    #fff;
    box-shadow:    0 1px 6px rgba(0,0,0,.06);
}
.ce-cab-new        { border-left: 4px solid #3b82f6; }
.ce-cab-processing { border-left: 4px solid #f59e0b; }
.ce-cab-done       { border-left: 4px solid #22c55e; }
.ce-cab-cancelled  { border-left: 4px solid #ef4444; }

.ce-cab-head {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 16px;
    background:    #f9f9f9;
    border-bottom: 1px solid #eee;
    flex-wrap:     wrap;
}
.ce-cab-num  { font-weight: 700; }
.ce-cab-date { color: #888; font-size: 0.82em; margin-left: auto; }

.ce-cab-body {
    display:    flex;
    flex-wrap:  wrap;
}
.ce-cab-col {
    flex:        1;
    min-width:   160px;
    padding:     14px 16px;
    border-right:1px solid #f0f0f0;
    font-size:   0.88em;
    line-height: 1.7;
}
.ce-cab-col:last-child  { border-right: none; }
.ce-cab-col-title       { font-weight: 600; font-size: 0.8em; color: #888; margin-bottom: 6px; text-transform: uppercase; }

.ce-btn-sm {
    padding:       5px 12px;
    background:    #f7931a;
    color:         #fff;
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     0.82em;
    transition:    opacity .2s;
}
.ce-btn-sm:hover { opacity: .85; }

/* ── Бейджи ────────────────────────────────────────── */
.ce-badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     0.8em;
    color:         #fff;
    font-weight:   600;
}
.ce-badge-sm {
    display:       inline-block;
    padding:       2px 8px;
    border-radius: 12px;
    background:    #f0f0f0;
    font-size:     0.8em;
    color:         #555;
}

/* ═══════════════════════════════════════════════════
   ADMIN PANEL EXTRA STYLES
═══════════════════════════════════════════════════ */
.ce-admin-wrap h1    { color: #1a1a2e; }
.ce-orders-table td  { vertical-align: middle; }

.ce-bank-form-wrap {
    background:    #fff;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    padding:       20px 24px;
    max-width:     760px;
}
.ce-bank-form-wrap h2 { margin-top: 0; }

.ce-widget-builder   { max-width: 800px; }
.ce-widget-settings  { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px 20px; }

.ce-code-block       { margin-bottom: 8px; }
.ce-code-block h3    { margin-bottom: 8px; }

.ce-code-box {
    background:    #1e1e1e;
    border-radius: 8px;
    padding:       14px 16px;
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    flex-wrap:     wrap;
}
.ce-code-box code {
    flex:        1;
    font-family: 'Courier New', monospace;
    font-size:   13px;
    color:       #d4d4d4;
    word-break:  break-all;
}
.ce-code-box--large { flex-direction: column; }
.ce-code-box textarea {
    width:       100%;
    font-family: 'Courier New', monospace;
    font-size:   12px;
    background:  transparent;
    color:       #d4d4d4;
    border:      none;
    outline:     none;
    resize:      vertical;
}