/* =====================================================
   ViewLux Prime — Black Glass Theme (Global Override)
   Loaded after all per-page styles to enforce the look.
   ===================================================== */

:root {
    --vlp-bg-0: #050507;
    --vlp-bg-1: #0a0b10;
    --vlp-bg-2: #11131a;

    --vlp-glass-1: rgba(255, 255, 255, 0.04);
    --vlp-glass-2: rgba(255, 255, 255, 0.06);
    --vlp-glass-3: rgba(255, 255, 255, 0.09);

    --vlp-border-1: rgba(255, 255, 255, 0.08);
    --vlp-border-2: rgba(255, 255, 255, 0.14);
    --vlp-border-3: rgba(255, 255, 255, 0.22);

    --vlp-text-1: #f4f5f7;
    --vlp-text-2: #c8cad1;
    --vlp-text-3: #8b8d97;
    --vlp-text-4: #5a5c66;

    --vlp-accent: #ffd166;          /* warm gold */
    --vlp-accent-2: #f5b942;
    --vlp-accent-glow: rgba(255, 209, 102, 0.35);

    --vlp-info: #60a5fa;
    --vlp-success: #34d399;
    --vlp-danger: #f87171;
    --vlp-warning: #fbbf24;
}

/* ---------- BASE ---------- */
html, body {
    background-color: var(--vlp-bg-0) !important;
    color: var(--vlp-text-1) !important;
}

body {
    background-image:
        radial-gradient(1200px 700px at 10% -10%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(255, 209, 102, 0.10), transparent 55%),
        radial-gradient(900px 700px at 50% 110%, rgba(56, 189, 248, 0.10), transparent 60%),
        linear-gradient(180deg, #07080b 0%, #050507 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: var(--vlp-text-1) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Make headings, paragraphs and inline text legible by default */
h1, h2, h3, h4, h5, h6 {
    color: var(--vlp-text-1) !important;
}

p, span, li, td, th, label, small, strong, em, b, i, a {
    color: inherit;
}

a {
    color: var(--vlp-text-1);
}
a:hover {
    color: var(--vlp-accent);
}

hr {
    border-color: var(--vlp-border-1) !important;
    opacity: 1 !important;
}

/* ---------- GLASS CONTAINERS ---------- */
.glass,
.glass-panel,
.premium-card,
.app-btn,
.nav-blur,
.card,
.panel,
.modal-content {
    background: var(--vlp-glass-1) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    border: 1px solid var(--vlp-border-2) !important;
    color: var(--vlp-text-1) !important;
    box-shadow:
        0 10px 30px -15px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.premium-card::before {
    background: radial-gradient(circle at top right, rgba(255, 209, 102, 0.07), transparent 60%) !important;
}

.premium-card:hover,
.glass-panel:hover {
    border-color: var(--vlp-border-3) !important;
}

/* ---------- TAILWIND COLOR-NAME UTILITY OVERRIDES ---------- */
/* darkBg used as page color in inline configs — point it to deep black */
.bg-darkBg          { background-color: var(--vlp-bg-0) !important; }
.border-darkBg      { border-color: var(--vlp-bg-0) !important; }
.from-darkBg        { --tw-gradient-from: var(--vlp-bg-0) !important; --tw-gradient-to: rgba(5,5,7,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-darkBg         { --tw-gradient-stops: var(--tw-gradient-from), var(--vlp-bg-0), var(--tw-gradient-to) !important; }
.to-darkBg          { --tw-gradient-to: var(--vlp-bg-0) !important; }

/* text-darkBg is used on light/gold buttons to render dark text — keep that contrast */
.text-darkBg        { color: #0a0b10 !important; }

/* gold accent */
.text-gold          { color: var(--vlp-accent) !important; }
.bg-gold            { background-color: var(--vlp-accent) !important; }
.border-gold        { border-color: var(--vlp-accent) !important; }
.from-gold          { --tw-gradient-from: var(--vlp-accent) !important; --tw-gradient-to: rgba(255,209,102,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-gold            { --tw-gradient-to: var(--vlp-accent) !important; }
.via-gold           { --tw-gradient-stops: var(--tw-gradient-from), var(--vlp-accent), var(--tw-gradient-to) !important; }

/* cardBg / accent fallbacks */
.bg-cardBg          { background-color: var(--vlp-glass-1) !important; }
.text-cardBg        { color: var(--vlp-text-1) !important; }
.text-accent        { color: var(--vlp-accent) !important; }
.bg-accent          { background-color: var(--vlp-accent) !important; }
.border-accent      { border-color: var(--vlp-accent) !important; }
.from-accent        { --tw-gradient-from: var(--vlp-accent) !important; }
.to-accent          { --tw-gradient-to: var(--vlp-accent) !important; }

/* Ensure white text utilities stay visible */
.text-white         { color: var(--vlp-text-1) !important; }
.text-black         { color: var(--vlp-text-1) !important; }

/* Improve gray text contrast on dark glass */
.text-gray-300      { color: #d3d4db !important; }
.text-gray-400      { color: #b6b8c2 !important; }
.text-gray-500      { color: #9598a3 !important; }
.text-gray-600      { color: #7c7f8a !important; }
.text-gray-700      { color: #6a6d78 !important; }

/* Borders */
.border-white\/5    { border-color: rgba(255,255,255,0.06) !important; }
.border-white\/10   { border-color: rgba(255,255,255,0.10) !important; }
.border-white\/20   { border-color: rgba(255,255,255,0.18) !important; }

/* ---------- BUTTONS ---------- */
.btn-main,
.btn-gold,
.login-btn,
.sign-up-btn {
    background: linear-gradient(135deg, var(--vlp-accent) 0%, var(--vlp-accent-2) 100%) !important;
    color: #0a0b10 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 12px 28px -12px var(--vlp-accent-glow) !important;
    text-shadow: none !important;
}

.btn-main:hover,
.btn-gold:hover,
.login-btn:hover,
.sign-up-btn:hover {
    filter: brightness(1.08);
    color: #0a0b10 !important;
}

.btn-main:active,
.btn-gold:active {
    transform: scale(0.97);
}

/* Bootstrap generic buttons used on login/register/etc */
.btn {
    color: var(--vlp-text-1);
}
.btn-primary,
.btn-success,
.btn-info {
    background: linear-gradient(135deg, var(--vlp-accent) 0%, var(--vlp-accent-2) 100%) !important;
    color: #0a0b10 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.btn-outline-light,
.btn-light {
    background: var(--vlp-glass-2) !important;
    color: var(--vlp-text-1) !important;
    border: 1px solid var(--vlp-border-2) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ---------- FORM CONTROLS (Tailwind + Bootstrap) ---------- */
input,
textarea,
select,
.form-control,
.form-select {
    background-color: var(--vlp-glass-1) !important;
    color: var(--vlp-text-1) !important;
    border: 1px solid var(--vlp-border-2) !important;
    -webkit-text-fill-color: var(--vlp-text-1);
    caret-color: var(--vlp-accent);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--vlp-text-4) !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: var(--vlp-glass-2) !important;
    color: var(--vlp-text-1) !important;
    border-color: var(--vlp-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.18) !important;
}

/* Bootstrap input-group prefix (e.g. country code) */
.input-group-text,
.country-code .input-group-prepend .input-group-text {
    background: var(--vlp-glass-2) !important;
    color: var(--vlp-text-1) !important;
    border: 1px solid var(--vlp-border-2) !important;
}
.country-code select,
.country-code select:focus {
    background: transparent !important;
    color: var(--vlp-text-1) !important;
    border: none !important;
    outline: none !important;
}

/* Labels everywhere */
.label,
label,
.form-label {
    color: var(--vlp-text-1) !important;
}

/* Autofill (Chrome/Edge) — keep dark glass look */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--vlp-text-1) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(15, 17, 24, 0.95) inset !important;
    caret-color: var(--vlp-accent) !important;
    transition: background-color 9999s ease-out;
}

/* ---------- TABLES (Admin panel) ---------- */
table {
    color: var(--vlp-text-1) !important;
    border-color: var(--vlp-border-1) !important;
}
th {
    color: var(--vlp-text-2) !important;
    background: var(--vlp-glass-2) !important;
    border-color: var(--vlp-border-2) !important;
}
td {
    border-color: var(--vlp-border-1) !important;
}
tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
.table, .table-striped, .table-bordered {
    color: var(--vlp-text-1) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--vlp-text-1) !important;
}

/* ---------- BOOTSTRAP / VENDOR OVERRIDES (login, register, plans) ---------- */
.card,
.card-body,
.card-header,
.card-footer {
    background-color: var(--vlp-glass-1) !important;
    color: var(--vlp-text-1) !important;
    border-color: var(--vlp-border-2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

.modal-content {
    background-color: rgba(12, 13, 18, 0.85) !important;
    color: var(--vlp-text-1) !important;
    border: 1px solid var(--vlp-border-2) !important;
}
.modal-header, .modal-footer {
    border-color: var(--vlp-border-1) !important;
}

/* Hero gradient overlays that used the old red darkBg */
.bg-gradient-to-r.from-darkBg {
    background-image: linear-gradient(to right, rgba(5,5,7,0.95), rgba(5,5,7,0.45), transparent) !important;
}
.bg-gradient-to-br.from-darkBg {
    background-image: linear-gradient(to bottom right, rgba(5,5,7,0.95), rgba(5,5,7,0.45), transparent) !important;
}

/* Tab-active style in admin */
.tab-active {
    color: var(--vlp-accent) !important;
    border-bottom: 2px solid var(--vlp-accent) !important;
}

/* Swiper bullets */
.swiper-pagination-bullet { background: rgba(255,255,255,0.35) !important; }
.swiper-pagination-bullet-active { background: var(--vlp-accent) !important; }

/* ---------- WELCOME / GENERIC POPUPS ---------- */
#welcomePopup .relative,
.popup-card {
    background: rgba(12, 13, 18, 0.92) !important;
    border: 1px solid var(--vlp-border-2) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
}

/* ---------- SELECTION + SCROLLBAR ---------- */
::selection {
    background: rgba(255, 209, 102, 0.35);
    color: #fff;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.18);
    background-clip: padding-box;
}

/* ---------- UTILITY: ensure inline bg-darkBg gradients on logos still pop ---------- */
.bg-gradient-to-br.from-gold.to-yellow-600 {
    background-image: linear-gradient(to bottom right, var(--vlp-accent), #b8860b) !important;
}

/* Make sure status pills / colored chips stay readable */
.text-green-400, .text-green-500 { color: var(--vlp-success) !important; }
.text-red-400, .text-red-500     { color: var(--vlp-danger) !important; }
.text-yellow-200, .text-yellow-300, .text-yellow-400 { color: var(--vlp-accent) !important; }