/* ============================================================
   IMAGE.OPTIMIZER  —  WordPress / Elementor Plugin Styles
   ============================================================ */

/* ----- Reset / Base ----- */
.io-wrapper *,
.io-wrapper *::before,
.io-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.io-wrapper {
    --io-bg:        #0a0a0a;
    --io-bg2:       #0d0d0d;
    --io-border:    #1a1a1a;
    --io-border2:   #222;
    --io-text:      #e8e8e8;
    --io-muted:     #555;
    --io-dim:       #333;
    --io-dimmer:    #2a2a2a;
    --io-accent:    #00ff88;
    --io-accent-bg: rgba(0,255,136,0.03);
    --io-danger:    #ff4455;
    --io-warn:      #ffaa00;
    --io-radius:    4px;
    --io-font:      'Courier New', Courier, monospace;

    background:   var(--io-bg);
    color:        var(--io-text);
    font-family:  var(--io-font);
    border-radius: 8px;
    overflow:     hidden;
    border:       1px solid var(--io-border);
    width:        100%;
}

/* ----- Header ----- */
.io-header {
    display:          flex;
    align-items:      baseline;
    gap:              14px;
    padding:          18px 28px;
    background:       var(--io-bg2);
    border-bottom:    1px solid var(--io-border);
    flex-wrap:        wrap;
}

.io-header-sys {
    font-size:        10px;
    color:            var(--io-muted);
    letter-spacing:   4px;
    text-transform:   uppercase;
}

.io-header-title {
    font-size:        20px;
    font-weight:      700;
    letter-spacing:   2px;
    color:            #fff;
    text-transform:   uppercase;
    line-height:      1;
}

.io-header-version {
    font-size:        10px;
    color:            #444;
    letter-spacing:   2px;
    margin-left:      auto;
}

/* ----- Body Layout ----- */
.io-body {
    display:              grid;
    grid-template-columns: 260px 1fr;
    min-height:           520px;
}

/* ----- Sidebar ----- */
.io-sidebar {
    border-right:     1px solid var(--io-border);
    padding:          24px 20px;
    background:       var(--io-bg2);
    display:          flex;
    flex-direction:   column;
    gap:              24px;
    overflow-y:       auto;
}

.io-section { display: flex; flex-direction: column; gap: 8px; }

.io-label {
    font-size:        10px;
    color:            var(--io-muted);
    letter-spacing:   3px;
    text-transform:   uppercase;
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
}

/* Drop zone */
.io-drop-zone {
    border:           1px dashed var(--io-border2);
    border-radius:    var(--io-radius);
    padding:          22px 12px;
    text-align:       center;
    cursor:           pointer;
    transition:       border-color 0.2s, background 0.2s;
    position:         relative;
    outline:          none;
}
.io-drop-zone:hover,
.io-drop-zone.dragging {
    border-color:     var(--io-accent);
    background:       var(--io-accent-bg);
}
.io-drop-icon { font-size: 22px; margin-bottom: 8px; color: var(--io-dim); }
.io-drop-text { font-size: 10px; color: #444; line-height: 1.7; letter-spacing: 1px; }
.io-file-input {
    position:  absolute;
    inset:     0;
    opacity:   0;
    cursor:    pointer;
    width:     100%;
    height:    100%;
}

/* Format buttons */
.io-format-group { display: flex; gap: 6px; }
.io-format-btn {
    flex:           1;
    padding:        8px 4px;
    background:     transparent;
    color:          var(--io-dim);
    border:         1px solid var(--io-border2);
    border-radius:  3px;
    cursor:         pointer;
    font-size:      10px;
    font-family:    var(--io-font);
    font-weight:    700;
    letter-spacing: 1px;
    transition:     all 0.15s;
    text-transform: uppercase;
}
.io-format-btn.active {
    background:    var(--io-accent);
    color:         #000;
    border-color:  var(--io-accent);
}
.io-format-btn:hover:not(.active) {
    border-color:  var(--io-dimmer);
    color:         var(--io-text);
}

/* Quality slider */
.io-quality-slider {
    width:         100%;
    accent-color:  var(--io-accent);
    cursor:        pointer;
    height:        4px;
}
.io-quality-value { font-weight: 700; }
.io-range-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       9px;
    color:           var(--io-dimmer);
    letter-spacing:  1px;
}

/* Dimension inputs */
.io-dims-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.io-input-label { font-size: 9px; color: var(--io-dimmer); margin-bottom: 4px; letter-spacing: 1px; }
.io-num-input {
    width:         100%;
    background:    #111;
    border:        1px solid var(--io-border2);
    border-radius: 3px;
    color:         var(--io-text);
    padding:       7px 8px;
    font-size:     12px;
    font-family:   var(--io-font);
}
.io-num-input:focus { outline: 1px solid var(--io-accent); }

.io-checkbox-label {
    display:      flex;
    align-items:  center;
    gap:          8px;
    font-size:    10px;
    color:        #444;
    cursor:       pointer;
    letter-spacing: 1px;
    margin-top:   6px;
}
.io-keep-aspect { accent-color: var(--io-accent); cursor: pointer; }

/* Stats */
.io-stats {
    border:        1px solid var(--io-border);
    border-radius: var(--io-radius);
    padding:       14px;
    background:    var(--io-bg);
    gap:           12px;
}
.io-stat-block { margin-bottom: 8px; }
.io-stat-key   { font-size: 9px; color: var(--io-dimmer); letter-spacing: 2px; }
.io-stat-val   { font-size: 14px; color: #666; font-weight: 700; margin: 2px 0; }
.io-stat-dims  { font-size: 9px; color: #222; }
.io-stat-savings {
    border-top:   1px solid var(--io-border);
    padding-top:  10px;
}
.io-savings-value { font-size: 24px; font-weight: 700; color: var(--io-accent); }

/* Download */
.io-btn-download {
    display:          block;
    padding:          13px;
    background:       var(--io-accent);
    color:            #000;
    text-align:       center;
    border-radius:    3px;
    text-decoration:  none;
    font-size:        11px;
    font-family:      var(--io-font);
    font-weight:      700;
    letter-spacing:   3px;
    margin-top:       auto;
    transition:       opacity 0.2s;
}
.io-btn-download:hover { opacity: 0.85; color: #000; }

/* Accent utility */
.io-accent { color: var(--io-accent); }

/* ----- Preview Area ----- */
.io-preview-area {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        24px 28px;
}

.io-preview-toolbar {
    display:     flex;
    gap:         4px;
    align-items: center;
    flex-wrap:   wrap;
}
.io-tab {
    padding:        6px 13px;
    background:     transparent;
    color:          var(--io-dim);
    border:         1px solid transparent;
    border-radius:  3px;
    cursor:         pointer;
    font-size:      10px;
    font-family:    var(--io-font);
    letter-spacing: 2px;
    transition:     all 0.15s;
}
.io-tab.active {
    background:  var(--io-border);
    color:       var(--io-text);
    border-color: var(--io-border2);
}
.io-processing-label { font-size: 10px; color: #444; letter-spacing: 2px; margin-left: 12px; }

/* Empty state */
.io-empty-state {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    border:          1px solid #111;
    border-radius:   var(--io-radius);
    gap:             14px;
    min-height:      380px;
}
.io-empty-icon { font-size: 56px; opacity: 0.2; }
.io-empty-text { font-size: 11px; letter-spacing: 4px; color: #2a2a2a; }
.io-empty-sub  { font-size: 10px; color: #1a1a1a; }

/* Preview panels */
.io-preview-panels {
    flex:        1;
    display:     flex;
    gap:         14px;
    min-height:  380px;
}
.io-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.io-preview-label {
    font-size:      9px;
    color:          var(--io-dim);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.io-preview-label-optimized { color: var(--io-accent); }

.io-img-box {
    flex:            1;
    border:          1px solid var(--io-border);
    border-radius:   var(--io-radius);
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #080808;
    min-height:      300px;
}
.io-img-box-optimized { border-color: #1a3326; }
.io-img-box img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    display:    block;
}

/* Footer */
.io-preview-footer {
    display:          flex;
    gap:              20px;
    border-top:       1px solid #111;
    padding-top:      14px;
    font-size:        10px;
    color:            var(--io-dimmer);
    letter-spacing:   2px;
    flex-wrap:        wrap;
}
.io-footer-val         { color: #444; }
.io-footer-saved-wrap  { margin-left: auto; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet — stack sidebar on top */
@media (max-width: 860px) {
    .io-body {
        grid-template-columns: 1fr;
        grid-template-rows:    auto 1fr;
    }
    .io-sidebar {
        border-right:  none;
        border-bottom: 1px solid var(--io-border);
        flex-direction: row;
        flex-wrap:     wrap;
        gap:           16px;
        padding:       18px 16px;
    }
    .io-section      { min-width: 160px; flex: 1; }
    .io-stats        { min-width: 200px; flex: 1; }
    .io-btn-download { margin-top: 0; align-self: flex-end; min-width: 140px; }
}

/* Mobile — single column */
@media (max-width: 580px) {
    .io-header          { padding: 14px 16px; gap: 10px; }
    .io-header-title    { font-size: 16px; }
    .io-header-version  { display: none; }

    .io-sidebar {
        flex-direction: column;
        padding:        16px;
    }
    .io-section { min-width: 100%; }

    .io-preview-area    { padding: 16px; gap: 12px; }

    .io-preview-panels  { flex-direction: column; gap: 12px; min-height: auto; }
    .io-img-box         { min-height: 200px; }

    .io-preview-footer  { gap: 10px; font-size: 9px; }
    .io-footer-saved-wrap { margin-left: 0; }

    .io-dims-grid       { grid-template-columns: 1fr 1fr; }

    .io-savings-value   { font-size: 20px; }
    .io-empty-state     { min-height: 260px; }
    .io-empty-icon      { font-size: 40px; }
}

/* Tiny screens */
@media (max-width: 380px) {
    .io-format-group { flex-wrap: wrap; }
    .io-format-btn   { min-width: 60px; }
    .io-header-sys   { display: none; }
}