/* =============================================================
   Refer & Earn  –  component styles
   Relies on tokens.css (var(--c-*) variables).
   Scoped under .alx-refer-page to avoid global leakage.
   ============================================================= */

/* ── TAB NAV ─────────────────────────────────────────────── */
.alx-refer-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: none;
}
.alx-refer-tabs::-webkit-scrollbar { display: none; }

.alx-refer-tabs a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    color: var(--c-muted);
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
    background: none;
}
.alx-refer-tabs a:hover { color: var(--c-blue); }
.alx-refer-tabs a.active {
    color: var(--c-blue);
    border-bottom-color: var(--c-blue);
}
.alx-refer-tabs a svg {
    width: 15px; height: 15px; flex-shrink: 0;
}

/* ── KEY CARD ────────────────────────────────────────────── */
.alx-key-card {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.alx-key-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 12px;
}
.alx-key-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.alx-key-code {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--c-blue);
    flex: 1;
    min-width: 0;
}
.alx-key-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--c-active);
    border-radius: 8px;
    padding: 6px 14px;
    min-width: 76px;
    text-align: center;
}
.alx-key-badge__pct {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--c-blue);
    line-height: 1.1;
}
.alx-key-badge__lbl {
    font-size: 10px;
    color: var(--c-muted);
    font-weight: 600;
    letter-spacing: .3px;
    margin-top: 2px;
}
.alx-key-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--c-chip);
    border-radius: 10px;
    font-size: 13px;
}
.alx-key-link__label { color: var(--c-muted); font-weight: 600; white-space: nowrap; }
.alx-key-link a {
    color: var(--c-blue);
    font-weight: 600;
    word-break: break-all;
    flex: 1;
}
.alx-share-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.alx-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    text-decoration: none;
}
.alx-share-btn:active { transform: scale(.95); }
.alx-share-btn--wa  { background: #25D366; color: #fff; }
.alx-share-btn--wa:hover { filter: brightness(.92); }
.alx-share-btn--tg  { background: #229ED9; color: #fff; }
.alx-share-btn--tg:hover { filter: brightness(.92); }
.alx-share-btn--cp  { background: var(--c-chip); color: var(--c-blue); }
.alx-share-btn--cp:hover { background: var(--c-active); }

/* ── HERO BAND (explain tab) ─────────────────────────────── */
.alx-refer-hero {
    background: linear-gradient(135deg, var(--c-blue) 0%, #0c3358 100%);
    border-radius: 14px;
    padding: 26px 30px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(28,88,142,.25);
}
.alx-refer-hero::before {
    content: '';
    position: absolute; right: -40px; top: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(1,223,13,.15) 0%, transparent 68%);
    pointer-events: none;
}
.alx-refer-hero__eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; opacity: .7; margin-bottom: 5px;
}
.alx-refer-hero__title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800; line-height: 1.25; margin-bottom: 8px;
}
.alx-refer-hero__title .accent { color: #01DF0D; }
.alx-refer-hero__sub {
    font-size: 13.5px; opacity: .82;
    max-width: 48ch; line-height: 1.6; margin-bottom: 18px;
}
.alx-refer-hero__stat {
    display: flex; flex-direction: column;
    align-items: center; position: relative; z-index: 1;
}
.alx-refer-hero__big {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800; line-height: 1;
    color: #01DF0D;
    text-shadow: 0 0 28px rgba(1,223,13,.35);
    letter-spacing: -2px;
}
.alx-refer-hero__big-sub {
    font-size: 11px; opacity: .65; text-align: center;
    margin-top: 4px; font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase;
}
@media (max-width: 580px) {
    .alx-refer-hero { grid-template-columns: 1fr; padding: 20px 18px; }
    .alx-refer-hero__stat { display: none; }
}

/* ── EXPLAIN CONTENT (DB document wrapper) ───────────────── */
.alx-explain-doc {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 22px 26px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text);
    margin-bottom: 20px;
}
.alx-explain-doc h3,
.alx-explain-doc strong { color: var(--c-text); }
.alx-explain-doc table {
    width: 100%; border-collapse: collapse;
    margin: 16px 0; font-size: 13.5px;
}
.alx-explain-doc table th {
    background: var(--c-blue); color: #fff;
    padding: 10px 14px; text-align: left; font-weight: 700;
}
.alx-explain-doc table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-line);
}
.alx-explain-doc table tr:nth-child(even) td { background: var(--c-chip); }
.alx-explain-doc p { margin-bottom: 10px; }

.alx-create-btn-wrap {
    display: flex; justify-content: center;
    padding: 10px 0 20px;
}

/* ── KPI TILES ───────────────────────────────────────────── */
.alx-refer-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 700px) { .alx-refer-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .alx-refer-kpi { grid-template-columns: 1fr; } }

.alx-kpi {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 16px 18px;
    display: flex; align-items: flex-start; gap: 12px;
    transition: box-shadow .2s;
}
.alx-kpi:hover {
    box-shadow: 0 6px 14px rgba(18,40,66,.12), 0 14px 36px rgba(18,40,66,.10);
}
.alx-kpi__icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; flex-shrink: 0;
}
.alx-kpi__icon--blue   { background: var(--c-active); }
.alx-kpi__icon--blue svg { color: var(--c-blue); }
.alx-kpi__icon--green  { background: var(--c-pos-bg); }
.alx-kpi__icon--green svg { color: var(--c-success); }
.alx-kpi__icon--orange { background: var(--c-warn-bg); }
.alx-kpi__icon--orange svg { color: var(--c-orange); }
.alx-kpi__icon--purple { background: #ede9f8; }
.alx-kpi__icon--purple svg { color: #6c3fa3; }
.alx-kpi__label {
    font-size: 11px; color: var(--c-muted); font-weight: 600;
    letter-spacing: .3px; margin-bottom: 2px;
}
.alx-kpi__value {
    font-family: 'Poppins', sans-serif;
    font-size: 20px; font-weight: 700;
    line-height: 1.15; color: var(--c-text);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}
.alx-kpi__sub { font-size: 11px; color: var(--c-muted); margin-top: 3px; }

/* ── SECTION CARDS ───────────────────────────────────────── */
.alx-sec-card {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.alx-sec-title {
    font-family: 'Poppins', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--c-text);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
}
.alx-sec-title svg { color: var(--c-blue); flex-shrink: 0; width: 17px; height: 17px; }
.alx-sec-note {
    font-size: 12px; color: var(--c-muted);
    margin-top: 10px; line-height: 1.5;
}

/* ── REFERRAL TABLE (replaces sc_table) ──────────────────── */
.alx-ref-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.alx-ref-table th {
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--c-muted); padding: 8px 12px;
    border-bottom: 2px solid var(--c-line);
    text-align: left; white-space: nowrap;
}
.alx-ref-table th:not(:first-child) { text-align: right; }
.alx-ref-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
}
.alx-ref-table td:not(:first-child) { text-align: right; }
.alx-ref-table tr:last-child td { border-bottom: none; }
.alx-ref-table tr:hover td { background: var(--c-chip); }
.alx-ref-table__campaign { font-weight: 700; color: var(--c-blue); }
.alx-ref-table__meta {
    font-size: 11px; color: var(--c-muted);
    display: block; margin-top: 1px; font-weight: 400;
}
.alx-ref-table__payout {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; color: var(--c-success-text);
    font-feature-settings: "tnum" 1;
}
.alx-ref-table__pct {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; color: var(--c-text);
    font-feature-settings: "tnum" 1;
}
.alx-ref-table__amount {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}
.alx-ref-table__empty td {
    text-align: center !important;
    color: var(--c-muted); font-size: 13px; padding: 28px 12px;
}
.alx-detail-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px; border: none;
    background: var(--c-chip); color: var(--c-blue);
    cursor: pointer; transition: background .15s;
    font-size: 15px;
}
.alx-detail-btn:hover { background: var(--c-active); }

/* ── TOTAL PAYOUT GRID ───────────────────────────────────── */
.alx-payout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-top: 4px;
}
@media (max-width: 520px) { .alx-payout-grid { grid-template-columns: 1fr; } }
.alx-payout-cell {
    background: var(--c-bg);
    border-radius: 10px; padding: 16px 18px;
    border: 1px solid var(--c-line);
}
.alx-payout-cell--total {
    background: var(--c-active);
    border-color: var(--c-blue);
}
.alx-payout-cell__label {
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--c-muted); margin-bottom: 6px;
}
.alx-payout-cell--total .alx-payout-cell__label { color: var(--c-blue); }
.alx-payout-cell__value {
    font-family: 'Poppins', sans-serif;
    font-size: 22px; font-weight: 800;
    color: var(--c-text);
    font-feature-settings: "tnum" 1;
}
.alx-payout-cell--total .alx-payout-cell__value { color: var(--c-blue); }
.alx-payout-cell__note {
    font-size: 11px; color: var(--c-muted); margin-top: 5px; line-height: 1.5;
}
.alx-payout-cell--total .alx-payout-cell__note { color: var(--c-blue); opacity: .75; }

/* ── USER REFERRAL ROWS ──────────────────────────────────── */
.alx-ref-user-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--c-line);
}
.alx-ref-user-row:last-child { border-bottom: none; padding-bottom: 0; }
.alx-ref-user-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-active); border: 2px solid var(--c-line);
    display: grid; place-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 13px; color: var(--c-blue);
    flex-shrink: 0; text-transform: uppercase;
}
.alx-ref-user-info { flex: 1; min-width: 0; }
.alx-ref-user-name { font-weight: 700; font-size: 14px; }
.alx-ref-user-email { font-size: 12px; color: var(--c-muted); }

/* Coarse referral status badge (registered / submitted / funded / paid) */
.alx-ref-badge {
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600; font-size: 11px; letter-spacing: .02em;
    padding: 4px 10px; border-radius: 50px;
    border: 1px solid var(--c-line); white-space: nowrap;
}
.alx-ref-badge--registered { background: var(--c-chip); color: var(--c-muted); }
.alx-ref-badge--submitted  { background: var(--c-warn-bg); color: var(--c-warn-text); border-color: transparent; }
.alx-ref-badge--funded     { background: var(--c-active); color: var(--c-blue); border-color: transparent; }
.alx-ref-badge--paid       { background: var(--c-pos-bg); color: var(--c-success-text); border-color: transparent; }

/* ── AGREEMENT ───────────────────────────────────────────── */
.alx-agreement-card {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 24px 26px;
}
.alx-agreement-card h2 {
    font-size: 16px; font-weight: 700;
    padding-bottom: 12px; border-bottom: 1px solid var(--c-line);
    margin-bottom: 16px; color: var(--c-blue);
}
.alx-agreement-body {
    font-size: 13.5px; line-height: 1.75;
    color: var(--c-text);
}
.alx-agreement-body h3 {
    font-size: 14px; font-weight: 700;
    color: var(--c-blue); margin: 16px 0 6px;
}
.alx-agreement-body p { margin-bottom: 9px; }
.alx-agreement-body ol { padding-left: 20px; }
.alx-agreement-body li { margin-bottom: 8px; }
.alx-agreement-note {
    background: var(--c-warn-bg);
    border-radius: 10px; padding: 12px 16px;
    border-left: 3px solid var(--c-orange);
    font-size: 12.5px; color: var(--c-warn-text);
    margin-top: 16px; line-height: 1.6;
}

/* ── PAGE WRAPPER ────────────────────────────────────────── */
.alx-refer-page {
    /* width inherited from portal-wrap (1100px) — no own constraint */
}
.alx-refer-page .alx-refer-header {
    margin-bottom: 18px;
}
.alx-refer-page .alx-refer-header h2 {
    font-size: 24px; font-weight: 700;
    color: var(--c-blue); margin-bottom: 3px;
}
.alx-refer-page .alx-refer-header p {
    font-size: 14px; color: var(--c-muted);
}

/* ── DARK-MODE OVERRIDES ─────────────────────────────────── */
:root[data-theme="dark"] .alx-kpi__icon--purple { background: #1f1635; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alx-kpi__icon--purple { background: #1f1635; }
}

/* ── RESPONSIVE OVERFLOW ─────────────────────────────────── */
.alx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── COMMISSION CARDS ────────────────────────────────────── */
.alx-com-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 560px) { .alx-com-grid { grid-template-columns: 1fr; } }

.alx-com-card {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 22px 24px;
    transition: box-shadow .2s;
}
.alx-com-card:hover {
    box-shadow: 0 6px 14px rgba(18,40,66,.12), 0 14px 36px rgba(18,40,66,.10);
}
.alx-com-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.alx-com-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
}
.alx-com-icon--blue { background: var(--c-active); }
.alx-com-icon--blue svg { color: var(--c-blue); }
.alx-com-icon--green { background: var(--c-pos-bg); }
.alx-com-icon--green svg { color: var(--c-success); }
.alx-com-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 15px; color: var(--c-text);
    margin: 0;
}
.alx-com-pct {
    font-family: 'Poppins', sans-serif;
    font-size: 34px; font-weight: 800; line-height: 1; margin-bottom: 8px;
    font-feature-settings: "tnum" 1;
}
.alx-com-pct--blue  { color: var(--c-blue); }
.alx-com-pct--green { color: var(--c-success); }
.alx-com-desc { font-size: 13px; color: var(--c-muted); line-height: 1.6; }
.alx-com-formula {
    font-size: 12px;
    background: var(--c-bg); border: 1px solid var(--c-line);
    border-radius: 8px; padding: 8px 12px;
    margin-top: 12px; color: var(--c-text);
    font-family: monospace; line-height: 1.6;
}

/* ── EXAMPLE CALCULATION ─────────────────────────────────── */
.alx-example-card {
    background: var(--c-card);
    border-radius: 14px; border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 22px 24px; margin-bottom: 20px;
}
.alx-example-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--c-orange); margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.alx-example-label svg { color: var(--c-orange); }
.alx-example-scenario {
    background: var(--c-warn-bg); border-radius: 10px;
    padding: 14px 16px; font-size: 13.5px; line-height: 1.7;
    margin-bottom: 16px; border-left: 3px solid var(--c-orange);
}
.alx-example-scenario strong { color: var(--c-text); }
.alx-calc-rows { display: flex; flex-direction: column; gap: 8px; }
.alx-calc-row {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    background: var(--c-bg); border-radius: 9px;
    border: 1px solid var(--c-line); flex-wrap: wrap;
}
.alx-calc-row__label { font-size: 13px; color: var(--c-muted); flex: 1; }
.alx-calc-row__val {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 15px; color: var(--c-blue); white-space: nowrap;
    font-feature-settings: "tnum" 1;
}
.alx-calc-row--total { background: var(--c-active); border-color: var(--c-blue); }
.alx-calc-row--total .alx-calc-row__label { font-weight: 700; color: var(--c-blue); }
.alx-calc-row--total .alx-calc-row__val { font-size: 18px; color: var(--c-blue); }

/* ── WIN-WIN-WIN ─────────────────────────────────────────── */
.alx-winwin-card {
    background: var(--c-card);
    border-radius: 14px; border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 22px 24px; margin-bottom: 20px;
}
.alx-winwin-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 16px;
    margin-bottom: 16px; color: var(--c-text);
}
.alx-winwin-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 540px) { .alx-winwin-grid { grid-template-columns: 1fr; } }
.alx-win-col {
    border-radius: 11px; padding: 18px 16px; border: 1px solid var(--c-line);
}
.alx-win-col--you      { background: var(--c-active); border-color: rgba(28,88,142,.2); }
.alx-win-col--clients  { background: var(--c-pos-bg); border-color: rgba(24,169,87,.2); }
.alx-win-col--platform { background: var(--c-bg); border-color: var(--c-line); }
.alx-win-col__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; font-size: 13px; margin-bottom: 12px;
}
.alx-win-col--you      .alx-win-col__title { color: var(--c-blue); }
.alx-win-col--clients  .alx-win-col__title { color: var(--c-success-text); }
.alx-win-col--platform .alx-win-col__title { color: var(--c-muted); }
.alx-win-item {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--c-text);
    margin-bottom: 9px; line-height: 1.45;
}
.alx-win-item:last-child { margin-bottom: 0; }
.alx-win-check {
    width: 16px; height: 16px; border-radius: 5px;
    display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; color: #fff;
}
.alx-win-check--blue   { background: var(--c-blue); }
.alx-win-check--green  { background: var(--c-success); }
.alx-win-check--muted  { background: var(--c-muted); }

/* ── CTA BAND ────────────────────────────────────────────── */
.alx-cta-band {
    background: var(--c-card);
    border-radius: 14px; border: 1px solid var(--c-line);
    box-shadow: 0 2px 6px rgba(18,40,66,.06), 0 8px 24px rgba(18,40,66,.06);
    padding: 20px 24px; margin-bottom: 20px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.alx-cta-band__title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.alx-cta-band__sub   { font-size: 13px; color: var(--c-muted); }
.alx-btn {
    font-family: inherit; font-weight: 700; font-size: 14px;
    border-radius: 50px; padding: 0 20px; min-height: 44px;
    border: none; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px;
    cursor: pointer; transition: filter .15s; text-decoration: none;
}
.alx-btn--blue { background: var(--c-blue); color: #fff; }
.alx-btn--blue:hover { filter: brightness(1.08); color: #fff; }