/* ============ R25 Exclusive Buttons — Global System ============ */

:root {
    --r25-gold: var(--dash-gold, var(--gold, #e8b923));
    --r25-gold-2: var(--dash-gold-2, var(--gold-light, #f5d061));
    --r25-gold-dark: var(--accent-gold-dark, var(--gold-dark, #c99a1a));
    --r25-gold-glow: var(--dash-gold-glow, rgba(232, 185, 35, 0.38));
    --r25-text: var(--dash-text, var(--text-white, #f4f4f5));
    --r25-muted: var(--dash-muted, var(--text-gray, #8b8b95));
    --r25-line: var(--dash-line, var(--border, rgba(255, 255, 255, 0.08)));
    --r25-surface: var(--dash-surface, rgba(255, 255, 255, 0.04));
    --r25-red: var(--dash-red, var(--red, #f87171));
    --r25-green: var(--dash-green, var(--green, #34d399));
    --r25-blue: var(--dash-blue, var(--blue, #5865f2));
    --r25-purple: var(--dash-purple, #a78bfa);
    --r25-btn-r: 14px;
    --r25-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --r25-btn-shadow-gold:
        0 4px 22px rgba(232, 185, 35, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    --r25-btn-shadow-gold-hover:
        0 10px 36px rgba(232, 185, 35, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

/* ── Base ── */
.btn,
.st-btn,
.chg-btn,
.rdm-btn,
.btn-buy,
.btn-submit,
.btn-discord,
.usr-dl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.82rem 1.35rem;
    border-radius: var(--r25-btn-r);
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.015em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform 0.24s var(--r25-btn-ease),
        box-shadow 0.24s var(--r25-btn-ease),
        background 0.24s var(--r25-btn-ease),
        border-color 0.24s var(--r25-btn-ease),
        color 0.24s var(--r25-btn-ease);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn::before,
.st-btn--gold::before,
.chg-btn--confirm::before,
.rdm-btn::before,
.btn-buy::before,
.btn-submit::before,
.usr-dl-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 48%);
    pointer-events: none;
    opacity: 0.85;
}

.btn > *,
.st-btn > *,
.chg-btn > *,
.rdm-btn > *,
.btn-buy > *,
.btn-submit > *,
.btn-discord > *,
.usr-dl-btn > * {
    position: relative;
    z-index: 1;
}

.btn i,
.st-btn i,
.chg-btn i,
.rdm-btn i,
.btn-discord i,
.usr-dl-btn i {
    font-size: 0.92em;
    position: relative;
    z-index: 1;
}

.btn:focus-visible,
.st-btn:focus-visible,
.chg-btn:focus-visible,
.rdm-btn:focus-visible,
.action-btn:focus-visible,
.btn-discord:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(232, 185, 35, 0.22),
        var(--r25-btn-shadow-gold);
}

.btn:disabled,
.st-btn:disabled,
.chg-btn:disabled,
.rdm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

/* ── Primary (Gold) ── */
.btn-primary,
.st-btn--gold,
.chg-btn--confirm,
.rdm-btn,
.btn-buy,
.btn-submit,
.usr-dl-btn {
    background: linear-gradient(135deg, var(--r25-gold-dark) 0%, var(--r25-gold) 45%, var(--r25-gold-2) 100%);
    background-size: 180% auto;
    color: #0a0a0c;
    border: none;
    box-shadow: var(--r25-btn-shadow-gold);
}

.btn-primary:hover,
.st-btn--gold:hover,
.chg-btn--confirm:hover,
.rdm-btn:hover,
.btn-buy:hover,
.btn-submit:hover,
.usr-dl-btn:hover {
    transform: translateY(-2px);
    background-position: right center;
    box-shadow: var(--r25-btn-shadow-gold-hover);
}

.btn-primary:active,
.st-btn--gold:active,
.chg-btn--confirm:active,
.rdm-btn:active,
.btn-buy:active,
.btn-submit:active,
.usr-dl-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(232, 185, 35, 0.28);
}

/* ── Secondary (Outline) ── */
.btn-secondary,
.st-btn--outline,
.chg-btn--reset {
    background: rgba(255, 255, 255, 0.035);
    color: var(--r25-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.btn-secondary:hover,
.st-btn--outline:hover,
.chg-btn--reset:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 185, 35, 0.35);
    background: rgba(232, 185, 35, 0.08);
    color: var(--r25-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.btn-secondary:active,
.st-btn--outline:active,
.chg-btn--reset:active {
    transform: translateY(0);
}

/* ── Danger ── */
.btn-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.14));
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.35);
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.15);
}

.btn-danger:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(220, 38, 38, 0.22));
    border-color: rgba(248, 113, 113, 0.5);
    color: #fff;
    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.25);
}

/* Hero danger override — solid red for emphasis */
.usr-hero__actions .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 22px rgba(239, 68, 68, 0.35);
}

.usr-hero__actions .btn-danger:hover {
    box-shadow: 0 10px 32px rgba(239, 68, 68, 0.45);
}

/* ── Success ── */
.btn-success {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(16, 185, 129, 0.14));
    color: var(--r25-green);
    border: 1px solid rgba(52, 211, 153, 0.32);
    box-shadow: 0 4px 18px rgba(52, 211, 153, 0.12);
}

.btn-success:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.32), rgba(16, 185, 129, 0.22));
    color: #fff;
    box-shadow: 0 8px 28px rgba(52, 211, 153, 0.22);
}

.usr-dl-btn,
a.usr-dl-btn:link,
a.usr-dl-btn:visited {
    text-decoration: none !important;
    color: #0a0a0c !important;
}

.usr-dl-btn:hover,
a.usr-dl-btn:hover {
    text-decoration: none !important;
    color: #0a0a0c !important;
}
.btn-sm,
.usr-dl-btn {
    padding: 0.48rem 0.95rem;
    font-size: 0.78rem;
    border-radius: 11px;
}

.btn-lg {
    padding: 1rem 1.75rem;
    font-size: 0.98rem;
    border-radius: 16px;
}

.btn-block,
.btn-submit,
.rdm-btn {
    width: 100%;
}

.btn-submit {
    margin-top: 10px;
}

.rdm-btn {
    margin-top: 6px;
}

/* ── Discord ── */
.btn-discord {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    color: #fff;
    border: none;
    box-shadow:
        0 4px 22px rgba(88, 101, 242, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    font-weight: 700;
}

.btn-discord:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 36px rgba(88, 101, 242, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

/* ── Store buttons ── */
.st-btn {
    padding: 0.85rem 1.5rem;
    font-weight: 800;
}

.st-btn:not(.st-btn--gold):not(.st-btn--outline) {
    background: linear-gradient(135deg, var(--r25-gold-dark), var(--r25-gold));
    color: #0a0a0c;
    box-shadow: var(--r25-btn-shadow-gold);
}

.st-btn:not(.st-btn--gold):not(.st-btn--outline):hover {
    transform: translateY(-2px);
    box-shadow: var(--r25-btn-shadow-gold-hover);
}

.btn-buy {
    flex: 1;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
}

.btn-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--r25-line);
    color: var(--r25-muted);
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.24s var(--r25-btn-ease), box-shadow 0.24s var(--r25-btn-ease), background 0.24s, border-color 0.24s, color 0.24s;
}

.btn-video:hover {
    transform: translateY(-2px);
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.35);
    color: #ff4444;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.15);
}

/* ── Change page ── */
.chg-btn {
    min-width: 140px;
}

.chg-btn--confirm {
    flex: 1;
}

.chg-btn--reset {
    color: #fca5a5;
}

.chg-btn--reset:hover {
    color: #fff;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
}

/* ── Table icon actions ── */
.action-btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.22s var(--r25-btn-ease),
        box-shadow 0.22s var(--r25-btn-ease),
        background 0.22s,
        border-color 0.22s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.action-btn:hover {
    transform: translateY(-2px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.edit {
    background: rgba(96, 165, 250, 0.12);
    color: var(--r25-blue);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.08);
}

.action-btn.edit:hover {
    background: rgba(96, 165, 250, 0.22);
    box-shadow: 0 6px 18px rgba(96, 165, 250, 0.2);
}

.action-btn.delete {
    background: rgba(248, 113, 113, 0.12);
    color: var(--r25-red);
    border-color: rgba(248, 113, 113, 0.22);
    box-shadow: 0 2px 10px rgba(248, 113, 113, 0.08);
}

.action-btn.delete:hover {
    background: rgba(248, 113, 113, 0.22);
    box-shadow: 0 6px 18px rgba(248, 113, 113, 0.2);
}

.action-btn.view {
    background: rgba(167, 139, 250, 0.12);
    color: var(--r25-purple);
    border-color: rgba(167, 139, 250, 0.22);
    box-shadow: 0 2px 10px rgba(167, 139, 250, 0.08);
}

.action-btn.view:hover {
    background: rgba(167, 139, 250, 0.22);
    box-shadow: 0 6px 18px rgba(167, 139, 250, 0.2);
}

.action-btn.warn {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.22);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.08);
}

.action-btn.warn:hover {
    background: rgba(251, 191, 36, 0.22);
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.18);
}

.action-btn.ok {
    background: rgba(52, 211, 153, 0.12);
    color: var(--r25-green);
    border-color: rgba(52, 211, 153, 0.22);
    box-shadow: 0 2px 10px rgba(52, 211, 153, 0.08);
}

.action-btn.ok:hover {
    background: rgba(52, 211, 153, 0.22);
    box-shadow: 0 6px 18px rgba(52, 211, 153, 0.18);
}

.action-btn.ban {
    background: rgba(248, 113, 113, 0.12);
    color: var(--r25-red);
    border-color: rgba(248, 113, 113, 0.22);
    box-shadow: 0 2px 10px rgba(248, 113, 113, 0.08);
}

.action-btn.ban:hover {
    background: rgba(248, 113, 113, 0.22);
    box-shadow: 0 6px 18px rgba(248, 113, 113, 0.2);
}

.license-page .usr-row__actions--wide .action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.82rem;
}

/* ── Form submit bar (Add Script etc.) ── */
.scr-add-submit {
    flex: 1;
    min-width: 180px;
}

.usr-empty__btn {
    margin-top: 0.5rem;
}

.usr-hero__actions .btn {
    justify-content: center;
    min-width: 148px;
}

@media (max-width: 768px) {
    .usr-hero__actions .btn {
        width: 100%;
    }

    .scr-add-actions {
        flex-direction: column;
    }

    .scr-add-submit {
        width: 100%;
    }
}