/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Base64 Encoder / Decoder — style.css  v2.0
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mode toggle row: [Encode] [Decode] ─────────────────────────────────────── */
.b64-mode-row {
    display:         flex;
    gap:             0.5rem;
    margin-bottom:   1.5rem;
}

.b64-mode-btn {
    flex:            1;
    padding:         0.625rem 1rem;
    border:          2px solid var(--border, #E2E4E8);
    border-radius:   999px;
    background:      transparent;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.9375rem;
    font-weight:     600;
    color:           var(--muted, #64748B);
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    text-align:      center;
    letter-spacing:  0.01em;
}

.b64-mode-btn:hover {
    border-color:    var(--accent, #E8472F);
    color:           var(--accent, #E8472F);
}

.b64-mode-btn.active {
    background:      var(--accent, #E8472F);
    border-color:    var(--accent, #E8472F);
    color:           #fff;
}

/* ── Sub-tab row: Text | File (inside Encode panel) ─────────────────────────── */
.b64-subtab-row {
    display:         flex;
    gap:             0;
    margin-bottom:   1.25rem;
    border-bottom:   2px solid var(--border, #E2E4E8);
}

.b64-subtab {
    padding:         0.5rem 1.25rem;
    border:          none;
    border-bottom:   2px solid transparent;
    margin-bottom:   -2px;
    background:      transparent;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.9rem;
    font-weight:     600;
    color:           var(--muted, #64748B);
    cursor:          pointer;
    transition:      color 0.15s, border-color 0.15s;
}

.b64-subtab:hover {
    color:           var(--accent, #E8472F);
}

.b64-subtab.active {
    color:           var(--accent, #E8472F);
    border-bottom-color: var(--accent, #E8472F);
}

/* ── Panel visibility ───────────────────────────────────────────────────────── */
.b64-panel {
    display:         none;
}

.b64-panel.active {
    display:         block;
}

/* ── Auto-detect hint banner ────────────────────────────────────────────────── */
.b64-hint {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    padding:         0.6rem 0.875rem;
    background:      #FFF5F2;
    border:          1px solid #f5cbb5;
    border-radius:   8px;
    font-size:       0.8125rem;
    color:           #a0401a;
    font-weight:     500;
    margin-bottom:   0.75rem;
    animation:       b64-fade-in 0.2s ease;
}

.b64-hint[hidden] {
    display:         none;
}

.b64-hint-icon {
    font-style:      normal;
    font-size:       1rem;
    flex-shrink:     0;
}

.b64-hint button {
    margin-left:     auto;
    padding:         0.2rem 0.65rem;
    border:          1px solid #E8472F;
    border-radius:   6px;
    background:      transparent;
    color:           #E8472F;
    font-size:       0.75rem;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background 0.12s, color 0.12s;
}

.b64-hint button:hover {
    background:      #E8472F;
    color:           #fff;
}

@keyframes b64-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Textarea + char count wrapper ─────────────────────────────────────────── */
.b64-textarea-wrap {
    position:        relative;
    margin-bottom:   0.5rem;
}

.b64-textarea {
    width:           100%;
    min-height:      120px;
    padding:         0.75rem 0.875rem;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    font-family:     'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size:       0.875rem;
    line-height:     1.6;
    color:           var(--text, #0D1B2A);
    background:      #fff;
    resize:          vertical;
    box-sizing:      border-box;
    transition:      border-color 0.15s;
    outline:         none;
}

.b64-textarea:focus {
    border-color:    var(--accent, #E8472F);
}

.b64-textarea[readonly] {
    background:      #f9f9f7;
    cursor:          default;
}

.b64-textarea.error-state {
    border-color:    #e53e3e;
    background:      #fff5f5;
}

.b64-char-count {
    display:         block;
    text-align:      right;
    font-size:       0.75rem;
    color:           var(--muted, #64748B);
    margin-top:      0.25rem;
    margin-bottom:   0.75rem;
}

/* ── Options row (checkboxes) ───────────────────────────────────────────────── */
.b64-options-row {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1rem;
    margin-bottom:   1.25rem;
}

.b64-option {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    cursor:          pointer;
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text, #0D1B2A);
    user-select:     none;
}

.b64-option input[type="checkbox"] {
    width:           16px;
    height:          16px;
    accent-color:    var(--accent, #E8472F);
    cursor:          pointer;
    flex-shrink:     0;
}

.b64-option-hint {
    font-size:       0.75rem;
    color:           var(--muted, #64748B);
    font-weight:     400;
}

/* ── Error message ──────────────────────────────────────────────────────────── */
.b64-error {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.6rem 0.875rem;
    background:      #fff5f5;
    border:          1px solid #fed7d7;
    border-radius:   8px;
    color:           #c53030;
    font-size:       0.875rem;
    font-weight:     500;
    margin-bottom:   0.75rem;
    animation:       b64-fade-in 0.18s ease;
}

.b64-error[hidden] {
    display:         none;
}

/* ── Action row: main button + clear ───────────────────────────────────────── */
.b64-action-row {
    display:         flex;
    gap:             0.75rem;
    margin-bottom:   1.25rem;
    flex-wrap:       wrap;
}

.b64-action-row .btn-primary {
    flex:            1;
    min-width:       180px;
}

.b64-clear-btn {
    padding:         0.6rem 1.1rem;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    background:      transparent;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--muted, #64748B);
    cursor:          pointer;
    transition:      border-color 0.15s, color 0.15s;
    white-space:     nowrap;
}

.b64-clear-btn:hover {
    border-color:    var(--accent, #E8472F);
    color:           var(--accent, #E8472F);
}

/* ── Output row header: label + button(s) ───────────────────────────────────── */
.b64-output-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   0.375rem;
    flex-wrap:       wrap;
    gap:             0.5rem;
}

.b64-output-label {
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--muted, #64748B);
    text-transform:  uppercase;
    letter-spacing:  0.05em;
}

.b64-output-btns {
    display:         flex;
    gap:             0.5rem;
    flex-wrap:       wrap;
}

/* ── Copy / Download buttons ────────────────────────────────────────────────── */
.b64-copy-btn,
.b64-download-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.3rem 0.75rem;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   6px;
    background:      transparent;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--muted, #64748B);
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    white-space:     nowrap;
}

.b64-copy-btn:hover,
.b64-download-btn:hover {
    background:      var(--accent, #E8472F);
    border-color:    var(--accent, #E8472F);
    color:           #fff;
}

.b64-copy-btn.copied {
    background:      #22c55e;
    border-color:    #22c55e;
    color:           #fff;
}

/* ── File drop zone ─────────────────────────────────────────────────────────── */
.b64-dropzone {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         2rem 1.5rem;
    border:          2px dashed var(--border, #E2E4E8);
    border-radius:   12px;
    background:      #fafaf9;
    cursor:          pointer;
    transition:      border-color 0.2s, background 0.2s;
    text-align:      center;
    margin-bottom:   1rem;
    min-height:      140px;
    position:        relative;
}

.b64-dropzone:hover,
.b64-dropzone.drag-over {
    border-color:    var(--accent, #E8472F);
    background:      #FFF5F2;
}

.b64-dropzone-icon {
    font-size:       2rem;
    line-height:     1;
}

.b64-dropzone-title {
    font-size:       0.9375rem;
    font-weight:     600;
    color:           var(--text, #0D1B2A);
}

.b64-dropzone-hint {
    font-size:       0.8125rem;
    color:           var(--muted, #64748B);
}

.b64-dropzone input[type="file"] {
    position:        absolute;
    inset:           0;
    opacity:         0;
    cursor:          pointer;
    width:           100%;
    height:          100%;
}

/* ── File info pill (shown after file selected) ─────────────────────────────── */
.b64-file-info {
    display:         none;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.5rem 0.875rem;
    background:      #f0fdf4;
    border:          1px solid #bbf7d0;
    border-radius:   8px;
    font-size:       0.875rem;
    color:           #166534;
    font-weight:     500;
    margin-bottom:   1rem;
}

.b64-file-info.visible {
    display:         flex;
}

.b64-file-info-name {
    font-weight:     600;
    word-break:      break-all;
}

.b64-file-info-size {
    color:           #15803d;
    font-weight:     400;
    white-space:     nowrap;
    flex-shrink:     0;
}

.b64-file-clear {
    margin-left:     auto;
    background:      none;
    border:          none;
    color:           #166534;
    cursor:          pointer;
    font-size:       1rem;
    line-height:     1;
    padding:         0 0.25rem;
    flex-shrink:     0;
    opacity:         0.7;
    transition:      opacity 0.15s;
}

.b64-file-clear:hover {
    opacity:         1;
}

/* ── Data URI header toggle ─────────────────────────────────────────────────── */
.b64-uri-toggle-row {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    margin-bottom:   0.75rem;
    font-size:       0.875rem;
}

.b64-uri-toggle-label {
    font-weight:     500;
    color:           var(--text, #0D1B2A);
    cursor:          pointer;
    user-select:     none;
}

.b64-uri-toggle-row input[type="checkbox"] {
    width:           16px;
    height:          16px;
    accent-color:    var(--accent, #E8472F);
    cursor:          pointer;
}

/* ── Decoded output variants ────────────────────────────────────────────────── */

/* Image preview */
.b64-image-preview {
    display:         none;
    max-width:       100%;
    max-height:      320px;
    border-radius:   8px;
    border:          1.5px solid var(--border, #E2E4E8);
    object-fit:      contain;
    background:      #fafaf9;
    margin-bottom:   0.5rem;
}

.b64-image-preview.visible {
    display:         block;
}

/* Binary notice */
.b64-binary-notice {
    display:         none;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.6rem 0.875rem;
    background:      #fefce8;
    border:          1px solid #fde68a;
    border-radius:   8px;
    color:           #92400e;
    font-size:       0.875rem;
    font-weight:     500;
    margin-bottom:   0.75rem;
}

.b64-binary-notice.visible {
    display:         flex;
}

/* ── Decode output section wrapper ─────────────────────────────────────────── */
#b64-decode-output-section {
    /* contains image preview / binary notice / textarea */
}

/* ── Monospace textarea IDs ─────────────────────────────────────────────────── */
#b64-encode-input,
#b64-encode-output,
#b64-decode-input,
#b64-decode-text-output,
#b64-file-output {
    font-family:     'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
}

/* ── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .b64-mode-btn {
        font-size:   0.875rem;
        padding:     0.5rem 0.75rem;
    }

    .b64-action-row {
        flex-direction: column;
    }

    .b64-action-row .btn-primary,
    .b64-clear-btn {
        width:       100%;
        min-width:   0;
    }

    .b64-output-header {
        flex-direction: column;
        align-items:    flex-start;
    }

    .b64-options-row {
        flex-direction: column;
        gap:            0.625rem;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */