/* ===== PREMIUM DARK UI (Shared) ===== */

/* Force the front-page true-black across every page that loads this theme.
   A stylesheet !important beats header.php's inline body background, so this
   holds regardless of the operator's config background value. */
body {
    background: #09090b !important;
}

:root {
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-backdrop: blur(12px);
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-tertiary: #525252;
    --accent-primary: #1DB954;
    --accent-glow: rgba(29, 185, 84, 0.5);
}

/* --- Global Page Layout --- */
/* The navbar (~72px) and footer (~300px) sit outside .premium-page, so the
   min-height has to discount both. Subtracting only the navbar (the old
   calc(100vh - 72px)) left ~350px of dead space under short pages like renew;
   dropping min-height altogether instead left bare background BELOW the footer
   on tall screens. Discounting both keeps short pages short and still lands the
   footer on the bottom edge. */
.premium-page {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 1.5rem 3rem;
    min-height: calc(100vh - 372px);
    color: var(--text-primary);
}

/* --- Hero Headers --- */
.premium-header {
    text-align: center;
    margin-bottom: 3rem;
}

.premium-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 0;
    line-height: 1.08;
}

.premium-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.premium-icon-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(29, 185, 84, 0.3);
}

/* --- Glass Cards --- */
.sp-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px;
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: none !important;
}

.sp-card:hover {
    border-color: var(--glass-border-hover) !important;
}

/* --- Form Elements (Inputs & Selects) --- */
.premium-input,
.premium-select,
.form-input,
.form-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    font-size: 1.125rem !important;
    transition: all 0.2s ease;
}

.premium-input:focus,
.premium-select:focus,
.form-input:focus,
.form-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15) !important;
    outline: none;
    background: rgba(0, 0, 0, 0.5) !important;
}

.premium-input::placeholder,
.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Labels */
.form-label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Buttons --- */
.premium-btn {
    background: var(--color-primary);
    /* See .btn-primary in style.css: white on the brand green is 2.59:1. */
    color: #0a0a0a;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(29, 185, 84, 0.3);
}

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

.premium-btn:disabled,
.premium-btn[disabled],
.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Package Selector --- */
.package-option {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 1.25rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.package-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.package-option.selected {
    background: rgba(29, 185, 84, 0.15) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 15px rgba(29, 185, 84, 0.1);
}

/* --- Alerts & Notices --- */
.premium-alert {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: #fbbf24;
}

.premium-alert-icon {
    color: #fbbf24;
}

/* --- Step Indicators --- */
.step-circle {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-circle.active {
    background: var(--color-primary);
    border: none;
    box-shadow: 0 0 15px rgba(29, 185, 84, 0.2);
}

/* --- Miscellaneous --- */
.section-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 1.5rem !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.key-format-error {
    color: #fca5a5;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.fields-container {
    animation: fadeInUp 0.25s ease-out;
}

@media (max-width: 640px) {
    .premium-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .premium-header {
        margin-bottom: 2rem;
    }

    .sp-card {
        padding: 1.25rem;
    }

    .premium-input,
    .premium-select,
    .form-input,
    .form-select {
        font-size: 1rem !important;
        padding: 1rem !important;
    }
}

/* --- Alerts ---
   These were Tailwind light-theme utilities (bg-red-50 / text-red-800), so every
   success, error and warning a customer saw on upgrade / renew / info rendered as
   a near-white panel on the dark site - and vanished entirely if the Tailwind CDN
   was blocked, since nothing else styled them. Site CSS, no CDN dependency. */
.sp-alert {
    --alert: var(--accent-primary);
    background: color-mix(in srgb, var(--alert) 10%, #0d0d10);
    border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    scroll-margin-top: 90px;
}

.sp-alert-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sp-alert svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--alert);
}

.sp-alert h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--alert);
}

.sp-alert .api-message-content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.sp-alert-success { --alert: var(--accent-primary); }
.sp-alert-error   { --alert: #f87171; }
.sp-alert-warning { --alert: #fbbf24; }
.sp-alert-info    { --alert: #60a5fa; }

/* Ghost / tinted variants: an inline background override means the brand-green
   fill is gone, so the near-black text that pairs with it would be near-black on
   near-black (this is exactly what happened to "Renew Account" and "View Live
   Status"). Anything that replaces the background gets readable text back.
   Higher specificity than the base rule, and an inline color: still wins over
   this - which is how the Cash App / Zelle buttons keep their dark text. */
.premium-btn[style*="background"],
.btn-primary[style*="background"] {
    color: var(--text-primary, #fff);
}