/* currency-converter.css — membership page currency estimator
 * Styles the #currency-converter-widget and its children.
 * Loaded globally via default.hbs; widgets.js drives the behaviour.
 * Class names match the markup in page-membership.hbs exactly.
 * ============================================================ */

/* Outer wrapper — gradient border, brand-accented box */
.currency-converter-wrapper {
    width: 100%;
    margin-bottom: 32px;
    padding: 22px 28px 18px;
    /* Gradient border via border-image */
    border: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        var(--brand-g1, #F545A2),
        var(--brand-g3, #9B4DB8),
        var(--brand-g4, #5E9DBA)
    ) 1;
    background-color: var(--background-color);
    box-sizing: border-box;
}

html[data-theme="dark"] .currency-converter-wrapper {
    background-color: var(--card-bg, #1a1a1a);
}

/* Inner flex row: label + select */
.currency-converter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 0 8px;
    flex-wrap: wrap;
}

.currency-converter-label {
    font-family: var(--font2);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--text-color);
    white-space: nowrap;
}

.currency-converter-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border, rgba(128,128,128,.35));
    font-family: var(--font2);
    font-size: 16px;
    font-weight: 400;
    padding: 7px 40px 7px 14px;
    cursor: pointer;
    outline: none;
    min-width: 180px;
    /* Custom dropdown arrow using an inline SVG that respects currentColor */
    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='%23888' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    transition: border-color .2s ease, opacity .2s ease;
}

.currency-converter-select:hover {
    border-color: var(--brand-g1, #F545A2);
    opacity: .9;
}

.currency-converter-select:focus {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

html[data-theme="dark"] .currency-converter-select {
    background-color: var(--card-bg, #1e1e1e);
    border-color: rgba(255,255,255,.2);
}

/* Rate note — shown below the select row */
.currency-converter-rate {
    font-family: var(--font1);
    font-size: 12px;
    color: var(--text-color);
    opacity: .6;
    white-space: nowrap;
    min-height: 1.4em;
    margin: 0;
    padding: 0;
    letter-spacing: .02em;
}

.currency-converter-rate.loading {
    opacity: .35;
    font-style: italic;
}

.currency-converter-rate.error {
    opacity: .85;
    color: var(--error-color, #B71C1C);
}

/* Converted price shown below each tier price */
.tier-converted-price {
    display: none;
    font-family: var(--font1);
    font-size: 13px;
    opacity: .6;
    margin-top: -18px;
    margin-bottom: 16px;
    text-align: center;
    letter-spacing: .02em;
}

.tier-converted-price.visible {
    display: block;
}

/* Mobile */
@media (max-width: 479px) {
    .currency-converter-wrapper {
        padding: 18px 16px 14px;
    }

    .currency-converter {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .currency-converter-select {
        font-size: 15px;
        width: 100%;
        min-width: unset;
    }

    .currency-converter-label {
        font-size: 15px;
    }

    .currency-converter-rate {
        white-space: normal;
    }
}