/*
 * pages/profile.css — static CSS for profile v2 page (M14b)
 *
 * Extracted from inline <style> in profile-v2.blade.php (215 lines).
 * NOTE: the :root { --pv2-accent: {{ PHP }}; } rule STAYS inline in blade
 * because it's tenant-dynamic.
 *
 * NOT MIGRATED YET: 36 .profile* rules in main.v28.css (future M11 task).
 */

    /* Override the layout-global width assignment set by public/inline.js
       (which pushes #_ajax_content_ to .header width — causes right overflow on this page) */
    #_ajax_content_ { max-width: 100% !important; min-width: 0 !important; width: auto !important; margin-right: 0 !important; }
    .pv2 { display: flex; align-items: flex-start; gap: 22px; padding: 14px 24px 28px; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; color: #ecedf3; font-family: 'Inter', Arial, sans-serif; overflow-x: hidden; }
    /* Right column starts at the same top edge as the sidebar */
    .pv2-main { flex: 1 1 0; min-width: 0; }
    /* (No workaround needed here — root cause fixed: index.v13.css selector
       `#app>.main main` was tightened to direct child `#app>.main>main`.) */
    .pv2-head { margin: 0 0 18px; padding: 0; }   /* extra air below "Welcome…" before first block */
    .pv2 .pv2-title { margin: 0; }

    /* Spacing BETWEEN sibling sections inside each tab */
    .pv2-tab {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
    .pv2-tab h3,
    .pv2-tab h4,
    .pv2-section-title {
        margin: 0 !important;
        font-size: 15px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.2px;
    }
    /* Inside cards (Bonuses/VIP/etc) the title needs breathing room from the card edge */
    .pv2-card .pv2-section-title,
    .pv2-card h3,
    .pv2-card h4 {
        padding-top: 0;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        margin-bottom: 14px !important;
    }
    .pv2 * { box-sizing: border-box; }
    .pv2 svg { shape-rendering: geometricPrecision; }

    /* Sidebar */
    .pv2-side { width: 268px; flex-shrink: 0; position: static; align-self: flex-start; }
    .pv2-side__card {
        background: linear-gradient(160deg, rgba(30,30,45,0.9), rgba(18,18,28,0.9));
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        padding: 20px 16px;
        backdrop-filter: blur(14px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    .pv2-user { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 0 16px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 12px; }
    .pv2-avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid var(--pv2-accent); box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb),0.12), 0 6px 20px rgba(0,0,0,0.4); cursor: pointer; overflow: hidden; transition: transform .2s; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-avatar:hover { transform: scale(1.04); }
    }
    .pv2-avatar__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-avatar:hover .pv2-avatar__overlay { display: flex; }
    }
    .pv2-name { font-size: 17px; font-weight: 800; color: #fff; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
    /* Level pill + ID chip share one row, vertically centred, with a small gap.
       Wraps to two rows on very narrow viewports if both can't fit. */
    .pv2-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
    .pv2-level { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; height: 26px; border-radius: 99px; background: linear-gradient(135deg, rgba(255,189,57,0.18), rgba(255,189,57,0.04)); border: 1px solid rgba(255,189,57,0.35); color: #ffbd39; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-sizing: border-box; }
    .pv2-id-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; padding: 0 10px 0 8px; height: 26px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; font-family: 'Courier New', monospace; font-size: 11px; color: #b8b8c8; cursor: pointer; transition: all .15s; user-select: none; box-sizing: border-box; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-id-chip:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.14); }
    }
    .pv2-id-chip.is-copied { color: #5ee06a; border-color: rgba(94,224,106,0.4); }
    .pv2-id-chip__key { font-size: 10px; font-weight: 700; letter-spacing: 1px; opacity: 0.5; text-transform: uppercase; }
    .pv2-id-chip__val { font-weight: 700; }
    .pv2-id-chip svg { opacity: 0.5; }

    .pv2-nav { display: flex; flex-direction: column; gap: 2px; }
    .pv2-nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #b8b8c8; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; position: relative; user-select: none; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-nav__item:hover { background: rgba(255,255,255,0.04); color: #fff; }
    }
    .pv2-nav__item.is-active { background: linear-gradient(90deg, rgba(var(--color-accent-rgb),0.22), rgba(var(--color-accent-rgb),0.04)); color: #fff; font-weight: 600; }
    .pv2-nav__item.is-active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--pv2-accent); }
    .pv2-nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }
    .pv2-nav__badge { margin-left: auto; font-size: 9px; padding: 2px 7px; border-radius: 6px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: linear-gradient(135deg, #6a5bff, #3b82f6); color: #fff; }

    /* Main */
    .pv2-tab { display: none; animation: pv2-fade .3s ease; }
    .pv2-tab.is-active {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }
    /* Standalone tab title (Wallet / Bonuses / VIP / Referrals / Preferences) — direct child h1 */
    .pv2-tab.is-active > .pv2-title { margin: 0 0 4px !important; }
    @keyframes pv2-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .pv2-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .pv2-title { font-size: 26px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.4px; }
    .pv2-title small { display: inline-block; margin-left: 10px; font-size: 11px; padding: 3px 10px; border-radius: 99px; vertical-align: middle; font-weight: 700; letter-spacing: 0.5px; background: rgba(255,189,57,0.15); color: #ffbd39; text-transform: uppercase; }

    /* Cards */
    .pv2-card {
        background: linear-gradient(160deg, rgba(30,30,45,0.82), rgba(18,18,28,0.82));
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 16px;
        padding: 20px 22px;
        margin-bottom: 14px;
        backdrop-filter: blur(12px);
    }
    .pv2-card h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 14px 0; letter-spacing: 0.2px; display: flex; align-items: center; gap: 8px; }
    .pv2-card h3 svg { width: 16px; height: 16px; color: var(--pv2-accent); }

    /* Stat grid */
    .pv2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
    .pv2-stat { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px 18px; transition: transform .18s, border-color .18s; overflow: hidden; min-width: 0; }
    .pv2-stat__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pv2-stat::before { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: radial-gradient(circle at top right, rgba(var(--color-accent-rgb),0.15), transparent 70%); pointer-events: none; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-stat:hover { transform: translateY(-2px); border-color: rgba(var(--color-accent-rgb),0.3); }
    }
    .pv2-stat__label { font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 6px; position: relative; z-index: 1; }
    .pv2-stat__value { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.4px; position: relative; z-index: 1; }
    .pv2-stat__value--accent { color: var(--pv2-accent); }
    .pv2-stat__value--green { color: #5ee06a; }
    .pv2-stat__value--red { color: #ff8a8a; }
    .pv2-stat__hint { font-size: 11px; color: #6a6a7e; margin-top: 4px; position: relative; z-index: 1; }

    /* Two-column section */
    .pv2-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

    /* Forms */
    .pv2-field { margin-bottom: 12px; }
    .pv2-field__label { display: block; font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 6px; }
    /* `!important` here defeats `core.css: input { border:0; background: 0 0 }`
       and any other input-element-level resets that get loaded later in the
       cascade and would otherwise leave the field looking like plain text. */
    .pv2-input, .pv2-select,
    input.pv2-input, select.pv2-select {
        width: 100% !important;
        height: 46px !important;
        padding: 0 16px !important;
        background: rgba(0, 0, 0, 0.32) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 10px !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        font-family: inherit !important;
        line-height: 1 !important;
        transition: border-color .15s, background .15s, box-shadow .15s !important;
        box-sizing: border-box !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        outline: none !important;
    }
    @media (hover: hover) and (pointer: fine) {
        .pv2-input:hover, .pv2-select:hover,
        input.pv2-input:hover, select.pv2-select:hover {
            border-color: rgba(255, 255, 255, 0.26) !important;
            background: rgba(0, 0, 0, 0.36) !important;
        }
    }
    .pv2-input::placeholder { color: #6a6a7e !important; font-weight: 400 !important; }
    .pv2-input:focus, .pv2-select:focus,
    input.pv2-input:focus, select.pv2-select:focus {
        outline: none !important;
        border-color: var(--pv2-accent) !important;
        background: rgba(0, 0, 0, 0.40) !important;
        box-shadow:
            0 0 0 3px rgba(var(--color-accent-rgb, 184, 58, 58), 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }
    /* Code input (6-digit verification) — same font-size as every other input
       (.pv2-input above forces 14px). Letter-spacing is what separates the
       digits visually, font-size stays unified across all profile fields. */
    .pv2-input--code { font-size: 14px !important; letter-spacing: 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

    /* legacy .pv2-btn / --primary / --ghost / --danger / --sm rules removed —
       canonical wallet-popup-CTA styling lives lower in this file. */

    .pv2-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
    .pv2-row--split { justify-content: space-between; }
    .pv2-row > .pv2-input:not(.pv2-input--code) { flex: 1 1 200px; min-width: 0; }
    .pv2-row > .pv2-input--code { flex: 0 0 170px; }
    .pv2-row > .pv2-btn { flex: 0 0 auto; }
    .pv2-row > select.pv2-select { flex: 1 1 180px; min-width: 0; }
    .pv2-grow { flex: 1; min-width: 0; }

    /* Pills */
    .pv2-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
    .pv2-pill--ok { background: rgba(94,224,106,0.15); color: #5ee06a; }
    .pv2-pill--warn { background: rgba(255,189,57,0.15); color: #ffbd39; }
    .pv2-pill--info { background: rgba(59,130,246,0.15); color: #60a5fa; }
    .pv2-pill--neutral { background: rgba(255,255,255,0.06); color: #b8b8c8; }

    /* Messages */
    .pv2-msg { margin-top: 10px; padding: 9px 13px; border-radius: 8px; font-size: 12px; }
    .pv2-msg--err { background: rgba(255,107,107,0.12); color: #ff9e9e; border: 1px solid rgba(255,107,107,0.22); }
    .pv2-msg--ok { background: rgba(94,224,106,0.12); color: #a7f0b0; border: 1px solid rgba(94,224,106,0.22); }

    /* Lists */
    .pv2-list { display: flex; flex-direction: column; gap: 8px; }
    .pv2-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-list__item:hover { background: rgba(255,255,255,0.045); }
    }
    .pv2-list__ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
    .pv2-list__ico--in { background: rgba(94,224,106,0.15); color: #5ee06a; }
    .pv2-list__ico--out { background: rgba(255,107,107,0.15); color: #ff8a8a; }
    .pv2-list__main { flex: 1; min-width: 0; font-size: 13px; }
    .pv2-list__primary { font-weight: 600; color: #fff; }
    .pv2-list__meta { font-size: 11px; color: #7a7a8c; margin-top: 1px; }
    .pv2-list__amt { font-size: 14px; font-weight: 800; }
    .pv2-list--empty { padding: 24px; text-align: center; font-size: 13px; color: #7a7a8c; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px dashed rgba(255,255,255,0.08); }

    /* VIP tier card */
    .pv2-tier { padding: 28px 28px 24px; }
    .pv2-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
    .pv2-tier__info { flex: 1; min-width: 0; }
    .pv2-tier__label { font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 10px; }
    .pv2-tier__name { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 12px; }
    .pv2-tier__meta { display: flex; gap: 8px; flex-wrap: wrap; }
    .pv2-tier__star { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 20px rgba(255,189,57,0.35)); flex-shrink: 0; }
    .pv2-tier__progress { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); }
    .pv2-vip-bar { height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; margin-bottom: 10px; position: relative; }
    .pv2-vip-bar__fill { height: 100%; background: linear-gradient(90deg, var(--pv2-accent), #ffbd39); border-radius: 5px; transition: width .5s ease; box-shadow: 0 0 16px rgba(255,189,57,0.4); }
    .pv2-vip-meta { display: flex; justify-content: space-between; font-size: 12px; color: #8a8aa0; font-weight: 500; }

    /* Email current address box */
    .pv2-email-current { padding: 2px 0 4px; }
    .pv2-email-current__label { font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin-bottom: 4px; }
    .pv2-email-current__addr { font-size: 15px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Divider */
    .pv2-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 16px 0; border: none; }

    /* Coming soon */
    .pv2-coming { text-align: center; padding: 56px 24px; }
    .pv2-coming__icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--pv2-accent, #c83e3e); filter: drop-shadow(0 4px 12px rgba(var(--color-accent-rgb),0.25)); }
    .pv2-coming__icon svg { width: 72px; height: 72px; }
    .pv2-coming__title { font-size: 24px; font-weight: 800; margin: 0 0 10px 0; color: #fff; letter-spacing: -0.3px; }
    .pv2-coming__desc { color: #8a8aa0; font-size: 14px; max-width: 460px; margin: 0 auto 20px; line-height: 1.6; }

    /* Quick actions */
    .pv2-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .pv2-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .18s; }
    @media (hover: hover) and (pointer: fine) {
        .pv2-quick a:hover { transform: translateY(-2px); background: rgba(var(--color-accent-rgb),0.1); border-color: rgba(var(--color-accent-rgb),0.3); }
    }
    .pv2-quick a.is-primary { background: linear-gradient(135deg, var(--pv2-accent), color-mix(in srgb, var(--pv2-accent) 80%, #000 20%)); border-color: transparent; }
    .pv2-quick__icon { font-size: 22px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--pv2-accent, #c83e3e); }
    .pv2-quick__icon svg { width: 22px !important; height: 22px !important; min-width: 22px; display: block; stroke: currentColor; fill: none; color: currentColor; }
    .pv2-quick a.is-primary .pv2-quick__icon { color: #fff; }

    /* Prefs */
    .pv2-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .pv2-toggle-row:last-child { border-bottom: none; }
    .pv2-toggle-row__text { flex: 1; min-width: 0; }
    .pv2-toggle-row__title { font-size: 14px; font-weight: 600; color: #fff; }
    .pv2-toggle-row__desc { font-size: 12px; color: #7a7a8c; margin-top: 2px; }

    /* Mobile */
    @media (max-width: 900px) {
        .pv2 { flex-direction: column; padding: 14px 12px; gap: 14px; }
        .pv2-side { width: 100%; position: static; }
        /* Let the nav bleed past the card padding so its scroll area uses
           the full screen width — feels native on mobile. */
        .pv2-side__card { padding: 14px 14px 8px 14px; overflow: hidden; }
        .pv2-user { flex-direction: row; padding: 4px 8px 12px; margin-bottom: 10px; text-align: left; gap: 12px; }
        .pv2-avatar { width: 60px; height: 60px; }
        .pv2-user > :not(.pv2-avatar) { align-self: flex-start; }
        .pv2-nav {
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            gap: 6px !important;
            padding: 2px 4px 8px 4px !important;
            margin: 0 -10px;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            /* Snap-padding so the active/first item doesn't kiss the edge */
            scroll-padding-left: 8px;
            scroll-padding-right: 8px;
            /* Thin native scrollbar so users see there's more content.
               (Edge-fade mask removed: it was hiding the left edge of the
               first item — Overview — making it look "blurry / cut off".) */
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--color-accent-rgb, 184, 58, 58), 0.45) transparent;
        }
        /* Small breathing room before the first item and after the last
           so they don't touch the card's inner edge on phones. */
        .pv2-nav > .pv2-nav__item:first-child { margin-left: 6px; }
        .pv2-nav > .pv2-nav__item:last-child { margin-right: 6px; }
        .pv2-nav::-webkit-scrollbar { height: 4px; display: block; }
        .pv2-nav::-webkit-scrollbar-track { background: transparent; }
        .pv2-nav::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb, 184, 58, 58), 0.45); border-radius: 4px; }
        .pv2-nav > * { flex: 0 0 auto; scroll-snap-align: start; }
        /* Only hide the nav's own divider — keep section dividers (e.g. between
           Current email and Change email in the Security tab) visible. */
        .pv2-nav > .pv2-divider { display: none !important; }
        /* Outside-of-nav dividers stay; on mobile give them more breathing
           space so the two sections feel distinct. */
        .pv2-card .pv2-divider { margin: 22px 0; }
        .pv2-nav__item { white-space: nowrap; padding: 8px 14px; }
        .pv2-nav__item.is-active::before { display: none; }
        .pv2-nav__item.is-active { background: var(--pv2-accent); color: #fff; }
        .pv2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .pv2-stat { padding: 14px; }
        .pv2-stat__value { font-size: 20px; }
        .pv2-cols { grid-template-columns: 1fr; }
        .pv2-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .pv2-title { font-size: 22px; }
        .pv2-card { padding: 16px; }
    }
    @media (max-width: 480px) {
        .pv2-stats { grid-template-columns: 1fr 1fr; }
        .pv2-input--code { letter-spacing: 5px; }
        .pv2-row { gap: 8px; }
    }

/* =================================================================
 * Profile / Refs buttons — match the wallet popup CTA style
 * (translucent accent fill, lighter rim, glow on hover).
 * ================================================================= */
/* IMPORTANT: !important here defeats the earlier `.pv2-btn--primary` (gradient
   fill) and `.pv2-btn--ghost` rules in this same file that have equal class
   specificity. We want the wallet-popup-CTA look to win for both elements. */
.pv2-btn,
.rv2-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 22px !important;
    height: auto !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    border: 1.5px solid color-mix(in srgb, var(--color-accent, #B83A3A) 50%, #fff 50%) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform 0.12s !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
/* Hover handled by the liquid-glass section below — background stays transparent
   so the ::before glass layer keeps doing its job. Don't re-paint background here. */
.pv2-btn:active,
.rv2-btn:active { transform: translateY(0) !important; }
.pv2-btn[disabled], .rv2-btn[disabled],
.pv2-btn:disabled, .rv2-btn:disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important;
}

/* Primary — transparent so the liquid-glass ::before layer stays visible.
   Defeats `.pv2-btn--primary { background: linear-gradient }` from old rules. */
.pv2-btn--primary, .rv2-btn--primary {
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* primary hover handled by liquid-glass section below */

/* Ghost variant — transparent fill, white outline */
.pv2-btn--ghost, .rv2-btn--ghost {
    background: transparent !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #d8d8e6 !important;
    box-shadow: none !important;
}
/* ghost hover handled by liquid-glass section below */

/* Danger variant */
.pv2-btn--danger {
    background: rgba(220, 60, 60, 0.85) !important;
    background-image: none !important;
    border-color: rgba(255, 120, 120, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 60, 60, 0.30) !important;
}
/* danger hover handled by liquid-glass section below */

/* Green refs variant */
.rv2-btn--green {
    background: rgba(34, 197, 94, 0.85) !important;
    background-image: none !important;
    border-color: rgba(110, 231, 160, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.30) !important;
}
/* green hover handled by liquid-glass section below */

/* Small variant */
.pv2-btn--sm, .rv2-btn--sm {
    padding: 8px 16px !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

.pv2-btn, .pv2-btn *, .rv2-btn, .rv2-btn * { cursor: pointer !important; }
.pv2-btn[disabled], .pv2-btn[disabled] *,
.rv2-btn[disabled], .rv2-btn[disabled] *,
.pv2-btn:disabled, .pv2-btn:disabled *,
.rv2-btn:disabled, .rv2-btn:disabled * { cursor: not-allowed !important; }
/* SVG inside our buttons — explicit size so it can't inherit a huge font-size
   parent context, and force currentColor so stroke="currentColor" actually
   shows up (SVGs rendered as 0×0 / no color = "empty" buttons). */
.pv2-btn svg,
.rv2-btn svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    flex-shrink: 0;
    color: currentColor !important;
    stroke: currentColor;
    fill: none;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}
.pv2-btn svg [fill="currentColor"],
.rv2-btn svg [fill="currentColor"] { fill: currentColor !important; }

/* =================================================================
 * Liquid-glass effect for profile / refs buttons — same visual as the
 * homepage Deposit / Start Game banner buttons (.liq-effect__button).
 * Two pseudo-element layers:
 *   ::before — glass base + moving glare highlight (backdrop-filter blur)
 *   ::after  — rotating conic-gradient border ring
 * ================================================================= */

/* Per-tenant defaults for the liquid-glass tunables */
.pv2-btn,
.rv2-btn {
    --border-width: 2px;
    --base-color: var(--color-accent-rgb, 184, 58, 58);
    --blur-effect: 4px;
    --opacity-effetc1: 0.6;
    --opacity-effetc2: 0.3;
    --opacity-effetc3: 0.6;
    --angle-1: -75deg;
    --angle-2: -45deg;
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Layer 1 — glass base + diagonal glare highlight */
.pv2-btn::before,
.rv2-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(
            var(--angle-2),
            rgba(var(--base-color), 0) 20%,
            rgba(var(--base-color), 0.2) 40%,
            rgba(var(--base-color), 0.2) 50%,
            rgba(var(--base-color), 0.1) 60%,
            rgba(var(--base-color), 0) 80%
        ),
        linear-gradient(
            -75deg,
            rgba(var(--base-color), var(--opacity-effetc1)),
            rgba(var(--base-color), var(--opacity-effetc2)),
            rgba(var(--base-color), var(--opacity-effetc3))
        );
    background-size: 200% 200%, 100% 100%;
    background-position: 0% 50%, 0% 0%;
    background-blend-mode: overlay, normal;
    box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1),
        0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0 0.1em inset rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(var(--blur-effect));
    -webkit-backdrop-filter: blur(var(--blur-effect));
    transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Layer 2 — rotating conic-gradient border (the bright sweep around the edge) */
.pv2-btn::after,
.rv2-btn::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    top: calc(0% - var(--border-width) / 2);
    left: calc(0% - var(--border-width) / 2);
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    border-radius: inherit;
    padding: var(--border-width);
    box-sizing: border-box;
    pointer-events: none;
    background: conic-gradient(from var(--angle-1) at 50% 50%,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0) 5% 40%,
            rgba(var(--base-color), 1) 50%,
            rgba(0, 0, 0, 0) 60% 95%,
            rgba(0, 0, 0, 0.5)),
        linear-gradient(
            180deg,
            rgba(var(--base-color), 0.2),
            rgba(var(--base-color), 0.05)
        );
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    transition: --angle-1 500ms ease;
}

/* Hover — same behaviour as .liq-effect__button in components/card.css:
   glare layer slides + conic border ring rotates. No glow, no lift, no
   brightness change — just the glass effect itself. */
@media (hover: hover) and (pointer: fine) {
    .pv2-btn:hover::before,
    .rv2-btn:hover::before { background-position: 30% 50%, 0% 0%; }
    .pv2-btn:hover::after,
    .rv2-btn:hover::after  { --angle-1: -125deg; }
}
.pv2-btn:active,
.rv2-btn:active        { transform: scale(0.98) !important; }
.pv2-btn:active::after,
.rv2-btn:active::after { --angle-1: -75deg; }

/* Ghost / Danger / Green keep their own tinted base color */
.pv2-btn--ghost,
.rv2-btn--ghost { --opacity-effetc1: 0.18; --opacity-effetc2: 0.05; --opacity-effetc3: 0.18; }
.pv2-btn--danger { --base-color: 220, 60, 60; --opacity-effetc1: 0.7; --opacity-effetc2: 0.35; --opacity-effetc3: 0.7; }
.rv2-btn--green  { --base-color: 34, 197, 94;  --opacity-effetc1: 0.7; --opacity-effetc2: 0.35; --opacity-effetc3: 0.7; }

/* Houdini @property registration — required for the conic-gradient `from var(--angle-1)`
   to be animatable in Chrome/Edge. Already declared globally in index.v13.css for
   .liq-effect__button; redeclaring here is harmless if it's already registered. */
@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

/* Quick tiles (Jackpot / Slots / Deposit / Withdraw) — same liquid-glass FX
   as the wallet popup CTA, but with the original neutral white-glass palette
   for non-primary tiles. The "is-primary" Deposit tile keeps the tenant accent. */
.pv2-quick a {
    --border-width: 2px;
    /* Whitish glass for Jackpot / Slots / Withdraw */
    --base-color: 255, 255, 255;
    --blur-effect: 4px;
    --opacity-effetc1: 0.18;
    --opacity-effetc2: 0.05;
    --opacity-effetc3: 0.18;
    --angle-1: -75deg;
    --angle-2: -45deg;
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 0.12s !important;
}
/* Deposit tile (is-primary) — accent-tinted glass to keep its emphasis */
.pv2-quick a.is-primary {
    --base-color: var(--color-accent-rgb, 184, 58, 58);
    --opacity-effetc1: 0.6;
    --opacity-effetc2: 0.3;
    --opacity-effetc3: 0.6;
}
.pv2-quick a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(
            var(--angle-2),
            rgba(var(--base-color), 0) 20%,
            rgba(var(--base-color), 0.2) 40%,
            rgba(var(--base-color), 0.2) 50%,
            rgba(var(--base-color), 0.1) 60%,
            rgba(var(--base-color), 0) 80%
        ),
        linear-gradient(
            -75deg,
            rgba(var(--base-color), var(--opacity-effetc1)),
            rgba(var(--base-color), var(--opacity-effetc2)),
            rgba(var(--base-color), var(--opacity-effetc3))
        );
    background-size: 200% 200%, 100% 100%;
    background-position: 0% 50%, 0% 0%;
    background-blend-mode: overlay, normal;
    box-shadow:
        inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
        inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1),
        0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
        0 0 0 0.1em inset rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(var(--blur-effect));
    -webkit-backdrop-filter: blur(var(--blur-effect));
    transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.pv2-quick a::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    top: calc(0% - var(--border-width) / 2);
    left: calc(0% - var(--border-width) / 2);
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    border-radius: inherit;
    padding: var(--border-width);
    box-sizing: border-box;
    pointer-events: none;
    background: conic-gradient(from var(--angle-1) at 50% 50%,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0) 5% 40%,
            rgba(var(--base-color), 1) 50%,
            rgba(0, 0, 0, 0) 60% 95%,
            rgba(0, 0, 0, 0.5)),
        linear-gradient(180deg, rgba(var(--base-color), 0.2), rgba(var(--base-color), 0.05));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    transition: --angle-1 500ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .pv2-quick a:hover::before { background-position: 30% 50%, 0% 0%; }
    .pv2-quick a:hover::after  { --angle-1: -125deg; }
    .pv2-quick a:hover { transform: none !important; }
}
.pv2-quick a:active { transform: scale(0.98); }