/* ═══════════════════════════════════════════════
   DUMMYEMAIL – Cyberpunk-Refined Dark UI Theme
   ═══════════════════════════════════════════════ */

:root {
    /* Admin-configurable colors (preserved) */
    --primary_color: #6C5CE7;
    --primary_opacity: rgba(108, 92, 231, .15);
    --secondary_color: #00D4AA;
    --text_color: #D2D6E6;
    --text_muted: #7B83A0;
    --background_color: #07080E;
    --footer_background_color: #07080E;
    --secondary_text_color: #ffffff;

    /* Dark theme palette */
    --p500: #6C5CE7;
    --p400: #8B7CF0;
    --p300: #A899F5;
    --p200: #D0C9FA;
    --p100: #EDE9FE;
    --a500: #00D4AA;
    --a400: #2EECC4;
    --a300: #7AF5DB;
    --a100: #D1FFF2;
    --n950: #07080E;
    --n900: #0D0F18;
    --n850: #111320;
    --n800: #171A28;
    --n750: #1C2033;
    --n700: #242840;
    --n600: #363B55;
    --n500: #515875;
    --n400: #7B83A0;
    --n300: #A8AEC5;
    --n200: #D2D6E6;
    --n100: #EBEDF5;
    --n50: #F5F6FA;
    --warn: #F59E0B;
    --err: #EF4444;
    --ok: #22C55E;
    --font: 'Outfit', sans-serif;
    --mono: 'JetBrains Mono', monospace, sans-serif;
    --primary_gradient: linear-gradient(135deg, var(--p500) 0%, var(--a500) 100%);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--n950);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--n200);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(108, 92, 231, .35);
    color: #fff;
}

body > * {
    flex-shrink: 0;
}

/* Noise Overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

/* ─── Scrollbar (Dark) ─── */
body ::-webkit-scrollbar {
    width: 3px !important;
}

body ::-webkit-scrollbar-track {
    background: var(--n900) !important;
}

body ::-webkit-scrollbar-thumb {
    background: var(--n600) !important;
}

body > ::-webkit-scrollbar-thumb:hover {
    background: var(--n500) !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--n900);
}

::-webkit-scrollbar-thumb {
    background: var(--n700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--n600);
}

.simplebar-scrollbar:before {
    background-color: var(--n600);
}

/* ─── Links ─── */
a {
    transition: .3s;
    text-decoration: none;
    color: var(--n200);
}

a:hover {
    color: var(--p300);
}

/* ─── Logo ─── */
.logo img {
    height: 50px;
}

/* ─── Utilities ─── */
.text-primary {
    color: var(--p400) !important;
}

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

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

.lead {
    color: var(--n400);
}

.link {
    cursor: pointer;
}

.link.link-primary {
    color: var(--p400) !important;
}

.link.link-secondary {
    color: var(--a400);
}

.link:hover {
    opacity: .8;
}

/* ─── Buttons ─── */
.btn {
    border-radius: 10px;
    border-width: 2px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn.btn-md {
    padding: 9px 25px;
    font-size: 17px;
    font-weight: 500;
}

.btn.btn-lg {
    padding: 16px 25px;
    font-size: 17px;
    font-weight: 500;
    border-width: 1px;
}

.btn.btn-xl {
    padding: 20px 30px;
    font-size: 17px;
    font-weight: 500;
    border-width: 1px;
}

.btn.btn-primary {
    background-color: var(--p500);
    border-color: var(--p500);
    color: #fff;
}

.btn.btn-primary:hover {
    background-color: var(--p400);
    border-color: var(--p400);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, .3);
}

.btn.btn-secondary {
    background-color: var(--a500);
    border-color: var(--a500);
    color: #fff;
}

.btn.btn-secondary:hover {
    background-color: var(--a400);
    border-color: var(--a400);
    transform: translateY(-1px);
}

.btn.btn-outline-primary {
    border-color: var(--p500);
    color: var(--p400);
}

.btn.btn-outline-primary:hover {
    background-color: var(--p500);
    color: #fff;
}

.btn.btn-outline-light {
    border-color: var(--n600);
    color: var(--n200);
}

.btn.btn-outline-light:hover {
    border-color: var(--a400);
    color: var(--a400);
    background-color: transparent;
}

.btn.btn-light {
    background-color: var(--n750);
    border-color: var(--n700);
    color: var(--n200);
}

.btn.btn-light:hover {
    background-color: var(--n700);
    border-color: var(--n600);
    color: var(--n100);
}

.btn:focus,
.btn:active {
    box-shadow: none !important;
}

.btn-close {
    width: .75em;
    height: .75em;
    box-shadow: none !important;
    background-size: .75em;
    filter: invert(1);
}

/* ─── Forms ─── */
.form-number {
    display: flex;
}

.form-number .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    height: auto;
}

.form-number .form-select:focus {
    border-color: var(--n600);
}

.form-number .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control {
    box-shadow: none !important;
    border-radius: 10px;
    background-color: var(--n850);
    border-color: var(--n700);
    color: var(--n100);
}

.form-control.form-control-md {
    padding-top: 10.75px;
    padding-bottom: 10.75px;
}

.form-control:focus {
    border-color: var(--p500);
    background-color: var(--n900);
    color: var(--n100);
}

.form-select {
    box-shadow: none !important;
    border-radius: 10px;
    background-color: var(--n850);
    border-color: var(--n700);
    color: var(--n100);
}

.form-select.form-select-md {
    padding-top: 10.75px;
    padding-bottom: 10.75px;
}

.form-select:focus {
    border-color: var(--p500);
    background-color: var(--n900);
    color: var(--n100);
}

.form-check-input {
    box-shadow: none !important;
    background-color: var(--n800);
    border-color: var(--n600);
}

.form-check-input:checked {
    background-color: var(--p500);
    border-color: var(--p500);
}

.form-switch .form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:not(:checked):focus {
    border-color: var(--n500);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23515875'/%3e%3c/svg%3e");
}

/* ─── Settings ─── */
.settings-user-img {
    position: relative;
    width: 100px;
    height: 100px;
}

.settings-user-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.settings-user-img .settings-user-img-change {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgba(7, 8, 14, 0.5);
}

.settings-user-img .settings-user-img-change i {
    cursor: pointer;
    color: #fff;
    transition: .3s;
}

.settings-user-img .settings-user-img-change i:hover {
    opacity: .7;
}

.settings-links {
    display: flex;
    flex-direction: column;
}

.settings-links .settings-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--n400);
    padding: 15px 25px;
}

.settings-links .settings-link:not(:last-child) {
    margin-bottom: 10px;
}

.settings-links .settings-link::before {
    visibility: hidden;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--p500);
    border-radius: 20px;
    opacity: .08;
    z-index: 0;
}

.settings-links .settings-link:hover,
.settings-links .settings-link.active {
    z-index: 0;
    color: var(--n100);
}

.settings-links .settings-link:hover::before,
.settings-links .settings-link.active::before {
    visibility: visible;
}

.settings-links .settings-link i {
    width: 35px;
}

/* ─── Accordion (FAQ Dark) ─── */
.accordion-button {
    justify-content: space-between;
    box-shadow: none !important;
    border-radius: 14px !important;
    background-color: var(--n850) !important;
    color: var(--n100) !important;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: 600;
    font-size: 18px;
    border: 1px solid var(--n700);
}

.accordion-button::after {
    display: none;
}

.accordion-button .accordion-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--n600);
    border-radius: 50%;
    color: var(--n400);
    font-size: 14px;
    transition: .3s;
    flex-shrink: 0;
    margin-left: 15px;
}

.accordion-button:not(.collapsed) {
    color: var(--p300) !important;
    background-color: var(--n800) !important;
}

.accordion-button:not(.collapsed) .accordion-button-icon {
    transform: rotate(-180deg);
    border-color: var(--p500);
    color: var(--p400);
}

.accordion-item {
    border-radius: 14px !important;
    border: 1px solid var(--n700) !important;
    background-color: var(--n850);
    overflow: hidden;
}

.accordion-item:not(:last-child) {
    margin-bottom: 16px;
}

.accordion-body {
    padding-top: 8px;
    color: var(--n400);
    background-color: var(--n850);
}

.accordion-collapse {
    background-color: var(--n850);
}

/* ─── Pagination ─── */
.page-item.active .page-link {
    background-color: var(--p500);
    border-color: var(--p500);
}

.page-link {
    color: var(--p400);
    box-shadow: none !important;
    background-color: var(--n850);
    border-color: var(--n700);
}

.page-link:hover {
    color: var(--p300);
    background-color: var(--n800);
    border-color: var(--n600);
}

/* ─── Cards ─── */
.card {
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
    border: 1px solid var(--n700);
    background-color: var(--n850);
    color: var(--n200);
}

.card.card-blog img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.card.v2 {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.card .card-body {
    padding: 30px 40px;
}

/* ─── Posts ─── */
.posts .post {
    display: flex;
    align-items: center;
}

.posts .post:not(:last-child) {
    margin-bottom: 16px;
}

.posts .post .post-img {
    border-radius: 10px;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.posts .post .post-info .post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
    color: var(--n100);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.post-meta .post-meta-item {
    display: flex;
    align-items: center;
    color: var(--n400);
    font-size: 14px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.post-meta .post-meta-item:not(:last-child) {
    margin-right: 10px;
}

.post-meta .post-meta-item:not(:last-child)::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--n600);
    margin-left: 10px;
    border-radius: 50%;
}

.post-meta .post-meta-item i {
    margin-right: 5px;
    color: var(--n500);
}

/* ─── Comments ─── */
.comments {
    width: 100%;
}

.comments .comment {
    display: flex;
    background-color: var(--n850);
    padding: 30px 20px;
    border-radius: 10px;
}

.comments .comment .comment-img img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 16px;
}

.comments .comment .comment-text {
    font-size: 15px;
    color: var(--n300);
}

.comments .comment:not(:last-child) {
    margin-bottom: 16px;
}

/* ─── Plans ─── */
.plan-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--n850);
    border: 1px solid var(--p500);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    cursor: pointer;
    padding: 5px;
    position: relative;
    user-select: none;
    margin-bottom: 35px;
}

.plan-switcher .plan-switcher-item {
    align-items: center;
    border-radius: 8px;
    display: flex;
    font-weight: 400;
    height: 35px;
    justify-content: center;
    position: relative;
    text-align: center;
    transition: .3s;
    width: 90px;
    font-size: 16px;
    color: var(--n300);
}

.plan-switcher .plan-switcher-item.active {
    background-color: var(--p500);
    color: #fff;
}

.plan {
    position: relative;
    background-color: var(--n850);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    border: 1px solid var(--n700);
    padding: 45px 30px;
    border-radius: 14px;
}

.plan.yearly .plan-monthly {
    display: none;
}

.plan.yearly .plan-yearly {
    display: block;
}

.plan .plan-monthly input {
    display: none;
}

.plan .plan-yearly {
    display: none;
}

.plan .plan-yearly input {
    display: none;
}

.plan .plan-price {
    font-size: 55px;
    font-weight: 700;
    color: var(--n100);
}

.plan .plan-text {
    margin-bottom: 30px;
    color: var(--n400);
}

.plan .plan-features {
    margin-top: 30px;
}

.plan .plan-features .plan-feat {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--n200);
}

.plan .plan-features .plan-feat:not(:last-child) {
    margin-bottom: 16px;
}

.plan .plan-features .plan-feat .plan-feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: var(--p500);
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    font-size: 15px;
    flex-shrink: 0;
}

.plan .plan-features .plan-feat .plan-feat-icon-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: var(--a500);
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    font-size: 15px;
    flex-shrink: 0;
}

.plans-item {
    display: none;
}

.plans-item.active {
    display: block !important;
}

.discount {
    display: none;
    transform: perspective(200px) translateZ(-200px);
    transition: .3s;
}

.discount.show {
    display: block;
}

.discount.animate {
    transform: perspective(200px) translateZ(0);
}

/* ═══════════════════════════════════════════════
   NAVIGATION (Dark, Fixed, Backdrop-Blur)
   ═══════════════════════════════════════════════ */

.nav {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    z-index: 1030;
    margin-top: 0;
    border-bottom: 1px solid transparent;
}

.nav .nav-inner {
    display: flex;
    align-items: center;
}

.nav .nav-inner .logo {
    flex-shrink: 0;
}

.nav .nav-inner .nav-actions-sm {
    display: flex;
    align-items: center;
    margin-left: auto;
}

@media (min-width: 1200px) {
    .nav .nav-inner .nav-actions-sm {
        display: none;
    }
}

.nav .nav-inner .nav-menu-button {
    color: var(--n200);
    transition: .3s;
    cursor: pointer;
}

.nav .nav-inner .nav-menu-button:hover {
    color: var(--p400);
}

.nav .nav-inner .nav-menu {
    width: 100%;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1040;
        transition: .3s;
        visibility: hidden;
        opacity: 0;
    }
}

.nav .nav-inner .nav-menu .overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(7, 8, 14, 0.7);
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .overlay {
        display: block;
    }
}

.nav .nav-inner .nav-menu .nav-menu-close {
    cursor: pointer;
    color: var(--n400);
}

.nav .nav-inner .nav-menu .nav-menu-close i {
    font-size: 18px;
}

.nav .nav-inner .nav-menu .nav-menu-close:hover {
    color: var(--n100);
}

.nav .nav-inner .nav-menu .nav-menu-scroller {
    display: flex;
    align-items: center;
    overflow: visible !important;
    height: 70px;
}

.nav .nav-inner .nav-menu .nav-menu-scroller .ps__rail-x,
.nav .nav-inner .nav-menu .nav-menu-scroller .ps__rail-y {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-menu-scroller {
        display: block;
        position: absolute;
        width: 300px;
        top: 0;
        right: -300px;
        height: 100%;
        background-color: var(--n900);
        padding: 20px;
        visibility: hidden;
        opacity: 0;
        transition: .3s;
        overflow: hidden !important;
    }

    .nav .nav-inner .nav-menu .nav-menu-scroller .ps__rail-x,
    .nav .nav-inner .nav-menu .nav-menu-scroller .ps__rail-y {
        display: block !important;
    }
}

.nav .nav-inner .nav-menu .nav-menu-body {
    display: flex;
    align-items: center;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-menu-body {
        flex-direction: column;
        align-items: stretch;
    }
}

.nav .nav-inner .nav-menu .nav-links {
    display: flex;
    align-items: center;
    margin-left: auto;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-link {
    padding: 0;
    font-size: 15px;
    color: var(--n300);
    font-weight: 500;
    opacity: 0.9;
    transition: color .2s;
    margin-right: 15px;
}

.nav .nav-inner .nav-menu .nav-links .nav-link:hover {
    color: var(--n100);
    opacity: 1;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links .nav-link {
        margin-bottom: 10px;
        color: var(--n300);
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-link:not(:last-child) {
    margin-right: 30px;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links .nav-link:not(:last-child) {
        margin-right: 0;
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-drop {
    position: relative;
    z-index: 1030;
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--n300);
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
        color: var(--n300);
        justify-content: space-between;
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu {
    visibility: hidden;
    position: absolute;
    top: 40px;
    left: -10px;
    background-color: var(--n800);
    min-width: 200px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    border: 1px solid var(--n700);
    opacity: 0;
    transform: perspective(200px) translateZ(-200px);
    transition: .3s;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu {
        display: none;
        position: static;
        left: 0;
        width: 100%;
        margin-bottom: 10px;
        box-shadow: none;
        border: none;
        padding: 10px;
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link {
    color: var(--n300);
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:hover {
    color: var(--n100);
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:not(:last-child) {
    margin-bottom: 10px;
}

.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:last-child {
    margin-bottom: 0;
}

.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-menu {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-menu {
        display: block;
    }
}

.nav .nav-inner .nav-menu .nav-links .nav-drop.animated .nav-drop-menu {
    transform: perspective(200px) translateZ(0);
}

.nav .nav-inner .nav-menu .nav-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-actions {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-actions .btn-outline-light {
        color: var(--n300);
        border-color: var(--n600);
    }
}

.nav .nav-inner .nav-menu .nav-actions > *:not(:last-child) {
    margin-right: 10px;
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu .nav-actions > *:not(:last-child) {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu.show {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 1199.98px) {
    .nav .nav-inner .nav-menu.show .nav-menu-scroller {
        visibility: visible;
        opacity: 1;
        right: 0;
    }
}

/* Nav Sticky (scrolled) */
.nav.nav-sticky {
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(108, 92, 231, .15);
    position: fixed;
    background: rgba(7, 8, 14, .8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .3);
    transition: all .4s ease;
    box-sizing: border-box;
}

/* In dark theme, always show same logo */
.dark-logo {
    display: none;
}

.white-logo {
    display: block;
}

.nav-sticky .dark-logo {
    display: none !important;
}

.nav-sticky .white-logo {
    display: block !important;
}

.nav.nav-sticky .language .language-button {
    color: var(--n200);
}

.nav.nav-sticky .nav-inner .nav-menu-button {
    color: var(--n200);
}

.nav.nav-sticky .nav-inner .nav-menu .nav-links a {
    color: var(--n300);
}

.nav.nav-sticky .nav-inner .nav-menu .nav-drop .nav-drop-btn {
    color: var(--n300);
}

.nav.nav-sticky .nav-inner .nav-menu .nav-actions .btn-outline-light {
    color: var(--n200);
}

/* ═══════════════════════════════════════════════
   HEADER / HERO (Dark with Glows)
   ═══════════════════════════════════════════════ */

.header {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--n950) !important;
    overflow: hidden;
    min-height: 100vh;
}

.header.v2 {
    min-height: 300px;
}

/* Old header circles - hide */
.header .header-circles {
    display: none;
}

/* Hero Glow Effects */
.hero-glow-1 {
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(108, 92, 231, .2) 0%, transparent 60%);
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    animation: breathe 8s ease-in-out infinite;
}

.hero-glow-2 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 212, 170, .12) 0%, transparent 55%);
    bottom: -150px;
    right: -80px;
    pointer-events: none;
    animation: breathe 10s ease-in-out 2s infinite;
}

.hero-glow-3 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(108, 92, 231, .15) 0%, transparent 55%);
    bottom: 10%;
    left: -120px;
    pointer-events: none;
    animation: breathe 12s ease-in-out 4s infinite;
}

/* Grid pattern */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(108, 92, 231, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 92, 231, .04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Floating particles */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    font-size: 1.3rem;
    opacity: .06;
    animation: float linear infinite;
}

/* Hero Pill Badge */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--a500);
    padding: .45rem 1.1rem;
    border: 1px solid rgba(0, 212, 170, .2);
    border-radius: 100px;
    background: rgba(0, 212, 170, .04);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    animation: fadeUp .7s ease both;
}

.hero-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--a500);
    animation: pulse 2s ease infinite;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--p400) 0%, var(--a400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scroll indicator */
.scroll-hint {
    position: absolute;
    bottom: .5rem;
    left: 49.3%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    animation: fadeUp .7s ease .6s both;
}

.scroll-hint span {
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--n600);
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--n600);
    border-bottom: 2px solid var(--n600);
    transform: rotate(45deg);
    animation: bounceDown 2s ease infinite;
}

/* Header Wrapper */
.header .header-wrapper {
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 135px;
    padding-bottom: 70px;
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header .header-wrapper .container-fluid {
    text-align: center;
}

.header-title {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.05;
    text-align: center;
    color: var(--n100);
    animation: titleReveal 2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.header-text {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    max-width: 700px;
    color: var(--n400);
    font-weight: 300;
    line-height: 1.7;
    animation: fadeUp .7s ease .2s both;
}

/* ─── Email Widget (Glassmorphism Card) ─── */
.mail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: nowrap;
    animation: fadeUp .7s ease .35s both;
}

@media (max-width: 1200px) {
    .mail-wrapper {
        flex-direction: column;
    }
}

.mail-wrapper .ad {
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .mail-wrapper .ad:first-child {
        margin-bottom: 20px;
    }
}

@media (max-width: 1200px) {
    .mail-wrapper .ad:last-child {
        margin-top: 20px;
    }
}

.mail-wrapper .mail-selection {
    max-width: 560px;
    width: 100%;
    background: rgba(23, 26, 40, .7);
    border: 1px solid var(--n700);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    margin: 0 1.5rem;
    flex-shrink: 1;
}

/* Top glow line on widget */
.mail-wrapper .mail-selection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(108, 92, 231, .4), transparent);
}

.mail-wrapper .mail-selection .mail-select {
    position: relative;
    z-index: 50;
}

.mail-wrapper .mail-selection .mail-select .mail-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.mail-wrapper .mail-selection .mail-select .mail-input input {
    outline: 0;
    border: 1.5px solid var(--n700);
    border-radius: 14px;
    padding: 12px 70px 12px 20px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(.85rem, 2.5vw, 1.1rem);
    height: 60px;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s;
    background-color: var(--n900);
    color: var(--a400);
    letter-spacing: .01em;
}

.mail-wrapper .mail-selection .mail-select .mail-input input:focus {
    border-color: var(--p500);
}

@media (max-width: 991.98px) {
    .mail-wrapper .mail-selection .mail-select .mail-input input {
        height: 52px;
        font-size: .9rem;
    }
}

.mail-wrapper .mail-selection .mail-select .mail-input .mail-input-copy {
    position: absolute;
    right: 8px;
    height: 44px;
    width: 52px;
    font-size: 16px;
    border: none;
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.mail-wrapper .mail-selection .mail-select .mail-input .mail-input-copy:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, .35);
}

.mail-wrapper .mail-selection .mail-select .mail-input .mail-input-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 70px;
    font-size: 14px;
    color: var(--n300);
    cursor: pointer;
    border: 1.5px solid var(--n600);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    transition: .3s;
}

.mail-wrapper .mail-selection .mail-select .mail-input .mail-input-icon:hover {
    border-color: var(--p500);
    color: var(--p400);
}

/* Mail results dropdown */
.mail-wrapper .mail-selection .mail-select .mail-results {
    visibility: hidden;
    position: absolute;
    width: 100%;
    background-color: var(--n800);
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--n700);
    border-top: none;
    opacity: 0;
    transition: .3s;
}

.mail-wrapper .mail-selection .mail-select .mail-results .mail-results-item {
    display: flex;
    padding: 10px 16px;
    color: var(--n200);
    user-select: none;
    border-top: 1px solid var(--n700);
    cursor: pointer;
    transition: .2s;
}

.mail-wrapper .mail-selection .mail-select .mail-results .mail-results-item:hover {
    background-color: rgba(108, 92, 231, .08);
}

.mail-wrapper .mail-selection .mail-select .mail-results .mail-results-item label {
    cursor: pointer;
}

.mail-wrapper .mail-selection .mail-select .mail-results .mail-results-info {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n300);
    text-align: center;
    background-color: var(--n750);
    padding: 10px;
    border-radius: 0 0 14px 14px;
}

.mail-wrapper .mail-selection .mail-select .mail-results .mail-results-info .btn {
    font-size: 12px;
}

.mail-wrapper .mail-selection .mail-select.show .mail-input input {
    border-radius: 14px 14px 0 0;
}

.mail-wrapper .mail-selection .mail-select.show .mail-results {
    visibility: visible;
    opacity: 1;
}

/* Mail Actions */
.mail-wrapper .mail-selection .mail-actions {
    display: flex;
    margin-top: 1rem;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    .mail-wrapper .mail-selection .mail-actions {
        margin-top: .8rem;
    }
}

.mail-wrapper .mail-selection .mail-actions .mail-action {
    flex: 1;
    color: var(--n200);
    padding: 10px 8px;
    font-size: 13px;
    white-space: nowrap;
    background: var(--n750);
    border: 1px solid var(--n700);
    border-radius: 10px;
    transition: all .25s ease;
}

.mail-wrapper .mail-selection .mail-actions .mail-action:hover:not(:disabled) {
    background: var(--n700);
    border-color: var(--n600);
    color: var(--n100);
}

@media (max-width: 991.98px) {
    .mail-wrapper .mail-selection .mail-actions .mail-action {
        font-size: 12px;
        padding: 8px 6px;
    }
}

@media (max-width: 499.98px) {
    .mail-wrapper .mail-selection .mail-actions .mail-action {
        padding: 7px 5px;
    }
}

.mail-wrapper .mail-selection .mail-actions .mail-action:not(:last-child) {
    margin-right: 0;
}

.mail-wrapper .mail-selection .mail-actions .mail-action .mail-action-text {
    margin-left: 5px;
}

@media (max-width: 991.98px) {
    .mail-wrapper .mail-selection .mail-actions .mail-action .mail-action-text {
        display: none;
    }
}

/* Widget Meta (Timer + Status) */
.widget-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.widget-timer {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--warn);
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .15);
    padding: .35rem .75rem;
    border-radius: 8px;
}

.widget-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    color: var(--ok);
}

.widget-status .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    animation: pulse 1.8s ease infinite;
}

/* ─── Header Counters (Stats) ─── */
.header-counters {
    max-width: 880px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
}

.header-counters .header-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(23, 26, 40, .5);
    border: 1px solid var(--n700);
    color: var(--n100);
    border-radius: 14px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.header-counters .header-counter .header-counter-info .header-counter-number {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 5px;
    background: linear-gradient(135deg, var(--p400), var(--a400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-counters .header-counter .header-counter-info .header-counter-title {
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--n400);
}

.header-counters .header-counter .header-counter-icon i {
    font-size: 40px;
    color: var(--n600);
}

/* ─── Ad Slots ─── */
.ad.ad-v {
    width: 200px;
    height: 600px;
}

.ad.ad-h {
    max-width: 720px;
    width: 100%;
    height: 90px;
}

.ad.ad-350 {
    max-width: 350px;
    width: 100%;
    height: 250px;
}

.ad.ad-250x250 {
    max-width: 250px;
    width: 100%;
    height: 250px;
    display: block !important;
}

.ad.ad-box {
    max-width: 250px;
    width: 100%;
    height: 250px;
}

.ad img {
    width: 100%;
    height: 100%;
}

.ad *, .sticky-ad-content * {
    border-radius: 20px;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════
   SECTIONS (General)
   ═══════════════════════════════════════════════ */

.section {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    z-index: 0;
}

.section .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.section .section-header .section-title-sm {
    position: relative;
    padding: 6px 16px;
    z-index: 0;
    margin-bottom: 16px;
    text-transform: uppercase;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .15em;
    color: var(--a500);
    background: transparent;
}

.section .section-header .section-title-sm::before {
    content: "";
    position: absolute;
    background: rgba(0, 212, 170, .08);
    border: 1px solid rgba(0, 212, 170, .2);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 100px;
}

.section .section-header .section-title-sm span {
    color: var(--a500);
}

.section .section-header .section-title {
    margin-bottom: 20px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--n100);
}

.section .section-header .section-text {
    max-width: 750px;
    color: var(--n400);
}

.section .section-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background-color: var(--n900);
    z-index: -1;
}

/* ═══════════════════════════════════════════════
   MAILBOX (Dark)
   ═══════════════════════════════════════════════ */

.mailbox-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .mailbox-container {
        flex-direction: column;
        align-items: center;
    }
}

.mailbox-container .ad {
    flex-shrink: 0;
}

.mailbox-container .mail-content {
    width: 100%;
    flex-grow: 1;
    max-width: 750px;
}

.mailbox {
    width: 100%;
    background: rgba(23, 26, 40, .5);
    border: 1px solid var(--n700);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    border-radius: 20px;
    overflow: hidden;
}

.mailbox .mailbox-header {
    display: flex;
    text-transform: uppercase;
    background: rgba(108, 92, 231, .1);
    border-bottom: 1px solid var(--n700);
    color: var(--n200);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .05em;
}

.mailbox .mailbox-header .mailbox-header-item {
    padding: 18px 16px;
}

.mailbox .mailbox-header .mailbox-header-item p {
    margin-bottom: 0;
    color: var(--n300);
    font-weight: 600;
}

.mailbox .mailbox-header .mailbox-header-item:first-child {
    width: 27%;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-header .mailbox-header-item:first-child {
        width: 30%;
    }
}

.mailbox .mailbox-header .mailbox-header-item:nth-child(2) {
    width: 58%;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-header .mailbox-header-item:nth-child(2) {
        width: 70%;
    }
}

.mailbox .mailbox-header .mailbox-header-item:nth-child(3) {
    width: 15%;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-header .mailbox-header-item:nth-child(3) {
        display: none;
    }
}

.mailbox .mailbox-body {
    background-color: transparent;
    min-height: 426px;
}

.mailbox .mailbox-body .mailbox-item {
    display: flex;
    align-items: center;
    position: relative;
    transition: background .2s;
    cursor: pointer;
    border-bottom: 1px solid rgba(36, 40, 64, .6);
}

.mailbox .mailbox-body .mailbox-item:hover {
    background: rgba(108, 92, 231, .04);
}

.mailbox .mailbox-body .mailbox-item:nth-child(even) {
    background-color: rgba(17, 19, 32, .3);
}

.mailbox .mailbox-body .mailbox-item:nth-child(even):hover {
    background: rgba(108, 92, 231, .06);
}

.mailbox .mailbox-body .mailbox-item .mailbox-item-col {
    padding: 16px;
}

.mailbox .mailbox-body .mailbox-item .mailbox-item-col p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
    color: var(--n200);
}

.mailbox .mailbox-body .mailbox-item .mailbox-item-col:first-child {
    width: 27%;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-body .mailbox-item .mailbox-item-col:first-child {
        width: 30%;
    }
}

.mailbox .mailbox-body .mailbox-item .mailbox-item-col:nth-child(2) {
    width: 58%;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-body .mailbox-item .mailbox-item-col:nth-child(2) {
        width: 70%;
    }
}

.mailbox .mailbox-body .mailbox-item .mailbox-item-col:nth-child(3) {
    width: 15%;
    text-align: center;
}

@media (max-width: 575.98px) {
    .mailbox .mailbox-body .mailbox-item .mailbox-item-col:nth-child(3) {
        display: none;
    }
}

/* Empty mailbox state */
.mailbox .mailbox-body .empty {
    display: none;
}

.mailbox.empty .mailbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mailbox.empty .mailbox-body .mailbox-item {
    display: none;
}

.mailbox.empty .mailbox-body .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 426px;
}

.mailbox.empty .mailbox-body .empty h2 {
    color: var(--n200);
}

.mailbox.empty .mailbox-body .empty .empty-icon .emptyInboxRotation {
    animation: rotation 2s linear infinite;
    transform-origin: 50% 50%;
}

.mailbox.empty .mailbox-body .empty .empty-icon svg path.emptyInboxRotation {
    stroke: var(--n500);
}

/* ═══════════════════════════════════════════════
   FEATURES (Dark Cards)
   ═══════════════════════════════════════════════ */

.feat {
    display: block;
    padding: 2rem;
    background: rgba(23, 26, 40, .5);
    border: 1px solid var(--n700);
    border-radius: 20px;
    color: var(--n200);
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

.feat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(108, 92, 231, .05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
}

.feat:hover::before {
    opacity: 1;
}

.feat .feat-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    z-index: 1;
    color: var(--p300);
    margin-bottom: 1.3rem;
    border-radius: 14px;
    background: rgba(108, 92, 231, .12);
    border: 1px solid rgba(108, 92, 231, .2);
}

.feat .feat-icon::before {
    display: none;
}

.feat .feat-icon i {
    font-size: 24px;
}

.feat .feat-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--n100);
    letter-spacing: -.02em;
    position: relative;
    z-index: 1;
}

.feat .feat-text {
    margin-bottom: 0;
    color: var(--n400);
    font-size: .9rem;
    line-height: 1.65;
    transition: .3s;
    position: relative;
    z-index: 1;
}

.feat:hover {
    border-color: rgba(108, 92, 231, .25);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    color: var(--n100);
    background: rgba(23, 26, 40, .7);
}

.feat:hover .feat-icon {
    color: var(--p300);
}

.feat:hover .feat-text {
    color: var(--n300);
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS – Steps
   ═══════════════════════════════════════════════ */

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Connecting line */
.steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(16.66% + 36px);
    right: calc(16.66% + 36px);
    height: 2px;
    background: linear-gradient(90deg, var(--p500), var(--a500));
    opacity: .2;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.step-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.step:nth-child(1) .step-number {
    background: rgba(108, 92, 231, .12);
    border: 2px solid rgba(108, 92, 231, .3);
    color: var(--p400);
}

.step:nth-child(2) .step-number {
    background: rgba(79, 148, 220, .12);
    border: 2px solid rgba(79, 148, 220, .3);
    color: #6CB4EE;
}

.step:nth-child(3) .step-number {
    background: rgba(0, 212, 170, .1);
    border: 2px solid rgba(0, 212, 170, .25);
    color: var(--a400);
}

.step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--n100);
    margin-bottom: .5rem;
    letter-spacing: -.015em;
}

.step p {
    font-size: .9rem;
    color: var(--n400);
    line-height: 1.6;
    max-width: 260px;
    margin: 0;
}

@media (max-width: 700px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .steps::before {
        top: 36px;
        bottom: 36px;
        left: 35px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--p500), var(--a500));
    }

    .step {
        flex-direction: row;
        text-align: left;
        gap: 1.5rem;
    }

    .step-number {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .step p {
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════
   FAQS (Dark Accordion)
   ═══════════════════════════════════════════════ */

.faqs {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════
   CTA / GET IN TOUCH (Dark with Glow)
   ═══════════════════════════════════════════════ */

.question {
    background: linear-gradient(135deg, rgba(108, 92, 231, .12) 0%, rgba(0, 212, 170, .06) 100%);
    border: 1px solid rgba(108, 92, 231, .15);
    padding: 60px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.question::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(108, 92, 231, .18) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.question h2 {
    color: var(--n100);
    font-weight: 800;
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.question p {
    color: var(--n400);
    position: relative;
    z-index: 1;
}

.question .btn {
    position: relative;
    z-index: 1;
}

.section-shapes {
    position: relative;
}

/* ═══════════════════════════════════════════════
   FOOTER (Dark)
   ═══════════════════════════════════════════════ */

.footer {
    background-color: var(--n950);
    border-top: 1px solid var(--n800);
}

.footer .footer-upper {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--n800);
}

.footer .footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.footer .footer-links a {
    margin: 10px;
    color: var(--n400);
    font-size: 15px;
    transition: color .2s;
}

.footer .footer-links a:hover {
    color: var(--n100);
}

.footer .footer-lower {
    padding-top: 30px;
    padding-bottom: 30px;
    color: var(--n500);
}

.footer .footer-lower p {
    color: var(--n500);
    font-family: var(--mono);
    font-size: .8rem;
}

/* ═══════════════════════════════════════════════
   LANGUAGE SWITCHER (Dark)
   ═══════════════════════════════════════════════ */

.language {
    position: relative;
    z-index: 1030;
}

.language .language-img {
    margin-right: 10px;
}

.language .language-img img {
    width: 16px;
    height: 12px;
}

.language .language-button {
    display: flex;
    align-items: center;
    border-radius: 5px;
    color: var(--n200);
    cursor: pointer;
}

.language .language-button i {
    font-size: 20px;
}

.language .language-menu {
    display: none;
    position: absolute;
    top: 40px;
    right: -5px;
    width: 130px;
    background-color: var(--n800);
    z-index: 0;
    max-height: 180px;
    opacity: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    border: 1px solid var(--n700);
    border-radius: 10px;
    transition: .3s;
}

.language .language-menu::before {
    background-color: var(--n800);
    border-radius: 3px 0 0 0;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, .2);
    content: "";
    display: block;
    height: 12px;
    margin: 0 0 0 -6px;
    position: absolute;
    right: 10%;
    top: -5px;
    transform: rotate(45deg);
    width: 12px;
    z-index: 0;
}

.language .language-menu a {
    position: relative;
    display: flex;
    padding: 6px 8px;
    color: var(--n200);
    font-size: 14px;
    font-weight: 600;
    transition: .2s;
}

.language .language-menu a:hover {
    background-color: rgba(108, 92, 231, .1);
    color: var(--n100);
}

.language .language-menu a.active::after {
    content: '\f00c';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    right: 8px;
    width: 15px;
    height: 15px;
    background-color: var(--p500);
    border-radius: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    font-size: 10px;
    color: #fff;
}

.language.active .language-menu {
    display: block;
}

.language.animated .language-menu {
    opacity: 1;
}

/* ═══════════════════════════════════════════════
   MAIL HISTORY (Dark)
   ═══════════════════════════════════════════════ */

.mail-history {
    border: 1px solid var(--n700);
    max-height: 50vh;
    min-height: 50vh;
    overflow: auto;
    border-radius: 10px;
}

.mail-history-empty {
    display: flex;
    height: 48vh;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    color: var(--n400);
}

.mail-history .mail-history-day {
    position: relative;
}

.mail-history .mail-history-day .form-check {
    margin-right: 10px;
}

.mail-history .mail-history-day .mail-history-day-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--n750);
    padding: 8px 20px;
    color: var(--n100);
    text-transform: uppercase;
    z-index: 11;
    font-family: var(--mono);
    font-size: .75rem;
}

.mail-history .mail-history-day .mail-history-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    user-select: none;
    transition: .3s;
    color: var(--n200);
}

.mail-history .mail-history-day .mail-history-item .btn {
    visibility: hidden;
    position: absolute;
    right: 20px;
    opacity: 0;
    transition: .3s;
}

.mail-history .mail-history-day .mail-history-item:hover {
    background-color: rgba(108, 92, 231, .05);
}

.mail-history .mail-history-day .mail-history-item:hover .btn {
    visibility: visible;
    opacity: 1;
}

.mail-history-item span {
    line-height: 8px;
    color: var(--n400);
    margin-right: 13px;
    font-weight: 600;
    font-size: 15px;
}

.mail-history-item .email {
    font-size: 16px;
    font-weight: 600;
    color: var(--n100);
    font-family: var(--mono);
}

@media (max-width: 575.98px) {
    .mail-history-item span {
        display: none !important;
    }

    .mail-history-item .email,
    .mail-history .mail-history-day .mail-history-day-header {
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════
   COOKIES (Dark)
   ═══════════════════════════════════════════════ */

.cookies {
    visibility: hidden;
    position: fixed;
    max-width: 380px;
    padding: 30px;
    bottom: -150%;
    left: 40px;
    width: 100%;
    border-radius: 16px;
    background-color: var(--n850);
    border: 1px solid var(--n700);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    z-index: 90000;
    transition: .7s;
    color: var(--n200);
}

@media (max-width: 575.98px) {
    .cookies {
        max-width: 100%;
        left: 0 !important;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.cookies.show {
    visibility: visible;
    bottom: 40px;
}

@media (max-width: 575.98px) {
    .cookies.show {
        width: 100%;
        bottom: 0;
    }
}

.cookies h5 {
    color: var(--n100);
}

.cookies-text {
    color: var(--n400);
}

/* ═══════════════════════════════════════════════
   GO UP BUTTON
   ═══════════════════════════════════════════════ */

.go-up {
    visibility: hidden;
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 50px;
    right: 50px;
    background-color: var(--p500);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    transition: .3s;
    opacity: 0;
    z-index: 2000000;
    border: 1px solid rgba(108, 92, 231, .3);
}

.go-up:hover {
    background-color: var(--p400);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, .3);
}

.go-up.show {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 575.98px) {
    .logo img {
        height: 45px;
    }

    .go-up {
        visibility: hidden;
        position: fixed;
        width: 40px !important;
        height: 40px !important;
        bottom: 50px !important;
        right: 16px !important;
    }
}

/* ═══════════════════════════════════════════════
   PAYMENT METHODS
   ═══════════════════════════════════════════════ */

.payment-method {
    position: relative;
    display: flex;
    border-radius: 10px;
    z-index: 1;
    background-color: var(--n850);
}

.payment-method .payment-info {
    order: 2;
}

.payment-method .payment-img {
    position: relative;
    margin-right: 10px;
    z-index: 1;
}

.payment-method .payment-img img {
    height: 60px;
}

.payment-method .payment-title {
    position: relative;
    font-weight: 500;
    z-index: 1;
    line-height: 60px;
    color: var(--n200);
}

.payment-method .form-check-label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

.payment-method .form-check-input {
    margin: auto 15px;
    z-index: 1;
    order: 1;
    flex-shrink: 0;
}

.payment-method .form-check-input + ::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid var(--n700);
    border-radius: 10px;
    transition: .3s;
}

.payment-method .form-check-input:checked + ::after {
    border-color: var(--p500);
    background-color: var(--p500);
    opacity: .1;
}

/* ═══════════════════════════════════════════════
   MODALS (Dark)
   ═══════════════════════════════════════════════ */

.modal-content {
    background-color: var(--n850);
    border: 1px solid var(--n700);
    color: var(--n200);
}

.modal-header {
    border-bottom-color: var(--n700);
}

.modal-footer {
    border-top-color: var(--n700);
}

.modal-title {
    color: var(--n100);
}

.modal-history .mail-results-info {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n300);
    text-align: center;
    background-color: var(--n750);
    padding: 10px;
    border-radius: 0 0 8px 8px;
}

.modal-history .mail-results-info .btn {
    font-size: 12px;
}

/* ─── QR Code ─── */
#qrcode img {
    margin: auto;
}

/* ═══════════════════════════════════════════════
   VIEW PAGE (Dark)
   ═══════════════════════════════════════════════ */

.viewbox-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .viewbox-container {
        flex-direction: column;
        align-items: center;
    }
}

.viewbox-container .ad {
    flex-shrink: 0;
}

.viewbox-container .box-content {
    width: 100%;
    flex-grow: 1;
    max-width: 850px;
}

.viewbox {
    width: 100%;
    background: rgba(23, 26, 40, .5);
    border: 1px solid var(--n700);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    border-radius: 20px;
    overflow: hidden;
}

.viewbox .viewbox-header {
    background: rgba(108, 92, 231, .1);
    border-bottom: 1px solid var(--n700);
    color: var(--n100);
    padding: 8px 20px;
}

.viewbox .viewbox-body {
    min-height: 426px;
    color: var(--n200);
    padding: 10px;
}

.viewbox .viewbox-body.message {
    background-color: #f0f1f5;
}

.viewbox-header i {
    margin: 10px;
    font-size: 20px;
}

.viewbox-header .text-muted {
    --bs-text-opacity: 1;
    color: var(--n300) !important;
}

.viewbox-attachments {
    padding: 15px 25px;
    position: relative;
    border-bottom: 1px solid var(--n700);
    border-top: 1px solid var(--n700);
}

.viewbox-attachments .card {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid var(--n700);
    margin: 5px 0;
    background-color: var(--n800);
}

.viewbox-attachments .card-body {
    padding: 9px !important;
}

.viewbox-attachments img {
    width: 48px !important;
}

.viewbox-attachments i {
    color: var(--n400);
}

.viewbox-attachments .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--n200);
}

.viewbox .text-muted {
    font-size: 12px;
    font-weight: 600;
}

.can_see_attachments {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(108, 92, 231, .9);
    right: 0;
    top: 0;
    z-index: 100;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.viewbox-body.v2 {
    min-height: auto !important;
}

/* ═══════════════════════════════════════════════
   MISC COMPONENTS
   ═══════════════════════════════════════════════ */

.btn-icon {
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    color: #fff;
    display: block;
}

.is_seen_message {
    position: absolute;
    top: 5px;
    right: 9px;
    background-color: var(--a500);
    display: block;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 5px;
    color: #fff;
}

.star-icon-color {
    color: #fab005;
}

.tag-cloud a {
    background: var(--p500);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 3px;
}

.tag-cloud {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

label.form-check-label a {
    color: var(--p400);
}

/* Auth section */
.auth-section {
    margin-top: -150px;
    background-color: var(--n850);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    border: 1px solid var(--n700);
    border-radius: 16px;
    color: var(--n200);
}

.img-circle {
    border-radius: 1000px;
    margin: 0 10px;
    width: 35px;
}

.img-width-170 {
    width: 170px;
}

button.btn.btn-link.p-0.m-0.align-baseline {
    color: var(--p400);
}

/* ─── Custom Dropdown ─── */
.custom-drop .dropdown-toggle {
    color: var(--n200);
    transition: .3s;
    cursor: pointer;
}

.custom-drop .dropdown-toggle::after {
    display: none;
}

.custom-drop .dropdown-toggle:hover {
    color: var(--n400);
}

.custom-drop .dropdown-menu {
    border: 1px solid var(--n700);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    padding: 0;
    border-radius: 12px;
    min-width: 180px;
    background-color: var(--n800);
}

.custom-drop .dropdown-menu .dropdown-divider {
    margin: 0;
    border-color: var(--n700);
}

.custom-drop .dropdown-menu li:first-child .dropdown-item {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}

.custom-drop .dropdown-menu li:last-child .dropdown-item {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.custom-drop .dropdown-menu .dropdown-item {
    padding: 10px 15px;
    color: var(--n300);
}

.custom-drop .dropdown-menu .dropdown-item i {
    width: 30px;
}

.custom-drop .dropdown-menu .dropdown-item:hover,
.custom-drop .dropdown-menu .dropdown-item.active {
    background-color: rgba(108, 92, 231, .08);
    color: var(--n100);
}

/* ─── Animations ─── */
.animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

@keyframes slideIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.slideIn {
    animation-name: slideIn;
}

@keyframes titleReveal {
    0% {
        opacity: 0;
        filter: blur(20px);
        transform: translateY(40px) scale(0.9);
        letter-spacing: 0.2em;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
        letter-spacing: -.045em;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .4;
    }
}

@keyframes breathe {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: .7;
    }
}

@keyframes bounceDown {
    0%, 100% {
        transform: rotate(45deg) translateY(0);
        opacity: .4;
    }
    50% {
        transform: rotate(45deg) translateY(6px);
        opacity: .8;
    }
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: .06;
    }
    90% {
        opacity: .06;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all .7s cubic-bezier(.16, 1, .3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Avatar / Settings ─── */
.change_avatar_label {
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    font-size: 23px;
    cursor: pointer;
}

#selectedImg {
    width: 100%;
    height: 100%;
}

/* ─── Ribbon ─── */
.card__ribbon {
    width: 12em;
    height: 12em;
    position: absolute;
    top: -1em;
    right: -1em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card__ribbon::after {
    content: 'Special Offer';
    position: absolute;
    width: 150%;
    height: 3.5em;
    background-color: var(--p500);
    transform: rotate(45deg) translateY(-1.7em);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    letter-spacing: .1em;
    box-shadow: 0 .3em .6em rgba(0, 0, 0, .3);
}

.card__ribbon::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1em;
    height: 1em;
    background-color: var(--p500);
    box-shadow: -11em -11em var(--p500);
}

.yearly_plans {
    display: none;
}

/* ─── Font Size Utilities ─── */
.fz-15 {
    font-size: 15px;
}

.fz-14 {
    font-size: 14px;
}

.fz-13 {
    font-size: 13px;
}

.fz-12 {
    font-size: 12px;
}

.fz-11 {
    font-size: 11px;
}

.fz-10 {
    font-size: 10px;
}

/* ─── Datatable (Dark) ─── */
.datatable {
    padding: 20px;
}

.datatable .datatable-header {
    display: flex;
}

.datatable .datatable-header .datatable-filtering {
    display: flex;
    align-items: center;
    border: 1px solid var(--n700);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    flex-shrink: 0;
    padding-right: 10px;
    padding-left: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--n300);
}

.datatable .datatable-header .datatable-filtering > i {
    margin-right: 10px;
    color: var(--n500);
}

.datatable .datatable-header .datatable-filtering .datatable-filtering-arrow {
    margin-left: 10px;
    transition: .3s;
    color: var(--n400);
}

.datatable .datatable-header .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.datatable .datatable-actions {
    display: none;
    padding: 20px;
    border: 1px solid var(--n700);
    border-top: 0;
    background-color: var(--n850);
    transition: .3s;
    transform: perspective(200px) translateZ(-200px);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.datatable.show .datatable-header .datatable-filtering {
    border-bottom-left-radius: 0;
}

.datatable.show .datatable-header .datatable-filtering .datatable-filtering-arrow {
    transform: rotate(-180deg);
}

.datatable.show .datatable-header .form-control {
    border-bottom-right-radius: 0;
}

.datatable.show .datatable-actions {
    display: block;
}

.datatable.animate .datatable-actions {
    transform: perspective(200px) translateZ(0);
}

.dm-table table thead th {
    font-weight: 400;
    border-top: 1px solid var(--n700);
    border-bottom: 1px solid var(--n700);
    padding: 15px 20px;
    color: var(--n400);
    font-size: 14px;
    background-color: var(--n850);
    min-width: 60px;
    white-space: nowrap;
}

.dm-table table thead th:first-child {
    padding-right: 0;
    padding-left: 0;
    min-width: 40px;
}

.dm-table table thead th.sorting {
    position: relative;
}

.dm-table table thead th.sorting:not(.sorting_disabled) {
    background-image: none !important;
}

.dm-table table thead th.sorting:not(.sorting_disabled)::after {
    position: absolute;
    content: '\f0dc';
    right: 10px;
    top: 50%;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transform: translateY(-50%);
    color: var(--n600);
}

.dm-table table thead th.sorting:not(.sorting_disabled).sorting_asc {
    background-image: none !important;
}

.dm-table table thead th.sorting:not(.sorting_disabled).sorting_asc::after {
    content: '\f0de';
    color: var(--n300);
}

.dm-table table thead th.sorting:not(.sorting_disabled).sorting_desc {
    background-image: none !important;
}

.dm-table table thead th.sorting:not(.sorting_disabled).sorting_desc::after {
    content: '\f0dd';
    color: var(--n300);
}

.dm-table table tbody td {
    font-weight: 400;
    border-top: 0 !important;
    border-bottom: 1px solid var(--n700);
    padding: 13px 20px;
    color: var(--n200);
    font-size: 14px;
    background-color: var(--n850);
    white-space: nowrap;
}

.dm-table table tbody td.sorting_1 {
    background-color: var(--n850) !important;
}

.dm-table table tbody td .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
}

.dm-table table tbody td:first-child {
    padding-right: 0;
    padding-left: 0;
}

.dm-table table tbody td:first-child .form-check-input {
    margin-right: auto;
    margin-left: auto;
}

.dm-table table tbody tr:nth-last-child(2) .dm-dropdown .dm-dropdown-menu {
    top: -20px;
    left: auto;
    right: 30px;
}

.dm-table table tbody tr:last-child .dm-dropdown .dm-dropdown-menu {
    top: auto;
    left: auto;
    bottom: 0;
    right: 30px;
}

.dm-table table tbody tr:only-child .dm-dropdown {
    position: static;
}

.dm-table table tbody tr:only-child .dm-dropdown .dm-dropdown-menu {
    position: absolute !important;
    top: 100px;
    left: auto;
    right: 60px;
    bottom: auto;
}

.dm-table .dataTables_scrollBody {
    border-bottom: 0 !important;
    position: static !important;
}

.dm-table .dataTables_scrollBody thead th::after {
    display: none;
}

.dm-table .dm-table-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--n300);
}

@media (max-width: 991.98px) {
    .dm-table .dm-table-footer {
        flex-direction: column;
    }
}

.dm-table .dm-table-footer > * {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.dm-table .dm-table-footer .dataTables_info {
    margin-right: 10px;
}

.dm-table .dm-table-footer .dataTables_length {
    margin-right: 10px;
}

.dm-table .dm-table-footer .dataTables_length select {
    outline: 0;
    border: 1px solid var(--n700);
    color: var(--n200);
    background-color: var(--n850);
    margin-right: 5px;
    margin-left: 5px;
}

.dm-table .dm-table-footer .dataTables_paginate {
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .dm-table .dm-table-footer .dataTables_paginate {
        margin-left: 0;
    }
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button {
    color: #fff !important;
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button:not(.disabled) {
    background: rgba(108, 92, 231, .5);
    border: var(--p500);
    border-radius: 5px;
    box-shadow: none;
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button:not(.disabled):hover {
    background: var(--p500);
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    background-color: var(--p500) !important;
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button.next,
.dm-table .dm-table-footer .dataTables_paginate .paginate_button.previous {
    background: transparent !important;
    color: var(--n200) !important;
}

.dm-table .dm-table-footer .dataTables_paginate .paginate_button.next:not(.disabled):hover,
.dm-table .dm-table-footer .dataTables_paginate .paginate_button.previous:not(.disabled):hover {
    opacity: .7;
}

/* ─── Card Header / Actions ─── */
.card-actions {
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding-left: 0.5rem;
}

.card-header {
    display: flex;
    align-items: center;
    background: 0 0;
    padding: 30px 40px;
    border: 0;
    padding-bottom: 0;
}

/* ─── Select2 (Dark) ─── */
.select2-dropdown {
    border-color: var(--n700);
    background-color: var(--n850);
}

.select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 40.5px;
    border-color: var(--n700);
    min-width: 135px;
    background-color: var(--n850);
    color: var(--n200);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: unset;
    color: var(--n200);
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 38.5px;
}

.select2-container .select2-selection--multiple {
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 40.5px;
    border-color: var(--n700);
    background-color: var(--n850);
}

.select2-container .select2-selection--multiple:focus {
    border-color: var(--n600);
}

.select2-container.select2-container--focus .select2-selection--multiple {
    border-color: var(--p500);
}

.select2-container {
    z-index: 200000000000;
}

.select2-container-custom-span {
    display: block;
    position: relative;
    color: #D2D6E6;
}

.select2-container-custom-span i {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #ffc107;
}

.select2-results__option {
    color: var(--n200);
    background: var(--n850);
}

.select2-results__option--highlighted {
    background-color: var(--p500) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #026955 !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--n200) !important;
    background: var(--n850);
    padding: 10px 0;
    border-radius: 10px !important;
}

.select2-container--default .select2-selection--single {
    box-shadow: none !important;
    border-radius: 10px !important;
    background-color: var(--n850) !important;
    border-color: var(--n700) !important;
    color: var(--n100) !important;
    height: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
}

/* ─── Post Meta Duplicate ─── */
.post-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.post-meta i {
    margin-right: 5px;
    color: var(--n500);
}

.meta-item {
    margin-right: 10px;
    padding: 6px 16px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--a500);
    background: #00D4AA12;
    border-radius: 20px;
    border: 1px solid var(--a500);
    display: inline-block;
}

.label_bluer {
    font-size: 12px;
    color: var(--p400);
}

.disabled {
    pointer-events: none;
    opacity: .65;
}

.billing-card {
    display: flex;
    justify-content: space-between;
}

.billing-card span {
    background-color: var(--p500) !important;
    margin: auto 0;
}

/* ─── Preloader ─── */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--n950);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.preloader .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--n700);
    border-top-color: var(--p500);
    border-radius: 50%;
    animation: rotation .8s linear infinite;
}

/* ─── Sticky Ad ─── */
.sticky-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--n900);
    border-top: 1px solid var(--n700);
    z-index: 9998;
    padding: 10px;
    text-align: center;
}

.sticky-ad-close {
    position: absolute;
    top: -12px;
    right: 15px;
    width: 24px;
    height: 24px;
    background: var(--n700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sticky-ad-close svg {
    width: 14px;
    height: 14px;
    fill: var(--n300);
}

/* ─── Responsive ─── */
@media (max-width: 580px) {
    .header .header-wrapper {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .mail-wrapper .mail-selection {
        padding: 1.4rem;
        margin: 0 10px;
    }

    .question {
        padding: 30px 20px;
    }
}

/* ═══════════════════════════════════════════════
   SIGN / AUTH PAGES (Dark)
   ═══════════════════════════════════════════════ */

.sign-page {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    background-color: var(--n950);
    overflow: hidden;
}

.sign-page::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(108, 92, 231, .2) 0%, transparent 60%);
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    animation: breathe 8s ease-in-out infinite;
}

.sign-page::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 212, 170, .15) 0%, transparent 55%);
    bottom: -150px;
    right: -80px;
    pointer-events: none;
    animation: breathe 10s ease-in-out 2s infinite;
}

.sign-page .logo {
    display: block;
    text-align: center;
}

.sign-box {
    width: 100%;
    max-width: 450px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.sign-box .box {
    padding: 35px;
    background: rgba(23, 26, 40, .7);
    border: 1px solid var(--n700);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.sign-box .box h3 {
    color: var(--n100);
    font-weight: 700;
    letter-spacing: -.02em;
}

.sign-box .logo img {
    height: 45px;
}

.sign-with .sign-with-divider {
    position: relative;
    text-align: center;
    margin-bottom: 16px;
}

.sign-with .sign-with-divider::before {
    background-color: var(--n700);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.sign-with .sign-with-divider span {
    background-color: rgba(23, 26, 40, .9);
    color: var(--n400);
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.btn.btn-facebook {
    background-color: #1778f2;
    border-color: #1778f2;
    color: #fff;
    border-radius: 10px;
}

.btn.btn-facebook:hover {
    background-color: #1567d3;
    border-color: #1567d3;
    color: #fff;
}

.btn.btn-google {
    background-color: #DB4437;
    border-color: #DB4437;
    color: #fff;
    border-radius: 10px;
}

.btn.btn-google:hover {
    background-color: #c33d31;
    border-color: #c33d31;
    color: #fff;
}

.input-button {
    position: relative;
}

.input-button .form-control {
    padding-right: 60px;
    border-radius: 10px !important;
}

.input-button button {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    border: 0;
    background-color: transparent;
    color: var(--n400);
    transition: .3s;
}

.input-button button:hover {
    color: var(--n200);
}

.sign-box .form-label {
    color: var(--n200);
}

.sign-box .form-check-label {
    color: var(--n300);
}

.sign-box .alert {
    border-radius: 10px;
}

.sign-box .alert-danger {
    background-color: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .2);
    color: #f87171;
}

.sign-box .table {
    color: var(--n200);
    border-color: var(--n700);
}

.sign-box .table th {
    background-color: var(--n800);
    border-color: var(--n700);
    color: var(--n300);
}

.sign-box .table td {
    background-color: transparent;
    border-color: var(--n700);
    color: var(--n200);
}

.sign-box .terms {
    color: var(--n400);
}

.sign-box .terms a {
    color: var(--p400);
}

.sign-box .terms a:hover {
    color: var(--p300);
}

.sign-box hr {
    border-color: var(--n700);
}

.sign-box .verify-img img {
    opacity: .8;
}

blockquote {
    position: relative;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.06) 0%, rgba(0, 212, 170, 0.02) 100%);
    border: 1px solid rgba(0, 212, 170, 0.12);
    border-left: 3px solid #00D4AA;
    border-radius: 0 12px 12px 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #d0d0d8;
    transition: all 0.3s ease;
}

blockquote::before {
    content: '"';
    position: absolute;
    top: -0.2rem;
    left: 0.1rem;
    font-family: 'Playfair Display', serif;
    font-size: 4.6rem;
    color: #00D4AA;
    opacity: 0.3;
    line-height: 1;
}

blockquote:hover {
    border-left-color: #00FFCC;
    box-shadow: -4px 0 20px rgba(0, 212, 170, 0.15), 0 4px 30px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.09) 0%, rgba(0, 212, 170, 0.03) 100%);
}

blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.8rem;
    font-style: normal;
    color: #00D4AA;
    letter-spacing: 0.05em;
}

blockquote cite::before {
    content: '— ';
}

blockquote p:last-child {
    margin: 0;
}

.blog-post figure p {
    margin: 0;
}

figcaption {
    font-size: 0.7rem;
    opacity: 0.5;
}

.blog-post table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.blog-post tbody, .blog-post td, .blog-post tfoot, .blog-post th, .blog-post thead, .blog-post tr {
    border-style: none;
}

.blog-post .table > thead {
    vertical-align: top;
    background-color: #20222e;
}

.blog-post .table > :not(caption) > * > * {
    background-color: transparent;
}

.blog-post th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9090a8;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-post th:not(:last-child),
.blog-post td:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.blog-post td {
    padding: 0.8rem 1rem;
    color: #b8b8c8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.25s ease;
}

.blog-post tr:last-child td {
    border-bottom: none;
}

.blog-post tr:hover td {
    background: rgba(108, 92, 231, 0.06);
    color: #dddde8;
}

.blog-post a {
    text-decoration: underline;
}