/* ── Base ───────────────────────────────────────────────────────────────────── */

.rfl-button .rfl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    width: fit-content;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* ── Shape ──────────────────────────────────────────────────────────────────── */

.rfl-button .rfl-btn--rounded {
    border-radius: 9999px !important;
}

.rfl-button .rfl-btn--squared {
    border-radius: 0.5rem !important;
}

/* ── Regular variant — Primary ─────────────────────────────────────────────── */

.rfl-button .rfl-btn--primary.rfl-btn--regular {
    background-color: #EEAB1F;
    color: #1E3256;
    border-color: #EEAB1F;
}

.rfl-button .rfl-btn--primary.rfl-btn--regular:hover {
    background-color: #D4961A;
    border-color: #D4961A;
}

/* ── Regular variant — Secondary ───────────────────────────────────────────── */

.rfl-button .rfl-btn--secondary.rfl-btn--regular {
    background-color: #1E3256;
    color: #FFFEF4;
    border-color: #1E3256;
}

.rfl-button .rfl-btn--secondary.rfl-btn--regular:hover {
    background-color: #162844;
    border-color: #162844;
}

/* ── Ghost variant — shared base ───────────────────────────────────────────── */

.rfl-button .rfl-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: #FFFEF4;
}

/* ── Ghost variant — Primary ───────────────────────────────────────────────── */

.rfl-button .rfl-btn--primary.rfl-btn--ghost:hover {
    background-color: #EEAB1F;
    border-color: #EEAB1F;
    color: #1E3256;
}

/* ── Ghost variant — Secondary ─────────────────────────────────────────────── */

.rfl-button .rfl-btn--secondary.rfl-btn--ghost:hover {
    background-color: #1E3256;
    border-color: #1E3256;
    color: #FFFEF4;
}

/* ── Outline variant — Primary ─────────────────────────────────────────────── */

.rfl-button .rfl-btn--primary.rfl-btn--outline {
    background-color: transparent;
    border-color: #EEAB1F;
    color: #EEAB1F;
}

.rfl-button .rfl-btn--primary.rfl-btn--outline:hover {
    background-color: #EEAB1F;
    color: #1E3256;
}

/* ── Outline variant — Secondary ───────────────────────────────────────────── */

.rfl-button .rfl-btn--secondary.rfl-btn--outline {
    background-color: transparent;
    border-color: #1E3256;
    color: #1E3256;
}

.rfl-button .rfl-btn--secondary.rfl-btn--outline:hover {
    background-color: #1E3256;
    color: #FFFEF4;
}

/* ── Icon ───────────────────────────────────────────────────────────────────── */

.rfl-button .rfl-btn__icon {
    display: inline-block;
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}