/* ==========================================================================
   Equalza — Base64 Encoder & Decoder Tool CSS
   Tool-specific rules. Core layout handled by equalza-core.
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root{
  --bg:#f5f6f8;--surface:#fff;--border:#e2e5ea;--border2:#c8cdd6;
  --accent:#2563eb;--accent-h:#1d4ed8;--accent-light:#eff6ff;--accent-mid:#bfdbfe;
  --text:#111827;--text2:#4b5563;--text3:#9ca3af;
  --green:#059669;--green-bg:#ecfdf5;
  --red:#dc2626;--red-bg:#fef2f2;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --r:8px;--rl:12px;--rxl:16px;
}

/* ==========================================================================
   Tool Card Shell
   ========================================================================== */
.b64.tool-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--rxl)!important;box-shadow:var(--sh)!important;overflow:hidden!important}
.b64.tool-card-tabbed{overflow:visible!important;border-radius:0 var(--rxl) var(--rxl) var(--rxl)!important}

/* ==========================================================================
   Tab Bar (shared with compressor pattern)
   ========================================================================== */
.b64 .eq-tabs-row{display:flex!important;align-items:center!important;justify-content:space-between!important;position:relative!important;top:-1px!important}
.b64 .eq-tabs-nav{display:flex!important;gap:0!important}
.b64 .eq-tab{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:11px 22px!important;font-size:13px!important;font-weight:600!important;font-family:inherit!important;color:var(--text2)!important;background:var(--bg)!important;border:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;cursor:pointer!important;transition:all .15s!important;border-radius:var(--rl) var(--rl) 0 0!important;margin-inline-end:-1px!important}
.b64 .eq-tab svg{width:16px!important;height:16px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.6!important}
.b64 .eq-tab.active{background:var(--surface)!important;color:var(--accent)!important;border-bottom-color:var(--surface)!important;z-index:1!important}
.b64 .eq-tab:hover:not(.active){background:var(--accent-light)!important;color:var(--accent)!important}

/* ==========================================================================
   URL-safe Toggle
   ========================================================================== */
.b64-toggle{display:inline-flex!important;align-items:center!important;gap:8px!important;cursor:pointer!important;padding:0 16px!important;font-size:13px!important;user-select:none!important}
.b64-toggle input{position:absolute!important;opacity:0!important;width:0!important;height:0!important}
.b64-toggle-box{width:18px!important;height:18px!important;border:2px solid var(--border2)!important;border-radius:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:all .15s!important;flex-shrink:0!important}
.b64-toggle-box svg{opacity:0!important;width:12px!important;height:12px!important;stroke:#fff!important;transition:opacity .12s!important}
.b64-toggle input:checked ~ .b64-toggle-text{color:var(--accent)!important}
.b64-toggle:has(input:checked) .b64-toggle-box{background:var(--accent)!important;border-color:var(--accent)!important}
.b64-toggle:has(input:checked) .b64-toggle-box svg{opacity:1!important}
.b64-toggle-text{font-weight:600!important;color:var(--text2)!important;font-size:12px!important}

/* ==========================================================================
   Tool Panes
   ========================================================================== */
.b64 .tool-pane{padding:20px!important}
.b64 .hidden{display:none!important}

/* ==========================================================================
   Text Pane — Textareas
   ========================================================================== */
.b64-field{margin-bottom:12px!important}
.b64-field-header{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:6px!important;flex-wrap:wrap!important}
.b64-field-label{font-size:13px!important;font-weight:700!important;color:var(--text)!important}
.b64-size{font-size:11px!important;color:var(--text3)!important;font-weight:500!important}
.b64-output-actions{margin-inline-start:auto!important;display:flex!important;gap:6px!important}

.b64-textarea{width:100%!important;min-height:100px!important;padding:12px 14px!important;font-size:13px!important;font-family:'Courier New',Courier,monospace!important;line-height:1.6!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;background:var(--bg)!important;color:var(--text)!important;resize:vertical!important;transition:border-color .15s!important;box-sizing:border-box!important}
.b64-textarea:focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
.b64-textarea.b64-output{background:#fafbfc!important;color:var(--text2)!important;cursor:default!important}

/* ==========================================================================
   Action Buttons
   ========================================================================== */
.b64-actions{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:8px 0!important;flex-wrap:wrap!important}

.b64 .btn-primary{display:inline-flex!important;align-items:center!important;gap:7px!important;background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;font-weight:600!important;font-size:13px!important;font-family:inherit!important;padding:9px 20px!important;border-radius:var(--r)!important;border:none!important;cursor:pointer!important;transition:all .15s!important;box-shadow:0 2px 6px rgba(37,99,235,.25)!important}
.b64 .btn-primary:hover{opacity:.88!important}
.b64 .btn-primary svg{width:14px!important;height:14px!important}

.b64 .btn-ghost{display:inline-flex!important;align-items:center!important;gap:7px!important;background:var(--bg)!important;color:var(--text2)!important;font-weight:600!important;font-size:13px!important;font-family:inherit!important;padding:9px 20px!important;border-radius:var(--r)!important;border:1px solid var(--border2)!important;cursor:pointer!important;transition:all .15s!important}
.b64 .btn-ghost:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--surface)!important}
.b64 .btn-ghost svg{width:14px!important;height:14px!important}

.b64 .btn-clear{display:inline-flex!important;align-items:center!important;gap:7px!important;background:var(--red-bg)!important;color:var(--red)!important;font-weight:600!important;font-size:13px!important;font-family:inherit!important;padding:9px 16px!important;border-radius:var(--r)!important;border:1px solid #fecaca!important;cursor:pointer!important;transition:all .15s!important}
.b64 .btn-clear:hover{background:var(--red)!important;color:#fff!important}
.b64 .btn-clear svg{width:13px!important;height:13px!important}

.b64-btn svg{stroke:currentColor!important;fill:none!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* Copy button (inline) */
.b64-copy-btn{display:inline-flex!important;align-items:center!important;gap:5px!important;background:transparent!important;color:var(--accent)!important;font-size:12px!important;font-weight:600!important;font-family:inherit!important;padding:4px 10px!important;border:1px solid var(--accent)!important;border-radius:6px!important;cursor:pointer!important;transition:all .15s!important}
.b64-copy-btn:hover{background:var(--accent)!important;color:#fff!important}
.b64-copy-btn svg{width:13px!important;height:13px!important;stroke:currentColor!important;fill:none!important;stroke-width:2!important}
.b64-copy-btn.copied{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}

/* ==========================================================================
   Auto-detect Badge
   ========================================================================== */
.b64-detect{text-align:center!important;padding:6px 0!important;font-size:12px!important;font-weight:600!important;color:var(--text3)!important;min-height:20px!important}
.b64-detect.is-b64{color:var(--accent)!important}
.b64-detect.is-text{color:var(--green)!important}

/* ==========================================================================
   Drop Zone (shared with compressor pattern)
   ========================================================================== */
.b64 .drop-zone{border:2px dashed var(--border2)!important;border-radius:var(--rl)!important;margin:0!important;padding:48px 24px!important;text-align:center!important;cursor:pointer!important;transition:all .2s!important;background:var(--bg)!important}
.b64 .drop-zone:hover,.b64 .drop-zone.drag-over{border-color:var(--accent)!important;background:var(--accent-light)!important}
.b64 .dz-icon{width:52px!important;height:52px!important;background:var(--accent-light)!important;border:1px solid var(--accent-mid)!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 12px!important}
.b64 .dz-icon svg{width:22px!important;height:22px!important;stroke:var(--accent)!important;fill:none!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.b64 .dz-title{font-size:16px!important;font-weight:700!important;margin-bottom:6px!important}
.b64 .dz-sub{font-size:13px!important;color:var(--text2)!important;margin-bottom:14px!important}
.b64 .btn-dz{display:inline-flex!important;align-items:center!important;gap:7px!important;background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;font-weight:600!important;font-size:13px!important;font-family:inherit!important;padding:9px 20px!important;border-radius:var(--r)!important;border:none!important;cursor:pointer!important;box-shadow:0 2px 6px rgba(37,99,235,.25)!important}
.b64 .fmt-pills{display:flex!important;gap:5px!important;justify-content:center!important;margin-top:14px!important;flex-wrap:wrap!important}
.b64 .fmt-pill{padding:2px 9px!important;border:1px solid var(--border)!important;border-radius:4px!important;font-size:10px!important;font-weight:700!important;color:var(--text3)!important;letter-spacing:.05em!important;text-transform:uppercase!important;background:var(--surface)!important}

/* ==========================================================================
   Image Result Area
   ========================================================================== */
.b64-img-result{padding:0 0 12px!important}
.b64-img-preview-wrap{text-align:center!important;padding:16px!important;background:var(--bg)!important;border-radius:var(--r)!important;margin-bottom:12px!important}
.b64-img-preview{max-width:100%!important;max-height:240px!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important;margin-top:10px!important}
.b64-img-meta{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;font-size:12px!important;color:var(--text2)!important;flex-wrap:wrap!important}
.b64-img-meta span{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:3px 10px!important;background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:6px!important;font-weight:600!important}

/* Image mode selector */
.b64-img-mode{display:flex!important;gap:0!important;margin-bottom:12px!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;overflow:hidden!important}
.b64-mode-btn{flex:1!important;padding:8px 12px!important;font-size:12px!important;font-weight:600!important;font-family:inherit!important;background:var(--bg)!important;color:var(--text2)!important;border:none!important;cursor:pointer!important;transition:all .15s!important;border-inline-end:1px solid var(--border)!important}
.b64-mode-btn:last-child{border-inline-end:none!important}
.b64-mode-btn.active{background:var(--accent)!important;color:#fff!important}
.b64-mode-btn:hover:not(.active){background:var(--accent-light)!important;color:var(--accent)!important}

/* Decoded image */
.b64-img-decoded{text-align:center!important;padding:16px!important;background:var(--bg)!important;border-radius:var(--r)!important;margin-top:12px!important}
.b64-img-decode-section{border-top:1px solid var(--border)!important;margin-top:16px!important;padding-top:16px!important}

/* ==========================================================================
   File Result Area
   ========================================================================== */
.b64-file-result{padding:0 0 12px!important}

/* ==========================================================================
   Privacy Banner
   ========================================================================== */
.b64-privacy{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:12px 16px!important;font-size:12px!important;color:var(--green)!important;font-weight:600!important;background:var(--green-bg)!important;border-top:1px solid #d1fae5!important}
.b64-privacy svg{stroke:var(--green)!important;flex-shrink:0!important}

/* ==========================================================================
   Error / Status Messages
   ========================================================================== */
.b64-error{text-align:center!important;padding:10px!important;color:var(--red)!important;font-size:13px!important;font-weight:600!important;background:var(--red-bg)!important;border-radius:var(--r)!important;margin:8px 0!important}
.b64-success{text-align:center!important;padding:10px!important;color:var(--green)!important;font-size:13px!important;font-weight:600!important;background:var(--green-bg)!important;border-radius:var(--r)!important;margin:8px 0!important}

/* ==========================================================================
   RTL Adjustments
   ========================================================================== */
[dir="rtl"] .b64 .eq-tabs-nav{flex-direction:row-reverse!important}
[dir="rtl"] .b64-output-actions{margin-inline-start:auto!important;margin-inline-end:0!important}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:640px){
  .b64 .eq-tabs-row{flex-direction:column!important;gap:8px!important}
  .b64 .eq-tab{padding:9px 14px!important;font-size:12px!important}
  .b64-actions{gap:6px!important}
  .b64-btn{padding:8px 14px!important;font-size:12px!important}
  .b64 .tool-pane{padding:14px!important}
  .b64 .drop-zone{padding:32px 16px!important}
  .b64-img-mode{flex-direction:column!important}
  .b64-toggle{padding:0 10px!important}
}