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

/* ── Currency selects ────────────────────────────────────────────────────────── */
.currency-row {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    flex-wrap:      wrap;
    margin-bottom:  1rem;
}

.currency-field {
    display:   flex;
    flex-direction: column;
    gap:       0.375rem;
    flex:      1;
    min-width: 140px;
}

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

.currency-select {
    width:         100%;
    padding:       0.625rem 0.875rem;
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    font-size:     0.9375rem;
    font-family:   inherit;
    color:         var(--text, #0D1B2A);
    background:    var(--card-bg, #ffffff);
    cursor:        pointer;
    transition:    border-color 0.15s;
    appearance:    none;
    background-image: 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");
    background-repeat:   no-repeat;
    background-position: right 0.75rem center;
    padding-right:       2.25rem;
}

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

/* ── Amount input ────────────────────────────────────────────────────────────── */
.amount-field {
    display:   flex;
    flex-direction: column;
    gap:       0.375rem;
    flex:      0 0 auto;
    width:     100%;
    margin-bottom: 1rem;
}

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

.amount-input {
    width:         100%;
    padding:       0.75rem 1rem;
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    font-size:     1.1875rem;
    font-weight:   600;
    font-family:   inherit;
    color:         var(--text, #0D1B2A);
    background:    var(--card-bg, #ffffff);
    transition:    border-color 0.15s;
    box-sizing:    border-box;
}

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

/* ── Swap button ────────────────────────────────────────────────────────────── */
.swap-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    min-width:       40px;
    border-radius:   50%;
    border:          1.5px solid var(--border, #E2E4E8);
    background:      var(--card-bg, #ffffff);
    color:           var(--accent, #E8472F);
    cursor:          pointer;
    font-size:       1.125rem;
    transition:      background 0.15s, border-color 0.15s, transform 0.2s;
    align-self:      flex-end;
    margin-bottom:   2px;
    flex-shrink:     0;
}

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

.swap-btn:active {
    transform: rotate(180deg) scale(0.93);
}

/* ── Result display ──────────────────────────────────────────────────────────── */
.result-box {
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 12px;
    padding:       1.25rem 1.5rem;
    margin-top:    1rem;
    text-align:    center;
    transition:    opacity 0.2s;
}

.result-box.hidden {
    display: none;
}

.result-amount {
    font-size:   2.375rem;
    font-weight: 700;
    color:       var(--text, #0D1B2A);
    font-family: 'IBM Plex Serif', Georgia, serif;
    line-height: 1.15;
    word-break:  break-all;
}

.result-amount .result-currency-code {
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    margin-left: 0.375rem;
    font-family: 'IBM Plex Sans', sans-serif;
}

.result-rate {
    font-size:   0.9375rem;
    color:       var(--muted, #64748B);
    margin-top:  0.5rem;
    font-weight: 500;
}

.result-timestamp {
    font-size:   0.8125rem;
    color:       #9ca3af;
    margin-top:  0.25rem;
}

/* ── Fallback warning banner ─────────────────────────────────────────────────── */
.rates-warning {
    display:       flex;
    align-items:   flex-start;
    gap:           0.625rem;
    background:    #fffbeb;
    border:        1.5px solid #f59e0b;
    border-radius: 8px;
    padding:       0.75rem 1rem;
    font-size:     0.875rem;
    color:         #92400e;
    margin-top:    0.75rem;
    line-height:   1.5;
}

.rates-warning.hidden {
    display: none;
}

.rates-warning-icon {
    font-size:  1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ── Quick ASEAN pairs row ────────────────────────────────────────────────────── */
.quick-pairs {
    margin-top: 1.25rem;
}

.quick-pairs-label {
    font-size:      0.8125rem;
    font-weight:    600;
    color:          var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom:  0.5rem;
}

.quick-pairs-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    list-style: none;
    margin:    0;
    padding:   0;
}

.quick-pair-btn {
    display:        inline-flex;
    align-items:    center;
    padding:        0.3125rem 0.875rem;
    border-radius:  999px;
    border:         1.5px solid var(--border, #E2E4E8);
    background:     var(--card-bg, #ffffff);
    font-size:      0.8125rem;
    font-weight:    600;
    color:          var(--text, #0D1B2A);
    cursor:         pointer;
    transition:     background 0.15s, border-color 0.15s, color 0.15s;
    white-space:    nowrap;
}

.quick-pair-btn:hover {
    background:   var(--accent, #E8472F);
    border-color: var(--accent, #E8472F);
    color:        #ffffff;
}

.quick-pair-btn:active {
    transform: scale(0.96);
}

/* ── No quote available state ────────────────────────────────────────────────── */
.no-quote-msg {
    padding:    0.5rem 0;
    text-align: center;
}

.no-quote-icon {
    display:     block;
    font-size:   2rem;
    font-weight: 700;
    color:       var(--muted, #64748B);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.no-quote-title {
    font-size:   1.0625rem;
    font-weight: 700;
    color:       var(--text, #0D1B2A);
    margin:      0 0 0.375rem;
}

.no-quote-desc {
    font-size:  0.875rem;
    color:      var(--muted, #64748B);
    line-height: 1.6;
    max-width:   420px;
    margin:      0 auto;
}

/* ── Finance disclaimer ──────────────────────────────────────────────────────── */
.finance-disclaimer {
    margin-top:  1rem;
    padding:     0.75rem 1rem;
    background:  var(--bg, #FFFFFF);
    border-left: 3px solid var(--border, #E2E4E8);
    border-radius: 0 8px 8px 0;
    font-size:   0.8125rem;
    color:       var(--muted, #64748B);
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .currency-row {
        gap: 0.5rem;
    }

    .swap-btn {
        align-self: center;
    }

    .result-amount {
        font-size: 1.875rem;
    }
}

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