/* ==========================================================================
   PIXELS & PROMPTS
   Modern Cyan / Purple Visual Theme
   ========================================================================== */


/* ==========================================================================
   0. INSTELLINGEN EN VARIABELEN
   ========================================================================== */

:root {

    --bg-color: #0b0d12;
    --bg-secondary: #10131a;

    --box-bg: #13161d;
    --box-bg-hover: #171b24;

    --box-border: #242a35;

    --text-color: #ffffff;
    --text-muted: #9ba3b1;

    --nav-bg: rgba(5, 7, 12, 0.94);

    --prompt-bg: #0b0e14;
    --prompt-wrapper-bg: #13161d;

    /* Branding */
    --accent-cyan: #00c7c7;
    --accent-teal: #00A3A0;
    --accent-blue: #268cff;
    --accent-purple: #8b5cf6;
    --accent-magenta: #ca35ff;

    --gold: #ffca28;

    /* Effects */
    --glow-cyan: rgba(0, 199, 199, 0.28);
    --glow-purple: rgba(139, 92, 246, 0.22);

    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 16px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}


[data-theme="light"] {

    --bg-color: #f4f5f8;
    --bg-secondary: #eceef3;

    --box-bg: #ffffff;
    --box-bg-hover: #f8f9fc;

    --box-border: #dfe3ea;

    --text-color: #15171c;
    --text-muted: #666e7b;

    --nav-bg: rgba(5, 7, 12, 0.97);

    --prompt-bg: #f8f9fb;
    --prompt-wrapper-bg: #ffffff;
}


/* ==========================================================================
   1. BASISELEMENTEN & TYPOGRAFIE
   ========================================================================== */

html {

    scrollbar-gutter: stable;
    overflow-y: scroll;

    scroll-behavior: smooth;
}


*,
*::before,
*::after {

    box-sizing: border-box;
}


body {

    margin: 0;
    padding: 0;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(30, 55, 90, 0.10),
            transparent 500px
        ),

        var(--bg-color);

    color: var(--text-color);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal);
}


.container {

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;
}


a {

    color: var(--accent-teal);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}


a:hover {

    color: var(--text-color);
}


::selection {

    background: var(--accent-purple);

    color: #ffffff;
}


/* ==========================================================================
   2. ALGEMENE BUTTONS
   ========================================================================== */

.btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 12px 30px;

    background:
        rgba(8, 11, 18, 0.68);

    color: var(--text-color);

    text-transform: uppercase;

    font-weight: 800;

    font-size: 0.88rem;

    letter-spacing: 0.7px;

    border-radius: var(--radius-small);

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);

    cursor: pointer;
}


.btn:hover {

    color: #ffffff;

    transform: translateY(-2px);
}


/* ==========================================================================
   3. NAVIGATIEMENU
   ========================================================================== */

nav {

    width: 100%;

    display: block;

    position: relative;

    z-index: 1000;

    background:

        linear-gradient(
            180deg,
            rgba(7, 10, 17, 0.98),
            rgba(4, 6, 11, 0.96)
        );

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-bottom: none;

    box-shadow:

        0 12px 35px rgba(0, 0, 0, 0.60),

        0 1px 0 rgba(255, 255, 255, 0.03);

    transition:
        background-color var(--transition-normal);
}


/* subtiele branding-lijn onder menu */

nav::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            var(--accent-cyan) 20%,
            var(--accent-purple) 50%,
            var(--accent-magenta) 75%,
            transparent 100%
        );

    opacity: 0.75;

    box-shadow:

        0 0 10px var(--glow-cyan),

        0 0 16px var(--glow-purple);
}


nav .container {

    padding: 0 20px;
}


.nav-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    height: 96px;

    flex-wrap: nowrap;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo {

    height: 96px;

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.logo a {

    display: block;

    line-height: 0;
}


.logo img {

    height: 64px;

    width: auto;

    max-width: 360px;

    display: block;

    object-fit: contain;

    filter:

        drop-shadow(
            0 0 8px rgba(0, 199, 199, 0.12)
        );

    transition:

        transform var(--transition-normal),

        filter var(--transition-normal);
}


.logo img:hover {

    transform: scale(1.035);

    filter:

        drop-shadow(
            0 0 11px rgba(0, 199, 199, 0.28)
        )

        drop-shadow(
            0 0 15px rgba(139, 92, 246, 0.18)
        );
}


/* ==========================================================================
   NAV LINKS
   ========================================================================== */

nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 27px;
}


nav ul li {

    display: inline-flex;

    align-items: center;
}


nav ul li a {

    position: relative;

    color: #a7adb9;

    text-transform: uppercase;

    font-size: 0.93rem;

    font-weight: 750;

    letter-spacing: 1.35px;

    padding: 12px 0;

    white-space: nowrap;

    transition:

        color var(--transition-fast),

        text-shadow var(--transition-fast);
}


nav ul li a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 4px;

    width: 0;

    height: 2px;

    transform: translateX(-50%);

    border-radius: 3px;

    background:

        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:

        0 0 9px rgba(0, 199, 199, 0.35);

    transition:
        width var(--transition-normal);
}


nav ul li a:hover,
nav ul li a.active-link {

    color: #ffffff;

    text-shadow:

        0 0 10px rgba(0, 199, 199, 0.25);
}


nav ul li a:hover::after,
nav ul li a.active-link::after {

    width: 100%;
}


/* ==========================================================================
   LOGIN LINK
   ========================================================================== */

.btn-login-link {

    border:

        1px solid
        rgba(0, 199, 199, 0.45);

    padding:

        8px 16px !important;

    border-radius: 20px;

    background:

        linear-gradient(
            135deg,
            rgba(0, 163, 160, 0.10),
            rgba(139, 92, 246, 0.08)
        );
}


.btn-login-link:hover {

    border-color:
        var(--accent-purple);

    box-shadow:

        0 0 14px var(--glow-cyan),

        0 0 18px var(--glow-purple);
}


/* ==========================================================================
   USER DROPDOWN
   ========================================================================== */

.user-dropdown {

    position: relative;

    display: inline-block;
}


.user-dropdown-btn {

    background:

        linear-gradient(
            135deg,
            #121722,
            #0e1118
        );

    border:

        1px solid
        #303747;

    color: #ffffff;

    padding: 9px 16px;

    border-radius: 22px;

    font-size: 0.92rem;

    font-weight: bold;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    transition: all var(--transition-fast);

    outline: none;
}


.user-dropdown-btn:hover,
.user-dropdown.open .user-dropdown-btn,
.user-dropdown:hover .user-dropdown-btn {

    border-color:
        var(--accent-cyan);

    color:
        var(--accent-cyan);

    background:
        #151a24;

    box-shadow:

        0 0 12px
        rgba(0, 199, 199, 0.12);
}


.dropdown-arrow {

    font-size: 0.7rem;

    color: #858b98;

    transition:

        transform var(--transition-fast),

        color var(--transition-fast);
}


.user-dropdown.open .dropdown-arrow,
.user-dropdown:hover .dropdown-arrow {

    transform:
        rotate(180deg);

    color:
        var(--accent-purple);
}


.user-dropdown-menu {

    display: none;

    position: absolute;

    right: 0;

    top: 100%;

    margin-top: 8px;

    min-width: 225px;

    padding: 7px 0;

    z-index: 1100;

    background:

        rgba(12, 15, 22, 0.98);

    backdrop-filter:
        blur(16px);

    border:

        1px solid
        #2d3441;

    border-top:

        2px solid
        var(--accent-cyan);

    border-radius:
        var(--radius-medium);

    box-shadow:

        0 18px 40px rgba(0, 0, 0, 0.72),

        0 0 15px rgba(0, 199, 199, 0.08);
}


.user-dropdown-menu::before {

    content: "";

    position: absolute;

    top: -12px;

    left: 0;
    right: 0;

    height: 12px;

    background:
        transparent;
}


.user-dropdown.open .user-dropdown-menu,
.user-dropdown:hover .user-dropdown-menu {

    display: block;
}


.user-dropdown-menu a {

    display: flex !important;

    align-items: center;

    gap: 12px;

    padding:
        12px 20px !important;

    color:
        #c3c8d2 !important;

    font-size:
        0.92rem !important;

    text-decoration: none;

    text-transform:
        none !important;

    letter-spacing:
        0.4px !important;

    font-weight:
        600 !important;

    border-bottom:

        1px solid
        #1c2029;

    transition:

        background var(--transition-fast),

        color var(--transition-fast),

        padding-left var(--transition-fast);
}


.user-dropdown-menu a::after {

    display: none;
}


.user-dropdown-menu a:last-child {

    border-bottom:
        none;
}


.user-dropdown-menu a:hover {

    background:

        linear-gradient(
            90deg,
            rgba(0, 199, 199, 0.10),
            rgba(139, 92, 246, 0.05)
        );

    color:
        var(--accent-cyan) !important;

    padding-left:
        24px !important;
}


.user-dropdown-menu a i {

    font-size:
        1.05rem;

    width:
        18px;

    text-align:
        center;
}


.user-dropdown-menu a.logout-link {

    color:
        #ff7777 !important;
}


.user-dropdown-menu a.logout-link:hover {

    background:
        rgba(120, 20, 30, 0.18);

    color:
        #ff9b9b !important;
}


/* ==========================================================================
   4. LANDINGSPAGINA & HERO
   ========================================================================== */

/*
   index.php bevat momenteel ook hero styling.
   Deze basis blijft bewust eenvoudig.
*/

.hero-banner {

    position: relative;

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    text-align:
        center;

    overflow:
        hidden;
}


.hero-banner::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 100px;

    pointer-events: none;

    background:

        linear-gradient(
            to bottom,
            transparent,
            var(--bg-color)
        );

    opacity: 0.75;

    z-index: 1;
}


.hero-content {

    position: relative;

    z-index: 5;

    max-width:
        800px;

    margin:
        0 auto;
}


.hero-badge {

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    color:
        #ffffff;

    padding:
        6px 14px;

    font-size:
        0.8rem;

    font-weight:
        bold;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    border-radius:
        4px;

    display:
        inline-block;

    margin-bottom:
        20px;

    box-shadow:

        0 0 16px
        rgba(0, 199, 199, 0.25);
}


.hero-content h1 {

    font-size:
        3.5rem;

    margin:
        0 0 15px 0;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    text-shadow:

        0 4px 12px
        rgba(0, 0, 0, 0.75);
}


.hero-content h1 span {

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;
}


.hero-content p {

    font-size:
        1.25rem;

    color:
        #eeeeee;

    margin-bottom:
        35px;

    text-shadow:

        0 2px 5px
        rgba(0, 0, 0, 0.8);

    line-height:
        1.6;
}


.hero-btn-container {

    text-align:
        center;

    width:
        100%;
}


/*
   De huidige translateY die jij in index.php gebruikt
   kan blijven staan voor de positie op het laptopscherm.
*/

.btn-portfolio {

    position: relative;

    overflow: hidden;

    min-width:
        195px;

    border:

        1px solid
        var(--accent-cyan);

    background:

        rgba(5, 8, 15, 0.68);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    color:
        #ffffff;

    box-shadow:

        0 0 13px
        rgba(0, 199, 199, 0.28),

        inset 0 0 12px
        rgba(255, 255, 255, 0.025);

    letter-spacing:
        1px;
}


.btn-portfolio::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:

        linear-gradient(
            120deg,
            rgba(0, 199, 199, 0.88),
            rgba(139, 92, 246, 0.88)
        );

    transition:
        opacity var(--transition-normal);

    z-index:
        -1;
}


.btn-portfolio:hover {

    color:
        #ffffff;

    border-color:
        var(--accent-purple);

    box-shadow:

        0 0 18px
        rgba(0, 199, 199, 0.38),

        0 0 27px
        rgba(139, 92, 246, 0.24);
}


.btn-portfolio:hover::before {

    opacity:
        1;
}


/* ==========================================================================
   5. INTRODUCTIE
   ========================================================================== */

.intro-container {

    display:
        block;

    margin:
        70px auto;
}


.intro-text {

    width:
        65%;

    float:
        left;
}


.intro-text h2 {

    position:
        relative;

    font-size:
        2rem;

    margin-top:
        0;

    padding-left:
        18px;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;

    border-left:
        none;
}


.intro-text h2::before {

    content: "";

    position:
        absolute;

    left:
        0;

    top:
        4px;

    bottom:
        4px;

    width:
        4px;

    border-radius:
        3px;

    background:

        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:

        0 0 10px
        var(--glow-cyan);
}


.intro-text p {

    color:
        var(--text-muted);

    font-size:
        1.05rem;

    line-height:
        1.8;
}


.intro-disclaimer {

    font-size:
        0.8rem !important;

    color:
        var(--text-muted) !important;

    font-style:
        italic;

    margin-top:
        22px !important;

    border-top:

        1px solid
        var(--box-border);

    padding-top:
        12px;

    display:
        block;
}


.insta-callout {

    width:
        30%;

    float:
        right;

    position:
        relative;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            rgba(20, 24, 33, 0.95),
            rgba(13, 16, 23, 0.96)
        );

    border:

        1px solid
        var(--box-border);

    padding:
        30px;

    border-radius:
        var(--radius-medium);

    box-shadow:

        0 14px 32px
        rgba(0, 0, 0, 0.22);

    transition:

        background-color var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal),

        transform var(--transition-normal);
}


.insta-callout::before {

    content: "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    right:
        0;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.insta-callout:hover {

    transform:
        translateY(-3px);

    border-color:
        #343c4b;

    box-shadow:

        0 18px 38px
        rgba(0, 0, 0, 0.32),

        0 0 16px
        rgba(0, 199, 199, 0.05);
}


.intro-container::after {

    content:
        "";

    display:
        table;

    clear:
        both;
}


.insta-callout h3 {

    margin-top:
        0;

    text-transform:
        uppercase;

    font-size:
        1.2rem;

    letter-spacing:
        1px;
}


.insta-link {

    color:
        var(--accent-cyan);

    font-weight:
        bold;

    font-size:
        1.08rem;

    text-decoration:
        none;

    margin-top:
        10px;

    display:
        inline-block;
}


.insta-link:hover {

    color:
        #ffffff;

    text-decoration:
        none;
}


.insta-link i {

    margin-right:
        8px;

    font-size:
        1.2rem;

    vertical-align:
        middle;

    transition:
        transform var(--transition-fast);

    display:
        inline-block;
}


.insta-link:hover i {

    transform:
        scale(1.12);

    color:
        var(--accent-purple);
}


/* ==========================================================================
   INSTAGRAM FEED
   ========================================================================== */

.insta-feed-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;
}


.insta-feed-item {

    position:
        relative;

    display:
        block;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    border-radius:
        var(--radius-small);

    border:

        1px solid
        var(--box-border);
}


.insta-feed-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.4s ease;
}


.insta-feed-item:hover img {

    transform:
        scale(1.04);
}


/* ==========================================================================
   6. GALERIJ & ALBUMS
   ========================================================================== */

.album-sectie {

    margin-bottom:
        60px;
}


.album-link-header {

    color:
        var(--accent-cyan);

    font-size:
        1.8rem;

    margin-bottom:
        20px;

    text-transform:
        uppercase;

    border-left:

        4px solid
        var(--accent-cyan);

    padding-left:
        15px;

    display:
        inline-block;

    font-weight:
        bold;

    transition:
        all var(--transition-normal);
}


.album-link-header:hover {

    color:
        #ffffff;

    border-color:
        var(--accent-purple);

    padding-left:
        22px;
}


.galerij {

    display:
        grid;

    grid-template-columns:

        repeat(
            auto-fill,
            minmax(320px, 1fr)
        );

    gap:
        25px;

    align-items:
        start;

    justify-content:
        start;

    width:
        100%;

    clear:
        both;
}


.galerij-item {

    background:

        linear-gradient(
            145deg,
            var(--box-bg),
            #10131a
        );

    border:

        1px solid
        var(--box-border);

    border-radius:
        var(--radius-medium);

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    box-sizing:
        border-box;

    box-shadow:

        0 10px 26px
        rgba(0, 0, 0, 0.12);

    transition:

        transform var(--transition-normal),

        box-shadow var(--transition-normal),

        background-color var(--transition-normal),

        border-color var(--transition-normal);
}


.galerij-item:hover {

    transform:
        translateY(-5px);

    border-color:

        rgba(
            0,
            199,
            199,
            0.28
        );

    box-shadow:

        0 16px 34px
        rgba(0, 0, 0, 0.38),

        0 0 18px
        rgba(0, 199, 199, 0.06),

        0 0 24px
        rgba(139, 92, 246, 0.04);
}


.galerij:not(.album-overzicht) .galerij-item img,
.galerij:not(.album-overzicht) .galerij-item video {

    width:
        100%;

    height:
        auto;

    display:
        block;

    border-bottom:

        1px solid
        var(--box-border);

    transition:

        transform 0.45s
        cubic-bezier(
            0.25,
            1,
            0.5,
            1
        );

    cursor:
        pointer;
}


.galerij:not(.album-overzicht)
.galerij-item:hover img {

    transform:
        scale(1.025);
}


.galerij-item p {

    padding:
        0;

    margin:
        0 0 6px 0;

    font-size:
        1rem;

    color:
        var(--text-color);

    text-align:
        left;

    white-space:
        normal;
}


.galerij-card-content {

    padding:
        15px 15px 10px 15px;

    text-align:
        left;
}


.galerij-card-content .werk-tags {

    margin-top:
        6px;

    margin-bottom:
        8px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.galerij-card-content .model-wrapper {

    margin-top:
        6px;
}


/* ==========================================================================
   TAG BADGES
   ========================================================================== */

.tag-badge {

    font-size:
        0.7rem;

    background:

        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.10),
            rgba(139, 92, 246, 0.06)
        );

    color:
        var(--accent-cyan);

    padding:
        3px 8px;

    border-radius:
        4px;

    border:

        1px solid
        rgba(0, 199, 199, 0.25);

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    font-weight:
        bold;

    display:
        inline-block;

    cursor:
        pointer;

    transition:
        all var(--transition-fast);
}


.tag-badge:hover {

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color:
        #ffffff !important;

    border-color:
        transparent !important;
}


/* ==========================================================================
   PROMPTS
   ========================================================================== */

.prompt-wrapper {

    background-color:
        var(--prompt-wrapper-bg) !important;
}


.prompt-content {

    background-color:
        var(--prompt-bg) !important;

    border:

        1px solid
        var(--box-border) !important;
}


.prompt-text {

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


/* ==========================================================================
   ALBUM OVERZICHT
   ========================================================================== */

.album-overzicht.galerij .galerij-item {

    height:
        320px !important;

    display:
        flex !important;

    flex-direction:
        column !important;
}


.album-overzicht.galerij .galerij-item img {

    height:
        240px !important;

    width:
        100% !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    display:
        block !important;
}


.album-overzicht.galerij .galerij-item p {

    margin-top:
        auto !important;

    background-color:
        var(--box-bg) !important;

    padding:
        15px !important;

    text-align:
        center !important;
}


/* ==========================================================================
   7. FORMULIEREN
   ========================================================================== */

.form-box {

    max-width:
        500px;

    margin:
        60px auto;

    position:
        relative;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            var(--box-bg),
            #10131a
        );

    border:

        1px solid
        var(--box-border);

    padding:
        40px;

    border-radius:
        var(--radius-medium);

    box-shadow:

        0 16px 35px
        rgba(0, 0, 0, 0.24);

    transition:

        background-color var(--transition-normal),

        border-color var(--transition-normal);
}


.form-box::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    right:
        0;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.form-box h2 {

    margin-top:
        0;

    margin-bottom:
        25px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    font-size:
        1.6rem;
}


.form-box label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-muted);

    font-size:
        0.9rem;

    text-transform:
        uppercase;
}


.form-box input[type="text"],
.form-box input[type="password"],
.form-box input[type="file"],
.form-box input[type="email"],
.form-box select,
.form-box textarea {

    width:
        100%;

    padding:
        12px;

    background-color:
        var(--bg-color);

    border:

        1px solid
        var(--box-border);

    color:
        var(--text-color);

    border-radius:
        var(--radius-small);

    margin-bottom:
        20px;

    font-family:
        inherit;

    transition:

        background-color var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal),

        color var(--transition-normal);
}


.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {

    outline:
        none;

    border-color:
        var(--accent-cyan);

    box-shadow:

        0 0 0 3px
        rgba(0, 199, 199, 0.08);
}


.form-box button {

    width:
        100%;

    padding:
        12px;

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    border:
        none;

    color:
        #ffffff;

    font-weight:
        bold;

    text-transform:
        uppercase;

    border-radius:
        var(--radius-small);

    cursor:
        pointer;

    transition:
        all var(--transition-normal);
}


.form-box button:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0 0 18px
        rgba(0, 199, 199, 0.25),

        0 0 22px
        rgba(139, 92, 246, 0.16);
}


/* ==========================================================================
   8. RESPONSIVE MENU
   ========================================================================== */

.menu-toggle {

    display:
        none !important;
}


@media screen and
(max-width: 1024px) and
(min-width: 769px) {

    nav ul {

        gap:
            15px;
    }


    nav ul li a {

        font-size:
            0.84rem;

        letter-spacing:
            0.45px;
    }


    .logo img {

        height:
            56px;
    }


    .user-name-text {

        max-width:
            80px;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }
}


/* ==========================================================================
   MOBIEL MENU
   ========================================================================== */

@media screen and
(max-width: 768px) {

    .nav-wrapper {

        height:
            76px !important;
    }


    .logo {

        height:
            76px !important;
    }


    .logo img {

        height:
            43px !important;

        max-width:
            245px;
    }


    .menu-toggle {

        display:
            block !important;

        background:

            linear-gradient(
                135deg,
                rgba(0, 199, 199, 0.10),
                rgba(139, 92, 246, 0.08)
            );

        border:

            1px solid
            rgba(0, 199, 199, 0.22);

        border-radius:
            8px;

        color:
            var(--accent-cyan);

        font-size:
            1.65rem;

        cursor:
            pointer;

        height:
            46px !important;

        width:
            50px;

        line-height:
            40px !important;

        padding:
            0;

        transition:
            all var(--transition-fast);
    }


    .menu-toggle:hover {

        color:
            #ffffff;

        border-color:
            var(--accent-purple);

        box-shadow:

            0 0 12px
            rgba(0, 199, 199, 0.18);
    }


    nav ul {

        display:
            none !important;

        position:
            absolute;

        top:
            76px;

        left:
            0;

        width:
            100%;

        background:

            rgba(7, 9, 14, 0.985);

        backdrop-filter:
            blur(20px);

        border-bottom:

            2px solid
            var(--accent-cyan);

        padding:
            12px 16px 18px !important;

        flex-direction:
            column;

        gap:
            0;

        box-shadow:

            0 15px 35px
            rgba(0, 0, 0, 0.85);
    }


    nav ul.active {

        display:
            flex !important;
    }


    nav ul li {

        width:
            100%;

        display:
            block !important;

        text-align:
            center;

        border-bottom:

            1px solid
            #1d212a;
    }


    nav ul li:last-child {

        border-bottom:
            none;
    }


    nav ul li a {

        font-size:
            0.95rem !important;

        display:
            block;

        padding:
            13px 0 !important;

        width:
            100%;
    }


    nav ul li a::after {

        bottom:
            7px;
    }


    .user-dropdown {

        width:
            100%;
    }


    .user-dropdown-btn {

        width:
            90%;

        justify-content:
            center;

        margin:
            10px auto;

        border-radius:
            6px;
    }


    .user-dropdown-menu {

        display:
            none !important;

        position:
            static;

        box-shadow:
            none;

        border:
            none;

        border-top:

            1px solid
            #252a34;

        background:
            #090c12;

        padding:
            0;

        margin:
            0;
    }


    .user-dropdown.open
    .user-dropdown-menu {

        display:
            block !important;
    }


    .user-dropdown-menu a {

        justify-content:
            center;

        padding:
            12px 0 !important;
    }


    .intro-text,
    .insta-callout {

        width:
            100% !important;

        float:
            none !important;

        margin-bottom:
            30px !important;
    }


    .galerij-item {

        width:
            100% !important;

        float:
            none !important;

        margin-right:
            0 !important;

        margin-bottom:
            25px !important;
    }
}


/* ==========================================================================
   9. TOAST NOTIFICATION
   ========================================================================== */

.toast-notification {

    position:
        fixed;

    bottom:
        20px;

    right:
        20px;

    background:

        linear-gradient(
            135deg,
            #151923,
            #10131a
        );

    border:

        1px solid
        var(--accent-cyan);

    color:
        #ffffff;

    padding:
        12px 24px;

    border-radius:
        var(--radius-small);

    box-shadow:

        0 8px 22px
        rgba(0, 0, 0, 0.55),

        0 0 14px
        rgba(0, 199, 199, 0.10);

    z-index:
        10000;

    font-size:
        0.9rem;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

    transform:
        translateY(100px);

    opacity:
        0;

    transition:

        transform 0.3s
        cubic-bezier(
            0.175,
            0.885,
            0.32,
            1.275
        ),

        opacity 0.3s ease;
}


.toast-notification.show {

    transform:
        translateY(0);

    opacity:
        1;
}


/* ==========================================================================
   10. RATINGS
   ========================================================================== */

.rating-container {

    margin:
        20px 0;

    text-align:
        center;

    display:
        block !important;
}


.rating-titel {

    font-size:
        0.9rem;

    text-transform:
        uppercase;

    color:
        #888 !important;

    margin-bottom:
        8px;

    letter-spacing:
        1px;
}


.sterren {

    display:
        inline-flex !important;

    flex-direction:
        row-reverse !important;

    justify-content:
        center;

    margin-bottom:
        5px;
}


input.rating-radio {

    display:
        none !important;

    visibility:
        hidden !important;

    opacity:
        0 !important;

    position:
        absolute !important;
}


.sterren label {

    font-family:

        "Font Awesome 6 Free",

        "Font Awesome 5 Free",

        sans-serif !important;

    font-weight:
        900 !important;

    font-size:
        1.8rem !important;

    color:
        #444b58 !important;

    cursor:
        pointer !important;

    transition:

        color var(--transition-fast),

        transform var(--transition-fast),

        text-shadow var(--transition-fast);

    padding:
        0 6px !important;

    display:
        inline-block !important;
}


.sterren label:hover,
.sterren label:hover ~ label {

    color:
        var(--gold) !important;

    transform:
        scale(1.18) !important;

    text-shadow:

        0 0 9px
        rgba(255, 202, 40, 0.35);
}


.sterren input.rating-radio:checked ~ label {

    color:
        var(--gold) !important;
}


.sterren label:active {

    transform:
        scale(1.2) !important;
}


.rating-gemiddelde {

    font-size:
        0.85rem;

    color:
        #888 !important;

    margin-top:
        8px;

    display:
        block !important;
}


/* ==========================================================================
   11. AFBEELDINGEN / LIGHTBOX
   ========================================================================== */

.galerij-item img {

    width:
        100%;

    display:
        block;

    cursor:
        pointer;

    position:
        relative;

    z-index:
        10;
}


.lightbox-wrapper {

    display:
        flex;

    flex-direction:
        column;

    width:
        95%;

    max-width:
        1100px;

    height:
        85vh;

    background:

        linear-gradient(
            145deg,
            #11151d,
            #0d1016
        );

    border:

        1px solid
        #252c37;

    border-radius:
        var(--radius-medium);

    overflow:
        hidden;

    box-shadow:

        0 0 45px
        rgba(0, 199, 199, 0.10),

        0 0 65px
        rgba(139, 92, 246, 0.05);
}


.lightbox-media {

    flex:
        1;

    background-color:
        #07090d;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        10px;
}


.lightbox-media img {

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;
}


.lightbox-sidebar {

    width:
        100%;

    background-color:
        #12161e;

    border-top:

        1px solid
        #252a34;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    text-align:
        left;

    box-sizing:
        border-box;
}


@media (min-width: 768px) {

    .lightbox-wrapper {

        flex-direction:
            row;
    }


    .lightbox-sidebar {

        width:
            320px;

        min-width:
            320px;

        border-top:
            none;

        border-left:

            1px solid
            #252a34;
    }


    .lightbox-media {

        padding:
            30px;
    }
}


.lightbox-nav {

    transition:
        all 0.3s ease-in-out !important;

    opacity:
        0.5;
}


.lightbox-prev:hover {

    opacity:
        1;

    background-color:
        rgba(0, 0, 0, 0.6);

    transform:

        translateY(-50%)

        translateX(-3px);
}


.lightbox-next:hover {

    opacity:
        1;

    background-color:
        rgba(0, 0, 0, 0.6);

    transform:

        translateY(-50%)

        translateX(3px);
}


/* ==========================================================================
   12. POPULAIRE TAGS
   ========================================================================== */

.top-tags-container {

    margin:
        15px 0 30px 0 !important;

    padding:
        15px 20px !important;

    background:

        linear-gradient(
            135deg,
            var(--box-bg),
            #11151d
        ) !important;

    border:

        1px solid
        var(--box-border) !important;

    border-radius:
        var(--radius-medium) !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        15px !important;

    flex-wrap:
        wrap !important;

    width:
        100% !important;

    clear:
        both !important;

    box-sizing:
        border-box !important;
}


.top-tags-label {

    font-size:
        0.85rem !important;

    font-weight:
        bold !important;

    text-transform:
        uppercase !important;

    color:
        var(--accent-cyan) !important;

    letter-spacing:
        1px !important;

    white-space:
        nowrap !important;
}


.top-tags-wrapper {

    display:
        flex !important;

    flex-wrap:
        wrap !important;

    gap:
        10px !important;

    align-items:
        center !important;
}


a.tag-pill {

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    background-color:
        #1b2029 !important;

    color:
        var(--text-color) !important;

    border:

        1px solid
        #303744 !important;

    padding:
        6px 14px !important;

    border-radius:
        20px !important;

    font-size:
        0.75rem !important;

    font-weight:
        bold !important;

    letter-spacing:
        0.5px !important;

    text-decoration:
        none !important;

    transition:
        all var(--transition-fast) !important;

    line-height:
        1 !important;
}


a.tag-pill:hover {

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color:
        #ffffff !important;

    border-color:
        transparent !important;

    transform:
        translateY(-2px) !important;

    box-shadow:

        0 0 12px
        rgba(0, 199, 199, 0.18);
}


.tag-count {

    background-color:

        rgba(
            255,
            255,
            255,
            0.08
        ) !important;

    color:
        #aeb4c0 !important;

    padding:
        2px 7px !important;

    border-radius:
        10px !important;

    font-size:
        0.65rem !important;

    font-weight:
        normal !important;
}


a.tag-pill:hover .tag-count {

    background-color:

        rgba(
            0,
            0,
            0,
            0.22
        ) !important;

    color:
        #ffffff !important;
}


/* ==========================================================================
   13. THEME HIGHLIGHTS
   ========================================================================== */

.tag-highlights-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;

    clear:
        both;
}


.tag-highlight-card {

    position:
        relative;

    height:
        220px;

    border-radius:
        var(--radius-medium);

    overflow:
        hidden;

    border:

        1px solid
        var(--box-border);

    display:
        flex;

    align-items:
        flex-end;

    text-decoration:
        none;

    box-shadow:

        0 10px 24px
        rgba(0, 0, 0, 0.20);

    transition:

        transform var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);
}


.tag-highlight-card:hover {

    transform:
        translateY(-4px);

    border-color:

        rgba(
            0,
            199,
            199,
            0.35
        );

    box-shadow:

        0 16px 34px
        rgba(0, 0, 0, 0.38),

        0 0 15px
        rgba(0, 199, 199, 0.08),

        0 0 22px
        rgba(139, 92, 246, 0.05);
}


.tag-card-bg {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

    transition:

        transform 0.5s
        cubic-bezier(
            0.25,
            1,
            0.5,
            1
        );

    z-index:
        1;
}


.tag-highlight-card:hover
.tag-card-bg {

    transform:
        scale(1.065);
}


.tag-card-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            to top,
            rgba(4, 6, 11, 0.95) 0%,
            rgba(7, 10, 18, 0.42) 60%,
            rgba(0, 0, 0, 0.08) 100%
        );

    z-index:
        2;

    transition:
        background var(--transition-normal);
}


.tag-highlight-card:hover
.tag-card-overlay {

    background:

        linear-gradient(
            to top,
            rgba(0, 120, 130, 0.72) 0%,
            rgba(35, 25, 75, 0.42) 56%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


.tag-card-content {

    position:
        relative;

    z-index:
        3;

    padding:
        20px;

    width:
        100%;

    text-align:
        left;
}


.tag-card-content h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.2rem;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    font-weight:
        800;

    text-shadow:

        0 2px 4px
        rgba(0, 0, 0, 0.8);
}


.tag-card-content p {

    margin:
        4px 0 0 0;

    color:
        var(--accent-cyan);

    font-size:
        0.8rem;

    font-weight:
        bold;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    transition:
        color var(--transition-normal);
}


.tag-highlight-card:hover
.tag-card-content p {

    color:
        #ffffff;
}


/* ==========================================================================
   14. TOP RATED
   ========================================================================== */

.top-rated-grid {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        15px;

    clear:
        both;
}


.top-rated-item {

    position:
        relative;

    margin:
        0 !important;
}


.rating-badge {

    position:
        absolute;

    top:
        10px;

    right:
        10px;

    background:

        rgba(
            6,
            8,
            13,
            0.90
        );

    backdrop-filter:
        blur(7px);

    color:
        #ffffff;

    border:

        1px solid
        rgba(0, 199, 199, 0.65);

    padding:
        5px 10px;

    border-radius:
        20px;

    font-size:
        0.75rem;

    font-weight:
        bold;

    z-index:
        20;

    box-shadow:

        0 4px 12px
        rgba(0, 0, 0, 0.5),

        0 0 9px
        rgba(0, 199, 199, 0.14);

    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.rating-badge i {

    color:
        var(--gold);
}


/* ==========================================================================
   15. DASHBOARD ALERTS
   ========================================================================== */

.alert-box-container {

    background-color:
        #191600;

    border:

        1px solid
        #735c00;

    border-radius:
        var(--radius-small);

    padding:
        18px 20px;

    margin-bottom:
        25px;

    clear:
        both;
}


.alert-box-container.alert-success {

    background-color:
        #0b1d18;

    border-color:
        var(--accent-cyan);

    color:
        var(--accent-cyan);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-weight:
        500;

    font-size:
        0.9rem;
}


.alert-header {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--gold);

    font-weight:
        bold;

    font-size:
        0.95rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;

    margin-bottom:
        12px;
}


.alert-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.alert-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #dddddd;

    font-size:
        0.88rem;

    padding-left:
        5px;
}


/* ==========================================================================
   16. COOKIE MODAL
   ========================================================================== */

.cookie-modal-overlay {

    display:
        none;

    position:
        fixed;

    z-index:
        10001;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-color:

        rgba(
            0,
            0,
            0,
            0.82
        );

    backdrop-filter:
        blur(5px);

    justify-content:
        center;

    align-items:
        center;

    opacity:
        0;

    transition:
        opacity var(--transition-normal);
}


.cookie-modal-overlay.active {

    display:
        flex !important;

    opacity:
        1;
}


.cookie-modal-content {

    background:

        linear-gradient(
            145deg,
            #171b24,
            #10131a
        );

    border:

        1px solid
        #2a303b;

    padding:
        30px;

    border-radius:
        var(--radius-medium);

    max-width:
        450px;

    width:
        90%;

    position:
        relative;

    box-shadow:

        0 16px 40px
        rgba(0, 0, 0, 0.65),

        0 0 20px
        rgba(0, 199, 199, 0.07);

    transform:
        translateY(-20px);

    transition:
        transform var(--transition-normal);

    font-size:
        0.9rem;

    line-height:
        1.5;

    color:
        #ffffff;
}


.cookie-modal-content::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    right:
        0;

    height:
        3px;

    border-radius:

        var(--radius-medium)
        var(--radius-medium)
        0
        0;

    background:

        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.cookie-modal-overlay.active
.cookie-modal-content {

    transform:
        translateY(0);
}


.cookie-modal-close {

    position:
        absolute;

    top:
        15px;

    right:
        20px;

    color:
        #888;

    font-size:
        1.8rem;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        color var(--transition-fast);
}


.cookie-modal-close:hover {

    color:
        var(--accent-cyan);
}


/* ==========================================================================
   17. NEWSLETTER
   ========================================================================== */

.pnp-newsletter-card {

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(0, 199, 199, 0.08),
            transparent 42%
        ),

        radial-gradient(
            circle at 90% 100%,
            rgba(139, 92, 246, 0.08),
            transparent 45%
        ),

        var(--box-bg);

    border:

        1px solid
        var(--box-border);

    border-radius:
        var(--radius-medium);

    padding:
        35px 25px;

    max-width:
        600px;

    margin:
        40px auto;

    text-align:
        center;

    box-sizing:
        border-box;

    clear:
        both;

    box-shadow:

        0 14px 34px
        rgba(0, 0, 0, 0.18);
}


.pnp-newsletter-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.pnp-newsletter-icon {

    font-size:
        2.2rem;

    color:
        var(--accent-cyan);

    margin-bottom:
        10px;

    text-shadow:

        0 0 14px
        rgba(0, 199, 199, 0.22);
}


.pnp-newsletter-title {

    font-size:
        1.6rem;

    font-weight:
        bold;

    margin:
        0 0 10px 0;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    color:
        var(--text-color);
}


.pnp-newsletter-desc {

    font-size:
        0.95rem;

    line-height:
        1.6;

    color:
        var(--text-muted);

    margin:
        0 0 25px 0;
}


.pnp-newsletter-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


@media (min-width: 480px) {

    .pnp-newsletter-form {

        flex-direction:
            row;
    }
}


.pnp-newsletter-input {

    flex:
        1;

    background-color:
        var(--bg-color);

    border:

        1px solid
        var(--box-border);

    border-radius:
        var(--radius-small);

    padding:
        12px 16px;

    font-size:
        0.95rem;

    color:
        var(--text-color);

    outline:
        none;

    transition:

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);
}


.pnp-newsletter-input:focus {

    border-color:
        var(--accent-cyan);

    box-shadow:

        0 0 0 3px
        rgba(0, 199, 199, 0.08);
}


.pnp-newsletter-btn {

    background:

        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    color:
        #ffffff;

    border:
        none;

    border-radius:
        var(--radius-small);

    padding:
        12px 24px;

    font-size:
        0.9rem;

    font-weight:
        bold;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        all var(--transition-normal);

    white-space:
        nowrap;
}


.pnp-newsletter-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0 0 16px
        rgba(0, 199, 199, 0.24),

        0 0 22px
        rgba(139, 92, 246, 0.18);
}


.pnp-newsletter-privacy {

    font-size:
        0.78rem;

    color:
        var(--text-muted);

    margin-top:
        15px;

    font-style:
        italic;
}


/* ==========================================================================
   18. RESPONSIVE GRIDS
   ========================================================================== */

@media (max-width: 1024px) {

    .top-rated-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .tag-highlights-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 768px) {

    .galerij {

        grid-template-columns:
            1fr !important;
    }


    .insta-feed-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            10px;
    }


    .tag-highlights-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            12px;
    }


    .tag-highlight-card {

        height:
            170px;
    }


    .intro-container {

        margin:
            45px auto;
    }


    .intro-text h2 {

        font-size:
            1.65rem;
    }
}


@media (max-width: 600px) {

    .top-rated-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            10px;
    }


    .tag-card-content {

        padding:
            14px;
    }


    .tag-card-content h3 {

        font-size:
            1rem;
    }


    .logo img {

        max-width:
            210px;
    }
}


/* ==========================================================================
   19. TOEGANKELIJKHEID / REDUCED MOTION
   ========================================================================== */

@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}
/* ==========================================================================
   HOMEPAGE SECTION TITLES
   ========================================================================== */

.homepage-section {
    margin-top: 65px;
    margin-bottom: 65px;
    clear: both;
}

.section-title {
    position: relative;

    margin: 0 0 28px 0;

    padding-left: 19px;

    color: #ffffff;

    font-size: 1.6rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    line-height: 1.25;
}

.section-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 3px;

    background: linear-gradient(
        to bottom,
        var(--accent-cyan),
        var(--accent-purple)
    );

    box-shadow:
        0 0 10px rgba(0, 199, 199, 0.25),
        0 0 14px rgba(139, 92, 246, 0.12);
}

.section-title span {
    color: var(--accent-cyan);
}

.section-title i {
    margin-right: 8px;

    color: var(--accent-cyan);

    text-shadow:
        0 0 10px rgba(0, 199, 199, 0.18);
}
/* ==========================================================================
   HOMEPAGE NEWSLETTER / FREE GIFT
   ========================================================================== */

.homepage-newsletter {
    position: relative;
    overflow: hidden;

    margin: 70px 0;
    padding: 44px 30px;

    text-align: center;

    border-radius: 14px;
    border: 1px solid var(--box-border);

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(0, 199, 199, 0.10),
            transparent 36%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(139, 92, 246, 0.11),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1017
        );

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.32),
        0 0 22px rgba(0, 199, 199, 0.04);
}

.homepage-newsletter::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--accent-cyan),
        var(--accent-purple),
        var(--accent-magenta)
    );
}

.homepage-newsletter-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 18px;
    padding: 7px 15px;

    border-radius: 30px;

    border: 1px solid rgba(0, 199, 199, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.10),
            rgba(139, 92, 246, 0.06)
        );

    color: var(--accent-cyan);

    font-size: 0.75rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.homepage-newsletter-badge i {
    color: var(--accent-purple);
}

.homepage-newsletter h3 {
    margin: 0 0 12px 0;

    color: #ffffff;

    font-size: 1.7rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.homepage-newsletter p {
    max-width: 640px;

    margin: 0 auto 27px auto;

    color: var(--text-muted);

    font-size: 0.98rem;
    line-height: 1.75;
}

.homepage-newsletter p strong {
    color: #ffffff;
}

.homepage-newsletter-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 13px 27px;

    border-radius: 7px;

    color: #ffffff;

    font-size: 0.86rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.65px;

    background: linear-gradient(
        135deg,
        var(--accent-cyan),
        var(--accent-purple)
    );

    box-shadow:
        0 0 18px rgba(0, 199, 199, 0.20),
        0 0 25px rgba(139, 92, 246, 0.13);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.homepage-newsletter-btn:hover {
    color: #ffffff;

    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0, 199, 199, 0.34),
        0 0 34px rgba(139, 92, 246, 0.24);
}

.homepage-newsletter-btn i {
    transition: transform 0.25s ease;
}

.homepage-newsletter-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .homepage-newsletter {
        margin: 50px 0;
        padding: 35px 20px;
    }

    .homepage-newsletter h3 {
        font-size: 1.4rem;
    }

    .homepage-newsletter-btn {
        width: 100%;
        padding: 13px 18px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - FOOTER
   ========================================================================== */

.site-footer {
    position: relative;
    margin-top: 80px;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(0, 199, 199, 0.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(139, 92, 246, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #090c12 0%,
            #06080d 100%
        );

    border-top: 1px solid #202631;
}


/* Gradientlijn boven footer */

.site-footer::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -1px;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-cyan) 20%,
        var(--accent-purple) 55%,
        var(--accent-magenta) 78%,
        transparent 100%
    );

    opacity: 0.75;

    box-shadow:
        0 0 12px rgba(0, 199, 199, 0.22),
        0 0 18px rgba(139, 92, 246, 0.12);
}


/* ==========================================================================
   FOOTER MAIN GRID
   ========================================================================== */

.footer-main {
    display: grid;

    grid-template-columns:
        2fr 1fr 1.2fr 1.35fr;

    gap: 55px;

    padding: 55px 0 45px 0;
}


/* ==========================================================================
   FOOTER BRAND
   ========================================================================== */

.footer-brand {
    max-width: 340px;
}


.footer-logo {
    display: inline-block;

    line-height: 0;

    margin-bottom: 17px;
}


.footer-logo img {
    display: block;

    width: auto;
    height: 54px;

    max-width: 300px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 9px
            rgba(0, 199, 199, 0.13)
        );

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.footer-logo:hover img {
    transform: scale(1.025);

    filter:
        drop-shadow(
            0 0 11px
            rgba(0, 199, 199, 0.25)
        )
        drop-shadow(
            0 0 15px
            rgba(139, 92, 246, 0.12)
        );
}


.footer-brand p {
    margin: 0;

    max-width: 320px;

    color: #858e9e;

    font-size: 0.88rem;

    line-height: 1.7;
}


/* ==========================================================================
   SOCIAL ICONS
   ========================================================================== */

.footer-socials {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.footer-socials a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    color: #a9b0bc;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid #272e39;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.footer-socials a:hover {
    color: #ffffff;

    transform: translateY(-3px);

    border-color:
        rgba(0, 199, 199, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.16),
            rgba(139, 92, 246, 0.13)
        );

    box-shadow:
        0 0 14px
        rgba(0, 199, 199, 0.12);
}


/* ==========================================================================
   FOOTER COLUMNS
   ========================================================================== */

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}


.footer-column h4 {
    position: relative;

    margin:
        4px 0 11px 0;

    padding-bottom: 9px;

    color: #ffffff;

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.footer-column h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 32px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.footer-column a {
    position: relative;

    color: #858e9e;

    font-size: 0.88rem;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.footer-column a:hover {
    color: var(--accent-cyan);

    transform: translateX(3px);
}


/* ==========================================================================
   FOOTER TAGLINE
   ========================================================================== */

.footer-tagline {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 20px 22px;

    border-radius: 12px;

    border:
        1px solid #242b36;

    background:
        linear-gradient(
            145deg,
            rgba(20, 24, 34, 0.75),
            rgba(10, 13, 20, 0.75)
        );
}


.footer-tagline-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin-bottom: 13px;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 16px
        rgba(0, 199, 199, 0.13);
}


.footer-tagline span {
    margin-bottom: 5px;

    color: var(--accent-cyan);

    font-size: 0.68rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.footer-tagline strong {
    color: #ffffff;

    font-size: 1.03rem;

    line-height: 1.4;

    letter-spacing: 0.2px;
}


/* ==========================================================================
   FOOTER BOTTOM
   ========================================================================== */

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 19px 0 24px 0;

    border-top:
        1px solid #1d232d;
}


.footer-bottom p {
    margin: 0;

    color: #697281;

    font-size: 0.78rem;
}


.footer-bottom strong {
    color: #aeb5c0;
}


.footer-ai-note {
    display: flex;

    align-items: center;

    gap: 7px;
}


.footer-ai-note i {
    color: var(--accent-purple);
}


/* ==========================================================================
   COOKIE MODAL - NIEUWE STIJL
   ========================================================================== */

.cookie-modal-title {
    margin-top: 0;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.cookie-modal-title::after {
    content: "";

    display: block;

    width: 45px;
    height: 2px;

    margin-top: 10px;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


.cookie-modal-content h4 {
    margin:
        22px 0 5px 0;

    color: var(--accent-cyan);

    font-size: 0.82rem;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.cookie-modal-content code {
    color: var(--accent-cyan);

    background:
        rgba(0, 199, 199, 0.08);

    padding: 2px 5px;

    border-radius: 4px;
}


.cookie-close-button {
    width: 100%;

    margin-top: 18px;

    padding: 11px 20px;

    border: none;

    border-radius: 6px;

    color: #ffffff;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 15px
        rgba(0, 199, 199, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.cookie-close-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 20px
        rgba(0, 199, 199, 0.25),
        0 0 25px
        rgba(139, 92, 246, 0.17);
}


/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

@media (max-width: 950px) {

    .footer-main {
        grid-template-columns:
            1.7fr 1fr 1fr;

        gap: 35px;
    }

    .footer-tagline {
        grid-column:
            1 / -1;

        flex-direction: row;

        align-items: center;

        gap: 15px;
    }

    .footer-tagline-icon {
        flex-shrink: 0;

        margin-bottom: 0;
    }
}


@media (max-width: 650px) {

    .site-footer {
        margin-top: 55px;
    }

    .footer-main {
        grid-template-columns:
            1fr 1fr;

        gap: 35px 25px;

        padding:
            42px 0 35px 0;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-logo img {
        height: 48px;
        max-width: 260px;
    }

    .footer-tagline {
        grid-column:
            1 / -1;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }
}


@media (max-width: 430px) {

    .footer-main {
        grid-template-columns:
            1fr;
    }

    .footer-brand,
    .footer-tagline {
        grid-column: auto;
    }

    .footer-tagline {
        flex-direction: row;
    }
}
/* ==========================================================================
   CARD TITLES - HIGHEST RATED & RECENTLY UPLOADED
   ========================================================================== */

.top-rated-item > p,
.galerij > .galerij-item > p {
    position: relative;

    margin: 0 !important;
    padding: 13px 15px 14px 15px !important;

    min-height: 48px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            180deg,
            rgba(15, 18, 25, 0.96),
            rgba(10, 12, 18, 0.98)
        );

    border-top:
        1px solid rgba(0, 199, 199, 0.14);

    color: #d8dde6 !important;

    font-size: 0.88rem !important;
    font-weight: 700;

    letter-spacing: 0.2px;
    line-height: 1.4;

    text-align: left;
}


/* subtiele gradientlijn */

.top-rated-item > p::before,
.galerij > .galerij-item > p::before {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 48px;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--accent-cyan),
        var(--accent-purple)
    );

    box-shadow:
        0 0 8px rgba(0, 199, 199, 0.18);
}


/* link zelf */

.top-rated-item > p a,
.galerij > .galerij-item > p a {
    color: #d8dde6 !important;

    text-decoration: none !important;

    width: 100%;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* hover */

.top-rated-item:hover > p a,
.galerij > .galerij-item:hover > p a {
    color: #ffffff !important;

    transform: translateX(2px);
}
/* ==========================================================================
   GALLERY / ALBUM OVERVIEW
   ========================================================================== */

.gallery-page {
    padding-top: 45px;
}


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.gallery-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 28px;
    padding-bottom: 22px;

    border-bottom: 1px solid var(--box-border);
}


.gallery-page-kicker {
    display: block;

    margin-bottom: 7px;

    color: var(--accent-cyan);

    font-size: 0.69rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.6px;
}


.gallery-page-title {
    position: relative;

    margin: 0;

    padding-left: 18px;

    color: #ffffff;

    font-size: 1.9rem;
    font-weight: 850;

    line-height: 1.15;

    text-transform: uppercase;
    letter-spacing: 1px;
}


.gallery-page-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0, 199, 199, 0.20);
}


.gallery-page-title span {
    color: var(--accent-cyan);
}


/* ==========================================================================
   ACTION BUTTONS
   ========================================================================== */

.gallery-action-bar {
    display: flex;
    align-items: center;

    gap: 10px;
}


.gallery-action-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 10px 17px;

    border-radius: 8px;

    font-size: 0.78rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.5px;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.gallery-surprise-btn {
    color: #ffffff;

    border:
        1px solid rgba(0, 199, 199, 0.32);

    background:
        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.13),
            rgba(139, 92, 246, 0.10)
        );
}


.gallery-surprise-btn:hover {
    color: #ffffff;

    transform: translateY(-2px);

    border-color:
        rgba(0, 199, 199, 0.65);

    background:
        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.22),
            rgba(139, 92, 246, 0.18)
        );

    box-shadow:
        0 0 18px rgba(0, 199, 199, 0.11);
}


.gallery-favorites-btn {
    color: #d9dce4;

    border:
        1px solid #2c3340;

    background:
        rgba(255, 255, 255, 0.025);
}


.gallery-favorites-btn > i {
    color: #ff5d72;
}


.gallery-favorites-btn:hover {
    color: #ffffff;

    transform: translateY(-2px);

    border-color:
        rgba(255, 93, 114, 0.45);

    background:
        rgba(255, 93, 114, 0.05);
}


.gallery-fav-count {
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    border-radius: 20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5d72,
            #bc3cff
        );

    font-size: 0.65rem;
    font-weight: 900;
}


/* ==========================================================================
   POPULAR THEMES
   ========================================================================== */

.gallery-themes-panel {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 36px;

    padding: 15px 17px;

    border:
        1px solid var(--box-border);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(19, 23, 31, 0.85),
            rgba(12, 15, 21, 0.85)
        );
}


.gallery-themes-label {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.75px;
}


.gallery-themes-label i {
    color: var(--accent-purple);
}


.gallery-theme-pills {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.gallery-theme-pill {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 10px;

    border-radius: 20px;

    border:
        1px solid rgba(0, 199, 199, 0.18);

    background:
        rgba(0, 199, 199, 0.04);

    color: #aeb6c3;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}


.gallery-theme-pill:hover {
    color: #ffffff;

    transform: translateY(-1px);

    border-color:
        rgba(0, 199, 199, 0.45);

    background:
        linear-gradient(
            135deg,
            rgba(0, 199, 199, 0.10),
            rgba(139, 92, 246, 0.07)
        );
}


.gallery-theme-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border-radius: 12px;

    color: var(--accent-cyan);

    background:
        rgba(0, 199, 199, 0.10);

    font-size: 0.63rem;
    font-weight: 900;
}


/* ==========================================================================
   ALBUM GRID
   ========================================================================== */

.gallery-album-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


/* ==========================================================================
   ALBUM CARD
   ========================================================================== */

.gallery-album-card {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    border:
        1px solid var(--box-border);

    background:
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.gallery-album-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(0, 199, 199, 0.30);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(0, 199, 199, 0.06),
        0 0 25px rgba(139, 92, 246, 0.05);
}


.gallery-album-image-link {
    display: block;

    color: inherit;
}


.gallery-album-image-wrap {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #07090d;
}


.gallery-album-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


.gallery-album-card:hover
.gallery-album-image-wrap img {
    transform: scale(1.035);

    filter: brightness(0.82);
}


.gallery-album-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5, 7, 11, 0.55) 100%
        );

    pointer-events: none;
}


.gallery-album-open {
    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color: #ffffff;

    font-size: 0.70rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.8px;

    opacity: 0;

    transform: translateY(7px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.gallery-album-open i {
    color: var(--accent-cyan);
}


.gallery-album-card:hover
.gallery-album-open {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================================================
   ALBUM CAPTION
   ========================================================================== */

.gallery-album-caption {
    position: relative;

    min-height: 58px;

    padding: 16px 17px 17px 17px;

    background:
        linear-gradient(
            180deg,
            rgba(16, 19, 27, 0.98),
            rgba(10, 12, 18, 0.98)
        );
}


.gallery-album-caption-line {
    position: absolute;

    left: 17px;
    top: 0;

    width: 48px;
    height: 2px;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 8px rgba(0, 199, 199, 0.18);
}


.gallery-album-title {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #d9dee8;

    font-size: 0.94rem;
    font-weight: 800;

    text-decoration: none;

    line-height: 1.35;

    transition:
        color 0.25s ease;
}


.gallery-album-title > span {
    flex: 1;
}


.gallery-album-title:hover {
    color: #ffffff;
}


.gallery-private-icon {
    color: #ffba3b;

    font-size: 0.78rem;
}


.gallery-title-arrow {
    flex-shrink: 0;

    color: var(--accent-cyan);

    font-size: 0.74rem;

    opacity: 0.75;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.gallery-album-card:hover
.gallery-title-arrow {
    opacity: 1;

    transform: translateX(3px);
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.gallery-empty-state {
    padding: 55px 25px;

    border:
        1px dashed #2b323d;

    border-radius: 12px;

    text-align: center;

    color: #6f7887;

    background:
        rgba(255, 255, 255, 0.015);
}


.gallery-empty-state i {
    display: block;

    margin-bottom: 13px;

    color: var(--accent-cyan);

    font-size: 1.8rem;
}


.gallery-empty-state p {
    margin: 0;

    font-size: 0.88rem;
}


.gallery-error-state i {
    color: #ff5d72;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 950px) {

    .gallery-album-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .gallery-page-header {
        align-items: center;
    }


    .gallery-themes-panel {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }
}


@media (max-width: 700px) {

    .gallery-page {
        padding-top: 30px;
    }


    .gallery-page-header {
        flex-direction: column;

        align-items: flex-start;
    }


    .gallery-action-bar {
        width: 100%;
    }


    .gallery-action-btn {
        flex: 1;
    }


    .gallery-album-grid {
        grid-template-columns: 1fr;
    }


    .gallery-album-image-wrap {
        aspect-ratio: 16 / 11;
    }
}


@media (max-width: 480px) {

    .gallery-page-title {
        font-size: 1.6rem;
    }


    .gallery-action-bar {
        flex-direction: column;
    }


    .gallery-action-btn {
        width: 100%;
    }


    .gallery-themes-panel {
        padding: 14px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - ALBUM PAGE MODERNIZATION
   RONDE 1
   ========================================================================== */


/* --------------------------------------------------------------------------
   ALBUM PAGE - GENERAL SPACING
   -------------------------------------------------------------------------- */

body .container > .album-filters {
    margin: 0 0 28px 0 !important;
    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    border: 1px solid var(--box-border);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(19, 23, 31, .80),
            rgba(11, 14, 20, .80)
        );

    font-size: .82rem !important;
}


/* --------------------------------------------------------------------------
   BACK TO ALBUMS
   -------------------------------------------------------------------------- */

body .container > p:first-child {
    margin: 30px 0 18px !important;
}

body .container > p:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 11px;

    color: #9ba3b1 !important;

    border: 1px solid #262d38;
    border-radius: 7px;

    background: rgba(255,255,255,.018);

    font-size: .75rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .65px;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}

body .container > p:first-child a:hover {
    color: #fff !important;

    border-color: rgba(0,199,199,.42);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.08),
            rgba(139,92,246,.05)
        );

    transform: translateX(-2px);
}


/* --------------------------------------------------------------------------
   ALBUM HEADER
   -------------------------------------------------------------------------- */

/*
   album.php gebruikt voor de header nog inline styles.
   We pakken het element daarom via de positie in de container.
*/

body .container > p:first-child + div {
    position: relative;

    margin-bottom: 30px !important;
    padding: 20px 20px 20px 22px !important;

    border: 1px solid var(--box-border) !important;
    border-bottom: 1px solid var(--box-border) !important;
    border-radius: 11px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(0,199,199,.08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(20,24,33,.94),
            rgba(11,14,20,.96)
        );

    box-shadow:
        0 14px 30px rgba(0,0,0,.20);
}

body .container > p:first-child + div::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15px;
    bottom: 15px;

    width: 4px;

    border-radius: 0 4px 4px 0;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.22);
}

body .container > p:first-child + div h2 {
    margin: 0 !important;

    color: #fff;

    font-size: 1.55rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;
}

body .container > p:first-child + div h2 span:first-of-type {
    color: var(--accent-cyan) !important;
}


/* --------------------------------------------------------------------------
   SORT FILTERS
   -------------------------------------------------------------------------- */

.album-filters > span {
    color: #687180 !important;

    margin-right: 7px !important;

    font-size: .68rem !important;

    font-weight: 800;

    letter-spacing: 1px !important;
}

.album-filters a {
    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 6px 11px;

    margin: 0 !important;

    border-radius: 6px;

    color: #8992a1 !important;

    font-size: .75rem;

    transition:
        color .25s ease,
        background .25s ease;
}

.album-filters a:hover {
    color: #fff !important;

    background: rgba(0,199,199,.07);
}


/* --------------------------------------------------------------------------
   ALBUM GRID
   -------------------------------------------------------------------------- */

body .container > .galerij {
    gap: 26px;
}


/* --------------------------------------------------------------------------
   CREATION CARDS
   -------------------------------------------------------------------------- */

body .container > .galerij > .galerij-item {
    position: relative;

    overflow: hidden;

    border: 1px solid #242b36;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #141821,
            #0c0f15
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.22);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

body .container > .galerij > .galerij-item:hover {
    transform: translateY(-5px);

    border-color: rgba(0,199,199,.32);

    box-shadow:
        0 18px 38px rgba(0,0,0,.36),
        0 0 20px rgba(0,199,199,.06),
        0 0 28px rgba(139,92,246,.05);
}


/* --------------------------------------------------------------------------
   IMAGE
   -------------------------------------------------------------------------- */

body .container > .galerij > .galerij-item > .img-clickable {
    border: 0 !important;

    transition:
        transform .45s ease,
        filter .45s ease !important;
}

body .container > .galerij > .galerij-item:hover > .img-clickable {
    transform: scale(1.025);

    filter: brightness(.92);
}


/* --------------------------------------------------------------------------
   CARD CONTENT
   -------------------------------------------------------------------------- */

body .container .galerij-card-content {
    position: relative;

    padding: 17px 17px 11px !important;

    background:
        linear-gradient(
            180deg,
            rgba(17,21,29,.98),
            rgba(13,16,23,.98)
        );
}

body .container .galerij-card-content::before {
    content: "";

    position: absolute;

    left: 17px;
    top: 0;

    width: 48px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 8px rgba(0,199,199,.18);
}


/* TITLE */

body .container .galerij-card-content > p {
    color: #e5e8ee !important;

    font-size: .94rem !important;

    font-weight: 800 !important;

    line-height: 1.45;

    padding-bottom: 8px !important;
}


/* --------------------------------------------------------------------------
   FAVORITE HEART
   -------------------------------------------------------------------------- */

body .container .btn-fav-heart {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    padding: 0 !important;

    border: 1px solid #2b323d !important;

    border-radius: 50%;

    background: #0c0f15 !important;

    font-size: .88rem !important;

    transition:
        transform .25s ease,
        color .25s ease,
        border-color .25s ease,
        background .25s ease !important;
}

body .container .btn-fav-heart:hover {
    transform: scale(1.08);

    border-color: rgba(255,85,105,.45) !important;

    background: rgba(255,85,105,.07) !important;
}


/* --------------------------------------------------------------------------
   TAGS
   -------------------------------------------------------------------------- */

body .container .werk-tags {
    gap: 6px !important;

    margin: 7px 0 9px !important;
}

body .container .werk-tags .tag-badge {
    padding: 4px 8px;

    border-radius: 5px;

    border: 1px solid rgba(0,199,199,.20);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.08),
            rgba(139,92,246,.04)
        );

    color: var(--accent-cyan);

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: .45px;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


/* --------------------------------------------------------------------------
   MODEL BADGE
   -------------------------------------------------------------------------- */

body .container .model-wrapper {
    margin-top: 4px !important;
}

body .container .model-badge {
    padding: 4px 8px;

    border-radius: 5px;

    font-size: .61rem;

    font-weight: 850;

    letter-spacing: .55px;
}


/* --------------------------------------------------------------------------
   PROMPT SECTION
   -------------------------------------------------------------------------- */

body .container .galerij-item .prompt-wrapper {
    padding: 9px 17px 12px !important;

    border-top: 1px solid rgba(255,255,255,.025);

    background: #0c0f15 !important;
}

body .container .btn-toggle-prompt {
    color: var(--accent-cyan) !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    letter-spacing: .75px !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

body .container .btn-toggle-prompt:hover {
    color: #fff !important;

    transform: translateX(2px);
}

body .container .prompt-content {
    margin-top: 8px !important;

    padding: 11px !important;

    border: 1px solid #242b36 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0d1016
        ) !important;
}

body .container .prompt-text {
    color: #8f98a7 !important;

    font-size: .74rem !important;

    line-height: 1.5 !important;
}


/* COPY PROMPT */

body .container .btn-copy-prompt {
    border: 1px solid #2b333f;

    border-radius: 5px;

    background: #12161e;

    color: #b4bbc7;

    font-size: .65rem;

    padding: 5px 9px;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

body .container .btn-copy-prompt:hover {
    color: #fff;

    border-color: rgba(0,199,199,.50);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.16),
            rgba(139,92,246,.10)
        );
}


/* --------------------------------------------------------------------------
   RATINGS
   -------------------------------------------------------------------------- */

body .container .galerij-item .rating-container {
    position: relative;

    margin: 0 !important;

    padding: 14px 15px 16px;

    border-top: 1px solid #202631;

    background:
        linear-gradient(
            180deg,
            #0d1016,
            #090c11
        );
}

body .container .galerij-item .rating-titel {
    margin-bottom: 5px;

    color: #687180 !important;

    font-size: .66rem !important;

    font-weight: 800;

    letter-spacing: .9px;
}

body .container .galerij-item .sterren label {
    padding: 0 4px !important;

    font-size: 1.35rem !important;
}

body .container .galerij-item .rating-gemiddelde {
    margin-top: 5px;

    color: #747d8b !important;

    font-size: .70rem !important;
}


/* --------------------------------------------------------------------------
   ADMIN ACTIONS
   -------------------------------------------------------------------------- */

body .container .admin-actions {
    padding: 10px 15px !important;

    border-top: 1px solid #242b36 !important;

    background: #090c11 !important;
}

body .container .btn-edit,
body .container .btn-delete {
    padding: 6px 11px;

    border-radius: 5px;

    font-size: .66rem;

    letter-spacing: .5px;
}

body .container .btn-edit {
    color: var(--accent-cyan);

    border: 1px solid rgba(0,199,199,.28);

    background: rgba(0,199,199,.05);
}

body .container .btn-edit:hover {
    color: #fff;

    border-color: var(--accent-cyan);

    background: rgba(0,199,199,.14);
}

body .container .btn-delete {
    color: #ff777f;

    border: 1px solid rgba(255,80,90,.25);

    background: rgba(150,20,30,.10);
}

body .container .btn-delete:hover {
    color: #fff;

    border-color: #d84b55;

    background: #b7333d;
}


/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */

body .pagination-container {
    gap: 7px;

    margin: 42px 0 25px;
}

body .pagination-link {
    min-width: 38px;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border: 1px solid #29313c;

    border-radius: 7px;

    background: #10141b;

    color: #929baa;

    font-size: .74rem;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

body .pagination-link:hover {
    color: #fff;

    transform: translateY(-2px);

    border-color: rgba(0,199,199,.45);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.10),
            rgba(139,92,246,.07)
        );
}

body .pagination-link.active {
    color: #fff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 14px rgba(0,199,199,.15);
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    body .container > p:first-child + div {
        align-items: flex-start !important;
        flex-direction: column;

        gap: 15px;
    }

    body .container > p:first-child + div h2 {
        font-size: 1.3rem;
    }

    body .container > .album-filters {
        justify-content: flex-start;

        flex-wrap: wrap;
    }

    body .container > .galerij {
        gap: 20px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - ALBUM PAGE MODERNIZATION
   RONDE 2 - STATUS / MEMBERS / LIGHTBOX
   ========================================================================== */


/* ==========================================================================
   1. PUBLIC / PRIVATE STATUS BUTTON
   ========================================================================== */

/* formulier rechts in albumheader */
body .container > p:first-child + div > form {
    margin: 0 !important;
}

/* beide mogelijke statusknoppen */
body .container > p:first-child + div > form button {
    position: relative;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 15px !important;

    border-radius: 7px !important;

    font-size: .69rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .55px;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease !important;
}

body .container > p:first-child + div > form button:hover {
    transform: translateY(-2px);

    filter: brightness(1.12);
}


/* PUBLIC */

body .container > p:first-child + div > form button[style*="#112d24"] {
    color: #63e6a5 !important;

    border-color: rgba(46,204,113,.35) !important;

    background:
        linear-gradient(
            135deg,
            rgba(46,204,113,.12),
            rgba(0,199,199,.06)
        ) !important;

    box-shadow:
        0 0 14px rgba(46,204,113,.06);
}


/* PRIVATE */

body .container > p:first-child + div > form button[style*="#3a1111"] {
    color: #ffc75c !important;

    border-color: rgba(255,190,70,.32) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,180,50,.10),
            rgba(130,70,20,.06)
        ) !important;

    box-shadow:
        0 0 14px rgba(255,180,50,.05);
}


/* ==========================================================================
   2. PRIVATE ALBUM - MEMBER ACCESS PANEL
   ========================================================================== */

/*
   Dit blok staat alleen op de pagina wanneer:
   admin + privé-album.
*/

body .container > div[style*="border-top: 3px solid #ffaa00"] {
    position: relative;

    overflow: hidden;

    margin-bottom: 30px !important;

    padding: 22px !important;

    border: 1px solid #2a303b !important;
    border-top: 1px solid #2a303b !important;

    border-radius: 11px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,185,61,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.20);
}

body .container > div[style*="border-top: 3px solid #ffaa00"]::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #ffb93d,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


/* MEMBER PANEL TITLE */

body .container > div[style*="border-top: 3px solid #ffaa00"] h3 {
    margin: 0 0 17px !important;

    color: #fff !important;

    font-size: .88rem !important;

    font-weight: 850;

    letter-spacing: .7px;

    text-transform: uppercase;
}

body .container > div[style*="border-top: 3px solid #ffaa00"] h3 i {
    margin-right: 7px;

    color: #ffb93d;
}


/* MEMBER CHECKBOX CARDS */

body .container > div[style*="border-top: 3px solid #ffaa00"] label {
    border-color: #272e39 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #11151c,
            #0c0f15
        ) !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

body .container > div[style*="border-top: 3px solid #ffaa00"] label:hover {
    transform: translateY(-1px);

    border-color: rgba(0,199,199,.32) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,199,199,.06),
            rgba(139,92,246,.035)
        ) !important;
}

body .container > div[style*="border-top: 3px solid #ffaa00"] input[type="checkbox"] {
    accent-color: var(--accent-cyan) !important;
}


/* SAVE RIGHTS BUTTON */

body .container > div[style*="border-top: 3px solid #ffaa00"] .btn-save {
    padding: 9px 15px !important;

    border: 0 !important;

    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 15px rgba(0,199,199,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

body .container > div[style*="border-top: 3px solid #ffaa00"] .btn-save:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 20px rgba(0,199,199,.20),
        0 0 25px rgba(139,92,246,.12);
}


/* ==========================================================================
   3. LIGHTBOX OVERLAY
   ========================================================================== */

#lightboxModalOverlay.cookie-modal-overlay {
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(25,45,70,.16),
            transparent 45%
        ),
        rgba(2,4,8,.93) !important;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================================
   4. LIGHTBOX WINDOW
   ========================================================================== */

#lightboxModalOverlay .lightbox-wrapper {
    position: relative;

    width: min(94vw, 1180px);

    max-width: 1180px;

    height: min(86vh, 820px);

    overflow: hidden;

    border: 1px solid #2a313d;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #11151d,
            #090c12
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.75),
        0 0 30px rgba(0,199,199,.07),
        0 0 45px rgba(139,92,246,.05);
}


/* branding lijn */

#lightboxModalOverlay .lightbox-wrapper::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    z-index: 10;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* ==========================================================================
   5. LIGHTBOX IMAGE AREA
   ========================================================================== */

#lightboxModalOverlay .lightbox-media {
    position: relative;

    padding: 24px;

    background:
        radial-gradient(
            circle at center,
            #111722,
            #05070b 72%
        );
}

#lightboxModalOverlay .lightbox-media img {
    max-width: 100%;
    max-height: 100%;

    border-radius: 5px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 30px rgba(0,0,0,.45)
        );
}


/* ==========================================================================
   6. LIGHTBOX SIDEBAR
   ========================================================================== */

#lightboxModalOverlay .lightbox-sidebar {
    width: 350px;
    min-width: 350px;

    padding: 27px 24px;

    border-left: 1px solid #242b36;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(139,92,246,.06),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #12161e,
            #0d1016
        );
}


/* TITLE */

#lb-title-display {
    color: #fff !important;

    font-size: 1.18rem !important;

    font-weight: 850;

    line-height: 1.4;

    letter-spacing: .15px;
}


/* FAVORITE BUTTON */

#lb-fav-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    padding: 0 !important;

    border: 1px solid #2b323e !important;

    border-radius: 50%;

    background: #0b0e14 !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease !important;
}

#lb-fav-btn:hover {
    transform: scale(1.08);

    border-color: rgba(255,85,100,.50) !important;

    background: rgba(255,85,100,.06) !important;
}


/* ==========================================================================
   7. LIGHTBOX TAGS / MODEL
   ========================================================================== */

#lb-meta-display {
    padding-bottom: 12px;

    border-bottom: 1px solid #222934;
}

#lb-tags-display .tag-badge {
    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.08),
            rgba(139,92,246,.04)
        );

    border-color: rgba(0,199,199,.22);

    color: var(--accent-cyan);

    font-size: .61rem;
}


/* ==========================================================================
   8. LIGHTBOX PROMPT
   ========================================================================== */

#lb-meta-display + label {
    display: block;

    margin-top: 13px;

    color: #687180 !important;

    font-size: .64rem !important;

    font-weight: 850 !important;

    letter-spacing: .8px !important;
}

#lb-prompt-display {
    margin-top: 7px !important;

    padding: 12px !important;

    max-height: 165px !important;

    border: 1px solid #252c37 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #080b10,
            #0c1016
        ) !important;

    color: #a0a8b5 !important;

    font-size: .74rem !important;

    line-height: 1.5;

    scrollbar-width: thin;

    scrollbar-color:
        #303846
        #0b0e14;
}


/* ==========================================================================
   9. LIGHTBOX RATINGS
   ========================================================================== */

#lightboxModalOverlay .rating-container {
    margin: 18px 0 14px !important;

    padding: 15px 0 0 !important;

    border-top: 1px solid #242b36 !important;
}

#lightboxModalOverlay .rating-titel {
    color: #687180 !important;

    font-size: .65rem !important;

    font-weight: 850;

    letter-spacing: .8px;
}

#lightboxModalOverlay .sterren label {
    padding: 0 4px !important;

    font-size: 1.4rem !important;
}

#lightboxModalOverlay .rating-gemiddelde {
    color: #747d8b !important;

    font-size: .68rem !important;
}


/* ==========================================================================
   10. LIGHTBOX ACTION BUTTONS
   ========================================================================== */

#lightboxModalOverlay .prompt-actions {
    display: grid !important;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px !important;

    margin-bottom: 9px !important;
}

#lightboxModalOverlay .prompt-actions .btn-copy-prompt {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    min-height: 34px;

    padding: 6px 8px;

    border: 1px solid #2b333f;

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #151922,
            #10141b
        );

    color: #aeb6c3;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .3px;
}

#lightboxModalOverlay .prompt-actions .btn-copy-prompt:hover {
    color: #fff;

    border-color: rgba(0,199,199,.45);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.13),
            rgba(139,92,246,.09)
        );
}


/* CHATGPT */

#lightboxModalOverlay .btn-try-chatgpt:hover {
    border-color: rgba(46,204,113,.48);
}


/* GEMINI */

#lightboxModalOverlay .btn-try-gemini:hover {
    border-color: rgba(139,92,246,.55);
}


/* SHARE BUTTON */

#lb-share-btn {
    min-height: 38px;

    border: 1px solid rgba(0,199,199,.32) !important;

    border-radius: 6px !important;

    color: var(--accent-cyan) !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.06),
            rgba(139,92,246,.035)
        ) !important;

    font-size: .68rem !important;

    font-weight: 850;

    letter-spacing: .5px;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease !important;
}

#lb-share-btn:hover {
    color: #fff !important;

    transform: translateY(-2px);

    border-color: rgba(139,92,246,.55) !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.13),
            rgba(139,92,246,.11)
        ) !important;
}


/* ==========================================================================
   11. LIGHTBOX CLOSE BUTTON
   ========================================================================== */

#lightboxModalOverlay > .cookie-modal-close {
    position: fixed;

    top: 20px;
    right: 26px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;

    background: rgba(8,11,17,.72);

    color: #9da5b2;

    font-size: 1.55rem;

    line-height: 1;

    z-index: 10005;

    backdrop-filter: blur(8px);

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}

#lightboxModalOverlay > .cookie-modal-close:hover {
    color: #fff;

    transform: rotate(90deg);

    border-color: rgba(0,199,199,.45);

    background: rgba(0,199,199,.10);
}


/* ==========================================================================
   12. LIGHTBOX PREVIOUS / NEXT
   ========================================================================== */

#lightboxModalOverlay .lightbox-nav {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 64px;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 9px;

    background: rgba(7,10,15,.62);

    color: #c6ccd5 !important;

    font-size: 2rem !important;

    opacity: .65;

    backdrop-filter: blur(8px);

    transition:
        opacity .25s ease,
        color .25s ease,
        border-color .25s ease,
        background .25s ease !important;
}

#lightboxModalOverlay .lightbox-nav:hover {
    opacity: 1;

    color: #fff !important;

    border-color: rgba(0,199,199,.40);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.12),
            rgba(139,92,246,.08)
        );
}


/* ==========================================================================
   13. EDIT FORM
   ========================================================================== */

body .container .edit-form-container {
    padding: 18px !important;

    border-top: 1px solid #282f3a !important;

    background:
        linear-gradient(
            145deg,
            #11151c,
            #0b0e14
        ) !important;
}

body .container .edit-form-container label {
    color: #747d8b !important;

    font-size: .67rem !important;

    font-weight: 850;

    letter-spacing: .65px;
}

body .container .edit-form-container input[type="text"],
body .container .edit-form-container select,
body .container .edit-form-container textarea {
    padding: 9px 10px !important;

    border: 1px solid #303846 !important;

    border-radius: 6px !important;

    background: #090c11 !important;

    color: #e5e8ee !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

body .container .edit-form-container input[type="text"]:focus,
body .container .edit-form-container select:focus,
body .container .edit-form-container textarea:focus {
    outline: none;

    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06);
}


/* SAVE */

body .container .edit-form-container .btn-save {
    border: 0;

    border-radius: 5px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


/* CANCEL */

body .container .edit-form-container .btn-cancel {
    border-color: #343c48;

    border-radius: 5px;

    color: #939ba8;

    background: transparent;
}

body .container .edit-form-container .btn-cancel:hover {
    color: #fff;

    border-color: #596270;
}


/* ==========================================================================
   14. MOBILE LIGHTBOX
   ========================================================================== */

@media (max-width: 767px) {

    #lightboxModalOverlay {
        padding: 12px;
    }

    #lightboxModalOverlay .lightbox-wrapper {
        width: 96vw;

        height: 88vh;

        flex-direction: column;
    }

    #lightboxModalOverlay .lightbox-media {
        min-height: 42%;

        padding: 15px;
    }

    #lightboxModalOverlay .lightbox-sidebar {
        width: 100%;
        min-width: 0;

        padding: 19px;

        border-left: 0;
        border-top: 1px solid #242b36;

        overflow-y: auto;
    }

    #lightboxModalOverlay .prompt-actions {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #lightboxModalOverlay .lightbox-prev {
        left: 6px !important;
    }

    #lightboxModalOverlay .lightbox-next {
        right: 6px !important;
    }

    #lightboxModalOverlay .lightbox-nav {
        width: 38px;
        height: 52px;

        font-size: 1.5rem !important;
    }

    #lightboxModalOverlay > .cookie-modal-close {
        top: 10px;
        right: 10px;

        width: 36px;
        height: 36px;

        font-size: 1.3rem;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - MEMBER UPLOAD PAGE
   ========================================================================== */


/* PAGE WRAPPER */

body .container[style*="max-width: 600px"] {
    max-width: 760px !important;

    margin-top: 48px !important;
    margin-bottom: 70px !important;
}


/* ==========================================================================
   PAGE TITLE
   ========================================================================== */

body .container[style*="max-width: 600px"] > h2 {
    position: relative;

    margin: 0 0 28px !important;

    padding: 0 0 17px 20px !important;

    border-bottom: 1px solid #242b36 !important;

    color: #fff;

    font-size: 1.65rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .9px;
}

body .container[style*="max-width: 600px"] > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 18px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.20);
}

body .container[style*="max-width: 600px"] > h2 i {
    margin-right: 9px;

    color: var(--accent-cyan) !important;

    text-shadow:
        0 0 10px rgba(0,199,199,.15);
}

body .container[style*="max-width: 600px"] > h2 span {
    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   SUCCESS MESSAGE
   ========================================================================== */

body .container[style*="max-width: 600px"] > div[style*="#0d1e16"] {
    position: relative;

    padding: 14px 16px !important;

    border: 1px solid rgba(46,204,113,.32) !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(46,204,113,.10),
            rgba(0,199,199,.05)
        ) !important;

    color: #73e6ab !important;

    font-size: .83rem !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14);
}


/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

body .container[style*="max-width: 600px"] > div[style*="#3a1111"] {
    padding: 14px 16px !important;

    border: 1px solid rgba(255,90,100,.28) !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;

    font-size: .83rem !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14);
}


/* ==========================================================================
   FORM CARD
   ========================================================================== */

body .container[style*="max-width: 600px"] .form-box {
    position: relative;

    overflow: hidden;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 30px !important;

    border: 1px solid #262e39;

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.07),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.06),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        );

    box-shadow:
        0 22px 50px rgba(0,0,0,.28);
}

body .container[style*="max-width: 600px"] .form-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* ==========================================================================
   LABELS
   ========================================================================== */

body .container[style*="max-width: 600px"] .form-box label {
    display: block;

    margin: 0 0 7px;

    color: #a7afbb;

    font-size: .69rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .75px;
}


/* ==========================================================================
   TEXT INPUTS / SELECT / TEXTAREA
   ========================================================================== */

body .container[style*="max-width: 600px"] .form-box input[type="text"],
body .container[style*="max-width: 600px"] .form-box select,
body .container[style*="max-width: 600px"] .form-box textarea {
    width: 100%;

    min-height: 46px;

    margin: 0 0 21px !important;

    padding: 11px 13px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #0b0e14,
            #10141b
        ) !important;

    color: #e8ebf0 !important;

    font-family: inherit;

    font-size: .88rem;

    box-sizing: border-box;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

body .container[style*="max-width: 600px"] .form-box textarea {
    min-height: 125px;

    resize: vertical;

    line-height: 1.55;
}

body .container[style*="max-width: 600px"] .form-box input[type="text"]::placeholder,
body .container[style*="max-width: 600px"] .form-box textarea::placeholder {
    color: #586171;
}

body .container[style*="max-width: 600px"] .form-box input[type="text"]:focus,
body .container[style*="max-width: 600px"] .form-box select:focus,
body .container[style*="max-width: 600px"] .form-box textarea:focus {
    outline: none;

    border-color: var(--accent-cyan) !important;

    background: #0b0f15 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* SELECT ARROW / OPTIONS */

body .container[style*="max-width: 600px"] .form-box select {
    cursor: pointer;
}

body .container[style*="max-width: 600px"] .form-box select option {
    background: #10141b;

    color: #fff;
}


/* ==========================================================================
   FILE UPLOAD
   ========================================================================== */

body .container[style*="max-width: 600px"] .form-box input[type="file"] {
    width: 100%;

    margin: 0 0 22px !important;

    padding: 10px;

    border: 1px dashed #35404d;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.035),
            rgba(139,92,246,.025)
        );

    color: #8e97a5 !important;

    font-size: .78rem;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        border-color .22s ease,
        background .22s ease;
}

body .container[style*="max-width: 600px"] .form-box input[type="file"]:hover {
    border-color: rgba(0,199,199,.45);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.07),
            rgba(139,92,246,.045)
        );
}

body .container[style*="max-width: 600px"] .form-box input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 8px 12px;

    border: 1px solid rgba(0,199,199,.28);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.12),
            rgba(139,92,246,.08)
        );

    color: #fff;

    font-size: .68rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;

    cursor: pointer;

    transition:
        filter .22s ease,
        transform .22s ease;
}

body .container[style*="max-width: 600px"] .form-box input[type="file"]::file-selector-button:hover {
    filter: brightness(1.12);

    transform: translateY(-1px);
}


/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */

body .container[style*="max-width: 600px"] .form-box button[type="submit"] {
    width: 100%;

    min-height: 48px;

    margin-top: 3px;

    border: 0;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    color: #fff;

    font-size: .76rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .75px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 26px rgba(139,92,246,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

body .container[style*="max-width: 600px"] .form-box button[type="submit"]:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0,199,199,.24),
        0 0 34px rgba(139,92,246,.16);
}

body .container[style*="max-width: 600px"] .form-box button[type="submit"]:active {
    transform: translateY(0);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    body .container[style*="max-width: 600px"] {
        margin-top: 32px !important;

        padding-left: 16px;
        padding-right: 16px;
    }

    body .container[style*="max-width: 600px"] > h2 {
        font-size: 1.35rem;
    }

    body .container[style*="max-width: 600px"] .form-box {
        padding: 22px 18px !important;

        border-radius: 10px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - MEMBER DOWNLOADS PAGE
   ========================================================================== */


/* PAGE WRAPPER */

body .container[style*="max-width: 800px"] {
    max-width: 900px !important;

    margin-top: 52px !important;
    margin-bottom: 75px !important;
}


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

body .container[style*="max-width: 800px"] > h2 {
    position: relative;

    margin: 0 0 10px !important;

    padding-left: 20px;

    color: #fff !important;

    font-size: 1.7rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .9px;
}

body .container[style*="max-width: 800px"] > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.20);
}

body .container[style*="max-width: 800px"] > h2 i {
    margin-right: 8px;

    color: var(--accent-cyan) !important;

    text-shadow:
        0 0 10px rgba(0,199,199,.15);
}


/* INTRO TEXT */

body .container[style*="max-width: 800px"] > p {
    max-width: 680px;

    margin: 0 0 34px !important;

    color: #8e97a5 !important;

    font-size: .94rem;

    line-height: 1.7;
}


/* ==========================================================================
   DOWNLOAD CARD
   ========================================================================== */

body .container[style*="max-width: 800px"] > div {
    position: relative;

    overflow: hidden;

    padding: 28px !important;

    border: 1px solid #272f3a !important;
    border-left: 1px solid #272f3a !important;

    border-radius: 13px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.08),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.26);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

body .container[style*="max-width: 800px"] > div::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}

body .container[style*="max-width: 800px"] > div:hover {
    transform: translateY(-4px);

    border-color: rgba(0,199,199,.34) !important;

    box-shadow:
        0 26px 55px rgba(0,0,0,.34),
        0 0 20px rgba(0,199,199,.05),
        0 0 30px rgba(139,92,246,.04);
}


/* ==========================================================================
   RESOURCE BADGE
   ========================================================================== */

body .container[style*="max-width: 800px"] > div span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 9px !important;

    border: 1px solid rgba(0,199,199,.28) !important;

    border-radius: 5px !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.10),
            rgba(139,92,246,.06)
        ) !important;

    color: var(--accent-cyan) !important;

    font-size: .64rem !important;

    font-weight: 850 !important;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/* ==========================================================================
   RESOURCE TITLE
   ========================================================================== */

body .container[style*="max-width: 800px"] > div h3 {
    margin: 12px 0 7px !important;

    color: #fff !important;

    font-size: 1.25rem !important;

    font-weight: 800;

    line-height: 1.35;
}


/* ==========================================================================
   RESOURCE DESCRIPTION
   ========================================================================== */

body .container[style*="max-width: 800px"] > div p {
    max-width: 600px;

    margin: 0 !important;

    color: #8f98a6 !important;

    font-size: .84rem !important;

    line-height: 1.65;
}


/* ==========================================================================
   DOWNLOAD BUTTON
   ========================================================================== */

body .container[style*="max-width: 800px"] > div .btn-action-primary {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 11px 18px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .72rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .6px;

    text-decoration: none !important;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 24px rgba(139,92,246,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

body .container[style*="max-width: 800px"] > div .btn-action-primary:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0,199,199,.24),
        0 0 34px rgba(139,92,246,.16);
}

body .container[style*="max-width: 800px"] > div .btn-action-primary i {
    font-size: .82rem;

    transition: transform .25s ease;
}

body .container[style*="max-width: 800px"] > div .btn-action-primary:hover i {
    transform: translateY(2px);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    body .container[style*="max-width: 800px"] {
        margin-top: 34px !important;

        padding-left: 16px;
        padding-right: 16px;
    }

    body .container[style*="max-width: 800px"] > h2 {
        font-size: 1.35rem;
    }

    body .container[style*="max-width: 800px"] > div {
        padding: 22px 18px !important;

        align-items: flex-start !important;
    }

    body .container[style*="max-width: 800px"] > div .btn-action-primary {
        width: 100%;

        margin-top: 4px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - PROFILE PAGE
   ========================================================================== */


/* PAGE WRAPPER */

.profile-container {
    max-width: 720px !important;

    margin: 48px auto 70px auto !important;
}


/* ==========================================================================
   PAGE TITLE
   ========================================================================== */

.profile-container > h2 {
    position: relative;

    margin: 0 0 28px !important;

    padding: 0 0 17px 20px !important;

    border-bottom: 1px solid #242b36 !important;

    color: #fff;

    font-size: 1.65rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .9px;
}

.profile-container > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 18px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.20);
}

.profile-container > h2 i {
    margin-right: 9px;

    color: var(--accent-cyan) !important;

    text-shadow:
        0 0 10px rgba(0,199,199,.15);
}

.profile-container > h2 span {
    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   SUCCESS MESSAGE
   ========================================================================== */

.profile-container > div[style*="#0d1e16"] {
    padding: 14px 16px !important;

    margin-bottom: 22px !important;

    border: 1px solid rgba(46,204,113,.32) !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(46,204,113,.10),
            rgba(0,199,199,.05)
        ) !important;

    color: #73e6ab !important;

    font-size: .83rem !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14);
}


/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

.profile-container > div[style*="#3a1111"] {
    padding: 14px 16px !important;

    margin-bottom: 22px !important;

    border: 1px solid rgba(255,90,100,.28) !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;

    font-size: .83rem !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14);
}


/* ==========================================================================
   PROFILE CARDS
   ========================================================================== */

.profile-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 26px !important;

    padding: 28px !important;

    border: 1px solid #272f3a !important;

    border-radius: 13px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.06),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.26);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.profile-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}

.profile-card:hover {
    transform: translateY(-3px);

    border-color: rgba(0,199,199,.32) !important;

    box-shadow:
        0 22px 50px rgba(0,0,0,.32),
        0 0 20px rgba(0,199,199,.04);
}


/* ==========================================================================
   CARD TITLES
   ========================================================================== */

.profile-card h3 {
    position: relative;

    margin: 0 0 22px !important;

    padding-bottom: 12px !important;

    border-bottom: 1px solid #242b36 !important;

    color: #fff !important;

    font-size: 1rem !important;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.profile-card h3 i {
    margin-right: 8px;

    color: var(--accent-cyan);
}


/* ==========================================================================
   LABELS
   ========================================================================== */

.profile-card label {
    display: block;

    margin: 0 0 7px !important;

    color: #9da6b3 !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .72px;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.profile-card input[type="text"],
.profile-card input[type="email"],
.profile-card input[type="password"] {
    width: 100%;

    min-height: 46px;

    margin: 0 0 20px !important;

    padding: 11px 13px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #0b0e14,
            #10141b
        ) !important;

    color: #e8ebf0 !important;

    font-size: .88rem;

    font-family: inherit;

    box-sizing: border-box;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.profile-card input[type="text"]:focus,
.profile-card input[type="email"]:focus,
.profile-card input[type="password"]:focus {
    outline: none;

    border-color: var(--accent-cyan) !important;

    background: #0b0f15 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* ==========================================================================
   READONLY USERNAME
   ========================================================================== */

.profile-card input[readonly] {
    color: #66707e !important;

    border-color: #252b35 !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0c0f15
        ) !important;

    cursor: not-allowed;

    opacity: .82;
}


/* ==========================================================================
   SAVE BUTTONS
   ========================================================================== */

.btn-save-profile {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 18px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .72rem;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .65px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 24px rgba(139,92,246,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.btn-save-profile:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.24),
        0 0 34px rgba(139,92,246,.16);
}

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


/* ==========================================================================
   FIRST CARD - PERSONAL INFORMATION
   ========================================================================== */

.profile-card:first-of-type h3 i {
    color: var(--accent-cyan);
}


/* ==========================================================================
   SECOND CARD - PASSWORD
   ========================================================================== */

.profile-card:last-of-type::before {
    background:
        linear-gradient(
            90deg,
            var(--accent-purple),
            var(--accent-cyan),
            var(--accent-magenta)
        );
}

.profile-card:last-of-type h3 i {
    color: var(--accent-purple);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .profile-container {
        margin-top: 32px !important;

        padding-left: 16px;
        padding-right: 16px;
    }

    .profile-container > h2 {
        font-size: 1.35rem;
    }

    .profile-card {
        padding: 22px 18px !important;

        border-radius: 10px !important;
    }

    .btn-save-profile {
        width: 100%;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - NEWSLETTER PAGE
   ========================================================================== */


/* ==========================================================================
   PAGE / MAIN CARD
   ========================================================================== */

.newsletter-form-container {
    position: relative;

    overflow: hidden;

    max-width: 620px !important;

    margin: 65px auto 80px !important;

    padding: 42px 38px 38px !important;

    text-align: center !important;

    border: 1px solid #272f3a !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.10),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.10),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.32),
        0 0 25px rgba(0,199,199,.035);
}


/* GRADIENT TOP LINE */

.newsletter-form-container::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE GLOW */

.newsletter-form-container::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -150px;
    right: -100px;

    border-radius: 50%;

    background: rgba(139,92,246,.10);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   FREE GIFT BADGE
   ========================================================================== */

.newsletter-badge {
    position: relative;

    z-index: 2;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0 0 20px !important;

    padding: 7px 14px !important;

    border: 1px solid rgba(0,199,199,.32) !important;

    border-radius: 30px !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.10),
            rgba(139,92,246,.06)
        ) !important;

    color: var(--accent-cyan) !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .9px !important;

    box-shadow:
        0 0 16px rgba(0,199,199,.05);
}


/* ==========================================================================
   MAIN HEADING
   ========================================================================== */

.newsletter-form-container > h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 13px !important;

    color: #fff;

    font-size: 1.75rem;

    font-weight: 850;

    line-height: 1.25;

    letter-spacing: .2px;
}


/* SMALL ACCENT UNDER TITLE */

.newsletter-form-container > h2::after {
    content: "";

    display: block;

    width: 54px;
    height: 3px;

    margin: 15px auto 0;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.18);
}


/* ==========================================================================
   INTRO TEXT
   ========================================================================== */

.newsletter-form-container > h2 + p {
    position: relative;

    z-index: 2;

    max-width: 500px !important;

    margin: 0 auto !important;

    color: #929ba9 !important;

    font-size: .92rem !important;

    line-height: 1.75 !important;
}

.newsletter-form-container > h2 + p strong {
    color: #fff;

    font-weight: 750;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.newsletter-form-container form {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex-direction: column;

    gap: 17px !important;

    margin-top: 30px !important;

    padding: 22px;

    text-align: left !important;

    border: 1px solid #252c36;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(8,11,16,.72),
            rgba(13,16,23,.78)
        );
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.newsletter-form-container label {
    display: block !important;

    margin: 0 0 8px !important;

    color: #9da6b3 !important;

    font-size: .67rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px !important;
}


/* ==========================================================================
   EMAIL INPUT
   ========================================================================== */

.newsletter-input-field {
    width: 100% !important;

    min-height: 48px;

    padding: 12px 14px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-size: .88rem !important;

    font-family: inherit;

    outline: none !important;

    box-sizing: border-box !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

.newsletter-input-field::placeholder {
    color: #596271 !important;
}

.newsletter-input-field:hover {
    border-color: #3a4350 !important;
}

.newsletter-input-field:focus {
    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 20px rgba(0,199,199,.06) !important;
}


/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */

.newsletter-submit-btn {
    position: relative;

    overflow: hidden;

    width: 100% !important;

    min-height: 49px;

    padding: 12px 18px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .74rem !important;

    font-weight: 850 !important;

    text-transform: uppercase !important;

    letter-spacing: .75px !important;

    cursor: pointer !important;

    box-shadow:
        0 0 18px rgba(0,199,199,.16),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease !important;
}

.newsletter-submit-btn:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    filter: brightness(1.09);

    box-shadow:
        0 0 25px rgba(0,199,199,.26),
        0 0 36px rgba(139,92,246,.17);
}

.newsletter-submit-btn:active {
    transform: translateY(0) scale(.995);
}


/* ==========================================================================
   PRIVACY / NO SPAM MESSAGE
   ========================================================================== */

.newsletter-form-container > form + p {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin: 24px auto 0 !important;

    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,.045);

    border-radius: 20px;

    background: rgba(255,255,255,.018);

    color: #6f7886 !important;

    font-size: .70rem !important;

    font-style: normal !important;

    line-height: 1.4;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .newsletter-form-container {
        margin: 35px 16px 60px !important;

        padding: 34px 20px 28px !important;

        border-radius: 11px !important;
    }

    .newsletter-form-container > h2 {
        font-size: 1.45rem;
    }

    .newsletter-form-container > h2 + p {
        font-size: .86rem !important;
    }

    .newsletter-form-container form {
        margin-top: 25px !important;

        padding: 18px 15px;
    }

    .newsletter-submit-btn {
        min-height: 48px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - CONTACT PAGE
   ========================================================================== */


/* ==========================================================================
   CONTACT CARD
   ========================================================================== */

.contact-container {
    position: relative;

    overflow: hidden;

    max-width: 680px !important;

    margin: 55px auto 75px !important;

    padding: 38px !important;

    border: 1px solid #272f3a !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.32),
        0 0 24px rgba(0,199,199,.035) !important;
}


/* GRADIENT TOP LINE */

.contact-container::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE BACKGROUND GLOW */

.contact-container::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -160px;
    right: -100px;

    border-radius: 50%;

    background: rgba(139,92,246,.09);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.contact-container > h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 12px !important;

    padding-left: 18px;

    color: #fff;

    font-size: 1.7rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .9px;
}

.contact-container > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.20);
}


/* ==========================================================================
   INTRO TEXT
   ========================================================================== */

.contact-container > h2 + p {
    position: relative;

    z-index: 2;

    max-width: 570px;

    margin: 0 0 30px !important;

    color: #929ba9 !important;

    font-size: .91rem !important;

    line-height: 1.7;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.contact-container form {
    position: relative;

    z-index: 2;

    padding: 24px;

    border: 1px solid #252c36;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(8,11,16,.72),
            rgba(13,16,23,.80)
        );
}


/* ==========================================================================
   FORM GROUP
   ========================================================================== */

.contact-container .form-group {
    margin-bottom: 20px !important;

    text-align: left;
}


/* ==========================================================================
   LABELS
   ========================================================================== */

.contact-container .form-group label {
    display: block;

    margin: 0 0 7px !important;

    color: #9da6b3 !important;

    font-size: .67rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px !important;
}


/* ==========================================================================
   INPUTS + TEXTAREA
   ========================================================================== */

.contact-container .form-group input[type="text"],
.contact-container .form-group input[type="email"],
.contact-container .form-group textarea {
    width: 100%;

    padding: 12px 14px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;

    font-size: .88rem !important;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

.contact-container .form-group input[type="text"],
.contact-container .form-group input[type="email"] {
    min-height: 47px;
}

.contact-container .form-group textarea {
    min-height: 150px;

    resize: vertical;

    line-height: 1.55;
}


/* INPUT HOVER */

.contact-container .form-group input:hover,
.contact-container .form-group textarea:hover {
    border-color: #3a4350 !important;
}


/* INPUT FOCUS */

.contact-container .form-group input:focus,
.contact-container .form-group textarea:focus {
    outline: none;

    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 20px rgba(0,199,199,.06) !important;
}


/* ==========================================================================
   SEND BUTTON
   ========================================================================== */

.contact-container .btn-submit {
    width: 100%;

    min-height: 49px;

    padding: 12px 20px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .74rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px !important;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.16),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease !important;
}

.contact-container .btn-submit:hover {
    transform: translateY(-2px);

    filter: brightness(1.09);

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 25px rgba(0,199,199,.26),
        0 0 36px rgba(139,92,246,.17);
}

.contact-container .btn-submit:active {
    transform: translateY(0) scale(.995);
}


/* ==========================================================================
   SUCCESS / ERROR MESSAGES
   ========================================================================== */

.contact-container .alert {
    position: relative;

    z-index: 2;

    margin-bottom: 24px !important;

    padding: 14px 16px !important;

    border-radius: 8px !important;

    font-size: .82rem !important;

    line-height: 1.5;

    text-align: left;
}


/* ERROR */

.contact-container .alert-danger {
    border: 1px solid rgba(255,90,100,.28) !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;
}


/* SUCCESS */

.contact-container .alert-success {
    border: 1px solid rgba(46,204,113,.32) !important;

    background:
        linear-gradient(
            135deg,
            rgba(46,204,113,.10),
            rgba(0,199,199,.05)
        ) !important;

    color: #73e6ab !important;
}


/* ==========================================================================
   HONEYPOT
   ========================================================================== */

.contact-container .hidden-field {
    display: none !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .contact-container {
        margin: 35px 16px 60px !important;

        padding: 28px 20px !important;

        border-radius: 11px !important;
    }

    .contact-container > h2 {
        font-size: 1.4rem;
    }

    .contact-container form {
        padding: 19px 16px;
    }

    .contact-container .form-group {
        margin-bottom: 17px !important;
    }

    .contact-container .btn-submit {
        min-height: 48px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - ADMIN UPLOAD DASHBOARD
   ========================================================================== */


/* ==========================================================================
   MAIN UPLOAD CARD
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] {
    position: relative;

    overflow: hidden;

    max-width: 760px !important;

    margin: 55px auto 75px !important;

    padding: 34px !important;

    border: 1px solid #272f3a !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.32),
        0 0 25px rgba(0,199,199,.035);
}


/* GRADIENT TOP LINE */

body > .form-box[style*="max-width: 650px"]::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* ==========================================================================
   PAGE TITLE
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] > h2 {
    position: relative;

    margin: 0 0 28px !important;

    padding: 0 0 17px 20px;

    border-bottom: 1px solid #252c36;

    color: #fff;

    font-size: 1.55rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;
}

body > .form-box[style*="max-width: 650px"] > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 18px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.20);
}


/* ==========================================================================
   FORM
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] > form {
    position: relative;

    padding: 25px;

    border: 1px solid #252c36;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(8,11,16,.72),
            rgba(13,16,23,.80)
        );
}


/* ==========================================================================
   LABELS
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] form > label {
    display: block;

    margin: 0 0 7px;

    color: #9da6b3 !important;

    font-size: .67rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .78px;
}


/* ==========================================================================
   STANDARD INPUTS / SELECT / TEXTAREA
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] input[type="text"],
body > .form-box[style*="max-width: 650px"] select,
body > .form-box[style*="max-width: 650px"] textarea {
    width: 100% !important;

    min-height: 46px;

    margin: 0 0 20px !important;

    padding: 11px 13px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;

    font-size: .87rem;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

body > .form-box[style*="max-width: 650px"] textarea {
    min-height: 130px;

    resize: vertical !important;

    line-height: 1.55;
}

body > .form-box[style*="max-width: 650px"] input[type="text"]:focus,
body > .form-box[style*="max-width: 650px"] select:focus,
body > .form-box[style*="max-width: 650px"] textarea:focus {
    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* SELECT OPTIONS */

body > .form-box[style*="max-width: 650px"] select option {
    background: #10141b;

    color: #fff;
}


/* ==========================================================================
   TAG EDITOR
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] .tag-container {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    min-height: 48px;

    margin: 0 0 21px !important;

    padding: 8px 11px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    cursor: text;

    transition:
        border-color .22s ease,
        box-shadow .22s ease;
}

body > .form-box[style*="max-width: 650px"] .tag-container:focus-within {
    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* TAG TYPER */

body > .form-box[style*="max-width: 650px"] .tag-container input {
    flex: 1;

    min-width: 170px;

    min-height: 30px;

    margin: 0 !important;

    padding: 4px 2px !important;

    border: 0 !important;

    background: transparent !important;

    color: #fff !important;

    box-shadow: none !important;

    font-size: .82rem;
}

body > .form-box[style*="max-width: 650px"] .tag-container input::placeholder {
    color: #596271;
}


/* TAG BADGES */

body > .form-box[style*="max-width: 650px"] .tag-badge-item {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 8px !important;

    border: 1px solid rgba(0,199,199,.24) !important;

    border-radius: 5px !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.10),
            rgba(139,92,246,.06)
        ) !important;

    color: var(--accent-cyan) !important;

    font-size: .64rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* REMOVE TAG */

body > .form-box[style*="max-width: 650px"] .remove-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #ff737d !important;

    font-size: .95rem !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

body > .form-box[style*="max-width: 650px"] .remove-tag:hover {
    color: #fff !important;

    transform: scale(1.15);
}


/* ==========================================================================
   FILE UPLOADS
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] input[type="file"] {
    width: 100%;

    margin: 0 0 21px !important;

    padding: 10px;

    border: 1px dashed #35404d;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.035),
            rgba(139,92,246,.025)
        );

    color: #87909e !important;

    font-size: .76rem;

    box-sizing: border-box;

    cursor: pointer;

    transition:
        border-color .22s ease,
        background .22s ease;
}

body > .form-box[style*="max-width: 650px"] input[type="file"]:hover {
    border-color: rgba(0,199,199,.45);

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.07),
            rgba(139,92,246,.045)
        );
}

body > .form-box[style*="max-width: 650px"] input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 8px 12px;

    border: 1px solid rgba(0,199,199,.28);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(0,199,199,.12),
            rgba(139,92,246,.08)
        );

    color: #fff;

    font-size: .65rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .45px;

    cursor: pointer;
}


/* ==========================================================================
   OPTIONAL VIDEO SECTION
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] .section-divider {
    position: relative;

    margin: 8px 0 24px !important;

    padding: 23px 20px 3px !important;

    border: 1px solid #272e39 !important;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(17,21,29,.85),
            rgba(9,12,17,.88)
        );
}

body > .form-box[style*="max-width: 650px"] .section-divider::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    border-radius: 9px 0 0 9px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-purple),
            var(--accent-cyan)
        );
}


/* VIDEO SECTION TITLE */

body > .form-box[style*="max-width: 650px"] .section-divider h4 {
    margin: 0 0 18px !important;

    color: var(--accent-cyan) !important;

    font-size: .70rem !important;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;
}

body > .form-box[style*="max-width: 650px"] .section-divider label {
    display: block;

    margin: 0 0 7px;

    color: #929ba8;

    font-size: .65rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .65px;
}


/* ==========================================================================
   FACEBOOK PUBLISH BOX
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] .fb-toggle-box {
    margin: 5px 0 24px !important;

    padding: 14px 16px !important;

    border: 1px solid #29313c !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(24,119,242,.055),
            rgba(13,16,23,.90)
        ) !important;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

body > .form-box[style*="max-width: 650px"] .fb-toggle-box:hover {
    border-color: rgba(24,119,242,.48) !important;

    background:
        linear-gradient(
            135deg,
            rgba(24,119,242,.09),
            rgba(13,16,23,.90)
        ) !important;

    box-shadow:
        0 0 18px rgba(24,119,242,.05);
}

body > .form-box[style*="max-width: 650px"] .fb-toggle-box label {
    margin: 0 !important;

    color: #dce1e8 !important;

    font-size: .78rem !important;

    font-weight: 650 !important;

    text-transform: none !important;

    letter-spacing: .15px !important;
}

body > .form-box[style*="max-width: 650px"] .fb-toggle-box input[type="checkbox"] {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    accent-color: #1877F2;

    cursor: pointer;
}


/* ==========================================================================
   MAIN SUBMIT BUTTON
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] > form > button[type="submit"] {
    width: 100%;

    min-height: 50px;

    padding: 12px 20px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .75rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.16),
        0 0 28px rgba(139,92,246,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

body > .form-box[style*="max-width: 650px"] > form > button[type="submit"]:hover {
    transform: translateY(-2px);

    filter: brightness(1.09);

    box-shadow:
        0 0 25px rgba(0,199,199,.26),
        0 0 38px rgba(139,92,246,.17);
}

body > .form-box[style*="max-width: 650px"] > form > button[type="submit"]:active {
    transform: translateY(0);
}


/* ==========================================================================
   PHP STATUS / RESULT MESSAGES
   ========================================================================== */

body > .form-box[style*="max-width: 650px"] > p {
    margin: 0 0 10px !important;

    padding: 11px 14px;

    border: 1px solid #29313c;

    border-radius: 7px;

    background: #0d1117;

    font-size: .78rem;

    line-height: 1.5;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 800px) {

    body > .form-box[style*="max-width: 650px"] {
        margin: 35px 16px 60px !important;

        padding: 25px 18px !important;

        border-radius: 11px !important;
    }

    body > .form-box[style*="max-width: 650px"] > h2 {
        font-size: 1.3rem;
    }

    body > .form-box[style*="max-width: 650px"] > form {
        padding: 20px 15px;
    }

    body > .form-box[style*="max-width: 650px"] .section-divider {
        padding: 20px 15px 2px !important;
    }

    body > .form-box[style*="max-width: 650px"] .tag-container input {
        min-width: 120px;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - MANAGEMENT DASHBOARD
   ========================================================================== */


/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */

body > .container[style*="margin-top: 40px"] {
    margin-top: 48px !important;
    margin-bottom: 80px;
}


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

body > .container[style*="margin-top: 40px"] > h2 {
    position: relative;

    margin: 0 0 9px;

    padding-left: 19px;

    color: #fff;

    font-size: 1.75rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .9px;
}

body > .container[style*="margin-top: 40px"] > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.20);
}

body > .container[style*="margin-top: 40px"] > h2 + p {
    margin: 0 0 28px !important;

    color: #808997 !important;

    font-size: .91rem;

    line-height: 1.6;
}


/* ==========================================================================
   QUICK ACTIONS
   ========================================================================== */

.quick-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 11px !important;

    margin: 25px 0 32px !important;

    padding: 16px;

    border: 1px solid #252d38;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(19,23,31,.82),
            rgba(10,13,18,.92)
        );
}


/* ACTION BUTTONS */

.quick-actions .btn-action,
.dashboard-section .btn-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 10px 15px !important;

    border: 1px solid #303946 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #151a22,
            #10141b
        ) !important;

    color: #d9dee6 !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .55px;

    text-decoration: none;

    cursor: pointer;

    box-shadow: none;

    transition:
        transform .22s ease,
        border-color .22s ease,
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.quick-actions .btn-action:hover,
.dashboard-section .btn-action:hover {
    transform: translateY(-2px);

    border-color: rgba(0,199,199,.40) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,199,199,.08),
            rgba(139,92,246,.06)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        0 0 18px rgba(0,199,199,.04);
}


/* PRIMARY ACTION */

.quick-actions .btn-action-primary,
.modal-content .btn-action-primary {
    border-color: transparent !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 24px rgba(139,92,246,.08);
}

.quick-actions .btn-action-primary:hover,
.modal-content .btn-action-primary:hover {
    border-color: transparent !important;

    filter: brightness(1.08);

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.24),
        0 0 34px rgba(139,92,246,.14);
}


/* ==========================================================================
   ALERT PANEL
   ========================================================================== */

.alert-box-container {
    position: relative;

    overflow: hidden;

    margin: 0 0 30px !important;

    padding: 20px !important;

    border: 1px solid rgba(255,202,40,.22) !important;

    border-radius: 11px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,202,40,.06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #17150d,
            #0e1015
        ) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);
}

.alert-box-container::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ffca28,
            var(--accent-cyan),
            var(--accent-purple)
        );
}


/* ALERT SUCCESS */

.alert-box-container.alert-success {
    border-color: rgba(46,204,113,.26) !important;

    background:
        linear-gradient(
            135deg,
            rgba(46,204,113,.08),
            rgba(0,199,199,.04)
        ) !important;

    color: #74e2a8 !important;

    border-radius: 10px !important;
}


/* ALERT HEADER */

.alert-header {
    margin-bottom: 14px !important;

    color: #ffd45d !important;

    font-size: .74rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .75px !important;
}


/* ALERT ITEMS */

.alert-list {
    gap: 8px !important;
}

.alert-item-wrapper {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.04);

    border-radius: 7px !important;

    background:
        rgba(0,0,0,.18) !important;
}

.alert-item-header {
    padding: 11px 13px !important;

    transition: background .2s ease;
}

.alert-item-header:hover {
    background: rgba(255,255,255,.025) !important;
}

.alert-item-title {
    color: #cdd3dc !important;

    font-size: .82rem !important;
}


/* DETAILS */

.alert-details-list {
    padding: 10px 14px 14px 14px !important;

    border-top: 1px solid rgba(255,255,255,.04) !important;

    background: rgba(0,0,0,.14);
}

.alert-details-list li {
    padding: 8px 0 !important;

    border-bottom: 1px solid rgba(255,255,255,.04) !important;

    color: #8e97a5 !important;

    font-size: .78rem !important;
}

.alert-details-list img {
    width: 30px !important;
    height: 30px !important;

    border-radius: 5px !important;

    border: 1px solid #303845;
}

.alert-details-list a {
    color: var(--accent-cyan) !important;

    font-size: .68rem !important;

    font-weight: 800;

    text-decoration: none !important;
}


/* ==========================================================================
   DASHBOARD GRID
   ========================================================================== */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(270px, 1fr));

    gap: 18px !important;

    margin-top: 0 !important;
}


/* ==========================================================================
   STAT CARDS
   ========================================================================== */

.stat-box {
    position: relative;

    overflow: hidden;

    min-height: 170px;

    padding: 24px !important;

    border: 1px solid #272f3a !important;

    border-radius: 12px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.055),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.045),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 16px 36px rgba(0,0,0,.24) !important;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.stat-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 48px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );
}

.stat-box:hover {
    transform: translateY(-4px);

    border-color: rgba(0,199,199,.30) !important;

    box-shadow:
        0 22px 46px rgba(0,0,0,.30),
        0 0 18px rgba(0,199,199,.035) !important;
}


/* STAT TITLES */

.stat-box h3 {
    margin: 0 0 17px !important;

    color: #8f98a6 !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .85px !important;
}

.stat-box h3 i {
    font-size: .9rem;
}


/* MAIN STAT NUMBER */

.stat-number {
    margin: 0 !important;

    color: var(--accent-cyan) !important;

    font-size: 2.45rem !important;

    font-weight: 850 !important;

    line-height: 1;
}


/* ==========================================================================
   STAT LISTS
   ========================================================================== */

.stat-list {
    margin: 0 !important;

    padding: 0 !important;
}

.stat-list li {
    min-height: 38px;

    padding: 8px 0 !important;

    border-bottom: 1px solid rgba(255,255,255,.045) !important;

    color: #d8dde4;

    font-size: .82rem !important;
}

.stat-list li:last-child {
    border-bottom: none !important;
}

.stat-label {
    font-size: .68rem !important;

    letter-spacing: .55px;
}


/* LINKS IN STAT CARDS */

.stat-box a {
    color: var(--accent-cyan) !important;

    text-decoration: none !important;

    transition: color .2s ease;
}

.stat-box a:hover {
    color: #fff !important;
}


/* ==========================================================================
   DASHBOARD SECTIONS
   ========================================================================== */

.dashboard-section {
    position: relative;

    overflow: hidden;

    margin-top: 30px !important;

    margin-bottom: 30px !important;

    padding: 26px !important;

    border: 1px solid #272f3a !important;

    border-radius: 12px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.055),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}

.dashboard-section::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}

.dashboard-section > h3 {
    position: relative;

    margin: 0 0 18px !important;

    color: #fff !important;

    font-size: .78rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px !important;
}

.dashboard-section > h3 i {
    margin-right: 7px;

    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   MEMBER DOWNLOAD CARDS
   ========================================================================== */

.dashboard-section > div[style*="display: grid"] > div {
    border: 1px solid #29323d !important;

    border-left: 1px solid #29323d !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            #10141b,
            #0b0e13
        ) !important;

    padding: 16px !important;
}

.dashboard-section > div[style*="display: grid"] > div:hover {
    border-color: rgba(0,199,199,.28) !important;
}


/* ==========================================================================
   ALBUM MANAGEMENT
   ========================================================================== */

.album-manage-list {
    margin: 8px 0 0 !important;

    padding: 0 8px 0 0 !important;

    max-height: 330px !important;
}

.album-manage-list li {
    gap: 15px;

    padding: 12px 4px !important;

    border-bottom: 1px solid rgba(255,255,255,.045) !important;
}

.album-manage-list li strong {
    color: #e6eaf0 !important;
}

.album-manage-list li span {
    color: #68717e !important;
}


/* SCROLLBAR */

.album-manage-list::-webkit-scrollbar {
    width: 6px;
}

.album-manage-list::-webkit-scrollbar-track {
    background: #0b0e13;
}

.album-manage-list::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--accent-cyan),
            var(--accent-purple)
        );

    border-radius: 10px;
}


/* ==========================================================================
   MODAL OVERLAY
   ========================================================================== */

.modal-overlay {
    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    background:
        rgba(4,6,10,.82) !important;
}


/* ==========================================================================
   MODAL
   ========================================================================== */

.modal-content {
    position: relative;

    overflow: hidden;

    width: 90%;

    max-width: 470px;

    padding: 27px !important;

    border: 1px solid #303845 !important;

    border-radius: 13px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.08),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.07),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.55) !important;
}

.modal-content::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* MODAL HEADER */

.modal-header {
    margin-bottom: 21px !important;

    padding-bottom: 13px !important;

    border-bottom: 1px solid #272e38 !important;
}

.modal-header h3 {
    margin: 0;

    color: #fff !important;

    font-size: 1rem !important;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .45px;
}

.modal-header h3 i {
    color: var(--accent-cyan) !important;
}


/* CLOSE */

.modal-close {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 1px solid #313946;

    border-radius: 7px;

    color: #7f8997 !important;

    font-size: 1.25rem !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.modal-close:hover {
    color: #fff !important;

    border-color: rgba(0,199,199,.35);

    background: rgba(0,199,199,.05);
}


/* ==========================================================================
   MODAL FORM CONTROLS
   ========================================================================== */

.modal-content label {
    color: #929ba8 !important;

    font-size: .65rem !important;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.modal-content input[type="text"],
.modal-content input[type="file"],
.modal-content select,
.modal-content textarea {
    width: 100% !important;

    padding: 11px 12px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* FILE INPUT */

.modal-content input[type="file"] {
    color: #828b98 !important;
}

.modal-content input[type="file"]::file-selector-button {
    margin-right: 10px;

    padding: 7px 10px;

    border: 1px solid rgba(0,199,199,.25);

    border-radius: 5px;

    background: rgba(0,199,199,.08);

    color: #fff;

    font-size: .62rem;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;
}


/* CANCEL BUTTONS */

.modal-content button[type="button"]:not(.btn-action) {
    border: 1px solid #333c48 !important;

    border-radius: 7px !important;

    background: #11151c !important;

    color: #919aa7 !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.modal-content button[type="button"]:not(.btn-action):hover {
    color: #fff !important;

    border-color: #48515e !important;

    background: #171c24 !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

    body > .container[style*="margin-top: 40px"] {
        margin-top: 32px !important;
    }

    body > .container[style*="margin-top: 40px"] > h2 {
        font-size: 1.4rem;
    }

    .quick-actions {
        padding: 13px;

        gap: 9px !important;
    }

    .quick-actions .btn-action {
        flex: 1 1 calc(50% - 9px);

        min-width: 145px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stat-box {
        min-height: 0;

        padding: 21px !important;
    }

    .dashboard-section {
        padding: 21px 17px !important;
    }

    .album-manage-list li {
        align-items: flex-start;

        flex-direction: column;
    }

    .album-manage-list li .btn-action {
        width: 100%;
    }

    .alert-item-header {
        gap: 12px;
    }

    .alert-details-list li {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

    .modal-content {
        width: calc(100% - 28px);

        padding: 22px 18px !important;
    }
}


@media (max-width: 480px) {

    .quick-actions .btn-action {
        flex-basis: 100%;
    }

    .stat-number {
        font-size: 2.15rem !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - BLOG MANAGEMENT
   ========================================================================== */


/* PAGE HEADER */
.blog-header-row {
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 28px !important;

    padding: 0 0 18px 0 !important;

    border-bottom: 1px solid #252d38 !important;
}

.blog-header-row h2 {
    position: relative;

    padding-left: 19px;

    color: #fff !important;

    font-size: 1.55rem !important;

    font-weight: 850;

    letter-spacing: .8px;
}

.blog-header-row h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.18);
}

.blog-header-row h2 i {
    color: var(--accent-cyan) !important;
}

.blog-header-row span {
    display: inline-block;

    margin-top: 7px;

    color: #7f8997 !important;

    font-size: .77rem !important;
}


/* BACK LINK */
body > .container[style*="margin-top: 40px"] > p:first-child a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #87919f !important;

    font-size: .74rem;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: color .2s ease;
}

body > .container[style*="margin-top: 40px"] > p:first-child a:hover {
    color: var(--accent-cyan) !important;
}


/* MAIN ACTION BUTTON */
.blog-header-row .btn-action {
    border: 1px solid transparent !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    padding: 11px 16px !important;

    font-size: .68rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .6px;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 24px rgba(139,92,246,.08);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.blog-header-row .btn-action:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.23),
        0 0 34px rgba(139,92,246,.14);
}


/* ==========================================================================
   BLOG EDITOR CARD
   ========================================================================== */

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] {
    position: relative;

    overflow: hidden;

    max-width: 860px !important;

    margin: 0 auto 45px !important;

    padding: 30px !important;

    border: 1px solid #29313d !important;

    border-top: 1px solid #29313d !important;

    border-radius: 13px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.06),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.28);
}

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"]::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* EDITOR TITLE */
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] > h3 {
    margin: 0 0 24px !important;

    padding-bottom: 13px !important;

    border-bottom: 1px solid #252d38 !important;

    color: #fff !important;

    font-size: .95rem !important;

    font-weight: 850;

    letter-spacing: .65px;
}

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] > h3 i {
    color: var(--accent-cyan);
}


/* LABELS */
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] label {
    color: #929ba8 !important;

    font-size: .66rem !important;

    font-weight: 850 !important;

    letter-spacing: .7px;
}


/* INPUTS */
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] input[type="text"],
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] textarea {
    width: 100% !important;

    padding: 11px 13px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease;
}

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] input:focus,
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] textarea:focus {
    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* FEATURED IMAGE BOX */
body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] form
> div[style*="background: #111"] {
    border: 1px solid #29313c !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            #10141b,
            #0b0e13
        ) !important;
}

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] input[type="file"] {
    width: 100%;

    padding: 10px;

    border: 1px dashed #35404d;

    border-radius: 7px;

    background: rgba(255,255,255,.015);

    color: #828b98 !important;

    box-sizing: border-box;
}

body > .container[style*="margin-top: 40px"]
> div[style*="max-width: 800px"] input[type="file"]::file-selector-button {
    margin-right: 10px;

    padding: 7px 11px;

    border: 1px solid rgba(0,199,199,.25);

    border-radius: 5px;

    background: rgba(0,199,199,.08);

    color: #fff;

    font-size: .62rem;

    font-weight: 850;

    text-transform: uppercase;

    cursor: pointer;
}


/* ==========================================================================
   BLOG TABLE
   ========================================================================== */

.blog-table {
    overflow: hidden;

    border: 1px solid #29313d !important;

    border-radius: 11px !important;

    background:
        linear-gradient(
            145deg,
            #141820,
            #0d1016
        ) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}

.blog-table th {
    padding: 13px 15px !important;

    border-bottom: 1px solid #2c3440 !important;

    background:
        linear-gradient(
            180deg,
            #171c24,
            #12161d
        ) !important;

    color: var(--accent-cyan) !important;

    font-size: .67rem !important;

    font-weight: 850;

    letter-spacing: .7px !important;
}

.blog-table td {
    padding: 13px 15px !important;

    border-bottom: 1px solid rgba(255,255,255,.045) !important;

    color: #aeb6c1;

    font-size: .81rem !important;
}

.blog-table tbody tr {
    transition:
        background .2s ease,
        transform .2s ease;
}

.blog-table tbody tr:hover {
    background: rgba(0,199,199,.025);
}

.blog-table img {
    width: 50px !important;
    height: 38px !important;

    border: 1px solid #303846 !important;

    border-radius: 5px !important;

    object-fit: cover;
}


/* STATUS BADGES */
.status-badge {
    border-radius: 20px !important;

    padding: 5px 10px !important;

    font-size: .61rem !important;

    letter-spacing: .45px;
}

.status-published {
    background: rgba(46,204,113,.08) !important;

    color: #67dda0 !important;

    border: 1px solid rgba(46,204,113,.25) !important;
}

.status-draft {
    background: rgba(255,170,0,.08) !important;

    color: #ffc45a !important;

    border: 1px solid rgba(255,170,0,.24) !important;
}


/* EDIT BUTTON */
.blog-table .btn-edit {
    border: 1px solid rgba(0,199,199,.25) !important;

    border-radius: 6px !important;

    background: rgba(0,199,199,.055) !important;

    color: var(--accent-cyan) !important;
}

.blog-table .btn-edit:hover {
    background: rgba(0,199,199,.12) !important;

    color: #fff !important;
}


/* DELETE BUTTON */
.blog-table .btn-delete {
    border: 1px solid rgba(255,80,90,.22) !important;

    border-radius: 6px !important;

    background: rgba(170,30,40,.08) !important;

    color: #ff858e !important;
}

.blog-table .btn-delete:hover {
    background: rgba(200,40,50,.18) !important;

    color: #fff !important;
}


/* MOBILE BLOG TABLE */
@media (max-width: 850px) {

    .blog-header-row {
        align-items: flex-start;

        flex-direction: column;
    }

    .blog-header-row .btn-action {
        width: 100%;

        justify-content: center;
    }

    .blog-table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

    body > .container[style*="margin-top: 40px"]
    > div[style*="max-width: 800px"] {
        padding: 22px 17px !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - USER & ACCESS MANAGEMENT
   ========================================================================== */


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.page-header-row {
    margin-bottom: 24px !important;

    padding-bottom: 17px !important;

    border-bottom: 1px solid #252d38 !important;
}

.page-header-row h2 {
    position: relative;

    padding-left: 19px;

    color: #fff !important;

    font-size: 1.55rem !important;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.page-header-row h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 12px rgba(0,199,199,.18);
}

.page-header-row h2 i {
    color: var(--accent-cyan) !important;
}

.page-header-row span {
    display: inline-block;

    margin-top: 7px;

    color: #7f8997 !important;

    font-size: .76rem !important;
}


/* ==========================================================================
   FILTER BAR
   ========================================================================== */

.filter-bar {
    display: flex;

    gap: 11px !important;

    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 26px !important;

    padding: 15px !important;

    border: 1px solid #29313d !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            145deg,
            #141820,
            #0d1016
        ) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18);
}

.filter-bar input[type="text"],
.filter-bar select {
    min-height: 42px;

    padding: 9px 12px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-size: .80rem !important;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.filter-bar input[type="text"] {
    min-width: 260px !important;

    flex: 1;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06);
}


/* FILTER BUTTON */
.btn-filter {
    min-height: 42px;

    padding: 9px 17px !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .67rem !important;

    font-weight: 850 !important;

    letter-spacing: .55px;

    box-shadow:
        0 0 16px rgba(0,199,199,.12);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.btn-filter:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 0 22px rgba(0,199,199,.20);
}


/* RESET */
.btn-filter-reset {
    min-height: 42px;

    padding: 9px 13px !important;

    border: 1px solid #343d49 !important;

    border-radius: 7px !important;

    background: #11151c !important;

    color: #8d96a3 !important;

    font-size: .67rem !important;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .45px;
}

.btn-filter-reset:hover {
    border-color: rgba(0,199,199,.28) !important;

    color: #fff !important;
}


/* ==========================================================================
   PERMISSIONS PANEL
   ========================================================================== */

.perm-box {
    position: relative;

    overflow: hidden;

    margin-bottom: 32px !important;

    padding: 25px !important;

    border: 1px solid #29313d !important;

    border-top: 1px solid #29313d !important;

    border-radius: 11px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}

.perm-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* PERMISSION HEADER */
.perm-box > div:first-child {
    border-bottom: 1px solid #252d38 !important;
}

.perm-box h3 {
    color: #fff !important;

    font-size: .90rem !important;

    font-weight: 850;

    letter-spacing: .55px;
}

.perm-box h3 i {
    color: var(--accent-cyan);
}


/* PRIVATE ALBUM OPTIONS */
.perm-box form > div[style*="display: grid"] label {
    border: 1px solid #29323d !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #10141b,
            #0b0e13
        ) !important;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.perm-box form > div[style*="display: grid"] label:hover {
    border-color: rgba(0,199,199,.28) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,199,199,.04),
            rgba(139,92,246,.03)
        ) !important;
}


/* ==========================================================================
   USER TABLE
   ========================================================================== */

.data-table {
    overflow: hidden;

    margin-bottom: 28px !important;

    border: 1px solid #29313d !important;

    border-radius: 11px !important;

    background:
        linear-gradient(
            145deg,
            #141820,
            #0d1016
        ) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}

.data-table th {
    padding: 13px 15px !important;

    border-bottom: 1px solid #2c3440 !important;

    background:
        linear-gradient(
            180deg,
            #171c24,
            #12161d
        ) !important;

    color: var(--accent-cyan) !important;

    font-size: .66rem !important;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .65px !important;
}

.data-table td {
    padding: 13px 15px !important;

    border-bottom: 1px solid rgba(255,255,255,.045) !important;

    color: #aeb6c1;

    font-size: .80rem !important;
}

.data-table tbody tr {
    transition: background .2s ease;
}

.data-table tbody tr:hover {
    background: rgba(0,199,199,.025);
}


/* ==========================================================================
   STATUS BADGES
   ========================================================================== */

.badge-status {
    border-radius: 20px !important;

    padding: 5px 10px !important;

    font-size: .60rem !important;

    font-weight: 850 !important;

    letter-spacing: .45px;

    box-shadow: none !important;
}

.badge-active {
    background: rgba(46,204,113,.08) !important;

    color: #67dda0 !important;

    border: 1px solid rgba(46,204,113,.25) !important;
}

.badge-inactive {
    background: rgba(255,170,0,.08) !important;

    color: #ffc45a !important;

    border: 1px solid rgba(255,170,0,.24) !important;
}

.badge-admin {
    background: rgba(38,140,255,.08) !important;

    color: #73b5ff !important;

    border: 1px solid rgba(38,140,255,.24) !important;
}


/* ==========================================================================
   ACCESS / DELETE BUTTONS
   ========================================================================== */

.data-table .btn-perm {
    border: 1px solid rgba(0,199,199,.25) !important;

    border-radius: 6px !important;

    background: rgba(0,199,199,.055) !important;

    color: var(--accent-cyan) !important;
}

.data-table .btn-perm:hover {
    background: rgba(0,199,199,.12) !important;

    color: #fff !important;
}

.data-table .btn-delete {
    border: 1px solid rgba(255,80,90,.22) !important;

    border-radius: 6px !important;

    background: rgba(170,30,40,.08) !important;

    color: #ff858e !important;
}

.data-table .btn-delete:hover {
    background: rgba(200,40,50,.18) !important;

    color: #fff !important;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination-container {
    gap: 7px !important;

    margin: 32px 0 20px !important;
}

.pagination-link,
.pagination-disabled {
    min-width: 38px;

    min-height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 12px !important;

    border-radius: 7px !important;

    font-size: .72rem !important;
}

.pagination-link {
    border: 1px solid #303846 !important;

    background:
        linear-gradient(
            145deg,
            #141820,
            #0e1117
        ) !important;

    color: #aeb6c1 !important;

    transition:
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.pagination-link:hover {
    transform: translateY(-1px);

    border-color: rgba(0,199,199,.35) !important;

    color: #fff !important;
}

.pagination-link.active {
    border-color: transparent !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 15px rgba(0,199,199,.16);
}

.pagination-disabled {
    border: 1px solid #242a33 !important;

    background: #0c0f14 !important;

    color: #454e5a !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 900px) {

    .filter-bar {
        align-items: stretch;

        flex-direction: column;
    }

    .filter-bar input[type="text"],
    .filter-bar select,
    .btn-filter,
    .btn-filter-reset {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }

    .data-table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

    .perm-box {
        padding: 21px 16px !important;
    }

    .page-header-row h2 {
        font-size: 1.3rem !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - LOGIN / 2FA
   ========================================================================== */


/* ==========================================================================
   LOGIN CARD
   ========================================================================== */

.login-box {
    position: relative;

    overflow: hidden;

    max-width: 460px !important;

    margin: 72px auto 85px !important;

    padding: 34px !important;

    border: 1px solid #29313d !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 26px 60px rgba(0,0,0,.34),
        0 0 24px rgba(0,199,199,.035) !important;
}


/* GRADIENT TOP LINE */

.login-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE GLOW */

.login-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -150px;
    right: -110px;

    border-radius: 50%;

    background: rgba(139,92,246,.09);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.login-box h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 24px !important;

    padding: 0 0 15px 19px !important;

    border-bottom: 1px solid #252d38 !important;

    color: #fff !important;

    font-size: 1.2rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px !important;
}

.login-box h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 16px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.18);
}

.login-box h2 i {
    margin-right: 8px;

    color: var(--accent-cyan);
}


/* ==========================================================================
   INTRO / 2FA TEXT
   ========================================================================== */

.login-box > p,
.login-box form > p {
    position: relative;

    z-index: 2;

    color: #87919f !important;

    font-size: .82rem !important;

    line-height: 1.6;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.login-box form {
    position: relative;

    z-index: 2;
}


/* ==========================================================================
   LABELS
   ========================================================================== */

.login-box label {
    display: block;

    margin: 0 0 7px !important;

    color: #929ba8 !important;

    font-size: .66rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .72px;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;

    min-height: 47px;

    margin: 0 0 18px !important;

    padding: 11px 13px !important;

    border: 1px solid #303846 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;

    font-size: .88rem;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.login-box input[type="text"]:hover,
.login-box input[type="password"]:hover {
    border-color: #3a4350 !important;
}

.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05);
}


/* ==========================================================================
   2FA CODE FIELD
   ========================================================================== */

.login-box #totp_code {
    min-height: 56px;

    padding: 10px 14px !important;

    text-align: center;

    color: #fff !important;

    font-size: 1.45rem !important;

    font-weight: 800;

    letter-spacing: 8px !important;

    border-color: rgba(0,199,199,.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,199,199,.04),
            rgba(139,92,246,.03)
        ) !important;
}

.login-box #totp_code:focus {
    border-color: var(--accent-cyan) !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 24px rgba(0,199,199,.08);
}


/* ==========================================================================
   TRUST DEVICE CHECKBOX
   ========================================================================== */

.trust-checkbox-wrap {
    display: flex !important;

    align-items: center;

    gap: 10px !important;

    margin: 5px 0 22px !important;

    padding: 11px 13px;

    border: 1px solid #29323d;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #10141b,
            #0b0e13
        );

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.trust-checkbox-wrap:hover {
    border-color: rgba(0,199,199,.25);

    background:
        linear-gradient(
            145deg,
            rgba(0,199,199,.04),
            rgba(139,92,246,.025)
        );
}

.trust-checkbox-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    accent-color: var(--accent-cyan);

    cursor: pointer;
}

.trust-checkbox-wrap span {
    color: #a0a9b6 !important;

    font-size: .78rem !important;

    font-weight: 500 !important;

    text-transform: none !important;

    letter-spacing: 0;
}


/* ==========================================================================
   LOGIN BUTTON
   ========================================================================== */

.btn-login {
    width: 100%;

    min-height: 49px;

    padding: 12px 18px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .74rem !important;

    font-weight: 850 !important;

    text-transform: uppercase;

    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.15),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

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

    filter: brightness(1.08);

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 35px rgba(139,92,246,.16);
}

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


/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

.error-msg {
    position: relative;

    z-index: 2;

    margin-bottom: 22px !important;

    padding: 13px 14px !important;

    border: 1px solid rgba(255,90,100,.28) !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;

    font-size: .80rem !important;

    line-height: 1.5;

    box-shadow:
        0 10px 25px rgba(0,0,0,.13);
}

.error-msg i {
    margin-right: 6px;
}


/* ==========================================================================
   LOGIN LINKS
   ========================================================================== */

.login-links {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-top: 22px !important;

    padding-top: 17px;

    border-top: 1px solid #252d38;

    font-size: .73rem !important;
}

.login-links a {
    color: #7e8794 !important;

    text-decoration: none !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

.login-links a:hover {
    color: var(--accent-cyan) !important;

    transform: translateY(-1px);
}


/* ==========================================================================
   BACK TO LOGIN LINK ON 2FA
   ========================================================================== */

.login-box form p[style*="text-align: center"] a {
    color: #7e8794 !important;

    font-size: .72rem !important;

    text-decoration: none !important;

    transition: color .2s ease;
}

.login-box form p[style*="text-align: center"] a:hover {
    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .login-box {
        margin: 38px 16px 60px !important;

        padding: 28px 20px !important;

        border-radius: 11px !important;
    }

    .login-box h2 {
        font-size: 1.08rem !important;
    }

    .login-links {
        flex-direction: column;

        align-items: center;

        gap: 10px;

        text-align: center;
    }

    .login-box #totp_code {
        letter-spacing: 6px !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - CREATE ACCOUNT / REGISTRATION
   ========================================================================== */


/* MAIN REGISTRATION CARD */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) {
    position: relative;
    overflow: hidden;

    max-width: 500px !important;
    margin: 65px auto 80px !important;
    padding: 35px !important;

    border: 1px solid #29313d !important;
    border-radius: 14px !important;

    background:
        radial-gradient(circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 34%
        ),
        radial-gradient(circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 26px 60px rgba(0,0,0,.34),
        0 0 24px rgba(0,199,199,.035) !important;
}


/* GRADIENT TOP LINE */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE BACKGROUND GLOW */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)::after {
    content: "";

    position: absolute;
    width: 220px;
    height: 220px;

    top: -155px;
    right: -110px;

    border-radius: 50%;

    background: rgba(139,92,246,.09);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) > h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 26px !important;
    padding: 0 0 15px 19px !important;

    border-bottom: 1px solid #252d38 !important;

    color: #fff !important;

    font-size: 1.2rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 16px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.18);
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) > h2 i {
    margin-right: 8px;

    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) form {
    position: relative;
    z-index: 2;
}


/* LABELS */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) label {
    display: block;

    margin: 0 0 7px !important;

    color: #929ba8 !important;

    font-size: .66rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .72px;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
input[type="text"],

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
input[type="email"],

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
input[type="password"] {

    width: 100% !important;
    min-height: 47px;

    margin: 0 0 18px !important;
    padding: 11px 13px !important;

    border: 1px solid #303846 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;
    font-size: .88rem;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


/* HOVER */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) input:hover {
    border-color: #3a4350 !important;
}


/* FOCUS */
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh) input:focus {
    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05) !important;
}


/* ==========================================================================
   SIGN UP BUTTON
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
button[type="submit"] {

    width: 100%;
    min-height: 49px;

    margin-top: 3px;
    padding: 12px 18px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .74rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.15),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
button[type="submit"]:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 35px rgba(139,92,246,.16);
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
button[type="submit"]:active {
    transform: translateY(0);
}


/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
form > div[style*="background: #3a1111"],
.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> div[style*="background: #3a1111"] {

    position: relative;
    z-index: 2;

    margin-bottom: 22px !important;
    padding: 13px 14px !important;

    border: 1px solid rgba(255,90,100,.28) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;

    font-size: .80rem !important;
    line-height: 1.5;
}


/* ==========================================================================
   SUCCESS / ACTIVATION MESSAGE
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> div[style*="background: #0d1e16"] {

    position: relative;
    z-index: 2;

    padding: 20px !important;

    border: 1px solid rgba(46,204,113,.28) !important;
    border-radius: 9px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(46,204,113,.08),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #101a17,
            #0c1114
        ) !important;

    color: #8edeb1 !important;

    line-height: 1.65;

    box-shadow:
        0 15px 30px rgba(0,0,0,.18);
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> div[style*="background: #0d1e16"] h4 {

    margin: 0 0 10px !important;

    color: #fff !important;

    font-size: .95rem;

    font-weight: 800;
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> div[style*="background: #0d1e16"] h4 i {

    margin-right: 6px;

    color: #63d99b;
}


/* ==========================================================================
   SIGN IN LINK
   ========================================================================== */

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> p:last-child {

    position: relative;
    z-index: 2;

    margin: 22px 0 0 !important;
    padding-top: 17px;

    border-top: 1px solid #252d38;

    color: #7e8794 !important;

    font-size: .75rem !important;
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> p:last-child a {

    color: var(--accent-cyan) !important;

    font-weight: 750;

    text-decoration: none;

    transition: color .2s ease;
}

.form-box:has(#gebruikersnaam):has(#wachtwoord_herh)
> p:last-child a:hover {
    color: #fff !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .form-box:has(#gebruikersnaam):has(#wachtwoord_herh) {
        margin: 38px 16px 60px !important;

        padding: 28px 20px !important;

        border-radius: 11px !important;
    }

    .form-box:has(#gebruikersnaam):has(#wachtwoord_herh) > h2 {
        font-size: 1.08rem !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - FORGOT PASSWORD
   ========================================================================== */

.forgot-password-box {
    position: relative;
    overflow: hidden;

    max-width: 500px !important;
    margin: 65px auto 80px !important;
    padding: 35px !important;

    border: 1px solid #29313d !important;
    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 26px 60px rgba(0,0,0,.34),
        0 0 24px rgba(0,199,199,.035) !important;
}


/* GRADIENT TOP LINE */

.forgot-password-box::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE PURPLE GLOW */

.forgot-password-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -155px;
    right: -110px;

    border-radius: 50%;

    background: rgba(139,92,246,.09);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.forgot-password-box > h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 24px !important;
    padding: 0 0 15px 19px !important;

    border-bottom: 1px solid #252d38 !important;

    color: #fff !important;

    font-size: 1.2rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.forgot-password-box > h2::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 16px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.18);
}

.forgot-password-box > h2 i {
    margin-right: 8px;

    color: var(--accent-cyan) !important;
}


/* ==========================================================================
   INTRO TEXT
   ========================================================================== */

.forgot-password-box > p {
    position: relative;
    z-index: 2;

    color: #87919f !important;

    font-size: .84rem !important;

    line-height: 1.65;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.forgot-password-box form {
    position: relative;
    z-index: 2;
}

.forgot-password-box form label {
    display: block;

    margin: 0 0 7px !important;

    color: #929ba8 !important;

    font-size: .66rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .72px;
}


/* EMAIL INPUT */

.forgot-password-box input[type="email"] {
    width: 100% !important;
    min-height: 47px;

    margin: 0 0 18px !important;
    padding: 11px 13px !important;

    border: 1px solid #303846 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #090c11,
            #0e1219
        ) !important;

    color: #fff !important;

    font-family: inherit;
    font-size: .88rem;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.forgot-password-box input[type="email"]:hover {
    border-color: #3a4350 !important;
}

.forgot-password-box input[type="email"]:focus {
    border-color: var(--accent-cyan) !important;

    background: #090d13 !important;

    box-shadow:
        0 0 0 3px rgba(0,199,199,.06),
        0 0 18px rgba(0,199,199,.05) !important;
}


/* ==========================================================================
   SEND RESET LINK BUTTON
   ========================================================================== */

.forgot-password-box button[type="submit"] {
    width: 100%;
    min-height: 49px;

    padding: 12px 18px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    font-size: .74rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .8px;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(0,199,199,.15),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.forgot-password-box button[type="submit"]:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    color: #fff !important;

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 35px rgba(139,92,246,.16);
}

.forgot-password-box button[type="submit"]:active {
    transform: translateY(0);
}


/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

.forgot-password-box
> div[style*="background: #3a1111"] {
    position: relative;
    z-index: 2;

    margin-bottom: 22px !important;
    padding: 13px 14px !important;

    border: 1px solid rgba(255,90,100,.28) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            135deg,
            rgba(160,30,40,.14),
            rgba(90,20,30,.08)
        ) !important;

    color: #ff8f98 !important;

    font-size: .80rem !important;
    line-height: 1.5;
}


/* ==========================================================================
   EMAIL SENT SUCCESS BOX
   ========================================================================== */

.forgot-password-box
> div[style*="background: #0d1e16"] {
    position: relative;
    z-index: 2;

    padding: 20px !important;

    border: 1px solid rgba(46,204,113,.28) !important;
    border-radius: 9px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(46,204,113,.08),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #101a17,
            #0c1114
        ) !important;

    color: #8edeb1 !important;

    line-height: 1.65;

    box-shadow:
        0 15px 30px rgba(0,0,0,.18);
}

.forgot-password-box
> div[style*="background: #0d1e16"] h4 {
    margin: 0 0 10px !important;

    color: #fff !important;

    font-size: .95rem;
    font-weight: 800;
}

.forgot-password-box
> div[style*="background: #0d1e16"] h4 i {
    margin-right: 6px;

    color: #63d99b;
}

.forgot-password-box
> div[style*="background: #0d1e16"] p {
    color: #94bfa8 !important;

    font-size: .84rem !important;

    line-height: 1.65;
}


/* ==========================================================================
   BOTTOM LOGIN LINK
   ========================================================================== */

.forgot-password-box > p:last-child {
    margin: 22px 0 0 !important;
    padding-top: 17px;

    border-top: 1px solid #252d38;

    text-align: center;
}

.forgot-password-box > p:last-child a {
    color: var(--accent-cyan) !important;

    font-weight: 750;

    text-decoration: none !important;

    transition: color .2s ease;
}

.forgot-password-box > p:last-child a:hover {
    color: #fff !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .forgot-password-box {
        margin: 38px 16px 60px !important;

        padding: 28px 20px !important;

        border-radius: 11px !important;
    }

    .forgot-password-box > h2 {
        font-size: 1.08rem !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - FAVORITES
   ========================================================================== */

.favorites-page {
    margin-top: 48px !important;
    margin-bottom: 80px !important;
}


/* BACK TO GALLERY */

.favorites-page > p:first-child {
    margin-bottom: 18px !important;
}

.favorites-page > p:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #7f8997 !important;

    font-size: .78rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .55px;

    transition:
        color .22s ease,
        transform .22s ease;
}

.favorites-page > p:first-child a:hover {
    color: var(--accent-cyan) !important;
    transform: translateX(-3px);
}


/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.favorites-page > div:nth-of-type(1) {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin-bottom: 30px !important;
    padding: 0 0 18px 19px !important;

    border-bottom: 1px solid #252c37 !important;
}

.favorites-page > div:nth-of-type(1)::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 19px;

    width: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.20);
}

.favorites-page > div:nth-of-type(1) h2 {
    margin: 0 !important;

    color: #fff;

    font-size: 1.55rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.favorites-page > div:nth-of-type(1) h2 span {
    color: #fff !important;
}

.favorites-page > div:nth-of-type(1) h2 i {
    margin-right: 5px;

    color: #ff5d75;

    filter:
        drop-shadow(
            0 0 7px rgba(255,93,117,.24)
        );
}


/* ==========================================================================
   CLEAR ALL
   ========================================================================== */

.favorites-page > div:nth-of-type(1) button {
    padding: 8px 14px !important;

    border: 1px solid #343c48 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            145deg,
            #12161d,
            #0c0f15
        ) !important;

    color: #929ba8 !important;

    font-size: .68rem !important;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .55px;

    cursor: pointer;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.favorites-page > div:nth-of-type(1) button:hover {
    color: #ff8b98 !important;

    border-color: rgba(255,93,117,.38) !important;

    background:
        rgba(110,25,38,.12) !important;

    transform: translateY(-1px);

    box-shadow:
        0 0 14px rgba(255,93,117,.07);
}


/* ==========================================================================
   FAVORITES GRID
   ========================================================================== */

.favorites-page #favorites-container {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 24px;
}

.favorites-page #favorites-container .galerij-item {
    overflow: hidden;

    border: 1px solid #252c37;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #141820,
            #0d1016
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);
}

.favorites-page #favorites-container .galerij-item:hover {
    border-color: rgba(0,199,199,.30);

    transform: translateY(-4px);

    box-shadow:
        0 18px 36px rgba(0,0,0,.34),
        0 0 18px rgba(0,199,199,.05),
        0 0 24px rgba(139,92,246,.04);
}


/* IMAGE */

.favorites-page #favorites-container .galerij-item > a {
    display: block;
    overflow: hidden;
}

.favorites-page #favorites-container .galerij-item img {
    width: 100%;

    transition:
        transform .45s cubic-bezier(.25,1,.5,1),
        filter .35s ease;
}

.favorites-page #favorites-container .galerij-item:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.favorites-page .view-mode {
    border-top: 1px solid rgba(0,199,199,.12);

    background:
        linear-gradient(
            180deg,
            rgba(16,20,28,.98),
            rgba(10,13,18,.99)
        );
}

.favorites-page .view-mode > div {
    padding: 15px !important;
}

.favorites-page .view-mode p {
    position: relative;

    margin: 0 0 12px !important;
    padding: 0 0 11px !important;

    color: #e4e8ee !important;

    font-size: .92rem !important;
    font-weight: 750 !important;

    line-height: 1.45;

    border-bottom: 1px solid #232a34;
}


/* VIEW ITEM LINK */

.favorites-page .view-mode a {
    color: var(--accent-cyan) !important;

    font-size: .72rem !important;
    font-weight: 800 !important;

    text-transform: uppercase;
    letter-spacing: .4px;

    transition:
        color .22s ease,
        transform .22s ease;
}

.favorites-page .view-mode a:hover {
    color: #fff !important;
}


/* ==========================================================================
   REMOVE FAVORITE
   ========================================================================== */

.favorites-page .btn-fav-remove {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 9px !important;

    border: 1px solid transparent !important;
    border-radius: 6px;

    background: transparent !important;

    color: #777f8b !important;

    font-size: .66rem !important;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .4px;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease;
}

.favorites-page .btn-fav-remove:hover {
    color: #ff7887 !important;

    border-color: rgba(255,93,117,.20) !important;

    background:
        rgba(255,93,117,.055) !important;
}


/* ==========================================================================
   EMPTY FAVORITES
   ========================================================================== */

.favorites-page .favorites-empty {
    position: relative;

    overflow: hidden;

    width: 100%;

    margin-top: 25px;

    padding: 65px 30px !important;

    text-align: center;

    border: 1px solid #272e39;

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(139,92,246,.08),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #141820,
            #0c0f15
        );

    color: #858e9b !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.22);
}

.favorites-page .favorites-empty::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}

.favorites-page .favorites-empty > i {
    color: #ff6079 !important;

    font-size: 2.8rem !important;

    filter:
        drop-shadow(
            0 0 13px rgba(255,96,121,.17)
        );
}

.favorites-page .favorites-empty h3 {
    margin: 14px 0 8px;

    color: #fff;

    font-size: 1.15rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .6px;
}

.favorites-page .favorites-empty p {
    max-width: 540px;

    margin: 0 auto;

    color: #858e9b;

    font-size: .88rem;

    line-height: 1.7;
}


/* EXPLORE GALLERY */

.favorites-page .favorites-empty .btn {
    display: inline-flex !important;

    margin-top: 23px !important;

    padding: 11px 23px;

    border: none;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #fff !important;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 25px rgba(139,92,246,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.favorites-page .favorites-empty .btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 32px rgba(139,92,246,.16);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .favorites-page {
        margin-top: 35px !important;
    }

    .favorites-page > div:nth-of-type(1) {
        align-items: flex-start !important;
        gap: 15px;

        flex-direction: column;

        padding-left: 18px !important;
    }

    .favorites-page > div:nth-of-type(1) h2 {
        font-size: 1.25rem;
    }

    .favorites-page > div:nth-of-type(1) button {
        width: 100%;
    }

    .favorites-page #favorites-container {
        grid-template-columns: 1fr;
    }

    .favorites-page .favorites-empty {
        padding: 48px 20px !important;
    }
}
/* ==========================================================================
   PIXELS & PROMPTS - NEWSLETTER STATUS PAGES
   ========================================================================== */

.subscription-status-box,
.subscription-confirm-box,
.unsubscribe-box {
    position: relative;
    overflow: hidden;

    max-width: 560px !important;

    margin: 0 auto !important;
    padding: 36px !important;

    text-align: center;

    border: 1px solid #29313d !important;
    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(0,199,199,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139,92,246,.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #151922,
            #0d1016
        ) !important;

    box-shadow:
        0 26px 60px rgba(0,0,0,.34),
        0 0 24px rgba(0,199,199,.035) !important;
}


/* GRADIENT TOP LINE */

.subscription-status-box::before,
.subscription-confirm-box::before,
.unsubscribe-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}


/* SUBTLE GLOW */

.subscription-status-box::after,
.subscription-confirm-box::after,
.unsubscribe-box::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -150px;
    right: -110px;

    border-radius: 50%;

    background: rgba(139,92,246,.09);

    filter: blur(55px);

    pointer-events: none;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

.subscription-status-box h2,
.subscription-confirm-box h2,
.unsubscribe-box h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 18px !important;

    color: #ffffff !important;

    font-size: 1.35rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.subscription-status-box h2::after,
.subscription-confirm-box h2::after,
.unsubscribe-box h2::after {
    content: "";

    display: block;

    width: 52px;
    height: 3px;

    margin: 12px auto 0;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple)
        );

    box-shadow:
        0 0 10px rgba(0,199,199,.15);
}


/* ==========================================================================
   STATUS ICON
   ========================================================================== */

.subscription-status-box > div:first-child,
.subscription-confirm-box > div:first-child {
    position: relative;
    z-index: 2;

    margin-bottom: 14px !important;

    font-size: 2.7rem !important;

    filter:
        drop-shadow(
            0 0 12px rgba(0,199,199,.15)
        );
}


/* ==========================================================================
   STATUS TEXT
   ========================================================================== */

.subscription-status-box > p,
.subscription-confirm-box > p,
.unsubscribe-box > p {
    position: relative;
    z-index: 2;

    margin-bottom: 26px !important;

    color: #919aa7 !important;

    font-size: .92rem !important;
    line-height: 1.7 !important;
}


/* ==========================================================================
   PRIMARY BUTTONS
   ========================================================================== */

.subscription-status-box > .btn,
.subscription-confirm-box > .btn,
.unsubscribe-box > .btn {
    position: relative;
    z-index: 2;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 12px 22px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #ffffff !important;

    font-size: .74rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .75px;

    box-shadow:
        0 0 18px rgba(0,199,199,.14),
        0 0 26px rgba(139,92,246,.10);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.subscription-status-box > .btn:hover,
.subscription-confirm-box > .btn:hover,
.unsubscribe-box > .btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 35px rgba(139,92,246,.16);
}


/* ==========================================================================
   CONFIRM PAGE - WELCOME GIFT
   ========================================================================== */

.subscription-confirm-box > div[style*="background-color: #121212"] {
    position: relative;
    z-index: 2;

    overflow: hidden;

    margin: 30px 0 !important;
    padding: 26px 22px !important;

    border: 1px solid #29313d !important;
    border-left: 1px solid #29313d !important;
    border-radius: 11px !important;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0,199,199,.08),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #11161d,
            #0c1015
        ) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.20);
}

.subscription-confirm-box > div[style*="background-color: #121212"]::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--accent-cyan),
            var(--accent-purple),
            var(--accent-magenta)
        );
}

.subscription-confirm-box
> div[style*="background-color: #121212"]
> div:first-child {
    font-size: 2rem !important;

    margin-bottom: 9px !important;
}

.subscription-confirm-box
> div[style*="background-color: #121212"]
h3 {
    margin: 0 0 10px !important;

    color: #ffffff !important;

    font-size: 1.08rem !important;
    font-weight: 800 !important;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.subscription-confirm-box
> div[style*="background-color: #121212"]
p {
    margin-bottom: 20px !important;

    color: #929ba8 !important;

    font-size: .86rem !important;
    line-height: 1.65 !important;
}

.subscription-confirm-box
> div[style*="background-color: #121212"]
strong {
    color: #ffffff;
}


/* DOWNLOAD PDF BUTTON */

.subscription-confirm-box
> div[style*="background-color: #121212"]
.btn {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    padding: 12px 22px !important;

    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            var(--accent-cyan),
            var(--accent-purple)
        ) !important;

    color: #ffffff !important;

    font-size: .72rem !important;
    font-weight: 850 !important;

    text-transform: uppercase;
    letter-spacing: .65px;

    box-shadow:
        0 0 18px rgba(0,199,199,.16),
        0 0 25px rgba(139,92,246,.10);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.subscription-confirm-box
> div[style*="background-color: #121212"]
.btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(0,199,199,.25),
        0 0 34px rgba(139,92,246,.17);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .subscription-status-box,
    .subscription-confirm-box,
    .unsubscribe-box {
        padding: 28px 20px !important;

        border-radius: 11px !important;
    }

    .subscription-status-box h2,
    .subscription-confirm-box h2,
    .unsubscribe-box h2 {
        font-size: 1.15rem !important;
    }

    .subscription-confirm-box
    > div[style*="background-color: #121212"] {
        padding: 22px 16px !important;
    }

    .subscription-confirm-box
    > div[style*="background-color: #121212"]
    .btn {
        width: 100%;
    }
}