/**
 * bsharpe Dynamic Convert Pages - Pair page frontend styles
 */

/* ─── Popular pairs grid ─────────────────────────────────────────────────── */

.bsharpe-dcp-pairs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: center;

    /*
     * column-gap only — NO row-gap.
     *
     * CSS Grid maintains row-gap between every pair of tracks, even when all
     * items in a track have display:none (the track height collapses to 0 but
     * the gutter remains). With many hidden rows this creates large amounts of
     * dead vertical space between the visible cards and the "Voir plus" CTA.
     *
     * Fix: vertical spacing is handled via margin-bottom on the cards instead
     * (see rule below). A margin on display:none elements is always 0, so
     * hidden rows contribute no space whatsoever.
     */
    column-gap: 1.4rem;
    row-gap: 0;
}

/* Vertical spacing between card rows — never applied to display:none items */
.bsharpe-dcp-pairs-grid > * {
    margin-bottom: 1.4rem;
    @media (max-width: 480px) {
        margin-bottom: 0.7rem;
    }
}

/*
 * Collapsed state: hide cards beyond the visible threshold.
 * Breakpoints are synchronised with grid-template-columns so that
 * only complete rows are shown before the "Voir plus" CTA.
 *
 * Desktop  (≥ 1100px) : 5 columns → show 5, hide from 6th
 * Tablet   (< 1100px) : 3 columns → show 3, hide from 4th
 * Mobile   (< 700px)  : 2 columns → show 2, hide from 3rd
 */
.bsharpe-dcp-pairs-grid[data-collapsed] > *:nth-child(n + 6) {
    /*
     * !important is required here to override the inline style="display:flex"
     * present on each pair-card <a> element (pair-card.php). Inline styles have
     * higher specificity than any external stylesheet selector, so without
     * !important this rule would never take effect.
     */
    display: none !important;
}

@media (max-width: 1099px) {
    .bsharpe-dcp-pairs-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bsharpe-dcp-pairs-grid[data-collapsed] > *:nth-child(n + 4) {
        display: none !important;
    }
}

@media (max-width: 699px) {
    .bsharpe-dcp-pairs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsharpe-dcp-pairs-grid[data-collapsed] > *:nth-child(n + 3) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .bsharpe-dcp-pairs-grid {
        column-gap: 0.7rem;
    }
}

/* ─── Shortcode [bsharpe_currency_grid] ──────────────────────────────────── */

.bsharpe-dcp-currency-grid {
    max-width: 846px;
    margin: 0 auto;
}

.bsharpe-dcp-currency-section {
    margin-bottom: 2.5rem;
}

.bsharpe-dcp-currency-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.875rem;
}

/* ─── Currency grid list mode (limit=0) ──────────────────────────────────── */

.bsharpe-dcp-currency-grid--list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    background: white;
    padding: 2rem;
    border-radius: 30px;
}

@media (max-width: 768px) {
    .bsharpe-dcp-currency-grid--list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bsharpe-dcp-currency-grid--list {
        gap: 0.5rem;
        padding: 0.8rem;
    }
}

.bsharpe-dcp-currency-grid--list .bsharpe-dcp-currency-section {
    margin-bottom: 0;
}

.bsharpe-dcp-currency-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    border-radius: 12px;
}

.bsharpe-dcp-currency-card:hover .bsharpe-dcp-currency-card__name {
    text-decoration: underline;
}

.bsharpe-dcp-currency-card__flag {
    width: auto;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bsharpe-dcp-currency-card__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a32;
    line-height: 1.3;
}

/* ─── Shortcode [bsharpe_pair_cards] ─────────────────────────────────────── */

.bsharpe-dcp-pair-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.bsharpe-dcp-pair-card {
    background: #fff;
    border-radius: 16px;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    transition: box-shadow 0.2s;
    @media (max-width: 480px) {
        padding: 0.7rem;
    }
}

.bsharpe-dcp-pair-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Each currency column: flag on top, label below */
.bsharpe-dcp-pair-card__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
}

.bsharpe-dcp-pair-card__flag {
    height: 38px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bsharpe-dcp-pair-card__chevron {
    color: #1a1a32;
    display: flex;
    flex-shrink: 0;
    align-self: flex-end;
}

.bsharpe-dcp-pair-card__iso {
    font-weight: 400;
    font-size: 0.875rem;
    color: #1a1a32;
}

/* Minor variant — smaller card */
.bsharpe-dcp-pair-card--minor {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
}

.bsharpe-dcp-pair-card--minor .bsharpe-dcp-pair-card__flag {
    width: 28px;
    height: 28px;
}

.bsharpe-dcp-pair-card--minor .bsharpe-dcp-pair-card__iso {
    font-size: 0.75rem;
}

/* change-rate-container-bsharpe-chart-1 */

#change-rate-container-bsharpe-chart-1 {
    max-width: 1366px;
    margin: 0 auto;
}