/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Unit Converter — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Category tab pills ──────────────────────────────────────────────────────── */
.category-tabs {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    margin-bottom:   1.5rem;
}

.cat-tab {
    padding:         0.4rem 1rem;
    border-radius:   999px;
    border:          1.5px solid var(--border);
    background:      var(--bg);
    color:           var(--text-secondary);
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    font-family:     'IBM Plex Sans', sans-serif;
    line-height:     1.4;
}

.cat-tab:hover {
    border-color:  var(--accent);
    color:         var(--accent);
}

.cat-tab.active {
    background:    var(--accent);
    border-color:  var(--accent);
    color:         #fff;
}

/* ── From / To conversion row ────────────────────────────────────────────────── */
.converter-row {
    display:         grid;
    grid-template-columns: 1fr auto 1fr;
    gap:             0.75rem;
    align-items:     end;
    margin-bottom:   1.25rem;
}

/* Each side: value input + unit select stacked */
.conv-side {
    display:         flex;
    flex-direction:  column;
    gap:             0.5rem;
}

.conv-label {
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--text-secondary);
    text-transform:  uppercase;
    letter-spacing:  0.06em;
}

/* Value number input */
.value-input {
    width:           100%;
    padding:         0.65rem 0.875rem;
    border:          1.5px solid var(--border);
    border-radius:   8px;
    font-size:       1.125rem;
    font-weight:     600;
    color:           var(--text-primary);
    background:      #fff;
    font-family:     'IBM Plex Sans', sans-serif;
    transition:      border-color 0.15s, box-shadow 0.15s;
    box-sizing:      border-box;
    -moz-appearance: textfield;
}

.value-input::-webkit-outer-spin-button,
.value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.value-input:focus {
    outline:         none;
    border-color:    var(--accent);
    box-shadow:      0 0 0 3px rgba(232,98,42,0.15);
}

/* Unit select */
.unit-select {
    width:           100%;
    padding:         0.55rem 2.25rem 0.55rem 0.875rem;
    border:          1.5px solid var(--border);
    border-radius:   8px;
    font-size:       0.9375rem;
    font-weight:     500;
    color:           var(--text-primary);
    background:      #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6760' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    appearance:      none;
    -webkit-appearance: none;
    cursor:          pointer;
    font-family:     'IBM Plex Sans', sans-serif;
    transition:      border-color 0.15s, box-shadow 0.15s;
    box-sizing:      border-box;
}

.unit-select:focus {
    outline:         none;
    border-color:    var(--accent);
    box-shadow:      0 0 0 3px rgba(232,98,42,0.15);
}

/* ── Swap button ─────────────────────────────────────────────────────────────── */
.swap-wrap {
    display:         flex;
    align-items:     flex-end;
    padding-bottom:  0;
    justify-content: center;
}

.swap-btn {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          1.5px solid var(--border);
    background:      #fff;
    color:           var(--text-secondary);
    font-size:       1.25rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    flex-shrink:     0;
}

.swap-btn:hover {
    background:      var(--accent);
    border-color:    var(--accent);
    color:           #fff;
    transform:       rotate(180deg);
}

/* ── Result box ──────────────────────────────────────────────────────────────── */
.result-box {
    background:      linear-gradient(135deg, #fff9f7 0%, #fff 100%);
    border:          2px solid var(--accent);
    border-radius:   14px;
    padding:         1.5rem 1.75rem;
    text-align:      center;
    margin-bottom:   1.25rem;
    transition:      box-shadow 0.2s;
}

.result-box.result-updated {
    animation:       result-flash 0.35s ease-out;
}

@keyframes result-flash {
    0%   { box-shadow: 0 0 0 0 rgba(232,98,42,0.35); }
    60%  { box-shadow: 0 0 0 8px rgba(232,98,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,98,42,0); }
}

.result-value {
    font-family:     'IBM Plex Serif', Georgia, serif;
    font-size:       clamp(2rem, 6vw, 3.25rem);
    font-weight:     700;
    color:           var(--text-primary);
    line-height:     1.1;
    word-break:      break-all;
}

.result-unit {
    font-size:       1.0625rem;
    font-weight:     600;
    color:           var(--accent);
    margin-top:      0.25rem;
}

.result-formula {
    font-size:       0.875rem;
    color:           var(--text-secondary);
    margin-top:      0.625rem;
    font-family:     'SFMono-Regular', 'Consolas', monospace;
}

/* ── Quick conversions pill row ──────────────────────────────────────────────── */
.quick-label {
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--text-secondary);
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    margin-bottom:   0.5rem;
}

.quick-conversions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
}

.quick-pill {
    padding:         0.3125rem 0.875rem;
    border-radius:   999px;
    border:          1.5px solid var(--border);
    background:      var(--bg);
    color:           var(--text-secondary);
    font-size:       0.8125rem;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    font-family:     'IBM Plex Sans', sans-serif;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
}

.quick-pill:hover {
    background:      #fff4ef;
    border-color:    var(--accent);
    color:           var(--accent);
}

/* ── Responsive: stack converter row on mobile ───────────────────────────────── */
@media (max-width: 560px) {
    .converter-row {
        grid-template-columns: 1fr;
        grid-template-rows:    auto auto auto;
    }

    .swap-wrap {
        justify-content: center;
        padding:         0;
        transform:       rotate(90deg);
    }

    .cat-tab {
        font-size: 0.8125rem;
        padding:   0.35rem 0.75rem;
    }
}

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