/* Currency converter specific styles */

/* Tool-page header */
/* .tool-* and .pair-link are core components (style.css); this file
   held a byte-identical copy of each. Currency pages use core's default
   density; the lookup modules opt into the denser .pairs-grid--dense. */

/* .tool-header h1 is core's. This copy repeated all four of core's
   declarations and omitted only overflow-wrap: break-word, so it changed
   nothing while quietly presenting itself as an override. */

/* About section: standard article treatment comes from style.css */

/* Sidebar skeleton (.content-with-sidebar / .main-content / .sidebar-widget)
   is the single-owner layout in style.css, shared by every tool family. */

.form-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: 1.5rem;
    align-items: end;
}

.form-group {
    text-align: left;
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

/* Converter layout: three roomy field columns (Amount narrower, From/To wide
   enough for full currency names) with the Convert button on its own centred
   line below — overrides style.css's compact auto 1fr 1fr auto single row. */
.form-grid {
    grid-template-columns: minmax(8rem, 0.5fr) 1fr 1fr;
}

.form-grid .form-actions {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0.25rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--gray-800);
    background-color: white;
    transition: all 0.2s ease;
}

.form-control:hover {
    border-color: var(--gray-300);
}

.exchange-button {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    /* Transparent border matches .form-control's 2px border so the button's
       border-box height equals the fields' and the inline converter row
       (align-items: end) sits pixel-flush. */
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    min-width: 120px;
}

.exchange-button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.exchange-button:active {
    transform: translateY(0);
}

/* Currency result styles - matches calculator result cards */
.currency-result {
    margin-top: 2rem;
    text-align: center;
    padding: 1.75rem 1.5rem;
    background: var(--gray-50);
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.currency-result:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.currency-amount {
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.currency-rate {
    color: var(--gray-700);
    font-size: 1rem;
    font-weight: 500;
}

/* Currency pair styles */
.currency-pair-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.currency-pair-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.currency-pair-card h3 {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
    font-weight: 600;
    text-align: center;
}

.currency-flag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-radius: 0.375rem;
    border: 1px solid var(--gray-200);
}

.currency-flag div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    font-weight: 500;
}

.currency-flag img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

.conversion-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
    background: white;
}

.conversion-row:hover {
    background: var(--gray-50);
}

.conversion-row:last-child {
    margin-bottom: 0;
}

/* Popular pairs section */

/* Responsive adjustments — sidebar collapse/stack/padding handled centrally
   in style.css (was currency-only: order:-1 lifted the sidebar above content
   on mobile; dropped so currency matches every other family). */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .currency-pair-grid {
        grid-template-columns: 1fr;
    }
}

/* Placeholder for a single amount row whose rate could not be resolved. */
.currency-unavailable {
    color: var(--gray-500);
}

/* ---------------------------------------------------------------
   Currency converter: result, pair cards, flags, conversion rows.
   Moved out of core's style.css, which EVERY page of the site loads.
   Ownership was checked per selector first, and the check mattered:
   .exchange-button, .pairs-grid, .form-grid and .rate-notice all look
   module-specific but are used by core (the 404 page's own button) or
   by three or more modules, so they stay shared. These do not.
   --------------------------------------------------------------- */
/* Currency result styles */
.currency-result {
    margin-top: 2rem;
    text-align: center;
}

.currency-amount {
    font-size: 2.5rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.currency-rate {
    color: var(--gray-700);
    font-size: 0.875rem;
}


/* The pair grid, cards, flags and conversion rows are defined ONCE, above.
   This section used to repeat them verbatim — and the repeated grid said
   repeat(3, 1fr). The pair page only ever has two cards (A→B and B→A), and
   the later copy wins, so on desktop both cards were squeezed into two
   thirds of the width beside an empty third column. Tablets looked fine
   only because the copy's own ≤1024px rule stepped it back to two. */

/* Mobile overrides for the rules above, lifted out of the same mixed
   768px block in core's style.css (which keeps its shared rules). */
@media (max-width: 768px) {
    .currency-amount {
        font-size: 2rem;
    }

    .currency-pair-card {
        padding: 1.25rem;
    }

    .currency-flag {
        padding: 0.625rem 0.875rem;
    }

    .conversion-row {
        padding: 0.625rem 0.875rem;
    }
}