/*
 * MyArenaWallet shared styles.
 *
 * SECTION 1 is copied verbatim from id.myarenaonline.com/public/css/myarenaid.css
 * (MyArenaID's Game Sphere design language, commit 77c3170) so both apps look
 * the same - project owner, 2026-09-25: "ให้เป็นในแนวทางเดียวกัน", and MyArenaID
 * is the reference ("MyArenaID ฉันใช้สีขาวแล้วนะ ลองเช็คจาก MyArenaID ก่อน").
 * It is a COPY, not a shared file: the wallet is a standalone app and must not
 * load assets from another system at runtime. When MyArenaID's stylesheet
 * changes, re-copy section 1.
 *
 * SECTION 2 is wallet-only (balance card, quick actions, PIN pad, bottom tab
 * bar, transaction rows...). It uses section 1's tokens.
 *
 * Loaded LAST in <head> (partials/ui-head) so it also restyles older wallet
 * pages that still carry their own inline <style>.
 */

/* ===================== SECTION 1 - from MyArenaID ===================== */
:root {
    --color-dark: #16181D;
    --color-dark-rgb: 22 24 29;
    --color-accent: #E30613;
    --color-accent-rgb: 227 6 19;
    --color-accent-light: #FF4A54;
    --color-accent-dark: #C10011;
    --color-accent-2: #FF2D3F;
    --color-bg: #EDEFF2;
    --color-surface: #ffffff;
    --color-surface-2: #f1f2f4;
    --color-text: #16181D;
    --color-neutral: #666A72;
    --color-dim-2: #A6AAB2;
    --color-input-border: #d1d9df;
    --color-border: rgb(var(--color-dark-rgb) / .12);
    --color-border-hi: rgb(var(--color-accent-rgb) / .45);
    --color-good: #16a34a;
    --color-default: var(--color-bg);
    --grad-btn: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-dark) 100%);
    --grad-soft: linear-gradient(135deg, rgb(var(--color-accent-rgb) / .10), rgb(var(--color-accent-rgb) / .04));
    --shadow-card: 0 4px 20px -8px rgb(var(--color-accent-rgb) / .14);
    --radius-card: 14px;
    --radius-control: 11px;

    --bs-body-font-family: 'Prompt', 'Segoe UI', Tahoma, sans-serif;
    --bs-link-color: var(--color-accent);
    --bs-link-color-rgb: var(--color-accent-rgb);
    --bs-link-hover-color: var(--color-accent-dark);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Prompt', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

/* ---------- header ---------- */
.site-header { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); position: relative; z-index: 2; }
.site-header-inner { max-width: 960px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-header-logo img { height: 40px; display: block; }
.site-header-nav { display: flex; align-items: center; gap: 6px; }
.site-header-user {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
    color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 600;
}
.site-header-user:hover { background: var(--color-surface-2); color: var(--color-accent); }
.site-header-user svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }
.site-header-username { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header-nav form { display: flex; margin: 0; }
.site-header-logout {
    background: none; border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
    color: var(--color-neutral); display: flex; align-items: center; justify-content: center;
}
.site-header-logout:hover { background: var(--color-surface-2); color: var(--color-accent); }
.site-header-logout svg { width: 20px; height: 20px; }
@media (max-width: 420px) { .site-header-username { max-width: 90px; } }

/* ---------- page shell ---------- */
.page { flex: 1; width: 100%; padding: 28px 16px 40px; }
.page-auth { display: flex; align-items: center; justify-content: center; }
.page-auth > .card-panel, .page-auth > .page-inner { width: 100%; max-width: 440px; }
.page-account .page-inner { max-width: 560px; margin: 0 auto; }
.wrap { max-width: 560px; margin: 0 auto; }

/* ---------- footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--color-border); padding: 18px 16px; text-align: center; }
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 8px; }
.site-footer-links a { color: var(--color-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.site-footer-links a:hover { color: var(--color-accent); }
.site-footer-copy { font-size: 12px; color: var(--color-neutral); }

/* ---------- card + titles ---------- */
.card-panel {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); width: 100%;
}
.card-panel-body { padding: 24px 22px; }
@media (max-width: 380px) { .card-panel-body { padding: 20px 16px; } }

.page-title {
    color: var(--color-accent); font-weight: 800; font-size: 1.5rem; line-height: 1.3;
    position: relative; display: inline-block; padding-bottom: .4rem; margin: 0 0 .5rem;
}
.page-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
    background: var(--color-accent); border-radius: 2px;
}
.page-subtitle { font-size: 14px; color: var(--color-neutral); margin: 0 0 20px; }

.back-link {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px;
    font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none;
}
.back-link:hover { color: var(--color-accent); }

.section-heading { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; }

/* ---------- form controls (Bootstrap overrides) ---------- */
.form-label, label.form-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--color-text); }
.form-control, .form-select {
    border: 1px solid var(--color-input-border); border-radius: var(--radius-control);
    padding: .68rem 1rem; font-size: 15px; color: var(--color-text); background-color: #fff;
}
.form-control-sm { padding: .5rem .8rem; font-size: 14px; border-radius: 10px; }
.form-control::placeholder { color: var(--color-dim-2); }
.form-control:focus, .form-select:focus {
    border-color: var(--color-border-hi);
    box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .12);
    outline: none;
}
.form-control.is-invalid { border-color: #dc3545; }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-check-input:focus { border-color: var(--color-border-hi); box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .12); }
.invalid-feedback { font-size: 12px; }

.field-note { font-size: 12px; color: var(--color-neutral); margin-top: 6px; }

/* ---------- buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; padding: .62rem 1.1rem; }
.btn-sm { border-radius: 10px; padding: .4rem .8rem; }

.btn-brand {
    background: var(--grad-btn); border: none; color: #fff; border-radius: 999px; padding: .75rem 1.5rem;
    box-shadow: 0 10px 22px -10px rgb(var(--color-accent-rgb) / .7);
    transition: transform .15s, filter .15s, box-shadow .15s;
}
.btn-brand.btn-sm { padding: .4rem 1rem; }
.btn-brand:hover, .btn-brand:focus-visible { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }
.btn-brand:disabled, .btn-brand.disabled {
    background: #f1b3b8; color: #fff; box-shadow: none; transform: none; filter: none; opacity: 1;
}

.btn-outline-secondary {
    background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
    background: var(--grad-soft); border-color: var(--color-border-hi); color: var(--color-text);
}
.btn-outline-secondary:disabled { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-dim-2); opacity: 1; }

.btn-outline-cancel { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-neutral); }
.btn-outline-cancel:hover { background: var(--color-border); color: var(--color-text); }

.btn-outline-danger, .btn-outline-danger-confirm { background: #fff5f5; border: 1px solid rgb(220 38 38 / .4); color: #b91c1c; }
.btn-outline-danger:hover, .btn-outline-danger-confirm:hover { background: #fee2e2; border-color: rgb(220 38 38 / .6); color: #b91c1c; }
.btn-outline-danger:disabled, .btn-outline-danger-confirm:disabled { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-neutral); opacity: 1; }

.btn-send-otp { white-space: nowrap; font-size: 14px; }

/* ---------- alerts ---------- */
.alert { border: none; border-radius: 12px; font-size: 14px; }
.alert-danger { background: #fdecee; color: #b4121c; }
.alert-success { background: #e7f6ec; color: #15803d; }
.alert-secondary { background: var(--color-surface-2); color: var(--color-neutral); }
.alert-warning { background: #fff7e6; color: #92600a; }
.status-alert { background: #e7f6ec; color: #15803d; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }

.info-note { border-radius: 12px; padding: .7rem .9rem; font-size: 13px; background: rgb(var(--color-accent-rgb) / .06); color: var(--color-neutral); }

.legal-note { font-size: 12px; color: var(--color-neutral); text-align: center; margin: 18px 0 0; line-height: 1.6; }
.legal-note a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-dim-2); text-underline-offset: 2px; }
.legal-note a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* ---------- password field + eye toggle (SVG icon via mask; button text is ignored) ---------- */
.password-group { position: relative; }
.password-group .form-control { padding-right: 48px; }
.password-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: 10px; padding: 0; cursor: pointer;
    font-size: 0; color: transparent; background: transparent;
}
.password-toggle::before {
    content: ""; position: absolute; inset: 10px; background: var(--color-neutral);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.password-toggle:hover { background: var(--color-surface-2); }
.password-toggle:hover::before { background: var(--color-accent); }

.password-checklist { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.password-checklist li { color: var(--color-neutral); }
.password-checklist li.ok { color: var(--color-good); }
.password-checklist li.ok::before { content: "✓ "; }
.password-checklist li:not(.ok)::before { content: "• "; }
.password-match-note { font-size: 12px; margin-top: 6px; display: none; }
.password-match-note.mismatch { color: #d02929; display: block; }
.password-match-note.match { color: var(--color-good); display: block; }

/* ---------- OTP ---------- */
.otp-input { text-align: center; font-size: 1.4rem; letter-spacing: .3em; font-weight: 700; }
.otp-status { font-size: 13px; color: var(--color-good); margin-top: 6px; display: none; }
.otp-section { display: none; }

/* ---------- username/email helpers ---------- */
.email-row { display: flex; gap: 8px; align-items: stretch; }
.email-row input { flex: 1; min-width: 0; }
.email-suggestion { font-size: 12px; margin-top: 6px; display: none; color: var(--color-neutral); }
.email-suggestion button { border: none; background: none; padding: 0; color: var(--color-accent); text-decoration: underline; cursor: pointer; }
@media (max-width: 380px) { .email-row { flex-direction: column; } }
.username-status { font-size: 12px; margin-top: 6px; min-height: 18px; }
.username-status.checking { color: var(--color-neutral); }
.username-status.available { color: var(--color-good); }
.username-status.taken { color: #d02929; }

/* ---------- selectable options (tabs, method pickers) ---------- */
.choice-row { display: flex; gap: 8px; }
.choice {
    flex: 1; text-align: center; padding: 10px 8px; border-radius: 12px; cursor: pointer; margin: 0;
    font-size: 14px; font-weight: 600; color: var(--color-neutral); background: #fff;
    border: 1px solid var(--color-border); transition: border-color .15s, box-shadow .15s, background .15s;
}
.choice:hover { border-color: rgb(var(--color-accent-rgb) / .35); }
.choice.active, .choice:has(input:checked) {
    border-color: var(--color-accent); color: var(--color-text);
    box-shadow: 0 0 0 2px rgb(var(--color-accent-rgb) / .15);
    background: linear-gradient(160deg, rgb(var(--color-accent-rgb) / .07), rgb(var(--color-accent-rgb) / .02)), #fff;
}

/* ---------- status badges ---------- */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-on { background: rgb(22 163 74 / .1); color: var(--color-good); }
.status-off { background: var(--color-surface-2); color: var(--color-neutral); }
.status-locked, .status-warn { background: rgb(var(--color-accent-rgb) / .08); color: var(--color-accent); }

/* ---------- settings list (account hub and similar) ---------- */
.settings-group-title { font-size: 13px; font-weight: 700; color: var(--color-neutral); margin: 22px 4px 8px; padding: 0; }
.settings-group {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card);
    box-shadow: 0 4px 20px -10px rgb(var(--color-accent-rgb) / .12); overflow: hidden; margin-bottom: 0;
}
.settings-row {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--color-text);
    border-top: 1px solid var(--color-border); -webkit-tap-highlight-color: rgb(0 0 0 / .05);
}
.settings-group > .settings-row:first-child, .settings-group > .settings-group-title + .settings-row { border-top: none; }
.settings-group > details:first-child > .settings-row, .settings-group > details:first-child > summary.settings-row { border-top: none; }
.settings-row:hover { background: #fafafb; color: var(--color-text); }
.settings-row-icon {
    width: 36px; height: 36px; border-radius: 10px; background: var(--color-surface-2); color: var(--color-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.settings-row-icon svg { width: 18px; height: 18px; }
.settings-row-main { flex: 1; min-width: 0; }
.settings-row-label { font-weight: 600; font-size: 15px; }
.settings-row-hint { font-size: 12px; color: var(--color-neutral); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row-chevron { color: var(--color-dim-2); flex-shrink: 0; }
.settings-row.danger .settings-row-label { color: var(--color-accent); }

/* ---------- misc ---------- */
.divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--color-dim-2); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.text-muted { color: var(--color-neutral) !important; }

/* ===================== SECTION 2 - wallet only ===================== */

/* logo lives in the site header now (MyArenaID pattern), not inside the card */
.card-logo { display: none !important; }
.site-header { position: sticky; top: 0; z-index: 15; }
.site-header-icon {
    width: 38px; height: 38px; border-radius: 50%; color: var(--color-neutral); position: relative;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.site-header-icon:hover { background: var(--color-surface-2); color: var(--color-accent); }
.site-header-icon svg { width: 20px; height: 20px; }
.site-header-badge {
    position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* bottom tab bar */
.app-bottom-nav { background: rgba(255, 255, 255, .97); border-top: none; box-shadow: 0 -4px 18px -8px rgb(var(--color-dark-rgb) / .15); }
.app-bottom-nav-item { color: var(--color-dim-2); font-weight: 500; position: relative; }
.app-bottom-nav-item:hover { color: var(--color-text); }
.app-bottom-nav-item.active { color: var(--color-accent); }
.app-bottom-nav-item.active::before { content: ""; position: absolute; top: 0; left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-accent); }

/* wallet cards / rows */
.panel {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.panel-title { font-weight: 700; }
.profile-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.txn-card { border: 1px solid var(--color-border); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
a.txn-card:hover { border-color: rgb(var(--color-accent-rgb) / .35); box-shadow: 0 8px 20px -12px rgb(var(--color-accent-rgb) / .35); color: var(--color-text); }
.settings-group > .settings-group-title { margin: 0; padding: 12px 16px 4px; }
.chip { font-weight: 600; }
.error-alert { background: #fdecee; color: #b4121c; border-radius: 12px; }
.warn-alert { background: #fff7e6; color: #92600a; border-radius: 12px; }
h5.page-title { font-size: 1.5rem; }
.step-title { color: var(--color-neutral); }

/* balance card (TrueMoney-style red card) */
.wallet-hero {
    position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 20px 22px 18px; margin-bottom: 14px;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 48%, #9E000E 100%);
    box-shadow: 0 16px 32px -16px rgb(var(--color-accent-rgb) / .65);
}
.wallet-hero::before, .wallet-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.wallet-hero::before { width: 220px; height: 220px; right: -70px; top: -90px; }
.wallet-hero::after { width: 140px; height: 140px; right: 40px; bottom: -80px; }
.wallet-hero > * { position: relative; z-index: 1; }
.wallet-hero-label { font-size: 13px; opacity: .9; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wallet-hero-amount { font-size: 2.3rem; font-weight: 700; line-height: 1.15; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.wallet-hero-amount .thb { font-size: 1rem; font-weight: 500; opacity: .85; margin-left: 6px; }
.wallet-hero-sub { font-size: 12.5px; opacity: .9; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wallet-hero-sub a, .wallet-hero-sub a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.wallet-hero-toggle { background: rgba(255, 255, 255, .16); border: none; color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-family: inherit; }
.wallet-hero-toggle:hover { background: rgba(255, 255, 255, .26); }

/* quick actions - icon in a tinted rounded square (settings-row-icon style, bigger) */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 16px; }
.quick-action { width: auto; font-size: 12.5px; font-weight: 500; color: var(--color-text); gap: 7px; }
.quick-action:hover { color: var(--color-accent); }
.quick-action-icon {
    width: 54px; height: 54px; border-radius: 16px; border: none;
    background: rgb(var(--color-accent-rgb) / .10); color: var(--color-accent); transition: transform .15s, background .15s;
}
.quick-action:hover .quick-action-icon { transform: translateY(-2px); background: rgb(var(--color-accent-rgb) / .16); }
.quick-action-icon svg { width: 22px; height: 22px; }
.quick-action.soon .quick-action-icon { background: var(--color-surface-2); color: var(--color-dim-2); border: none; }
.quick-action.soon { color: var(--color-neutral); }
.gift-banner { border-radius: 12px; background: linear-gradient(120deg, rgb(var(--color-accent-rgb) / .08), rgba(255, 193, 7, .10)); border: 1px solid rgb(var(--color-accent-rgb) / .15); }

/* selectable amounts / recipients - same look as MyArenaID's .choice */
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-amount, .recent-recipient {
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text);
    font-weight: 600; padding: .6rem .25rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.quick-amount:hover, .recent-recipient:hover { border-color: rgb(var(--color-accent-rgb) / .35); background: #fff; }
.quick-amount.is-selected {
    border-color: var(--color-accent); color: var(--color-accent);
    box-shadow: 0 0 0 2px rgb(var(--color-accent-rgb) / .15);
    background: linear-gradient(160deg, rgb(var(--color-accent-rgb) / .07), rgb(var(--color-accent-rgb) / .02)), #fff;
}
.seg { border-radius: 12px; border-color: var(--color-border); }
.seg input:checked + label { background: var(--color-accent); color: #fff; }

/* payment method card (top-up) */
.pay-method {
    display: flex; align-items: center; gap: 14px; border: 1px solid var(--color-accent); border-radius: 12px; padding: 12px 14px; margin: 14px 0;
    background: rgb(var(--color-accent-rgb) / .06); box-shadow: 0 0 0 2px rgb(var(--color-accent-rgb) / .15);
}
.pay-method-icon { width: 46px; height: 46px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--color-accent); flex-shrink: 0; }
.pay-method-icon svg { width: 24px; height: 24px; }
.pay-method-title { font-weight: 700; font-size: 15px; }
.pay-method-note { font-size: 12px; color: var(--color-neutral); }
.pay-method-banks { height: 20px; width: auto; margin-top: 6px; display: block; }

/* PIN pad */
.pin-dot { border-color: var(--color-dim-2); }
.pin-dot.filled { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .15); }
.pin-key { background: var(--color-surface-2); border: 1px solid transparent; font-family: inherit; color: var(--color-text); transition: background .1s, transform .1s; }
.pin-key:hover { background: rgb(var(--color-accent-rgb) / .10); }
.pin-key:active { transform: scale(.95); background: rgb(var(--color-accent-rgb) / .18); }
.pin-key-backspace, .pin-key-backspace:hover { background: transparent; color: var(--color-neutral); }

.phone-country-badge { border-radius: var(--radius-control); background: var(--color-surface-2); border-color: var(--color-input-border); }
.mode-switch a { color: var(--color-neutral); }
.mode-switch a:hover { color: var(--color-accent); }
.toast-note { border-radius: 999px; font-family: inherit; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* MyArenaID left-aligns the subtitle under the title */
.page-subtitle { text-align: left; margin: 0 0 20px; }

/* +66 badge stays beside the number on phones; a send-code button drops to its own full-width row */
@media (max-width: 420px) {
    .phone-row { flex-direction: row !important; flex-wrap: wrap; }
    .phone-row > input { flex: 1 1 0; }
    .phone-row > .btn { flex: 1 1 100%; }
}

/* back-link always sits on its own line above the title */
.back-link { display: flex; width: max-content; }

/* signed-in pages start at the top like MyArenaID account pages; pre-login cards stay centred */
body:has(.site-header-nav) main { align-items: flex-start !important; }

/* wallet puts each group title INSIDE its card, so cards need their own gap (MyArenaID spaces them via outside titles) */
.settings-group + .settings-group { margin-top: 16px; }
.settings-group { margin-bottom: 16px; }
.seg label { border: 1px solid transparent; }

/* MyArena Wallet logo (MyArenaW3_A, trimmed + transparent) is two lines tall, so a touch taller than MyArenaID's 40px mark */
.site-header-logo img.wallet-logo { height: 46px; width: auto; }