/* ==========================================================
   THE TROPICAL DANCE
   PREMIUM THEME V4
   Version : 4.0
   Author : Mickael Potel 
==========================================================*/


/* ==========================================================
   01 - IMPORT FONT
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ==========================================================
   02 - VARIABLES
==========================================================*/

:root{

    --background:#090909;
    --background2:#111111;
    --background3:#181818;

    --gold:#D4AF37;
    --gold-light:#FFD86B;

    --pink:#FF2EA6;
    --pink-light:#FF6AC8;

    --white:#FFFFFF;
    --text:#D7D7D7;
    --text-light:#AFAFAF;

    --success:#28C76F;
    --danger:#EA5455;

    --glass:rgba(255,255,255,.06);
    --glass-border:rgba(255,255,255,.08);

    --radius:24px;

    --shadow:
        0 20px 60px rgba(0,0,0,.45);

    --transition:.35s;

}


/* ==========================================================
   03 - RESET
==========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

    line-height:1.7;

}


/* ==========================================================
   04 - GLOBAL
==========================================================*/

.container{

    width:min(1380px,92%);

    margin:auto;

}

section{

    position:relative;

    padding:110px 0;

}

img{

    max-width:100%;

    display:block;

    user-select:none;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    padding:0;

    margin:0;

}

::selection{

    background:var(--gold);

    color:#111;

}


/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#121212;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold-light);

}


/* ==========================================================
   05 - TYPOGRAPHY
==========================================================*/

h1{

    font-size:clamp(3.5rem,7vw,6rem);

    font-weight:800;

    line-height:1.05;

    color:white;

}

h2{

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    color:white;

}

h3{

    font-size:2rem;

    color:white;

    font-weight:700;

}

h4{

    font-size:1.35rem;

    color:white;

    font-weight:700;

}

p{

    color:var(--text);

    font-size:1.05rem;

    line-height:1.9;

}

.section-mini{

    display:inline-block;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    font-weight:700;

    color:var(--gold);

}

.section-title{

    text-align:center;

    max-width:900px;

    margin:auto;

    margin-bottom:70px;

}

.section-title h2{

    margin:20px 0;

}

.section-title strong{

    color:var(--gold);

}

.section-title p{

    max-width:760px;

    margin:auto;

}


/* ==========================================================
   06 - HEADER
==========================================================*/

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(9,9,9,.70);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    transition:.35s;

}

.main-header.scrolled{

    background:#090909;

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

}

.header-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    min-height:105px;

}

.logo{

    flex-shrink:0;

}

.logo img{

    height:90px;

    width:auto;

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.05);

}


/* ==========================================================
   07 - NAVIGATION
==========================================================*/

.desktop-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.desktop-menu a{

    position:relative;

    color:white;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

}

.desktop-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--pink)
    );

    transition:.35s;

}

.desktop-menu a:hover{

    color:var(--gold);

}

.desktop-menu a:hover::after{

    width:100%;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

.header-social{

    display:flex;

    gap:12px;

}

.header-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:white;

}

.header-social a:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

}
/* ==========================================================
   08 - HERO
==========================================================*/

.hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#090909;

}

.hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    animation:heroZoom 30s linear infinite alternate;

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(9,9,9,.90) 10%,
            rgba(9,9,9,.45) 55%,
            rgba(9,9,9,.75) 100%
        );

}

.hero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.2fr .9fr;

    gap:80px;

    align-items:center;

    min-height:100vh;

    padding-top:120px;

    padding-bottom:60px;

}


/*============================
LEFT
============================*/

.hero-left{

    max-width:760px;

}

.status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:25px;

    letter-spacing:1px;

}

.status i{

    font-size:9px;

}

.status.open{

    background:rgba(40,199,111,.15);

    color:#28C76F;

    border:1px solid rgba(40,199,111,.35);

}

.status.closed{

    background:rgba(234,84,85,.15);

    color:#EA5455;

    border:1px solid rgba(234,84,85,.35);

}

.subtitle{

    display:block;

    margin-bottom:18px;

    color:var(--gold);

    letter-spacing:6px;

    text-transform:uppercase;

    font-weight:700;

    font-size:13px;

}

.hero-left h1{

    margin-bottom:25px;

}

.hero-left h1 span{

    color:var(--gold);

}

.hero-left p{

    max-width:640px;

    font-size:1.15rem;

    margin-bottom:45px;

    color:#F3F3F3;

}


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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:17px 34px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color:#111;

    font-weight:700;

    box-shadow:0 15px 35px rgba(212,175,55,.35);

}

.btn-gold:hover{

    transform:translateY(-5px);

    color:#111;

}

.btn-dark{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

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

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

    backdrop-filter:blur(12px);

    color:white;

    font-weight:600;

}

.btn-dark:hover{

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

    transform:translateY(-5px);

    color:white;

}


/*============================
RIGHT CARD
============================*/

.hero-right{

    display:flex;

    justify-content:center;

}

.next-event-card{

    width:100%;

    max-width:470px;

    background:rgba(20,20,20,.80);

    backdrop-filter:blur(20px);

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

    border-radius:32px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(0,0,0,.45);

}

.event-image{

    height:260px;

}

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.event-content{

    padding:35px;

}

.badge-event{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

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

    color:var(--gold);

    font-size:13px;

    margin-bottom:18px;

}

.event-content h3{

    margin-bottom:22px;

}

.event-info{

    display:grid;

    gap:14px;

    margin-bottom:28px;

}

.event-info div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#DDD;

}

.event-info i{

    color:var(--gold);

    width:20px;

}

.btn-event{

    display:block;

    text-align:center;

    width:100%;

    padding:15px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        var(--pink),
        var(--gold)
    );

    color:white;

    font-weight:700;

}

.btn-event:hover{

    transform:translateY(-4px);

    color:white;

}


/*============================
SCROLL
============================*/

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:10;

}

.scroll-down span{

    display:block;

    width:34px;

    height:56px;

    border:2px solid rgba(255,255,255,.5);

    border-radius:30px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    background:white;

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    top:10px;

    animation:scrollDown 2s infinite;

}


/*============================
ANIMATIONS
============================*/

@keyframes heroZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.15);

    }

}

@keyframes scrollDown{

    0%{

        opacity:0;

        top:10px;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:32px;

    }

}
/* ==========================================================
   09 - WHY TROPICAL
==========================================================*/

.why-tropical{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #090909 0%,
        #101010 100%
    );

    overflow:hidden;

}

.why-tropical::before{

    content:"";

    position:absolute;

    top:-250px;
    right:-250px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.12),
        transparent 70%
    );

}

.why-tropical::after{

    content:"";

    position:absolute;

    bottom:-250px;
    left:-250px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.10),
        transparent 70%
    );

}

.why-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:35px;

    margin-top:70px;

}

.why-card{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border-radius:30px;

    padding:45px 35px;

    overflow:hidden;

    transition:.35s;

}

.why-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(212,175,55,.05),
        rgba(255,46,166,.03)
    );

    opacity:0;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-12px);

    border-color:rgba(212,175,55,.30);

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.why-card:hover::before{

    opacity:1;

}

.why-icon{

    position:relative;

    z-index:2;

    width:85px;

    height:85px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--pink)
    );

    box-shadow:
    0 15px 35px rgba(212,175,55,.30);

}

.why-card h3{

    position:relative;

    z-index:2;

    margin-bottom:18px;

    color:white;

    font-size:1.45rem;

}

.why-card p{

    position:relative;

    z-index:2;

    color:#D8D8D8;

    line-height:1.9;

}

.why-card:hover h3{

    color:var(--gold);

}

.why-card:hover .why-icon{

    transform:rotate(8deg) scale(1.08);

    transition:.35s;

}

/* Animation apparition */

.why-card{

    animation:fadeUp .8s ease both;

}

.why-card:nth-child(2){

    animation-delay:.15s;

}

.why-card:nth-child(3){

    animation-delay:.30s;

}

.why-card:nth-child(4){

    animation-delay:.45s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   10 - RESIDENT DJ & PHOTOS OF THE MONTH
==========================================================*/

.tropical-highlights{

    background:#0d0d0d;
    position:relative;
    overflow:hidden;

}

.tropical-highlights::before{

    content:"";

    position:absolute;

    top:-250px;
    right:-250px;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.08),
        transparent 70%
    );

}

.tropical-highlights::after{

    content:"";

    position:absolute;

    bottom:-250px;
    left:-250px;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.10),
        transparent 70%
    );

}

.highlight-title{

    color:white;

    font-size:2rem;

    font-weight:700;

    margin-bottom:35px;

    display:flex;

    align-items:center;

    gap:14px;

}

.highlight-title i{

    color:var(--gold);

}

/*============================
Resident Grid
============================*/

.resident-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.resident-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.03)
    );

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

    padding:35px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(20px);

}

.resident-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.30);

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.resident-avatar{

    width:150px;

    height:150px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    border:4px solid var(--gold);

    box-shadow:0 12px 35px rgba(212,175,55,.35);

    margin-bottom:25px;

}

.resident-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.resident-card:hover img{

    transform:scale(1.12);

}

.resident-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(212,175,55,.12);

    color:var(--gold);

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.resident-card h4{

    color:white;

    margin-bottom:12px;

}

.resident-card p{

    color:#d7d7d7;

    margin-bottom:25px;

}

.btn-resident{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    padding:15px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--pink)
    );

    color:white;

    font-weight:700;

}

.btn-resident:hover{

    transform:translateY(-4px);

    color:white;

}

/*============================
Photo Grid
============================*/

.photo-grid{

    display:grid;

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

    gap:20px;

}

.photo-grid img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:24px;

    border:2px solid rgba(255,255,255,.06);

    transition:.45s;

    cursor:pointer;

}

.photo-grid img:hover{

    transform:scale(1.05);

    border-color:var(--gold);

    box-shadow:0 18px 45px rgba(0,0,0,.40);

}

/*============================
Glow Effect
============================*/

.resident-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(212,175,55,.08),
        rgba(255,46,166,.05)
    );

    opacity:0;

    transition:.35s;

}

.resident-card:hover::before{

    opacity:1;

}

.photo-grid img:nth-child(1){

    animation:float1 6s ease-in-out infinite;

}

.photo-grid img:nth-child(2){

    animation:float2 7s ease-in-out infinite;

}

.photo-grid img:nth-child(3){

    animation:float2 8s ease-in-out infinite;

}

.photo-grid img:nth-child(4){

    animation:float1 9s ease-in-out infinite;

}

/*============================
Animations
============================*/

@keyframes float1{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes float2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}
/* ==========================================================
   11 - NEXT EVENT
==========================================================*/

.next-event-home{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #090909,
        #111111
    );

    overflow:hidden;

}

.next-event-home::before{

    content:"";

    position:absolute;

    right:-220px;
    top:-220px;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.12),
        transparent 70%
    );

}

.next-event-home::after{

    content:"";

    position:absolute;

    left:-220px;
    bottom:-220px;

    width:550px;
    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.10),
        transparent 70%
    );

}

.event-home-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/*==============================
IMAGE
==============================*/

.event-home-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.event-home-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.event-home-image:hover img{

    transform:scale(1.08);

}


/*==============================
CONTENT
==============================*/

.event-home-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.event-home-content h2{

    margin:18px 0 25px;

    color:white;

    line-height:1.15;

}

.event-home-content h2 span{

    color:var(--gold);

}

.event-home-content p{

    color:#dddddd;

    margin-bottom:35px;

}


/*==============================
INFOS
==============================*/

.event-home-content ul{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:40px;

}

.event-home-content li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 22px;

    border-radius:18px;

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

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

    color:white;

    transition:.30s;

}

.event-home-content li:hover{

    transform:translateX(8px);

    border-color:rgba(212,175,55,.30);

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

}


/*==============================
BUTTON
==============================*/

.event-home-content .btn-gold{

    width:max-content;

    min-width:230px;

    justify-content:center;

}


/*==============================
FLOATING BADGE
==============================*/

.event-home-image::before{

    content:"NEXT EVENT";

    position:absolute;

    top:25px;

    left:25px;

    z-index:3;

    padding:12px 22px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--pink)
    );

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

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

}


/*==============================
IMAGE SHADOW
==============================*/

.event-home-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        transparent 45%,
        rgba(0,0,0,.45)
    );

}
/* ==========================================================
   GRID SYSTEM V4
==========================================================*/

.grid{
    display:grid;
    gap:30px;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:30px;
}

.grid-auto{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.align-center{
    align-items:center;
}

.justify-center{
    justify-content:center;
}

.text-center{
    text-align:center;
}

.gap-20{
    gap:20px;
}

.gap-30{
    gap:30px;
}

.gap-40{
    gap:40px;
}

.gap-50{
    gap:50px;
}


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

@media(max-width:992px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .grid-auto{

        grid-template-columns:1fr;

    }

}

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

@media(max-width:991px){

    .event-home-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .event-home-content{

        text-align:center;

    }

    .event-home-content ul{

        text-align:left;

    }

    .event-home-content .btn-gold{

        margin:auto;

    }

}
/* ==========================================================
   12 - CONTEST
==========================================================*/

.contest-home{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #101010,
        #090909
    );

    overflow:hidden;

}

.contest-home::before{

    content:"";

    position:absolute;

    top:-280px;
    left:-280px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.10),
        transparent 70%
    );

}

.contest-home::after{

    content:"";

    position:absolute;

    right:-280px;
    bottom:-280px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.08),
        transparent 70%
    );

}

.contest-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}


/*==================================
LEFT
==================================*/

.contest-left h2{

    margin:20px 0;

}

.contest-left h2 span{

    color:var(--gold);

}

.contest-left p{

    margin-bottom:35px;

    max-width:620px;

}


/*==================================
PRIZES
==================================*/

.contest-prizes{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.prize{

    padding:16px 24px;

    border-radius:20px;

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

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

    color:white;

    font-weight:600;

    transition:.35s;

}

.prize:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.30);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}


/*==================================
RIGHT CARD
==================================*/

.contest-right{

    display:flex;

    justify-content:center;

}

.contest-card{

    width:100%;

    max-width:460px;

    border-radius:35px;

    overflow:hidden;

    padding:45px;

    text-align:center;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(18px);

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

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.contest-card h3{

    color:white;

    margin-bottom:35px;

}


/*==================================
COUNTDOWN
==================================*/

#contest-countdown{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

#contest-countdown span{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:82px;

    height:82px;

    border-radius:20px;

    background:
    linear-gradient(
        145deg,
        rgba(212,175,55,.18),
        rgba(255,46,166,.12)
    );

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

    font-size:24px;

    font-weight:800;

    color:white;

}

#contest-countdown small{

    margin-top:8px;

    font-size:11px;

    text-transform:uppercase;

    color:#cfcfcf;

    letter-spacing:1px;

}

.contest-card p{

    color:#d6d6d6;

    margin-top:20px;

}


/*==================================
PARTICIPATE BUTTON
==================================*/

.contest-home .btn-gold{

    min-width:220px;

}


/*==================================
FLOAT EFFECT
==================================*/

.contest-card{

    animation:contestFloat 5s ease-in-out infinite;

}

@keyframes contestFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    .contest-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .contest-left{

        text-align:center;

    }

    .contest-prizes{

        justify-content:center;

    }

}
/* ==========================================================
   13 - LATEST NEWS
==========================================================*/

.news-home{

    position:relative;

    background:linear-gradient(
        180deg,
        #090909,
        #111111
    );

    overflow:hidden;

}

.news-home::before{

    content:"";

    position:absolute;

    top:-220px;
    right:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.08),
        transparent 70%
    );

}

.news-home::after{

    content:"";

    position:absolute;

    bottom:-220px;
    left:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.08),
        transparent 70%
    );

}

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

.news-home .row{

    position:relative;

    z-index:2;

}

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

.news-card{

    height:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:28px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(16px);

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

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.news-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.30);

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

/*=========================
IMAGE
=========================*/

.news-image{

    overflow:hidden;

    height:240px;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.news-card:hover .news-image img{

    transform:scale(1.08);

}

/*=========================
CONTENT
=========================*/

.news-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.news-date{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(212,175,55,.12);

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.news-content h3{

    color:white;

    margin-bottom:18px;

    line-height:1.35;

}

.news-content p{

    color:#d7d7d7;

    margin-bottom:30px;

    flex:1;

}

/*=========================
BUTTON
=========================*/

.btn-news{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:15px;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        var(--gold),
        var(--pink)
    );

    color:white;

    font-weight:700;

    transition:.35s;

}

.btn-news:hover{

    transform:translateY(-4px);

    color:white;

}

/*=========================
VIEW ALL
=========================*/

.news-home .text-center{

    margin-top:70px !important;

}

.news-home .btn-gold{

    min-width:250px;

}

/*=========================
ANIMATION
=========================*/

.news-card{

    animation:fadeNews .7s ease both;

}

.news-card:nth-child(2){

    animation-delay:.15s;

}

.news-card:nth-child(3){

    animation-delay:.30s;

}

@keyframes fadeNews{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

    .news-image{

        height:220px;

    }

    .news-content{

        padding:25px;

    }

}
/* ==========================================================
   14 - GALLERY
==========================================================*/

.gallery-home{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #111111,
        #090909
    );

    overflow:hidden;

}

.gallery-home::before{

    content:"";

    position:absolute;

    top:-250px;
    left:-250px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.08),
        transparent 70%
    );

}

.gallery-home::after{

    content:"";

    position:absolute;

    bottom:-250px;
    right:-250px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,46,166,.08),
        transparent 70%
    );

}


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

.gallery-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:28px;

}


/*=====================================
ITEM
=====================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    cursor:pointer;

    background:#181818;

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

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    transition:.40s;

}

.gallery-item:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.30);

}


/*=====================================
IMAGE
=====================================*/

.gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.55s;

}

.gallery-item:hover img{

    transform:scale(1.10);

}


/*=====================================
OVERLAY
=====================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent 30%,

        rgba(0,0,0,.70)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}

.gallery-item:hover::before{

    opacity:1;

}


/*=====================================
ICON
=====================================*/

.gallery-item::after{

    content:"\f00e";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.7);

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        var(--gold),
        var(--pink)
    );

    color:white;

    font-size:28px;

    opacity:0;

    transition:.35s;

    z-index:3;

}

.gallery-item:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}


/*=====================================
BOTTOM SHADOW
=====================================*/

.gallery-item .caption{

    position:absolute;

    bottom:25px;

    left:25px;

    z-index:3;

    color:white;

    font-weight:700;

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

}

.gallery-item:hover .caption{

    opacity:1;

    transform:translateY(0);

}


/*=====================================
VIEW GALLERY BUTTON
=====================================*/

.gallery-home .text-center{

    margin-top:70px !important;

}

.gallery-home .btn-gold{

    min-width:260px;

}


/*=====================================
FLOAT
=====================================*/

.gallery-item:nth-child(odd){

    animation:galleryFloat1 7s ease-in-out infinite;

}

.gallery-item:nth-child(even){

    animation:galleryFloat2 8s ease-in-out infinite;

}

@keyframes galleryFloat1{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes galleryFloat2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(6px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item img{

        height:260px;

    }

}
/* ==========================================================
   15 - MEMBER AREA
==========================================================*/

.member-home{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #090909,
        #111111
    );

    overflow:hidden;

}

.member-wrapper{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:70px;

    align-items:center;

}

.member-left h2{

    margin:20px 0;

}

.member-left h2 span{

    color:var(--gold);

}

.member-left p{

    max-width:620px;

    margin-bottom:35px;

}


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

.member-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


/*=========================
RIGHT CARD
=========================*/

.member-card{

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(18px);

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

    border-radius:32px;

    padding:45px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.member-card h3{

    margin-bottom:30px;

    color:white;

}

.member-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.member-card li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 20px;

    border-radius:16px;

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

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

    color:white;

    transition:.30s;

}

.member-card li:hover{

    transform:translateX(8px);

    border-color:rgba(212,175,55,.30);

}


/* ==========================================================
   16 - CALL TO ACTION
==========================================================*/

.cta-tropical{

    position:relative;

    overflow:hidden;

    background:url("../img/hero.jpg") center center/cover;

}

.cta-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.82),

        rgba(0,0,0,.72)

    );

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    text-align:center;

    padding:120px 20px;

}

.cta-content h2{

    color:white;

    margin:25px 0;

    font-size:clamp(2.5rem,5vw,4.5rem);

}

.cta-content p{

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

    color:#ececec;

    font-size:1.15rem;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.cta-buttons .btn-gold{

    min-width:240px;

}

.cta-buttons .btn-dark{

    min-width:240px;

}


/*=========================
Glow
=========================*/

.cta-content::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(212,175,55,.10),

        transparent 70%

    );

    z-index:-1;

}


/*=========================
Responsive
=========================*/

@media(max-width:991px){

    .member-wrapper{

        grid-template-columns:1fr;

    }

    .member-left{

        text-align:center;

    }

    .member-buttons{

        justify-content:center;

    }

    .member-card{

        margin:auto;

        max-width:600px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

}
/* ==========================================================
   17 - FOOTER
==========================================================*/

.footer{

    position:relative;

    background:#050505;

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

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top,
        rgba(212,175,55,.08),
        transparent 60%
    );

}

.footer .container{

    position:relative;

    z-index:2;

}

.footer h3,
.footer h4{

    color:var(--gold);

    margin-bottom:25px;

}

.footer p{

    color:#cfcfcf;

}

.footer a{

    color:#d8d8d8;

    transition:.30s;

}

.footer a:hover{

    color:var(--gold);

}

.footer-bottom{

    margin-top:60px;

    padding-top:30px;

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

    text-align:center;

    color:#999;

    font-size:14px;

}


/* ==========================================================
   18 - FORMS
==========================================================*/

input,
textarea,
select{

    width:100%;

    padding:15px 18px;

    border-radius:18px;

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

    background:#181818;

    color:white;

    transition:.30s;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(212,175,55,.15);

}

label{

    display:block;

    margin-bottom:8px;

    color:white;

    font-weight:600;

}


/* ==========================================================
   19 - TABLES
==========================================================*/

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#151515;

    color:var(--gold);

    padding:16px;

}

td{

    padding:16px;

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

    color:#ddd;

}

tr:hover{

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

}


/* ==========================================================
   20 - ALERTS
==========================================================*/

.alert{

    border:none;

    border-radius:18px;

    padding:18px 22px;

}

.alert-success{

    background:rgba(40,199,111,.15);

    color:#28C76F;

}

.alert-danger{

    background:rgba(234,84,85,.15);

    color:#EA5455;

}


/* ==========================================================
   21 - BADGES
==========================================================*/

.badge{

    padding:8px 15px;

    border-radius:50px;

    font-weight:600;

}

.badge-gold{

    background:rgba(212,175,55,.15);

    color:var(--gold);

}

.badge-pink{

    background:rgba(255,46,166,.15);

    color:var(--pink);

}


/* ==========================================================
   22 - GLASS CARD
==========================================================*/

.glass-card{

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

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

    border-radius:28px;

    backdrop-filter:blur(18px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}


/* ==========================================================
   23 - LOADING
==========================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade{

    animation:fade .8s ease both;

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================
   24 - RESPONSIVE
==========================================================*/

@media(max-width:1200px){

    section{

        padding:90px 0;

    }

}

@media(max-width:992px){

    .hero-wrapper,
    .contest-wrapper,
    .event-home-wrapper,
    .member-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-left,
    .contest-left,
    .member-left{

        text-align:center;

    }

    .hero-buttons,
    .member-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    section{

        padding:70px 0;

    }

    .section-title{

        margin-bottom:45px;

    }

    .photo-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .btn-gold,
    .btn-dark,
    .btn-news,
    .btn-resident,
    .btn-event{

        width:100%;

    }

}


/* ==========================================================
   25 - UTILITIES
==========================================================*/

.text-gold{

    color:var(--gold)!important;

}

.text-pink{

    color:var(--pink)!important;

}

.text-white{

    color:white!important;

}

.bg-dark2{

    background:#111111;

}

.rounded-xl{

    border-radius:28px;

}

.shadow-premium{

    box-shadow:0 20px 60px rgba(0,0,0,.40);

}

.mt-80{

    margin-top:80px;

}

.mb-80{

    margin-bottom:80px;

}

.pt-80{

    padding-top:80px;

}

.pb-80{

    padding-bottom:80px;

}
/* ==========================================================
   THE TROPICAL DANCE
   V5 - FINAL INDEX OVERRIDES
   ========================================================== */


/* ==========================================================
   01 - HIGHLIGHTS
   Resident DJs + Photos
========================================================== */

.highlights-wrapper{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:50px;

    align-items:start;

}

.highlight-column{

    min-width:0;

}

.highlight-column .highlight-title{

    margin-bottom:30px;

}


/* ==========================================================
   02 - RESIDENT DJ GRID
========================================================== */

.resident-grid{

    display:grid;

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

    gap:25px;

}

.resident-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-width:0;

    overflow:hidden;

}

.resident-card h4{

    position:relative;

    z-index:2;

    color:#fff;

}

.resident-card p{

    position:relative;

    z-index:2;

    color:#d7d7d7;

}

.resident-card .btn-resident{

    position:relative;

    z-index:2;

}


/* ==========================================================
   03 - PHOTO OF THE MONTH
========================================================== */

.photo-grid{

    display:grid;

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

    gap:20px;

}

.photo-card{

    position:relative;

    margin:0;

    padding:0;

    overflow:hidden;

    border-radius:24px;

    background:#111;

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

    aspect-ratio:1 / 1;

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

}

.photo-card img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.photo-card:hover{

    border-color:rgba(212,175,55,.45);

    box-shadow:0 20px 45px rgba(0,0,0,.50);

}

.photo-card:hover img{

    transform:scale(1.08);

}


/* ==========================================================
   04 - CONTEST COUNTDOWN
========================================================== */

#contest-countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    min-height:90px;

    color:#fff;

    font-size:0;

}

#contest-countdown span{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:78px;

    height:82px;

    padding:10px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.18),
            rgba(255,46,166,.12)
        );

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

    color:#fff;

    font-size:24px;

    font-weight:800;

    line-height:1;

}

#contest-countdown span small{

    display:block;

    margin-top:8px;

    color:#cfcfcf;

    font-size:10px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

#contest-countdown:not(:has(span)){

    font-size:30px;

    letter-spacing:2px;

}


/* ==========================================================
   05 - NEWS GRID
========================================================== */

.news-home .grid-3{

    display:grid;

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

    gap:30px;

}

.news-card{

    min-width:0;

}

.news-card .news-image{

    margin:0;

}

.news-card .news-image img{

    display:block;

    width:100%;

}


/* ==========================================================
   06 - GALLERY
========================================================== */

.gallery-item{

    margin:0;

}

.gallery-item img{

    display:block;

}


/* ==========================================================
   07 - MEMBER
========================================================== */

.member-right{

    min-width:0;

}

.member-card{

    width:100%;

}

.member-card ul{

    margin:0;

    padding:0;

}


/* ==========================================================
   08 - COMMON BUTTON FIX
========================================================== */

.btn-gold,
.btn-dark,
.btn-event,
.btn-news,
.btn-resident{

    text-decoration:none;

    cursor:pointer;

}

.btn-gold i,
.btn-dark i,
.btn-event i,
.btn-news i,
.btn-resident i{

    flex-shrink:0;

}


/* ==========================================================
   09 - SECTION TITLES
========================================================== */

.section-title > .section-mini,
.section-title > span{

    display:inline-block;

    color:var(--gold);

    margin-bottom:15px;

}

.section-title h2{

    color:#fff;

}

.section-title p{

    color:#d7d7d7;

}


/* ==========================================================
   10 - MOBILE
========================================================== */

@media(max-width:992px){

    .highlights-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .resident-grid{

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

    }

    .news-home .grid-3{

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

    }

}


@media(max-width:768px){

    .highlights-wrapper{

        gap:45px;

    }

    .resident-grid{

        grid-template-columns:1fr;

    }

    .photo-grid{

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

        gap:15px;

    }

    .news-home .grid-3{

        grid-template-columns:1fr;

    }

}


@media(max-width:480px){

    .photo-grid{

        grid-template-columns:1fr;

    }

    #contest-countdown span{

        min-width:65px;

        height:70px;

        font-size:20px;

    }

}


/* ==========================================================
   11 - ACCESSIBILITY
========================================================== */

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

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

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

    }

}
/* ==========================================================
   THE TROPICAL DANCE
   CORRECTION AFFICHAGE DESKTOP
   ========================================================== */


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

/* Sur ordinateur, le menu mobile doit être totalement absent */

@media (min-width: 993px){

    .mobile-menu{

        display:none !important;

        visibility:hidden !important;

        opacity:0 !important;

        pointer-events:none !important;

    }

    .menu-overlay{

        display:none !important;

        visibility:hidden !important;

        opacity:0 !important;

        pointer-events:none !important;

    }

}


/* ----------------------------------------------------------
   HERO : TEXTE TOUJOURS VISIBLE
   ---------------------------------------------------------- */

.hero-left{

    position:relative;

    z-index:10;

}

.hero-left h1{

    color:#ffffff !important;

    opacity:1 !important;

    visibility:visible !important;

}

.hero-left h1 span{

    color:var(--gold) !important;

    opacity:1 !important;

    visibility:visible !important;

}

.hero-left p{

    color:#eeeeee !important;

    opacity:1 !important;

    visibility:visible !important;

}

.hero-left .subtitle{

    color:var(--gold) !important;

}

.hero-left .status{

    opacity:1 !important;

    visibility:visible !important;

}


/* ----------------------------------------------------------
   MEMBER AREA
   ---------------------------------------------------------- */

.member-left{

    position:relative;

    z-index:5;

}

.member-left h2{

    color:#ffffff !important;

    opacity:1 !important;

    visibility:visible !important;

}

.member-left h2 span{

    color:var(--gold) !important;

}

.member-left p{

    color:#dddddd !important;

    opacity:1 !important;

    visibility:visible !important;

}


/* ----------------------------------------------------------
   SECTIONS : TEXTES
   ---------------------------------------------------------- */

.section-title h2{

    color:#ffffff !important;

}

.section-title p{

    color:#d7d7d7 !important;

}

.why-card h3{

    color:#ffffff !important;

}

.why-card p{

    color:#d7d7d7 !important;

}

.event-home-content h2{

    color:#ffffff !important;

}

.event-home-content p{

    color:#d7d7d7 !important;

}

.contest-left h2{

    color:#ffffff !important;

}

.contest-left p{

    color:#d7d7d7 !important;

}


/* ----------------------------------------------------------
   NEWS
   ---------------------------------------------------------- */

.news-card h3{

    color:#ffffff !important;

}

.news-card p{

    color:#d7d7d7 !important;

}

.news-date{

    color:var(--gold) !important;

}


/* ----------------------------------------------------------
   MEMBER CARD
   ---------------------------------------------------------- */

.member-card{

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

    color:#ffffff !important;

}

.member-card h3{

    color:#ffffff !important;

}

.member-card li{

    color:#eeeeee !important;

}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer{

    background:#050505 !important;

    color:#ffffff !important;

}

.footer-premium{

    background:
        linear-gradient(
            180deg,
            #050505 0%,
            #090909 50%,
            #000000 100%
        ) !important;

    color:#ffffff !important;

}

.footer-premium h3,
.footer-premium h4{

    color:#ffffff !important;

}

.footer-premium p{

    color:#cfcfcf !important;

}

.footer-premium a{

    color:#d8d8d8 !important;

}

.footer-premium a:hover{

    color:var(--gold) !important;

}

.footer-bottom p{

    color:#bdbdbd !important;

}


/* ----------------------------------------------------------
   ANIMATIONS
   Évite qu'un texte reste invisible si JS ne s'exécute pas
   ---------------------------------------------------------- */

.fade-up{

    opacity:1 !important;

    transform:none !important;

}


/* ----------------------------------------------------------
   Z-INDEX DES SECTIONS
   ---------------------------------------------------------- */

.hero-section,
.why-tropical,
.tropical-highlights,
.next-event-home,
.contest-home,
.news-home,
.gallery-home,
.member-home,
.cta-tropical{

    position:relative;

    z-index:1;

}


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

@media(max-width:992px){

    .mobile-menu{

        display:block;

    }

    .mobile-menu:not(.active){

        right:-380px;

    }

}
/* ==========================================================
   FIX CHARGEMENT PAGE - PAS DE TEXTE INVISIBLE
========================================================== */

.fade-up,
.fade-up.show{

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    transition:none !important;

}


/* Empêche une animation de provoquer un déplacement
   pendant le chargement */

html{

    scroll-behavior:auto !important;

}


/* La page doit toujours commencer en haut */

body{

    scroll-behavior:auto !important;

}


/* Aucun élément de l'accueil ne doit forcer
   une position de scroll */

.hero-section,
.why-tropical,
.tropical-highlights,
.next-event-home,
.contest-home,
.news-home,
.gallery-home,
.member-home,
.cta-tropical{

    scroll-margin-top:0 !important;

}


/* ==========================================================
   FIX HERO AU CHARGEMENT
========================================================== */

.hero-bg{

    opacity:1 !important;

    visibility:visible !important;

}

.hero-bg img{

    opacity:1 !important;

    visibility:visible !important;

}


/* ==========================================================
   FIX OVERLAY
========================================================== */

.hero-overlay{

    pointer-events:none !important;

}


/* ==========================================================
   FIX MENU OVERLAY
========================================================== */

@media(min-width:993px){

    .menu-overlay{

        display:none !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;

    }

    .mobile-menu{

        display:none !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;

    }

}
/* ==========================================================
   EVENTS PAGE - V5
========================================================== */


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero{

    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.12),
            transparent 55%
        ),
        #050505;

}

.page-hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25),
            rgba(0,0,0,.75)
        );

    pointer-events:none;

}

.page-hero .container{

    position:relative;

    z-index:2;

    width:100%;

}

.page-hero-content{

    max-width:850px;

    padding:80px 0;

}

.page-hero-content h1{

    margin:15px 0;

    color:#fff;

    font-size:clamp(42px,6vw,72px);

    line-height:1.05;

}

.page-hero-content h1 strong{

    color:var(--gold);

}

.page-hero-content p{

    max-width:700px;

    margin:0;

    color:#d7d7d7;

    font-size:18px;

    line-height:1.8;

}


/* ==========================================================
   EVENTS SECTION
========================================================== */

.events-page{

    position:relative;

    padding:100px 0;

    background:#050505;

}

.events-grid{

    display:grid;

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

    gap:30px;

}


/* ==========================================================
   EVENT CARD
========================================================== */

.event-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

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

}

.event-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 30px 65px rgba(0,0,0,.55);

}


/* ==========================================================
   EVENT IMAGE
========================================================== */

.event-card-image{

    position:relative;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#111;

}

.event-card-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.event-card:hover
.event-card-image img{

    transform:scale(1.06);

}


/* ==========================================================
   EVENT CATEGORY
========================================================== */

.event-card-category{

    position:absolute;

    left:18px;

    top:18px;

    display:inline-flex;

    align-items:center;

    min-height:32px;

    padding:7px 14px;

    border-radius:999px;

    background:rgba(0,0,0,.72);

    border:1px solid
        rgba(212,175,55,.45);

    color:var(--gold);

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

}


/* ==========================================================
   EVENT CONTENT
========================================================== */

.event-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

.event-card-content h2{

    margin:0 0 20px;

    color:#fff;

    font-size:25px;

    line-height:1.2;

}

.event-card-info{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:20px;

}

.event-card-info > div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d7d7d7;

    font-size:14px;

}

.event-card-info i{

    width:18px;

    color:var(--gold);

    text-align:center;

}

.event-card-description{

    margin:0 0 25px;

    color:#cfcfcf;

    font-size:14px;

    line-height:1.7;

}


/* ==========================================================
   EVENT ACTIONS
========================================================== */

.event-card-actions{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:auto;

}

.event-card-actions .btn-gold,
.event-card-actions .btn-dark{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   EMPTY EVENTS
========================================================== */

.empty-events{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-events-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--gold);

    font-size:30px;

}

.empty-events h2{

    margin:0 0 15px;

    color:#fff;

}

.empty-events p{

    max-width:520px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}


/* ==========================================================
   EVENTS CTA
========================================================== */

.events-cta{

    position:relative;

    padding:100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707;

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

}

.events-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.events-cta-content h2{

    margin:15px 0;

    color:#fff;

    font-size:clamp(32px,5vw,52px);

}

.events-cta-content p{

    margin:0 auto 30px;

    color:#cfcfcf;

    font-size:17px;

    line-height:1.7;

}

.events-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}


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

@media(max-width:1100px){

    .events-grid{

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

    }

}

@media(max-width:768px){

    .page-hero{

        min-height:350px;

    }

    .page-hero-content{

        padding:60px 0;

    }

    .events-page{

        padding:70px 0;

    }

    .events-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .event-card-content{

        padding:24px;

    }

    .events-cta{

        padding:75px 0;

    }

}

@media(max-width:480px){

    .page-hero-content h1{

        font-size:40px;

    }

    .page-hero-content p{

        font-size:15px;

    }

    .event-card-content h2{

        font-size:22px;

    }

    .events-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .events-cta-buttons a{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   EVENTS - FORCE DARK BACKGROUND
========================================================== */

html,
body{

    background:#050505 !important;

}

.events-page{

    background:#050505 !important;

    color:#fff !important;

}

.events-page .container{

    background:transparent !important;

}

.events-grid{

    background:transparent !important;

}

.event-card{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        ) !important;

}

.events-cta{

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707 !important;

}
/* ==========================================================
   NEWS PAGE - V5
========================================================== */


/* ==========================================================
   NEWS SECTION
========================================================== */

.news-page{

    position:relative;

    padding:100px 0;

    background:#050505;

    color:#fff;

}

.news-page-grid{

    display:grid;

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

    gap:30px;

}


/* ==========================================================
   NEWS CARD
========================================================== */

.news-page-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

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

}

.news-page-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 30px 65px rgba(0,0,0,.55);

}


/* ==========================================================
   NEWS IMAGE
========================================================== */

.news-page-image{

    position:relative;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#111;

}

.news-page-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.news-page-card:hover
.news-page-image img{

    transform:scale(1.06);

}


/* ==========================================================
   NEWS CONTENT
========================================================== */

.news-page-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

.news-page-date{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:15px;

    color:var(--gold);

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

}

.news-page-date i{

    font-size:13px;

}

.news-page-content h2{

    margin:0 0 18px;

    color:#fff;

    font-size:24px;

    line-height:1.25;

}

.news-page-content p{

    margin:0 0 25px;

    color:#cfcfcf;

    font-size:14px;

    line-height:1.75;

}

.news-page-actions{

    margin-top:auto;

}

.news-page-actions .btn-gold{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   EMPTY NEWS
========================================================== */

.empty-news{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-news-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:
        rgba(212,175,55,.10);

    color:var(--gold);

    font-size:30px;

}

.empty-news h2{

    margin:0 0 15px;

    color:#fff;

}

.empty-news p{

    max-width:520px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}


/* ==========================================================
   NEWS CTA
========================================================== */

.news-cta{

    position:relative;

    padding:100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707;

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

}

.news-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.news-cta-content h2{

    margin:15px 0;

    color:#fff;

    font-size:clamp(32px,5vw,52px);

    line-height:1.1;

}

.news-cta-content p{

    margin:0 auto 30px;

    color:#cfcfcf;

    font-size:17px;

    line-height:1.7;

}

.news-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}


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

@media(max-width:1100px){

    .news-page-grid{

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

    }

}

@media(max-width:768px){

    .news-page{

        padding:70px 0;

    }

    .news-page-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .news-page-content{

        padding:24px;

    }

    .news-cta{

        padding:75px 0;

    }

}

@media(max-width:480px){

    .news-page-content h2{

        font-size:22px;

    }

    .news-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .news-cta-buttons a{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   GALLERY PAGE - V5
========================================================== */

.gallery-page{

    position:relative;

    padding:100px 0;

    background:#050505;

    color:#fff;

}

.gallery-page-grid{

    display:grid;

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

    gap:30px;

}


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

.gallery-page-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

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

}

.gallery-page-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 30px 65px rgba(0,0,0,.55);

}


/* ==========================================================
   COVER IMAGE
========================================================== */

.gallery-page-image{

    position:relative;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#111;

}

.gallery-page-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.gallery-page-card:hover
.gallery-page-image img{

    transform:scale(1.06);

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.gallery-page-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(255,255,255,.25);

    font-size:55px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 65%
        );

}


/* ==========================================================
   PHOTO COUNT
========================================================== */

.gallery-page-count{

    position:absolute;

    top:18px;

    right:18px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(0,0,0,.72);

    border:1px solid
        rgba(212,175,55,.45);

    color:var(--gold);

    font-size:12px;

    font-weight:700;

    backdrop-filter:blur(8px);

}

.gallery-page-count i{

    font-size:12px;

}


/* ==========================================================
   CONTENT
========================================================== */

.gallery-page-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

.gallery-page-content h2{

    margin:0 0 15px;

    color:#fff;

    font-size:25px;

    line-height:1.2;

}

.gallery-page-date{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

}

.gallery-page-date i{

    font-size:13px;

}

.gallery-page-content p{

    margin:0 0 25px;

    color:#cfcfcf;

    font-size:14px;

    line-height:1.75;

}

.gallery-page-actions{

    margin-top:auto;

}

.gallery-page-actions .btn-gold{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   EMPTY GALLERY
========================================================== */

.empty-gallery{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-gallery-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:
        rgba(212,175,55,.10);

    color:var(--gold);

    font-size:30px;

}

.empty-gallery h2{

    margin:0 0 15px;

    color:#fff;

}

.empty-gallery p{

    max-width:520px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}


/* ==========================================================
   CTA
========================================================== */

.gallery-cta{

    position:relative;

    padding:100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707;

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

}

.gallery-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.gallery-cta-content h2{

    margin:15px 0;

    color:#fff;

    font-size:clamp(32px,5vw,52px);

    line-height:1.1;

}

.gallery-cta-content p{

    margin:0 auto 30px;

    color:#cfcfcf;

    font-size:17px;

    line-height:1.7;

}

.gallery-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}


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

@media(max-width:1100px){

    .gallery-page-grid{

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

    }

}

@media(max-width:768px){

    .gallery-page{

        padding:70px 0;

    }

    .gallery-page-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .gallery-page-content{

        padding:24px;

    }

    .gallery-cta{

        padding:75px 0;

    }

}

@media(max-width:480px){

    .gallery-page-content h2{

        font-size:22px;

    }

    .gallery-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .gallery-cta-buttons a{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   GALLERY ALBUM PAGE - V5
========================================================== */

.album-hero{

    position:relative;

    min-height:460px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.12),
            transparent 55%
        ),
        #050505;

}

.album-hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25),
            rgba(0,0,0,.80)
        );

    pointer-events:none;

}

.album-hero .container{

    position:relative;

    z-index:2;

    width:100%;

}

.album-hero-content{

    max-width:900px;

    padding:80px 0;

}

.album-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:30px;

    color:#d7d7d7;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;

}

.album-back:hover{

    color:var(--gold);

    transform:translateX(-4px);

}

.album-hero-content h1{

    margin:15px 0;

    color:#fff;

    font-size:clamp(40px,6vw,70px);

    line-height:1.05;

}

.album-date{

    display:flex;

    align-items:center;

    gap:8px;

    margin:20px 0;

    color:var(--gold);

    font-size:14px;

    font-weight:700;

}

.album-hero-content p{

    max-width:750px;

    margin:0;

    color:#d0d0d0;

    font-size:17px;

    line-height:1.8;

}


/* ==========================================================
   ALBUM PHOTOS
========================================================== */

.album-page{

    padding:100px 0;

    background:#050505;

}

.album-photo-grid{

    display:grid;

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

    gap:20px;

}

.album-photo{

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:1 / 1;

    background:#111;

    border-radius:18px;

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

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

}

.album-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.album-photo:hover img{

    transform:scale(1.08);

}


/* ==========================================================
   PHOTO OVERLAY
========================================================== */

.album-photo-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(0,0,0,.45);

    color:#fff;

    font-size:30px;

    opacity:0;

    transition:
        opacity .3s ease;

}

.album-photo:hover
.album-photo-overlay{

    opacity:1;

}

.album-photo-overlay i{

    color:var(--gold);

}


/* ==========================================================
   EMPTY ALBUM
========================================================== */

.empty-album{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-album-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:
        rgba(212,175,55,.10);

    color:var(--gold);

    font-size:30px;

}

.empty-album h2{

    margin:0 0 15px;

    color:#fff;

}

.empty-album p{

    max-width:520px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}


/* ==========================================================
   CTA
========================================================== */

.album-cta{

    padding:100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707;

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

}

.album-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.album-cta-content h2{

    margin:15px 0;

    color:#fff;

    font-size:clamp(32px,5vw,52px);

    line-height:1.1;

}

.album-cta-content p{

    margin:0 auto 30px;

    color:#cfcfcf;

    font-size:17px;

    line-height:1.7;

}

.album-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}


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

@media(max-width:1100px){

    .album-photo-grid{

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

    }

}

@media(max-width:768px){

    .album-hero{

        min-height:390px;

    }

    .album-hero-content{

        padding:60px 0;

    }

    .album-page{

        padding:70px 0;

    }

    .album-photo-grid{

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

        gap:15px;

    }

    .album-cta{

        padding:75px 0;

    }

}

@media(max-width:480px){

    .album-photo-grid{

        grid-template-columns:1fr;

    }

    .album-hero-content h1{

        font-size:38px;

    }

    .album-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .album-cta-buttons a{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   GLOBAL - ESPACE ENTRE MENU ET PREMIERE SECTION
========================================================== */

/* Supprime les marges parasites après le menu */
header,
.navbar,
nav{

    margin-bottom:0 !important;

}

/* La première section commence directement après le menu */
header + section,
.navbar + section,
nav + section{

    margin-top:0 !important;

}

/* Évite qu'une marge du premier élément crée un espace */
header + section > .container > *:first-child,
.navbar + section > .container > *:first-child,
nav + section > .container > *:first-child{

    margin-top:0;

}
/* ==========================================================
   V5 - REDUCE SPACE BETWEEN HERO AND CONTENT
========================================================== */

.page-hero{

    min-height:320px !important;

}

.page-hero-content{

    padding:50px 0 !important;

}


/* EVENTS */

.events-page{

    padding-top:60px !important;

}


/* NEWS */

.news-page{

    padding-top:60px !important;

}


/* GALLERY */

.gallery-page{

    padding-top:60px !important;

}
/* ==========================================================
   CONTESTS - GLOBAL STYLE
========================================================== */

.contests-page,
.contest-entries-page,
.contest-submit-page{

    padding:60px 0 100px;

    background:#050505;

    color:#fff;

}


/* ==========================================================
   CONTEST LIST
========================================================== */

.contests-page{

    position:relative;

}

.contests-page-grid{

    display:grid;

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

    gap:30px;

}

.contest-page-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    min-width:0;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

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

}

.contest-page-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 30px 65px rgba(0,0,0,.55);

}


/* ==========================================================
   CONTEST COVER
========================================================== */

.contest-page-image{

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#111;

}

.contest-page-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.contest-page-card:hover
.contest-page-image img{

    transform:scale(1.06);

}


/* ==========================================================
   CONTEST CONTENT
========================================================== */

.contest-page-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px;

}

.contest-page-content h2{

    margin:0 0 18px;

    color:#fff;

    font-size:25px;

    line-height:1.2;

}

.contest-page-content p{

    margin:0 0 25px;

    color:#cfcfcf;

    font-size:14px;

    line-height:1.75;

}


/* ==========================================================
   DATES
========================================================== */

.contest-page-dates{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:20px;

}

.contest-page-dates > div{

    padding:14px;

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

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

    border-radius:14px;

}

.contest-page-dates span{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:7px;

    color:var(--gold);

    font-size:12px;

    font-weight:700;

}

.contest-page-dates strong{

    color:#fff;

    font-size:13px;

}


/* ==========================================================
   STATUS
========================================================== */

.contest-page-status{

    display:flex;

    align-items:center;

    gap:8px;

    width:max-content;

    max-width:100%;

    margin-bottom:20px;

    padding:8px 13px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.contest-page-status.registration{

    color:#8df0a5;

    background:
        rgba(50,205,90,.10);

    border:1px solid
        rgba(50,205,90,.25);

}

.contest-page-status.voting{

    color:#ff91b5;

    background:
        rgba(255,70,130,.10);

    border:1px solid
        rgba(255,70,130,.25);

}

.contest-page-actions{

    margin-top:auto;

}

.contest-page-actions .btn-gold{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   EMPTY CONTESTS
========================================================== */

.empty-contests{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-contests-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    color:var(--gold);

    background:
        rgba(212,175,55,.10);

    font-size:30px;

}

.empty-contests h2{

    margin:0 0 15px;

    color:#fff;

}

.empty-contests p{

    max-width:520px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}


/* ==========================================================
   CONTEST DETAIL HERO
========================================================== */

.contest-detail-hero{

    position:relative;

    min-height:440px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#050505;

}

.contest-detail-cover{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.30;

}

.contest-detail-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.65),
            rgba(0,0,0,.80)
        );

}

.contest-detail-hero .container{

    position:relative;

    z-index:2;

    width:100%;

}

.contest-detail-content{

    max-width:900px;

    padding:50px 0;

}

.contest-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    color:#d7d7d7;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

}

.contest-back:hover{

    color:var(--gold);

}

.contest-detail-content h1{

    margin:15px 0;

    color:#fff;

    font-size:clamp(38px,6vw,68px);

    line-height:1.05;

}

.contest-detail-content p{

    max-width:750px;

    color:#d0d0d0;

    font-size:16px;

    line-height:1.8;

}

.contest-detail-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    padding:10px 15px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.contest-detail-status.registration{

    color:#8df0a5;

    background:rgba(50,205,90,.10);

    border:1px solid rgba(50,205,90,.25);

}

.contest-detail-status.voting{

    color:#ff91b5;

    background:rgba(255,70,130,.10);

    border:1px solid rgba(255,70,130,.25);

}

.contest-detail-status.finished{

    color:var(--gold);

    background:rgba(212,175,55,.10);

    border:1px solid rgba(212,175,55,.30);

}

.contest-detail-action{

    margin-top:25px;

}


/* ==========================================================
   ENTRIES
========================================================== */

.contest-entries-page{

    background:#050505;

}

.contest-entries-grid{

    display:grid;

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

    gap:25px;

}

.contest-entry-card{

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:22px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

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

}

.contest-entry-card:hover{

    transform:translateY(-6px);

    border-color:
        rgba(212,175,55,.40);

}

.contest-entry-image{

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#111;

}

.contest-entry-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.contest-entry-card:hover
.contest-entry-image img{

    transform:scale(1.06);

}

.contest-entry-content{

    padding:22px;

}

.contest-entry-content h3{

    margin:0 0 12px;

    color:#fff;

    font-size:20px;

}

.contest-entry-author{

    display:flex;

    align-items:center;

    gap:7px;

    margin:0 0 12px;

    color:#aaa;

    font-size:13px;

}

.contest-entry-author i{

    color:var(--gold);

}

.contest-entry-votes{

    display:flex;

    align-items:center;

    gap:7px;

    color:#bbb;

    font-size:13px;

}

.contest-entry-votes i{

    color:#ff5b87;

}

.contest-entry-votes strong{

    color:#fff;

}

.contest-entry-description{

    margin:16px 0;

    color:#bbb;

    font-size:13px;

    line-height:1.7;

}

.contest-entry-action{

    margin-top:18px;

}

.contest-entry-action .btn-gold{

    width:100%;

    justify-content:center;

}


/* ==========================================================
   EMPTY ENTRIES
========================================================== */

.empty-contest-entries{

    max-width:700px;

    margin:0 auto;

    padding:75px 30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

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

    border-radius:28px;

}

.empty-contest-entries-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    color:var(--gold);

    background:rgba(212,175,55,.10);

    font-size:30px;

}


/* ==========================================================
   SUBMIT PAGE
========================================================== */

.contest-submit-hero{

    padding:55px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #050505;

}

.contest-submit-hero-content{

    max-width:800px;

}

.contest-submit-back{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    color:#ccc;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

}

.contest-submit-back:hover{

    color:var(--gold);

}

.contest-submit-hero h1{

    margin:15px 0;

    color:#fff;

    font-size:clamp(36px,5vw,58px);

}

.contest-submit-hero h1 strong{

    color:var(--gold);

}

.contest-submit-hero p{

    margin:0;

    color:#bbb;

    font-size:16px;

}

.contest-submit-page{

    min-height:500px;

}

.contest-submit-wrapper{

    max-width:760px;

    margin:0 auto;

    padding:40px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:26px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.40);

}

.contest-submit-header{

    text-align:center;

    margin-bottom:30px;

}

.contest-submit-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    color:var(--gold);

    background:rgba(212,175,55,.10);

    font-size:26px;

}

.contest-submit-header h2{

    margin:0 0 10px;

    color:#fff;

}

.contest-submit-header p{

    margin:0;

    color:#aaa;

}

.contest-submit-error{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:25px;

    padding:14px 16px;

    color:#ff9e9e;

    background:rgba(255,60,60,.08);

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

    border-radius:12px;

}

.contest-submit-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    color:#fff;

    font-size:14px;

    font-weight:700;

}

.form-group input,
.form-group textarea{

    width:100%;

    box-sizing:border-box;

    padding:14px 16px;

    color:#fff;

    background:#111;

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

    border-radius:12px;

    outline:none;

    font:inherit;

}

.form-group textarea{

    min-height:150px;

    resize:vertical;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--gold);

}

.form-group input[type="file"]{

    padding:11px;

}

.form-group small{

    color:#888;

    font-size:12px;

}

.contest-submit-actions{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:12px;

    margin-top:8px;

}

.contest-submit-actions a,
.contest-submit-actions button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}


/* ==========================================================
   CTA
========================================================== */

.contests-cta,
.contest-detail-cta{

    padding:90px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 60%
        ),
        #070707;

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

}

.contests-cta-content,
.contest-detail-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.contests-cta-content h2,
.contest-detail-cta-content h2{

    margin:15px 0;

    color:#fff;

    font-size:clamp(30px,5vw,50px);

}

.contests-cta-content p,
.contest-detail-cta-content p{

    max-width:650px;

    margin:0 auto 30px;

    color:#cfcfcf;

    line-height:1.7;

}

.contests-cta-buttons,
.contest-detail-cta-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}


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

@media(max-width:1100px){

    .contests-page-grid{

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

    }

    .contest-entries-grid{

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

    }

}

@media(max-width:768px){

    .contests-page,
    .contest-entries-page,
    .contest-submit-page{

        padding-top:50px;

    }

    .contests-page-grid,
    .contest-entries-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .contest-detail-hero{

        min-height:400px;

    }

    .contest-detail-content{

        padding:45px 0;

    }

    .contest-submit-wrapper{

        padding:25px 20px;

    }

    .contest-submit-actions{

        flex-direction:column;

    }

    .contest-submit-actions a,
    .contest-submit-actions button{

        width:100%;

    }

}

@media(max-width:480px){

    .contest-detail-content h1{

        font-size:36px;

    }

    .contests-cta,
    .contest-detail-cta{

        padding:70px 0;

    }

    .contests-cta-buttons,
    .contest-detail-cta-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .contests-cta-buttons a,
    .contest-detail-cta-buttons a{

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   MEMBER AREA - GLOBAL
========================================================== */

.member-login-page,
.member-register-page,
.member-dashboard-page,
.member-profile-page,
.member-edit-profile-page,
.member-messages-page,
.member-notifications-page {

    padding: 45px 0 90px;

    background:
        radial-gradient(
            circle at top center,
            rgba(212,175,55,.06),
            transparent 45%
        ),
        #050505;

    color:#fff;

}


/* ==========================================================
   LOGIN / REGISTER
========================================================== */

.member-login-layout,
.member-register-layout {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,520px);

    gap:70px;

    align-items:center;

    max-width:1150px;

    margin:0 auto;

}

.member-login-intro,
.member-register-intro {

    max-width:620px;

}

.member-login-intro h1,
.member-register-intro h1 {

    margin:15px 0 20px;

    color:#fff;

    font-size:clamp(42px,6vw,68px);

    line-height:1.05;

}

.member-login-intro h1 strong,
.member-register-intro h1 strong {

    color:var(--gold);

}

.member-login-intro > p,
.member-register-intro > p {

    max-width:600px;

    color:#bbb;

    font-size:16px;

    line-height:1.8;

}

.member-login-benefits,
.member-register-benefits {

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:30px 0 0;

    padding:0;

    list-style:none;

}

.member-login-benefits li,
.member-register-benefits li {

    display:flex;

    align-items:center;

    gap:12px;

    color:#ddd;

    font-size:14px;

}

.member-login-benefits i,
.member-register-benefits i {

    width:30px;

    color:var(--gold);

    text-align:center;

}


/* ==========================================================
   MEMBER CARD
========================================================== */

.member-login-card,
.member-register-card {

    padding:38px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

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

    border-radius:26px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}

.member-login-card-header,
.member-register-card-header {

    margin-bottom:28px;

    text-align:center;

}

.member-login-icon,
.member-register-icon {

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    border-radius:50%;

    color:var(--gold);

    background:
        rgba(212,175,55,.10);

    border:1px solid
        rgba(212,175,55,.20);

    font-size:25px;

}

.member-login-card-header h2,
.member-register-card-header h2 {

    margin:0 0 8px;

    color:#fff;

}

.member-login-card-header p,
.member-register-card-header p {

    margin:0;

    color:#999;

    font-size:14px;

}


/* ==========================================================
   MEMBER FORMS
========================================================== */

.member-login-form,
.member-register-form {

    display:flex;

    flex-direction:column;

    gap:20px;

}

.member-form-group {

    display:flex;

    flex-direction:column;

    gap:8px;

}

.member-form-group label {

    color:#eee;

    font-size:13px;

    font-weight:700;

}

.member-input {

    position:relative;

}

.member-input > i {

    position:absolute;

    top:50%;

    left:15px;

    transform:translateY(-50%);

    color:#777;

    pointer-events:none;

}

.member-input input {

    padding-left:45px;

}

.member-form-group input,
.member-form-group textarea,
.member-input input {

    width:100%;

    box-sizing:border-box;

    padding:14px 16px;

    color:#fff;

    background:#101010;

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

    border-radius:12px;

    outline:none;

    font:inherit;

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

}

.member-form-group input:focus,
.member-form-group textarea:focus,
.member-input input:focus {

    border-color:var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.08);

}

.member-form-group textarea {

    min-height:150px;

    resize:vertical;

}

.member-form-group input[type="file"] {

    padding:11px;

}

.member-login-button,
.member-register-button {

    width:100%;

    justify-content:center;

    margin-top:5px;

}


/* ==========================================================
   ALERTS
========================================================== */

.member-alert {

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    padding:13px 15px;

    border-radius:12px;

    font-size:13px;

}

.member-alert.success {

    color:#8df0a5;

    background:
        rgba(50,205,90,.08);

    border:1px solid
        rgba(50,205,90,.22);

}

.member-alert.error {

    color:#ff9999;

    background:
        rgba(255,60,60,.08);

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

}


/* ==========================================================
   LOGIN / REGISTER FOOTER
========================================================== */

.member-login-footer,
.member-register-footer {

    margin-top:25px;

    padding-top:22px;

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

    text-align:center;

}

.member-login-footer p,
.member-register-footer p {

    margin:0 0 10px;

    color:#888;

    font-size:13px;

}

.member-register-link,
.member-login-link {

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--gold);

    text-decoration:none;

    font-size:14px;

    font-weight:700;

}

.member-register-link:hover,
.member-login-link:hover {

    color:#fff;

}


/* ==========================================================
   COMMUNITY RULES
========================================================== */

.member-rules {

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#aaa;

    font-size:12px;

    line-height:1.6;

    cursor:pointer;

}

.member-rules input {

    margin-top:3px;

    accent-color:#d4af37;

}

.member-rules a {

    color:var(--gold);

}


/* ==========================================================
   DASHBOARD
========================================================== */

.member-dashboard-welcome {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-bottom:45px;

    padding:38px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.035)
        );

    border:1px solid
        rgba(212,175,55,.16);

    border-radius:25px;

}

.member-dashboard-welcome-text {

    max-width:800px;

}

.member-dashboard-welcome h1 {

    margin:12px 0;

    color:#fff;

    font-size:clamp(32px,5vw,52px);

}

.member-dashboard-welcome h1 strong {

    color:var(--gold);

}

.member-dashboard-welcome p {

    margin:0;

    color:#bbb;

    line-height:1.75;

}

.member-dashboard-avatar {

    flex:0 0 90px;

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:var(--gold);

    background:
        rgba(212,175,55,.10);

    border:1px solid
        rgba(212,175,55,.30);

    font-size:32px;

}

.member-dashboard-header {

    margin-bottom:25px;

}

.member-dashboard-header h2 {

    margin:0 0 8px;

    color:#fff;

    font-size:30px;

}

.member-dashboard-header p {

    margin:0;

    color:#888;

}

.member-dashboard-grid {

    display:grid;

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

    gap:20px;

}

.member-dashboard-box {

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    min-width:0;

    padding:25px;

    color:#fff;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

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

    border-radius:20px;

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

}

.member-dashboard-box:hover {

    transform:translateY(-5px);

    border-color:
        rgba(212,175,55,.40);

    background:
        rgba(212,175,55,.07);

}

.member-dashboard-box-icon {

    flex:0 0 52px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

    font-size:19px;

}

.member-dashboard-box h3 {

    margin:0 0 5px;

    color:#fff;

    font-size:17px;

}

.member-dashboard-box p {

    margin:0;

    color:#888;

    font-size:12px;

    line-height:1.5;

}

.member-dashboard-arrow {

    margin-left:auto;

    color:#555;

}

.member-dashboard-box:hover
.member-dashboard-arrow {

    color:var(--gold);

}

.member-dashboard-box.logout:hover {

    border-color:
        rgba(255,80,80,.35);

}


/* ==========================================================
   PROFILE
========================================================== */

.member-profile-layout {

    display:grid;

    grid-template-columns:
        320px
        minmax(0,1fr);

    gap:30px;

    align-items:start;

}

.member-profile-sidebar {

    padding:30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

}

.member-profile-avatar {

    width:150px;

    height:150px;

    margin:0 auto 20px;

    overflow:hidden;

    border-radius:50%;

    background:#111;

    border:3px solid
        rgba(212,175,55,.40);

}

.member-profile-avatar img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

.member-profile-sidebar h1 {

    margin:0 0 10px;

    color:#fff;

    font-size:25px;

}

.member-profile-level {

    display:inline-flex;

    padding:7px 13px;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

    border:1px solid
        rgba(212,175,55,.20);

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}

.member-profile-bio {

    margin:22px 0;

    color:#aaa;

    font-size:13px;

    line-height:1.7;

}

.member-profile-edit {

    width:100%;

    justify-content:center;

}

.member-profile-content {

    min-width:0;

}

.member-profile-heading {

    margin-bottom:30px;

}

.member-profile-heading h2 {

    margin:10px 0;

    color:#fff;

    font-size:36px;

}

.member-profile-heading h2 strong {

    color:var(--gold);

}

.member-profile-heading p {

    margin:0;

    color:#888;

}

.member-profile-stats {

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.member-profile-stat {

    padding:22px;

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

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

    border-radius:18px;

}

.member-profile-stat-icon {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

    border-radius:12px;

}

.member-profile-stat span {

    display:block;

    margin-bottom:6px;

    color:#777;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.member-profile-stat strong {

    display:block;

    overflow:hidden;

    color:#fff;

    font-size:15px;

    text-overflow:ellipsis;

}

.member-profile-section-title {

    margin-bottom:20px;

}

.member-profile-section-title h2 {

    margin:10px 0 0;

    color:#fff;

    font-size:27px;

}

.member-profile-section-title strong {

    color:var(--gold);

}

.member-badges-list {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.member-badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:11px 15px;

    color:var(--badge-color,#d4af37);

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

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

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.member-no-badges {

    width:100%;

    padding:30px;

    text-align:center;

    color:#777;

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

    border-radius:16px;

}

.member-no-badges i {

    margin-bottom:10px;

    color:#555;

    font-size:25px;

}

.member-no-badges p {

    margin:0;

}

.member-profile-actions,
.member-page-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}


/* ==========================================================
   EDIT PROFILE
========================================================== */

.member-edit-profile-layout {

    display:grid;

    grid-template-columns:
        300px
        minmax(0,1fr);

    gap:30px;

    align-items:start;

}

.member-edit-sidebar {

    padding:30px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:24px;

}

.member-edit-avatar {

    width:140px;

    height:140px;

    margin:0 auto 20px;

    overflow:hidden;

    border-radius:50%;

    border:3px solid
        rgba(212,175,55,.35);

}

.member-edit-avatar img {

    width:100%;

    height:100%;

    object-fit:cover;

}

.member-edit-sidebar h2 {

    margin:0 0 10px;

    color:#fff;

}

.member-edit-bio {

    margin:20px 0;

    color:#aaa;

    font-size:13px;

    line-height:1.7;

}

.member-edit-content {

    min-width:0;

}

.member-edit-header {

    margin-bottom:30px;

}

.member-edit-header h1 {

    margin:10px 0;

    color:#fff;

    font-size:40px;

}

.member-edit-header h1 strong {

    color:var(--gold);

}

.member-edit-header p {

    margin:0;

    color:#888;

}

.member-edit-form {

    display:flex;

    flex-direction:column;

    gap:20px;

}

.member-form-section {

    padding:25px;

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

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

    border-radius:20px;

}

.member-form-section h2 {

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 8px;

    color:#fff;

    font-size:19px;

}

.member-form-section h2 i {

    color:var(--gold);

}

.member-form-section > p {

    margin:0 0 20px;

    color:#777;

    font-size:12px;

}

.member-form-grid {

    display:grid;

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

    gap:18px;

}

.member-edit-actions {

    display:flex;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:wrap;

}


/* ==========================================================
   MESSAGES
========================================================== */

.member-messages-header,
.member-notifications-header {

    margin-bottom:30px;

}

.member-messages-header h1,
.member-notifications-header h1 {

    margin:10px 0;

    color:#fff;

    font-size:40px;

}

.member-messages-header h1 strong,
.member-notifications-header h1 strong {

    color:var(--gold);

}

.member-messages-header p,
.member-notifications-header p {

    margin:0;

    color:#888;

}

.member-messages-layout {

    display:grid;

    grid-template-columns:
        300px
        minmax(0,1fr);

    min-height:550px;

    overflow:hidden;

    background:#0b0b0b;

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

    border-radius:22px;

}

.member-messages-sidebar {

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

}

.member-messages-sidebar-header {

    padding:22px;

    border-bottom:1px solid
        rgba(255,255,255,.07);

}

.member-messages-sidebar-header h2 {

    display:flex;

    align-items:center;

    gap:9px;

    margin:0;

    color:#fff;

    font-size:17px;

}

.member-messages-sidebar-header i {

    color:var(--gold);

}

.member-list {

    max-height:500px;

    overflow-y:auto;

}

.member-list-item {

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    color:#fff;

    text-decoration:none;

    border-bottom:1px solid
        rgba(255,255,255,.05);

    transition:
        background .2s ease;

}

.member-list-item:hover {

    background:
        rgba(212,175,55,.07);

}

.member-list-avatar {

    flex:0 0 42px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

}

.member-list-info {

    min-width:0;

    flex:1;

}

.member-list-info strong {

    display:block;

    overflow:hidden;

    color:#eee;

    font-size:13px;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.member-list-info span {

    color:#666;

    font-size:10px;

}

.member-list-item > i {

    color:#555;

    font-size:10px;

}

.member-list-empty {

    padding:40px 20px;

    text-align:center;

    color:#666;

}

.member-list-empty i {

    margin-bottom:10px;

    font-size:25px;

}

.member-list-empty p {

    margin:0;

    font-size:12px;

}

.member-chat-window {

    display:flex;

    flex-direction:column;

    min-width:0;

}

.member-chat-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 25px;

    border-bottom:1px solid
        rgba(255,255,255,.07);

}

.member-chat-header h2 {

    margin:8px 0 0;

    color:#fff;

    font-size:20px;

}

.member-chat-header > i {

    color:var(--gold);

    font-size:24px;

}

.member-chat-messages {

    flex:1;

    min-height:350px;

    padding:30px;

}

.member-chat-empty {

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.member-chat-empty-icon {

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:50%;

    color:var(--gold);

    background:
        rgba(212,175,55,.08);

    font-size:25px;

}

.member-chat-empty h3 {

    margin:0 0 8px;

    color:#fff;

}

.member-chat-empty p {

    max-width:350px;

    margin:0;

    color:#666;

    font-size:13px;

    line-height:1.7;

}

.member-chat-form {

    display:flex;

    gap:10px;

    padding:18px;

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

}

.member-chat-form input {

    flex:1;

    min-width:0;

    padding:13px 15px;

    color:#fff;

    background:#111;

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

    border-radius:12px;

    outline:none;

}

.member-chat-form input:focus {

    border-color:var(--gold);

}

.member-chat-form button {

    flex-shrink:0;

}


/* ==========================================================
   NOTIFICATIONS
========================================================== */

.member-notifications-list {

    display:flex;

    flex-direction:column;

    gap:14px;

}

.member-notification-card {

    display:flex;

    gap:18px;

    padding:22px;

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

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

    border-radius:18px;

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

}

.member-notification-card:hover {

    transform:translateX(3px);

    border-color:
        rgba(212,175,55,.25);

}

.member-notification-card.unread {

    background:
        rgba(212,175,55,.055);

    border-color:
        rgba(212,175,55,.18);

}

.member-notification-icon {

    flex:0 0 48px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

}

.member-notification-content {

    min-width:0;

    flex:1;

}

.member-notification-top {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;

}

.member-notification-top h2 {

    margin:0;

    color:#fff;

    font-size:17px;

}

.member-notification-badge {

    padding:4px 8px;

    color:#050505;

    background:var(--gold);

    border-radius:999px;

    font-size:9px;

    font-weight:800;

}

.member-notification-content p {

    margin:0 0 12px;

    color:#aaa;

    font-size:13px;

    line-height:1.7;

}

.member-notification-content time {

    display:flex;

    align-items:center;

    gap:6px;

    color:#666;

    font-size:11px;

}

.member-notification-content time i {

    color:var(--gold);

}

.member-notifications-empty {

    padding:80px 30px;

    text-align:center;

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

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

    border-radius:22px;

}

.member-notifications-empty-icon {

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:50%;

    color:#666;

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

    font-size:27px;

}

.member-notifications-empty h2 {

    margin:0 0 10px;

    color:#fff;

}

.member-notifications-empty p {

    margin:0;

    color:#666;

}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media(max-width:1000px){

    .member-login-layout,
    .member-register-layout {

        grid-template-columns:1fr;

        gap:35px;

        max-width:650px;

    }

    .member-login-intro,
    .member-register-intro {

        max-width:none;

        text-align:center;

    }

    .member-login-benefits,
    .member-register-benefits {

        align-items:center;

    }

    .member-dashboard-grid {

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

    }

    .member-profile-layout,
    .member-edit-profile-layout {

        grid-template-columns:1fr;

    }

    .member-profile-sidebar,
    .member-edit-sidebar {

        max-width:500px;

        width:100%;

        margin:0 auto;

        box-sizing:border-box;

    }

}


/* ==========================================================
   RESPONSIVE - MOBILE
========================================================== */

@media(max-width:700px){

    .member-login-page,
    .member-register-page,
    .member-dashboard-page,
    .member-profile-page,
    .member-edit-profile-page,
    .member-messages-page,
    .member-notifications-page {

        padding:35px 0 70px;

    }

    .member-login-card,
    .member-register-card {

        padding:25px 20px;

    }

    .member-login-intro h1,
    .member-register-intro h1 {

        font-size:42px;

    }

    .member-dashboard-welcome {

        align-items:flex-start;

        padding:25px;

    }

    .member-dashboard-avatar {

        flex-basis:65px;

        width:65px;

        height:65px;

        font-size:23px;

    }

    .member-dashboard-grid {

        grid-template-columns:1fr;

    }

    .member-profile-stats {

        grid-template-columns:1fr;

    }

    .member-form-grid {

        grid-template-columns:1fr;

    }

    .member-edit-actions,
    .member-profile-actions,
    .member-page-actions {

        flex-direction:column;

        align-items:stretch;

    }

    .member-edit-actions > *,
    .member-profile-actions > *,
    .member-page-actions > * {

        width:100%;

        justify-content:center;

    }

    .member-messages-layout {

        grid-template-columns:1fr;

    }

    .member-messages-sidebar {

        border-right:0;

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

    }

    .member-list {

        max-height:220px;

    }

    .member-chat-messages {

        min-height:280px;

    }

    .member-chat-form {

        flex-direction:column;

    }

    .member-chat-form button {

        width:100%;

        justify-content:center;

    }

    .member-notification-card {

        padding:17px;

    }

}


/* ==========================================================
   RESPONSIVE - SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .member-dashboard-welcome {

        flex-direction:column;

    }

    .member-dashboard-avatar {

        align-self:flex-start;

    }

    .member-dashboard-box {

        padding:20px;

    }

    .member-form-section {

        padding:20px 17px;

    }

    .member-notification-card {

        gap:12px;

    }

    .member-notification-icon {

        flex-basis:40px;

        width:40px;

        height:40px;

    }

}
/* ==========================================================
   PARTNERS & ADVERTISING
========================================================== */

.partners-page {

    padding:45px 0 90px;

    background:
        radial-gradient(
            circle at top center,
            rgba(212,175,55,.07),
            transparent 45%
        ),
        #050505;

    color:#fff;

}


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

.partners-header {

    max-width:800px;

    margin:0 auto 40px;

    text-align:center;

}

.partners-header h1 {

    margin:10px 0 15px;

    color:#fff;

    font-size:clamp(38px,5vw,58px);

    line-height:1.05;

}

.partners-header h1 strong {

    color:var(--gold);

}

.partners-header p {

    max-width:650px;

    margin:0 auto;

    color:#999;

    line-height:1.8;

}


/* ==========================================================
   LAUNCH OFFER
========================================================== */

.partners-launch-offer {

    display:flex;

    align-items:center;

    gap:20px;

    max-width:900px;

    margin:0 auto 45px;

    padding:25px 30px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.13),
            rgba(255,255,255,.035)
        );

    border:1px solid
        rgba(212,175,55,.28);

    border-radius:22px;

}

.partners-launch-icon {

    flex:0 0 58px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    color:var(--gold);

    background:
        rgba(212,175,55,.10);

    font-size:23px;

}

.partners-launch-offer span {

    color:var(--gold);

    font-size:11px;

    font-weight:800;

    letter-spacing:.12em;

}

.partners-launch-offer h2 {

    margin:5px 0;

    color:#fff;

    font-size:24px;

}

.partners-launch-offer p {

    margin:0;

    color:#999;

    font-size:13px;

}


/* ==========================================================
   OFFERS
========================================================== */

.partners-offers {

    display:grid;

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

    gap:20px;

}

.partner-offer-card {

    position:relative;

    display:flex;

    flex-direction:column;

    padding:30px 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

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

    border-radius:22px;

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

}

.partner-offer-card:hover {

    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.35);

}

.partner-offer-card.featured {

    border-color:
        rgba(212,175,55,.40);

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

}

.partner-offer-popular {

    position:absolute;

    top:0;

    left:50%;

    transform:translate(-50%,-50%);

    padding:6px 12px;

    color:#050505;

    background:var(--gold);

    border-radius:999px;

    font-size:9px;

    font-weight:900;

    white-space:nowrap;

}

.partner-offer-icon {

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    color:var(--gold);

    background:
        rgba(212,175,55,.09);

    border-radius:15px;

    font-size:20px;

}

.partner-offer-card h2 {

    margin:0 0 12px;

    color:#fff;

    font-size:21px;

}

.partner-offer-price {

    display:flex;

    align-items:baseline;

    gap:5px;

}

.partner-offer-price strong {

    color:var(--gold);

    font-size:40px;

    line-height:1;

}

.partner-offer-price span {

    color:#aaa;

    font-size:16px;

    font-weight:700;

}

.partner-offer-duration {

    margin-top:8px;

    color:#666;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.partner-offer-description {

    min-height:65px;

    margin:20px 0;

    color:#999;

    font-size:12px;

    line-height:1.7;

}

.partner-offer-card ul {

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0 0 25px;

    padding:0;

    list-style:none;

}

.partner-offer-card li {

    display:flex;

    align-items:flex-start;

    gap:9px;

    color:#ccc;

    font-size:12px;

    line-height:1.5;

}

.partner-offer-card li i {

    flex-shrink:0;

    margin-top:2px;

    color:var(--gold);

}

.partner-offer-card .btn-gold {

    width:100%;

    margin-top:auto;

    justify-content:center;

}


/* ==========================================================
   HOW IT WORKS
========================================================== */

.partners-how {

    margin-top:85px;

}

.partners-how .section-title {

    margin-bottom:35px;

}

.partners-how .section-title h2 {

    color:#fff;

}

.partners-how .section-title h2 strong {

    color:var(--gold);

}

.partners-steps {

    display:grid;

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

    gap:20px;

}

.partner-step {

    position:relative;

    padding:28px 22px;

    text-align:center;

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

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

    border-radius:20px;

}

.partner-step-number {

    position:absolute;

    top:15px;

    right:17px;

    color:rgba(212,175,55,.30);

    font-size:12px;

    font-weight:900;

}

.partner-step > i {

    display:block;

    margin-bottom:18px;

    color:var(--gold);

    font-size:25px;

}

.partner-step h3 {

    margin:0 0 10px;

    color:#fff;

    font-size:16px;

}

.partner-step p {

    margin:0;

    color:#777;

    font-size:12px;

    line-height:1.7;

}


/* ==========================================================
   CONTACT CTA
========================================================== */

.partners-contact {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:55px;

    padding:35px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.035)
        );

    border:1px solid
        rgba(212,175,55,.16);

    border-radius:24px;

}

.partners-contact h2 {

    margin:10px 0;

    color:#fff;

    font-size:30px;

}

.partners-contact h2 strong {

    color:var(--gold);

}

.partners-contact p {

    margin:0;

    color:#888;

}


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

@media(max-width:1100px){

    .partners-offers {

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

    }

    .partners-steps {

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

    }

}

@media(max-width:650px){

    .partners-page {

        padding:35px 0 70px;

    }

    .partners-launch-offer {

        align-items:flex-start;

        padding:22px;

    }

    .partners-offers,
    .partners-steps {

        grid-template-columns:1fr;

    }

    .partner-offer-description {

        min-height:auto;

    }

    .partners-contact {

        flex-direction:column;

        align-items:flex-start;

        padding:25px;

    }

    .partners-contact .btn-gold {

        width:100%;

        justify-content:center;

    }

}
/* ==========================================================
   PARTNERS - APPLICATION FORM
========================================================== */

.partners-application {

    max-width:1000px;

    margin:75px auto 0;

    padding:40px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.02)
        );

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

    border-radius:25px;

}


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

.partners-application-header {

    max-width:700px;

    margin:0 auto 35px;

    text-align:center;

}

.partners-application-header h2 {

    margin:10px 0 12px;

    color:#fff;

    font-size:clamp(28px,4vw,40px);

}

.partners-application-header h2 strong {

    color:var(--gold);

}

.partners-application-header p {

    margin:0;

    color:#888;

    font-size:13px;

    line-height:1.8;

}


/* ==========================================================
   FORM
========================================================== */

.partners-application-form {

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   FORM SECTION
========================================================== */

.partners-form-section {

    padding:25px;

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

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

    border-radius:20px;

}

.partners-form-section h3 {

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 7px;

    color:#fff;

    font-size:19px;

}

.partners-form-section h3 i {

    color:var(--gold);

}

.partners-form-section > p {

    margin:0 0 22px;

    color:#777;

    font-size:12px;

}


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

.partners-form-grid {

    display:grid;

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

    gap:18px;

}

.partners-form-full {

    grid-column:1 / -1;

}


/* ==========================================================
   GROUP
========================================================== */

.partners-form-group {

    display:flex;

    flex-direction:column;

    gap:8px;

}

.partners-form-group label {

    color:#ddd;

    font-size:13px;

    font-weight:700;

}

.partners-form-group label span {

    color:var(--gold);

}

.partners-form-group input,
.partners-form-group select,
.partners-form-group textarea {

    width:100%;

    box-sizing:border-box;

    padding:13px 15px;

    color:#fff;

    background:#0c0c0c;

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

    border-radius:12px;

    outline:none;

    font:inherit;

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

}

.partners-form-group input::placeholder,
.partners-form-group textarea::placeholder {

    color:#555;

}

.partners-form-group input:focus,
.partners-form-group select:focus,
.partners-form-group textarea:focus {

    border-color:var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.08);

}

.partners-form-group textarea {

    min-height:150px;

    resize:vertical;

}

.partners-form-group select {

    cursor:pointer;

}

.partners-form-group select option {

    color:#fff;

    background:#111;

}

.partners-form-group input[type="file"] {

    padding:10px;

    cursor:pointer;

}

.partners-form-group small {

    color:#666;

    font-size:11px;

}


/* ==========================================================
   INFORMATION BOX
========================================================== */

.partners-form-info {

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:20px;

    background:
        rgba(212,175,55,.055);

    border:1px solid
        rgba(212,175,55,.16);

    border-radius:17px;

}

.partners-form-info > i {

    flex-shrink:0;

    margin-top:2px;

    color:var(--gold);

    font-size:19px;

}

.partners-form-info strong {

    display:block;

    margin-bottom:6px;

    color:#fff;

    font-size:13px;

}

.partners-form-info p {

    margin:0;

    color:#888;

    font-size:12px;

    line-height:1.7;

}


/* ==========================================================
   ERRORS
========================================================== */

.partners-application .member-alert {

    margin-bottom:20px;

}

.partners-application .member-alert.error ul {

    margin:0;

    padding-left:18px;

}

.partners-application .member-alert.error li {

    margin-bottom:4px;

}


/* ==========================================================
   SUBMIT
========================================================== */

.partners-form-submit {

    display:flex;

    justify-content:center;

    padding-top:5px;

}

.partners-form-submit .btn-gold {

    min-width:280px;

    justify-content:center;

}


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

@media(max-width:700px){

    .partners-application {

        margin-top:55px;

        padding:25px 18px;

        border-radius:20px;

    }

    .partners-form-section {

        padding:20px 17px;

    }

    .partners-form-grid {

        grid-template-columns:1fr;

    }

    .partners-form-full {

        grid-column:auto;

    }

    .partners-form-submit .btn-gold {

        width:100%;

        min-width:0;

    }

}

@media(max-width:480px){

    .partners-application-header h2 {

        font-size:28px;

    }

    .partners-form-info {

        padding:16px;

    }

}
/* ==========================================================
   PUBLIC PARTNERS
========================================================== */

.partners-public-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 45px;
}


/* ==========================================================
   PARTNER CARD
========================================================== */

.partner-public-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    transition: transform .25s ease, border-color .25s ease;
}

.partner-public-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,193,7,0.55);
}


/* ==========================================================
   PARTNER IMAGE
========================================================== */

.partner-public-image {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
}

.partner-public-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partner-public-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65px;
    opacity: .35;
}


/* ==========================================================
   BADGE
========================================================== */

.partner-public-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 8px 13px;
    border-radius: 30px;
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255,193,7,.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}


/* ==========================================================
   CONTENT
========================================================== */

.partner-public-content {
    padding: 25px;
}

.partner-public-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.partner-public-top h2 {
    margin: 0 0 7px;
    font-size: 24px;
}

.partner-public-avatar {
    display: block;
    font-size: 13px;
    opacity: .65;
}

.partner-public-avatar i {
    margin-right: 5px;
}

.partner-public-offer {
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,193,7,.10);
    border: 1px solid rgba(255,193,7,.30);
}

.partner-public-content h3 {
    margin: 20px 0 10px;
    font-size: 18px;
}

.partner-public-content p {
    line-height: 1.7;
    opacity: .75;
    margin-bottom: 22px;
}


/* ==========================================================
   BUTTON
========================================================== */

.partner-public-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================================
   OFFER DIFFERENCES
========================================================== */

.partner-gold {
    border-color: rgba(255,193,7,.45);
}

.partner-premium {
    border-color: rgba(255,193,7,.30);
}

.partner-tropical {
    border-color: rgba(255,255,255,.15);
}


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

.partners-empty {
    max-width: 700px;
    margin: 70px auto;
    padding: 50px 30px;
    text-align: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
}

.partners-empty-icon {
    font-size: 55px;
    margin-bottom: 20px;
    opacity: .6;
}

.partners-empty h2 {
    margin-bottom: 15px;
}

.partners-empty p {
    line-height: 1.7;
    opacity: .7;
    margin-bottom: 25px;
}


/* ==========================================================
   CONTACT / BECOME PARTNER
========================================================== */

.partners-contact {
    margin-top: 70px;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
}

.partners-contact h2 {
    margin: 8px 0;
}

.partners-contact p {
    margin: 0;
    opacity: .7;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .partners-public-grid {
        grid-template-columns: 1fr;
    }

    .partners-contact {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .partner-public-image {
        height: 190px;
    }

    .partner-public-content {
        padding: 20px;
    }

    .partner-public-top {
        flex-direction: column;
        gap: 12px;
    }

    .partner-public-offer {
        align-self: flex-start;
    }

    .partners-contact {
        padding: 25px;
    }

}
/* ==========================================================
   CONTACT PAGE
========================================================== */

.contact-page {
    padding: 120px 0 100px;
    background: #070707;
    color: #ffffff;
}

.contact-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 55px;
}

.contact-header h1 {
    color: #ffffff !important;
    font-size: 56px;
    font-weight: 800;
    margin: 12px 0 18px;
}

.contact-header h1 strong {
    color: #D4AF37 !important;
}

.contact-header p {
    color: #cfd3d8 !important;
    font-size: 18px;
    line-height: 1.8;
}


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

.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


/* ==========================================================
   CARDS
========================================================== */

.contact-card {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    padding: 38px;
    color: #ffffff;
    box-shadow: 0 15px 45px rgba(0,0,0,.25);
}

.contact-card h2 {
    color: #ffffff !important;
    font-size: 32px;
    margin: 12px 0 15px;
}

.contact-card p {
    color: #cfd3d8 !important;
    line-height: 1.8;
}


/* ==========================================================
   INFORMATION CARD
========================================================== */

.contact-card-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    border: 1px solid rgba(212,175,55,.35);
    color: #D4AF37;
    font-size: 25px;
    margin-bottom: 25px;
}

.contact-details {
    margin-top: 35px;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
}

.contact-detail-icon {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,.10);
    color: #D4AF37;
}

.contact-detail span {
    display: block;
    color: #9da3aa !important;
    font-size: 13px;
    margin-bottom: 4px;
}

.contact-detail strong {
    display: block;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
}


/* ==========================================================
   FORM
========================================================== */

.contact-form-heading {
    margin-bottom: 30px;
}

.contact-form-heading h2 {
    margin-top: 10px;
}

.contact-form-heading p {
    color: #9da3aa !important;
}

.contact-form-heading p span {
    color: #D4AF37 !important;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form-group {
    margin-bottom: 22px;
}

.contact-form-group label {
    display: block;
    margin-bottom: 9px;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
}

.contact-form-group label span {
    color: #D4AF37 !important;
}

.contact-form-group input,
.contact-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.30);
    color: #ffffff !important;
    font-size: 15px;
    outline: none;
    transition: .25s;
}

.contact-form-group input {
    min-height: 50px;
}

.contact-form-group textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #777d84 !important;
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212,175,55,.10);
}

.contact-form-submit {
    margin-top: 10px;
}

.contact-form-submit .btn-gold {
    border: 0;
    cursor: pointer;
}


/* ==========================================================
   ALERTS
========================================================== */

.contact-alert {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.contact-alert-success {
    background: rgba(25,135,84,.15);
    border: 1px solid rgba(25,135,84,.40);
    color: #75e6ae !important;
}

.contact-alert-error {
    background: rgba(220,53,69,.15);
    border: 1px solid rgba(220,53,69,.40);
    color: #ff8b96 !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .contact-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .contact-page {
        padding: 100px 0 70px;
    }

    .contact-header h1 {
        font-size: 40px;
    }

    .contact-header p {
        font-size: 16px;
    }

    .contact-card {
        padding: 25px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-card h2 {
        font-size: 27px;
    }

}
/* ==========================================================
   CLUB PAGE
========================================================== */

.club-page {
    padding: 120px 0 100px;
    background: #070707;
    color: #fff;
}

.club-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 100px;
}

.club-hero h1 {
    color: #fff !important;
    font-size: 60px;
    font-weight: 800;
    margin: 15px 0 20px;
}

.club-hero h1 strong {
    color: #D4AF37 !important;
}

.club-hero p {
    color: #cfd3d8 !important;
    font-size: 19px;
    line-height: 1.8;
}

.club-hero-buttons,
.club-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
}

.club-section {
    max-width: 1100px;
    margin: 0 auto 100px;
    text-align: center;
}

.club-section-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    border: 1px solid rgba(212,175,55,.35);
    color: #D4AF37;
    font-size: 28px;
}

.club-section h2 {
    color: #fff !important;
    font-size: 42px;
    margin: 12px 0 25px;
}

.club-section h2 strong {
    color: #D4AF37 !important;
}

.club-section > p {
    max-width: 850px;
    margin: 0 auto 20px;
    color: #cfd3d8 !important;
    line-height: 1.9;
    font-size: 17px;
}

.club-section > p strong {
    color: #D4AF37 !important;
}

.club-two-columns {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 50px;
    align-items: center;
    text-align: left;
}

.club-text h2 {
    color: #fff !important;
    font-size: 42px;
    margin: 12px 0 25px;
}

.club-text h2 strong {
    color: #D4AF37 !important;
}

.club-text p {
    color: #cfd3d8 !important;
    line-height: 1.9;
    margin-bottom: 18px;
}

.club-feature-card {
    padding: 45px 30px;
    text-align: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
}

.club-feature-icon,
.club-value-icon,
.club-manager-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    color: #D4AF37;
    font-size: 25px;
}

.club-feature-card h3,
.club-value h3,
.club-manager-card h3 {
    color: #fff !important;
}

.club-feature-card p,
.club-value p,
.club-manager-card p {
    color: #bfc5cb !important;
    line-height: 1.7;
}

.club-management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 45px;
}

.club-manager-card {
    padding: 40px 30px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    transition: .3s;
}

.club-manager-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,.55);
}

.club-manager-card > span {
    color: #D4AF37 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.club-manager-card h3 {
    margin: 10px 0 15px;
}

.club-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 45px;
}

.club-value {
    padding: 30px 20px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
}

.club-value h3 {
    margin-bottom: 10px;
}

.club-cta {
    max-width: 1100px;
    margin: 0 auto;
    padding: 65px 40px;
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(212,175,55,.12),
        rgba(255,255,255,.035)
    );
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 25px;
}

.club-cta h2 {
    color: #fff !important;
    font-size: 42px;
    margin: 15px 0;
}

.club-cta h2 strong {
    color: #D4AF37 !important;
}

.club-cta p {
    max-width: 700px;
    margin: 0 auto;
    color: #cfd3d8 !important;
    line-height: 1.8;
}

@media (max-width: 900px) {

    .club-two-columns {
        grid-template-columns: 1fr;
    }

    .club-values {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .club-page {
        padding: 100px 0 70px;
    }

    .club-hero h1 {
        font-size: 42px;
    }

    .club-section h2,
    .club-text h2,
    .club-cta h2 {
        font-size: 32px;
    }

    .club-management-grid {
        grid-template-columns: 1fr;
    }

    .club-values {
        grid-template-columns: 1fr;
    }

    .club-hero-buttons,
    .club-cta-buttons {
        flex-direction: column;
    }

    .club-hero-buttons a,
    .club-cta-buttons a {
        width: 100%;
        box-sizing: border-box;
    }

    .club-cta {
        padding: 45px 25px;
    }

}
/* ==========================================================
   THE TROPICAL - MAIN NAVBAR
========================================================== */

.main-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: rgba(7, 7, 7, 0.94);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.main-header .container {
    width: 100%;
}

.header-wrapper {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 25px;
}


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

.main-header .logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.main-header .logo img {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 58px;
    object-fit: contain;
}


/* ==========================================================
   DESKTOP MENU
========================================================== */

.desktop-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.desktop-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 11px 10px;

    color: #d7d7d7 !important;
    text-decoration: none !important;

    font-size: 13px;
    font-weight: 600;

    border-radius: 9px;

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

.desktop-menu a i {
    color: #929292;
    font-size: 13px;

    transition: color .25s ease;
}

.desktop-menu a:hover {
    color: #D4AF37 !important;
    background: rgba(212, 175, 55, 0.08);
    transform: translateY(-1px);
}

.desktop-menu a:hover i {
    color: #D4AF37;
}


/* ==========================================================
   ACTIVE EFFECT
========================================================== */

.desktop-menu a::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: #D4AF37;
    border-radius: 10px;

    transform: translateX(-50%);

    transition: width .25s ease;
}

.desktop-menu a:hover::after {
    width: 22px;
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}


/* ==========================================================
   CLUB STATUS
========================================================== */

.club-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;

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

.club-state i {
    font-size: 7px;
}

.club-state.open {
    color: #72e3a4 !important;
}

.club-state.open i {
    color: #36d278;
}

.club-state.closed {
    color: #ff7c7c !important;
}

.club-state.closed i {
    color: #ff4f4f;
}


/* ==========================================================
   HEADER BUTTONS
========================================================== */

.btn-teleport,
.btn-discord,
.btn-login,
.btn-register,
.btn-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 13px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;

    white-space: nowrap;

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


/* TELEPORT */

.btn-teleport {
    color: #D4AF37 !important;
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.25);
}

.btn-teleport:hover {
    color: #111 !important;
    background: #D4AF37;
    border-color: #D4AF37;
    transform: translateY(-2px);
}


/* DISCORD */

.btn-discord {
    color: #dcdcdc !important;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
}

.btn-discord:hover {
    color: #fff !important;
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}


/* LOGIN */

.btn-login {
    color: #d6d6d6 !important;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
}

.btn-login:hover {
    color: #D4AF37 !important;
    border-color: rgba(212,175,55,.45);
    background: rgba(212,175,55,.06);
}


/* ACCOUNT */

.btn-account {
    color: #111 !important;
    background: #D4AF37;
    border: 1px solid #D4AF37;
}

.btn-account:hover {
    color: #111 !important;
    background: #e5c65a;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(212,175,55,.20);
}


/* REGISTER */

.btn-register {
    color: #111 !important;
    background: #D4AF37;
    border: 1px solid #D4AF37;
}

.btn-register:hover {
    color: #111 !important;
    background: #e5c65a;
    border-color: #e5c65a;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(212,175,55,.22);
}


/* ==========================================================
   MOBILE TOGGLE
========================================================== */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

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

    margin-left: auto;

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

    background: rgba(255,255,255,.05);
    color: #fff;

    font-size: 19px;

    cursor: pointer;

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

.menu-toggle:hover {
    color: #D4AF37;
    border-color: rgba(212,175,55,.40);
    background: rgba(212,175,55,.08);
}


/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu {
    position: fixed;

    top: 0;
    right: -390px;

    width: min(360px, 88vw);
    height: 100vh;

    z-index: 10001;

    padding: 25px;

    box-sizing: border-box;

    background: #0b0b0b;

    border-left: 1px solid rgba(212,175,55,.18);

    box-shadow: -20px 0 60px rgba(0,0,0,.50);

    overflow-y: auto;

    transition: right .35s ease;
}

.mobile-menu.active {
    right: 0;
}


/* MOBILE HEADER */

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;
    margin-bottom: 15px;

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

.mobile-logo img {
    display: block;

    width: auto;
    max-width: 150px;
    max-height: 50px;
}

.close-menu {
    width: 42px;
    height: 42px;

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

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

    background: rgba(255,255,255,.05);
    color: #fff;

    cursor: pointer;

    font-size: 18px;

    transition: .25s ease;
}

.close-menu:hover {
    color: #D4AF37;
    border-color: rgba(212,175,55,.40);
}


/* MOBILE LINKS */

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu nav a {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 14px 15px;

    color: #d8d8d8 !important;
    text-decoration: none !important;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    transition:
        color .25s ease,
        background .25s ease,
        padding-left .25s ease;
}

.mobile-menu nav a i {
    width: 20px;

    color: #8e8e8e;
    text-align: center;

    transition: color .25s ease;
}

.mobile-menu nav a:hover {
    color: #D4AF37 !important;
    background: rgba(212,175,55,.08);
    padding-left: 20px;
}

.mobile-menu nav a:hover i {
    color: #D4AF37;
}


/* ==========================================================
   MOBILE ACTIONS
========================================================== */

.mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 30px;
    padding-top: 25px;

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

.mobile-buttons > a {
    width: 100%;
    box-sizing: border-box;
}

.mobile-club-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    border-radius: 10px;

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

    font-size: 13px;
    font-weight: 700;
}

.mobile-club-state i {
    font-size: 7px;
}

.mobile-club-state.open {
    color: #72e3a4 !important;
}

.mobile-club-state.open i {
    color: #36d278;
}

.mobile-club-state.closed {
    color: #ff7c7c !important;
}

.mobile-club-state.closed i {
    color: #ff4f4f;
}


/* ==========================================================
   OVERLAY
========================================================== */

.menu-overlay {
    position: fixed;

    inset: 0;

    z-index: 10000;

    background: rgba(0,0,0,.65);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}


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

@media (max-width: 1250px) {

    .header-wrapper {
        gap: 15px;
    }

    .desktop-menu {
        gap: 0;
    }

    .desktop-menu a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 12px;
    }

    .desktop-menu a i {
        display: none;
    }

    .header-actions {
        gap: 5px;
    }

    .club-state {
        display: none;
    }

    .btn-teleport,
    .btn-discord {
        padding: 0 10px;
    }

}


@media (max-width: 1050px) {

    .desktop-menu {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .menu-toggle {
        display: flex;
    }

    .btn-login {
        display: none;
    }

}


@media (max-width: 700px) {

    .main-header {
        position: sticky;
    }

    .header-wrapper {
        min-height: 70px;
    }

    .main-header .logo img {
        max-width: 145px;
        max-height: 48px;
    }

    .header-actions {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

}


@media (max-width: 400px) {

    .mobile-menu {
        width: 92vw;
        padding: 20px;
    }

}
body.menu-open {
    overflow: hidden;
}
/* ==========================================================
   FOOTER PREMIUM - FINAL
========================================================== */

.footer-premium {
    margin-top: 0;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-links a i {
    width: 18px;
    color: var(--gold);
    text-align: center;
}

.footer-contact {
    margin-top: 30px;
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;

    border: 1px solid rgba(212,175,55,.30);
    border-radius: 30px;

    color: var(--gold) !important;
    text-decoration: none;

    transition: .35s;
}

.footer-contact a:hover {
    background: var(--gold);
    color: #111 !important;
    transform: translateY(-3px);
}

.footer-contact a i {
    font-size: 14px;
}

.footer-legal-link {
    color: #bdbdbd !important;
    text-decoration: none;
    transition: .3s;
}

.footer-legal-link:hover {
    color: var(--gold) !important;
}

.footer-separator {
    margin: 0 10px;
    color: #555;
}
/* ==========================================================
   FOOTER - FINAL LAYOUT FIX
========================================================== */

.footer-premium {
    padding: 55px 0 25px !important;
}

.footer-premium .row {
    align-items: flex-start;
}

.footer-logo {
    margin-bottom: 15px !important;
}

.footer-logo img {
    width: auto;
    height: 75px !important;
    max-width: 230px;
    object-fit: contain;
}

.footer-premium h3 {
    font-size: 25px !important;
    margin: 5px 0 12px !important;
}

.footer-premium h4 {
    font-size: 19px !important;
    margin-bottom: 18px !important;
}

.footer-premium p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.footer-links li {
    margin-bottom: 9px !important;
}

.footer-links a {
    font-size: 14px;
}

.footer-social {
    margin-top: 20px !important;
}

.footer-social a {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
}

.footer-contact {
    margin-top: 20px !important;
}

.footer-divider {
    margin: 35px 0 20px !important;
}

.footer-bottom p {
    font-size: 13px;
    margin: 5px 0;
}


/* ==========================================================
   FOOTER MOBILE
========================================================== */

@media (max-width: 991px) {

    .footer-premium {
        padding: 45px 0 25px !important;
    }

    .footer-premium .row {
        text-align: center;
    }

    .footer-logo img {
        height: 75px !important;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links {
        text-align: center;
    }

}
/* ==========================================================
   FOOTER - FINAL POLISH
========================================================== */

.footer-logo img {
    height: 90px !important;
    max-width: 260px;
}

.footer-premium {
    padding-top: 45px !important;
}
/* ==========================================================
   HOME - ESPACE SOUS LA NAVBAR
========================================================== */

.hero-wrapper {
    padding-top: 35px !important;
    padding-bottom: 70px !important;
}

@media (max-width: 768px) {

    .hero-wrapper {
        padding-top: 25px !important;
        padding-bottom: 60px !important;
    }

}
/* ==========================================================
   HOME HERO - REMOVE TOP GAP
========================================================== */

.hero {
    position: relative;
    min-height: calc(100vh - 82px);
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-content {
    min-height: calc(100vh - 82px);
    padding-top: 35px;
    padding-bottom: 50px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: calc(100vh - 70px);
    }

    .hero-content {
        min-height: calc(100vh - 70px);
        padding-top: 25px;
        padding-bottom: 40px;
    }

}
/* ==========================================================
   HOME - REMONTER LE CONTENU DU HERO
========================================================== */

.hero-content {
    min-height: calc(100vh - 82px);
    align-items: flex-start !important;
    padding-top: 150px !important;
    padding-bottom: 50px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .hero-content {
        min-height: calc(100vh - 70px);
        padding-top: 70px !important;
        padding-bottom: 40px;
    }

}
/* ==========================================================
   HOME HERO - FINAL POSITION
========================================================== */

.hero-section {
    min-height: calc(100vh - 82px) !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hero-wrapper {
    width: 100%;
    padding-top: 10px !important;
    padding-bottom: 70px !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .hero-section {
        min-height: calc(100vh - 70px) !important;
    }

    .hero-wrapper {
        padding-top: 45px !important;
        padding-bottom: 50px !important;
    }

}
/* ==========================================================
   MEMBER AUTH PAGE
========================================================== */

.member-auth-page {
    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;

    padding: 65px 20px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(212,175,55,.09),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(212,175,55,.06),
            transparent 35%
        ),
        #080808;
}


.member-auth-container {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 480px;

    gap: 70px;

    align-items: center;
}


/* ==========================================================
   INTRO
========================================================== */

.member-auth-intro {
    max-width: 560px;
}


.member-auth-logo {
    margin-bottom: 25px;
}


.member-auth-logo img {
    width: auto;
    max-width: 230px;
    height: 80px;

    object-fit: contain;
}


.member-auth-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color: #D4AF37;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;
}


.member-auth-intro h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.05;

    font-weight: 800;
}


.member-auth-intro p {
    max-width: 500px;

    margin: 0 0 35px;

    color: #a8a8a8;

    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================
   FEATURES
========================================================== */

.member-auth-features {
    display: flex;
    flex-direction: column;

    gap: 13px;
}


.member-auth-features > div {
    display: flex;
    align-items: center;

    gap: 13px;

    color: #d5d5d5;

    font-size: 14px;
}


.member-auth-features i {
    width: 35px;
    height: 35px;

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

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 9px;
}


/* ==========================================================
   LOGIN CARD
========================================================== */

.member-auth-card {
    width: 100%;

    box-sizing: border-box;

    padding: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

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

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);

    backdrop-filter: blur(18px);
}


.member-auth-card-header {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 30px;
}


.member-auth-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    color: #111;

    background: #D4AF37;

    border-radius: 13px;

    font-size: 18px;
}


.member-auth-small-title {
    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.member-auth-card h2 {
    margin: 0;

    color: #fff;

    font-size: 28px;
}


/* ==========================================================
   ALERTS
========================================================== */

.member-alert {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.5;
}


.member-alert.success {
    color: #8ce5ae;

    background: rgba(54,210,120,.08);

    border: 1px solid rgba(54,210,120,.20);
}


.member-alert.error {
    color: #ff9a9a;

    background: rgba(255,70,70,.07);

    border: 1px solid rgba(255,70,70,.18);
}


.member-alert i {
    margin-top: 2px;
}


/* ==========================================================
   FORM
========================================================== */

.member-auth-form {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


.member-form-group {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.member-form-group label {
    color: #d7d7d7;

    font-size: 12px;
    font-weight: 700;
}


.member-form-group label i {
    margin-right: 5px;

    color: #D4AF37;
}


.member-input {
    position: relative;

    display: flex;
    align-items: center;
}


.member-input > i {
    position: absolute;
    left: 15px;

    color: #777;

    font-size: 13px;

    pointer-events: none;
}


.member-input input {
    width: 100%;
    height: 48px;

    box-sizing: border-box;

    padding: 0 45px 0 42px;

    color: #fff;

    background: rgba(0,0,0,.30);

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

    border-radius: 10px;

    outline: none;

    font-size: 13px;

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


.member-input input::placeholder {
    color: #666;
}


.member-input input:focus {
    background: rgba(0,0,0,.45);

    border-color: rgba(212,175,55,.60);

    box-shadow: 0 0 0 3px rgba(212,175,55,.08);
}


.password-toggle {
    position: absolute;

    right: 10px;

    width: 34px;
    height: 34px;

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

    border: 0;

    background: transparent;

    color: #777;

    cursor: pointer;

    border-radius: 7px;

    transition: .25s ease;
}


.password-toggle:hover {
    color: #D4AF37;

    background: rgba(212,175,55,.08);
}


/* ==========================================================
   OPTIONS
========================================================== */

.member-form-options {
    display: flex;
    justify-content: flex-end;

    margin-top: -7px;
}


.member-forgot {
    color: #929292 !important;

    font-size: 12px;

    text-decoration: none;

    transition: .25s ease;
}


.member-forgot:hover {
    color: #D4AF37 !important;
}


/* ==========================================================
   SUBMIT
========================================================== */

.member-auth-submit {
    width: 100%;
    min-height: 50px;

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

    gap: 9px;

    border: 1px solid #D4AF37;
    border-radius: 10px;

    background: #D4AF37;

    color: #111;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

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


.member-auth-submit:hover {
    background: #e5c65a;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(212,175,55,.20);
}


/* ==========================================================
   REGISTER
========================================================== */

.member-auth-register {
    margin-top: 28px;
    padding-top: 23px;

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

    text-align: center;
}


.member-auth-register span {
    display: block;

    margin-bottom: 10px;

    color: #858585;

    font-size: 12px;
}


.member-auth-register a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #D4AF37 !important;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


.member-auth-register a:hover {
    color: #e5c65a !important;
}


/* ==========================================================
   BACK
========================================================== */

.member-auth-back {
    margin-top: 22px;

    text-align: center;
}


.member-auth-back a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #666 !important;

    font-size: 11px;

    text-decoration: none;

    transition: .25s ease;
}


.member-auth-back a:hover {
    color: #D4AF37 !important;
}


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

@media (max-width: 950px) {

    .member-auth-container {
        grid-template-columns: 1fr;

        max-width: 600px;

        gap: 40px;
    }

    .member-auth-intro {
        max-width: none;

        text-align: center;
    }

    .member-auth-logo {
        display: flex;
        justify-content: center;
    }

    .member-auth-intro p {
        margin-left: auto;
        margin-right: auto;
    }

    .member-auth-features {
        display: grid;
        grid-template-columns: 1fr 1fr;

        text-align: left;
    }

}


@media (max-width: 600px) {

    .member-auth-page {
        padding: 40px 15px;
    }

    .member-auth-card {
        padding: 25px 20px;

        border-radius: 15px;
    }

    .member-auth-intro h1 {
        font-size: 40px;
    }

    .member-auth-logo img {
        height: 65px;
        max-width: 190px;
    }

    .member-auth-features {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================
   REGISTER - COMMUNITY RULES
========================================================== */

.member-rules {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #929292;

    font-size: 12px;
    line-height: 1.5;

    cursor: pointer;
}

.member-rules input {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    margin-top: 1px;

    accent-color: #D4AF37;

    cursor: pointer;
}

.member-rules a {
    color: #D4AF37 !important;
    text-decoration: none;
}

.member-rules a:hover {
    color: #e5c65a !important;
}
/* ==========================================================
   MEMBER DASHBOARD
========================================================== */

.member-dashboard-page {
    min-height: calc(100vh - 82px);

    padding: 60px 20px 80px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212,175,55,.05),
            transparent 32%
        ),
        #080808;
}


.member-dashboard-container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* ==========================================================
   WELCOME
========================================================== */

.member-dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}


.member-dashboard-kicker {
    display: block;

    margin-bottom: 8px;

    color: #D4AF37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}


.member-dashboard-welcome h1 {
    margin: 0 0 10px;

    color: #fff;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;
}


.member-dashboard-welcome h1 span {
    color: #D4AF37;
}


.member-dashboard-welcome p {
    max-width: 650px;

    margin: 0;

    color: #8f8f8f;

    font-size: 14px;
    line-height: 1.7;
}


.member-dashboard-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;

    color: #72e3a4;

    background: rgba(54,210,120,.07);

    border: 1px solid rgba(54,210,120,.16);

    border-radius: 30px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


.member-dashboard-status i {
    font-size: 7px;

    color: #36d278;
}


/* ==========================================================
   PROFILE SUMMARY
========================================================== */

.member-dashboard-profile {
    display: flex;
    align-items: center;

    gap: 22px;

    padding: 22px 25px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

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

    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}


.member-dashboard-avatar {
    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.45);

    background: #111;
}


.member-dashboard-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.member-dashboard-profile-info {
    min-width: 180px;

    flex: 1;
}


.member-dashboard-label {
    display: block;

    margin-bottom: 3px;

    color: #777;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.member-dashboard-profile-info h2 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 20px;
}


.member-dashboard-level {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #D4AF37;

    font-size: 11px;
    font-weight: 700;
}


.member-dashboard-stat {
    min-width: 90px;

    padding-left: 22px;

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


.member-dashboard-stat span {
    display: block;

    margin-bottom: 5px;

    color: #666;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.member-dashboard-stat strong {
    display: block;

    color: #D4AF37;

    font-size: 20px;
}


.member-dashboard-stat .country-value {
    color: #ddd;

    font-size: 13px;
}


.member-dashboard-profile-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    color: #111 !important;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;

    transition: .25s ease;
}


.member-dashboard-profile-button:hover {
    background: #e5c65a;

    transform: translateY(-2px);
}


/* ==========================================================
   DASHBOARD CARDS
========================================================== */

.member-dashboard-grid {
    display: grid;

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

    gap: 15px;
}


.member-dashboard-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 16px;

    min-height: 145px;

    padding: 22px;

    box-sizing: border-box;

    color: inherit !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

    border-radius: 14px;

    text-decoration: none !important;

    overflow: hidden;

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


.member-dashboard-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: #D4AF37;

    transition: width .3s ease;
}


.member-dashboard-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212,175,55,.28);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.07),
            rgba(255,255,255,.025)
        );

    box-shadow: 0 15px 35px rgba(0,0,0,.25);
}


.member-dashboard-card:hover::before {
    width: 100%;
}


.member-dashboard-card-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border: 1px solid rgba(212,175,55,.14);

    border-radius: 11px;

    font-size: 16px;
}


.member-dashboard-card-icon.gold {
    color: #111;

    background: #D4AF37;

    border-color: #D4AF37;
}


.member-dashboard-card-content {
    padding-right: 20px;
}


.member-dashboard-card-content h3 {
    margin: 2px 0 8px;

    color: #fff;

    font-size: 16px;
}


.member-dashboard-card-content p {
    margin: 0;

    color: #858585;

    font-size: 12px;

    line-height: 1.6;
}


.member-dashboard-arrow {
    position: absolute;

    right: 18px;
    bottom: 17px;

    color: #555;

    font-size: 12px;

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


.member-dashboard-card:hover
.member-dashboard-arrow {
    color: #D4AF37;

    transform: translateX(4px);
}


/* LOGOUT */

.member-dashboard-card.logout:hover {
    border-color: rgba(255,80,80,.25);
}

.member-dashboard-card.logout:hover
.member-dashboard-card-icon {
    color: #ff8585;
    background: rgba(255,80,80,.07);
    border-color: rgba(255,80,80,.15);
}


/* ==========================================================
   BIO
========================================================== */

.member-dashboard-bio {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-top: 25px;

    padding: 20px;

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

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

    border-radius: 14px;
}


.member-dashboard-bio-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

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

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border-radius: 9px;
}


.member-dashboard-bio span {
    display: block;

    margin-bottom: 6px;

    color: #D4AF37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.member-dashboard-bio p {
    margin: 0;

    color: #999;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   BACK
========================================================== */

.member-dashboard-back {
    margin-top: 30px;

    text-align: center;
}


.member-dashboard-back a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #666 !important;

    font-size: 11px;

    text-decoration: none !important;

    transition: .25s ease;
}


.member-dashboard-back a:hover {
    color: #D4AF37 !important;
}


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

@media (max-width: 950px) {

    .member-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .member-dashboard-page {
        padding: 40px 15px 60px;
    }

    .member-dashboard-welcome {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .member-dashboard-profile {
        flex-wrap: wrap;

        padding: 20px;
    }

    .member-dashboard-profile-info {
        min-width: calc(100% - 100px);
    }

    .member-dashboard-stat {
        border-left: 0;

        padding-left: 0;
    }

    .member-dashboard-profile-button {
        width: 100%;

        justify-content: center;
    }

    .member-dashboard-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 450px) {

    .member-dashboard-profile {
        gap: 15px;
    }

    .member-dashboard-avatar {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }

    .member-dashboard-profile-info h2 {
        font-size: 17px;
    }

}
/* ==========================================================
   MEMBER PROFILE
========================================================== */

.member-profile-page {
    min-height: calc(100vh - 82px);

    padding: 60px 20px 80px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212,175,55,.05),
            transparent 32%
        ),
        #080808;
}

.member-profile-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* HEADER */

.member-profile-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
    margin-bottom: 30px;
}

.member-profile-header h1 {
    margin: 0 0 8px;

    color: #fff;
    font-size: 42px;
}

.member-profile-header p {
    margin: 0;

    color: #858585;
    font-size: 14px;
}

.member-profile-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 17px;

    color: #111 !important;
    background: #D4AF37;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;
}

.member-profile-edit:hover {
    background: #e5c65a;
}


/* HERO */

.member-profile-hero {
    display: flex;
    align-items: center;

    gap: 22px;

    padding: 25px;

    margin-bottom: 45px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.02)
        );

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
}

.member-profile-avatar {
    width: 95px;
    height: 95px;

    flex: 0 0 95px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.5);

    background: #111;
}

.member-profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.member-profile-identity {
    flex: 1;
}

.member-profile-identity > span,
.member-profile-points span {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.member-profile-identity h2 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 25px;
}

.member-profile-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #D4AF37;

    font-size: 12px;
    font-weight: 700;
}

.member-profile-points {
    min-width: 120px;

    padding-left: 25px;

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

.member-profile-points strong {
    color: #D4AF37;
    font-size: 28px;
}


/* SECTION TITLES */

.member-profile-section-title {
    margin-bottom: 18px;
}

.member-profile-section-title span {
    color: #D4AF37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.member-profile-section-title h2 {
    margin: 5px 0 0;

    color: #fff;

    font-size: 23px;
}


/* INFO */

.member-profile-info-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 40px;
}

.member-profile-info-card {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 18px;

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

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

    border-radius: 12px;
}

.member-profile-info-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border-radius: 9px;
}

.member-profile-info-card span {
    display: block;

    margin-bottom: 4px;

    color: #666;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.member-profile-info-card strong {
    color: #ddd;

    font-size: 13px;

    word-break: break-word;
}


/* BIO */

.member-profile-bio {
    display: flex;
    align-items: flex-start;

    gap: 15px;

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

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

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

    border-radius: 13px;
}

.member-profile-bio-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border-radius: 9px;
}

.member-profile-bio p {
    margin: 0;

    color: #999;

    font-size: 13px;
    line-height: 1.8;
}

.member-profile-bio p.empty {
    color: #666;
    font-style: italic;
}


/* BADGES */

.member-profile-badges {
    display: grid;

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

    gap: 14px;

    margin-bottom: 40px;
}

.member-profile-badge {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

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

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

    border-radius: 12px;
}

.member-profile-badge-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    color: #111;

    border-radius: 10px;
}

.member-profile-badge strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-size: 13px;
}

.member-profile-badge span {
    display: block;

    color: #777;

    font-size: 10px;
    line-height: 1.5;
}


/* EMPTY */

.member-profile-empty {
    padding: 35px;

    margin-bottom: 40px;

    text-align: center;

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

    border: 1px dashed rgba(255,255,255,.09);

    border-radius: 13px;
}

.member-profile-empty > i {
    margin-bottom: 12px;

    color: #D4AF37;

    font-size: 28px;
}

.member-profile-empty h3 {
    margin: 0 0 6px;

    color: #ddd;

    font-size: 16px;
}

.member-profile-empty p {
    margin: 0;

    color: #666;

    font-size: 12px;
}


/* ACTIONS */

.member-profile-actions {
    display: flex;
    justify-content: center;

    gap: 12px;

    padding-top: 10px;
}

.member-profile-action-primary,
.member-profile-action-secondary {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 12px 17px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;
}

.member-profile-action-primary {
    color: #111 !important;

    background: #D4AF37;
}

.member-profile-action-secondary {
    color: #aaa !important;

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

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

.member-profile-action-primary:hover {
    background: #e5c65a;
}

.member-profile-action-secondary:hover {
    color: #D4AF37 !important;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .member-profile-badges {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 650px) {

    .member-profile-page {
        padding: 40px 15px 60px;
    }

    .member-profile-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-profile-header h1 {
        font-size: 34px;
    }

    .member-profile-hero {
        flex-wrap: wrap;
    }

    .member-profile-points {
        width: 100%;

        padding-left: 0;
        padding-top: 15px;

        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .member-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .member-profile-badges {
        grid-template-columns: 1fr;
    }

    .member-profile-actions {
        flex-direction: column;
    }

    .member-profile-action-primary,
    .member-profile-action-secondary {
        justify-content: center;
    }

}
/* ==========================================================
   MEMBER EDIT PROFILE
========================================================== */

.member-edit-page {
    min-height: calc(100vh - 82px);

    padding: 60px 20px 80px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212, 175, 55, .08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212, 175, 55, .05),
            transparent 32%
        ),
        #080808;
}


.member-edit-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


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

.member-edit-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}


.member-edit-header h1 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 800;

    line-height: 1.1;
}


.member-edit-header p {
    margin: 0;

    color: #858585;

    font-size: 14px;
    line-height: 1.7;
}


.member-edit-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 15px;

    color: #aaaaaa !important;

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

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

    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none !important;

    white-space: nowrap;

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


.member-edit-back:hover {
    color: #D4AF37 !important;

    background: rgba(212, 175, 55, .05);

    border-color: rgba(212, 175, 55, .25);

    transform: translateY(-1px);
}


/* ==========================================================
   MAIN FORM LAYOUT
========================================================== */

.member-edit-form {
    display: grid;

    grid-template-columns: 270px minmax(0, 1fr);

    gap: 20px;

    align-items: start;
}


/* ==========================================================
   AVATAR CARD
========================================================== */

.member-edit-avatar-card {
    padding: 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02)
        );

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

    border-radius: 16px;

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


.member-edit-section-label {
    display: block;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* ==========================================================
   AVATAR
========================================================== */

.member-edit-avatar {
    width: 135px;
    height: 135px;

    margin: 0 auto 18px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid rgba(212, 175, 55, .50);

    background: #111111;

    box-shadow:
        0 0 0 6px rgba(212, 175, 55, .04),
        0 15px 35px rgba(0, 0, 0, .35);
}


.member-edit-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.member-edit-avatar-card h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;

    word-break: break-word;
}


.member-edit-level {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 11px;
    font-weight: 700;
}


.member-edit-level i {
    font-size: 10px;
}


/* ==========================================================
   UPLOAD BUTTON
========================================================== */

.member-edit-upload {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    box-sizing: border-box;

    padding: 11px 10px;

    color: #111111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

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


.member-edit-upload:hover {
    background: #e5c65a;

    border-color: #e5c65a;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, .15);
}


.member-edit-upload i {
    font-size: 12px;
}


.member-edit-avatar-card small {
    display: block;

    margin-top: 12px;

    color: #666666;

    font-size: 9px;

    line-height: 1.5;
}


/* ==========================================================
   MAIN CARD
========================================================== */

.member-edit-card {
    min-width: 0;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02)
        );

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

    border-radius: 16px;

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


/* ==========================================================
   CARD HEADER
========================================================== */

.member-edit-card-header {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);
}


.member-edit-card-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    color: #111111;

    background: #D4AF37;

    border-radius: 10px;

    font-size: 15px;
}


.member-edit-card-header span {
    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.member-edit-card-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;
}


/* ==========================================================
   ALERTS
========================================================== */

.member-edit-card .member-alert {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 22px;

    padding: 13px 15px;

    border-radius: 9px;

    font-size: 12px;

    line-height: 1.5;
}


.member-edit-card .member-alert.success {
    color: #8ce5ae;

    background: rgba(54, 210, 120, .07);

    border: 1px solid rgba(54, 210, 120, .18);
}


.member-edit-card .member-alert.error {
    color: #ff9999;

    background: rgba(255, 70, 70, .07);

    border: 1px solid rgba(255, 70, 70, .18);
}


.member-edit-card .member-alert > i {
    margin-top: 2px;
}


/* ==========================================================
   FIELDS GRID
========================================================== */

.member-edit-fields {
    display: grid;

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

    gap: 19px 15px;
}


.member-edit-field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}


.member-edit-field.full {
    grid-column: 1 / -1;
}


/* ==========================================================
   LABELS
========================================================== */

.member-edit-field label {
    color: #d0d0d0;

    font-size: 11px;
    font-weight: 700;
}


.member-edit-field label i {
    margin-right: 5px;

    color: #D4AF37;

    font-size: 10px;
}


/* ==========================================================
   INPUTS
========================================================== */

.member-edit-field input,
.member-edit-field textarea {
    width: 100%;

    box-sizing: border-box;

    color: #ffffff;

    background: rgba(0, 0, 0, .30);

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

    border-radius: 9px;

    outline: none;

    font-family: inherit;

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


.member-edit-field input {
    height: 46px;

    padding: 0 14px;

    font-size: 12px;
}


.member-edit-field textarea {
    min-height: 145px;

    padding: 13px 14px;

    resize: vertical;

    font-size: 12px;

    line-height: 1.7;
}


.member-edit-field input::placeholder,
.member-edit-field textarea::placeholder {
    color: #5e5e5e;
}


/* ==========================================================
   INPUT FOCUS
========================================================== */

.member-edit-field input:focus,
.member-edit-field textarea:focus {
    background: rgba(0, 0, 0, .45);

    border-color: rgba(212, 175, 55, .55);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, .07);
}


/* ==========================================================
   DATE INPUT
========================================================== */

.member-edit-field input[type="date"] {
    color-scheme: dark;
}


.member-edit-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .65;

    cursor: pointer;
}


/* ==========================================================
   ACTIONS
========================================================== */

.member-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 28px;

    padding-top: 22px;

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


.member-edit-cancel,
.member-edit-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 45px;

    padding: 0 17px;

    box-sizing: border-box;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;

    cursor: pointer;

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


/* CANCEL */

.member-edit-cancel {
    color: #999999 !important;

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

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


.member-edit-cancel:hover {
    color: #D4AF37 !important;

    background: rgba(212, 175, 55, .05);

    border-color: rgba(212, 175, 55, .20);

    transform: translateY(-1px);
}


/* SAVE */

.member-edit-save {
    color: #111111;

    background: #D4AF37;

    border: 1px solid #D4AF37;
}


.member-edit-save:hover {
    color: #111111;

    background: #e5c65a;

    border-color: #e5c65a;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, .15);
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .member-edit-form {
        grid-template-columns: 1fr;
    }


    .member-edit-avatar-card {
        width: 100%;

        box-sizing: border-box;
    }


    .member-edit-avatar {
        width: 120px;
        height: 120px;
    }

}


@media (max-width: 650px) {

    .member-edit-page {
        padding: 40px 15px 60px;
    }


    .member-edit-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }


    .member-edit-header h1 {
        font-size: 34px;
    }


    .member-edit-header p {
        font-size: 13px;
    }


    .member-edit-back {
        width: 100%;

        box-sizing: border-box;
    }


    .member-edit-card {
        padding: 22px 18px;
    }


    .member-edit-fields {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .member-edit-field.full {
        grid-column: auto;
    }


    .member-edit-card-header {
        align-items: flex-start;
    }


    .member-edit-card-header h2 {
        font-size: 19px;
    }


    .member-edit-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .member-edit-cancel,
    .member-edit-save {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .member-edit-avatar-card {
        padding: 20px 16px;
    }


    .member-edit-avatar {
        width: 110px;
        height: 110px;
    }


    .member-edit-card {
        padding: 20px 15px;
    }

}
/* ==========================================================
   MEMBER NOTIFICATIONS
========================================================== */

.member-notifications-page {
    min-height: calc(100vh - 82px);

    padding: 60px 20px 80px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212,175,55,.05),
            transparent 32%
        ),
        #080808;
}


.member-notifications-container {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
}


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

.member-notifications-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;
}


.member-notifications-header h1 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 800;

    line-height: 1.1;
}


.member-notifications-header p {
    margin: 0;

    color: #858585;

    font-size: 14px;

    line-height: 1.7;
}


.member-notifications-header-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


/* ==========================================================
   UNREAD COUNT
========================================================== */

.member-notifications-count {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 30px;

    font-size: 10px;
    font-weight: 800;
}


.member-notifications-count i {
    font-size: 11px;
}


/* ==========================================================
   MARK ALL READ
========================================================== */

.member-notifications-read-form {
    margin: 0;
}


.member-notifications-read-form button {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 13px;

    color: #aaa;

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

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

    border-radius: 9px;

    font-family: inherit;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

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


.member-notifications-read-form button:hover {
    color: #D4AF37;

    background: rgba(212,175,55,.05);

    border-color: rgba(212,175,55,.20);
}


/* ==========================================================
   BACK
========================================================== */

.member-notifications-back {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 13px;

    color: #999 !important;

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

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

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;

    transition: .25s ease;
}


.member-notifications-back:hover {
    color: #D4AF37 !important;

    border-color: rgba(212,175,55,.20);
}


/* ==========================================================
   LIST
========================================================== */

.member-notifications-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ==========================================================
   NOTIFICATION CARD
========================================================== */

.member-notification-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 17px;

    padding: 21px 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

    border-radius: 14px;

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


.member-notification-card:hover {
    transform: translateY(-2px);

    border-color: rgba(212,175,55,.18);
}


/* UNREAD */

.member-notification-card.unread {
    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.075),
            rgba(255,255,255,.018)
        );

    border-color: rgba(212,175,55,.20);
}


.member-notification-card.unread::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #D4AF37;

    border-radius: 14px 0 0 14px;
}


/* READ */

.member-notification-card.read {
    opacity: .72;
}


/* ==========================================================
   ICON
========================================================== */

.member-notification-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    color: #777;

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

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

    border-radius: 11px;

    font-size: 15px;
}


.member-notification-card.unread
.member-notification-icon {
    color: #D4AF37;

    background: rgba(212,175,55,.09);

    border-color: rgba(212,175,55,.18);
}


/* ==========================================================
   CONTENT
========================================================== */

.member-notification-content {
    min-width: 0;

    flex: 1;
}


.member-notification-top {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 7px;
}


.member-notification-top h2 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
}


.member-notification-content p {
    margin: 0 0 10px;

    color: #909090;

    font-size: 12px;

    line-height: 1.7;
}


.member-notification-content time {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #5f5f5f;

    font-size: 9px;
}


.member-notification-content time i {
    color: #777;
}


/* ==========================================================
   NEW BADGE
========================================================== */

.member-notification-new {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    color: #111;

    background: #D4AF37;

    border-radius: 5px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1px;
}


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

.member-notifications-empty {
    padding: 65px 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

    border-radius: 16px;
}


.member-notifications-empty-icon {
    width: 65px;
    height: 65px;

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

    margin: 0 auto 18px;

    color: #D4AF37;

    background: rgba(212,175,55,.08);

    border: 1px solid rgba(212,175,55,.13);

    border-radius: 50%;

    font-size: 23px;
}


.member-notifications-empty h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 21px;
}


.member-notifications-empty p {
    max-width: 520px;

    margin: 0 auto 25px;

    color: #777;

    font-size: 12px;

    line-height: 1.7;
}


.member-notifications-empty-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 11px 16px;

    color: #111 !important;

    background: #D4AF37;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none !important;

    transition: .25s ease;
}


.member-notifications-empty-button:hover {
    background: #e5c65a;

    transform: translateY(-2px);
}


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

@media (max-width: 750px) {

    .member-notifications-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .member-notifications-header-actions {
        width: 100%;

        justify-content: flex-start;
    }

}


@media (max-width: 600px) {

    .member-notifications-page {
        padding: 40px 15px 60px;
    }


    .member-notifications-header h1 {
        font-size: 34px;
    }


    .member-notifications-header-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .member-notifications-count,
    .member-notifications-read-form,
    .member-notifications-read-form button,
    .member-notifications-back {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }


    .member-notification-card {
        gap: 12px;

        padding: 18px 16px;
    }


    .member-notification-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .member-notification-top {
        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }


    .member-notification-top h2 {
        font-size: 14px;
    }

}
/* ==========================================================
   MEMBER MESSAGES
========================================================== */

.member-messages-page {
    min-height: calc(100vh - 82px);

    padding: 50px 20px 70px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212,175,55,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(212,175,55,.05),
            transparent 32%
        ),
        #080808;
}


.member-messages-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


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

.member-messages-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.member-messages-header h1 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 40px;
    font-weight: 800;

    line-height: 1.1;
}


.member-messages-header p {
    margin: 0;

    color: #858585;

    font-size: 13px;
}


.member-messages-back {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    color: #999999 !important;

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

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

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;

    transition: .25s ease;
}


.member-messages-back:hover {
    color: #D4AF37 !important;

    border-color: rgba(212,175,55,.22);
}


/* ==========================================================
   CHAT APPLICATION
========================================================== */

.member-messages-app {
    display: grid;

    grid-template-columns: 315px minmax(0,1fr);

    height: 650px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

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

    border-radius: 16px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.30);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.member-messages-sidebar {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background: rgba(0,0,0,.20);

    border-right: 1px solid rgba(255,255,255,.07);
}


.member-messages-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 20px 15px;
}


.member-messages-sidebar-header span:first-child {
    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2px;
}


.member-messages-sidebar-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
}


.member-messages-member-count {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    color: #111111;

    background: #D4AF37;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}


/* ==========================================================
   SEARCH
========================================================== */

.member-messages-search {
    position: relative;

    margin: 0 15px 15px;
}


.member-messages-search i {
    position: absolute;

    top: 50%;
    left: 13px;

    color: #666666;

    font-size: 11px;

    transform: translateY(-50%);
}


.member-messages-search input {
    width: 100%;
    height: 40px;

    box-sizing: border-box;

    padding: 0 12px 0 34px;

    color: #ffffff;

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

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

    border-radius: 8px;

    outline: none;

    font-family: inherit;

    font-size: 11px;
}


.member-messages-search input::placeholder {
    color: #555555;
}


.member-messages-search input:focus {
    border-color: rgba(212,175,55,.35);
}


/* ==========================================================
   MEMBER LIST
========================================================== */

.member-messages-members {
    flex: 1;

    overflow-y: auto;

    padding: 0 8px 10px;
}


.member-messages-members::-webkit-scrollbar,
.member-messages-chat-body::-webkit-scrollbar {
    width: 5px;
}


.member-messages-members::-webkit-scrollbar-thumb,
.member-messages-chat-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.10);

    border-radius: 10px;
}


/* CONTACT */

.member-message-contact {
    position: relative;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 11px 10px;

    margin-bottom: 3px;

    color: inherit !important;

    border-radius: 10px;

    text-decoration: none !important;

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


.member-message-contact:hover {
    background: rgba(255,255,255,.045);
}


.member-message-contact.active {
    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.12),
            rgba(212,175,55,.04)
        );
}


.member-message-contact.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    background: #D4AF37;

    border-radius: 0 3px 3px 0;
}


/* AVATAR */

.member-message-avatar {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    overflow: hidden;

    background: #111111;

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

    border-radius: 50%;
}


.member-message-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.member-message-avatar.large {
    width: 45px;
    height: 45px;

    flex-basis: 45px;

    border-color: rgba(212,175,55,.30);
}


/* CONTACT INFO */

.member-message-contact-info {
    min-width: 0;

    flex: 1;
}


.member-message-contact-info strong {
    display: block;

    overflow: hidden;

    color: #dddddd;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.member-message-contact-info span {
    display: block;

    overflow: hidden;

    margin-top: 4px;

    color: #666666;

    font-size: 9px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.member-message-contact.active
.member-message-contact-info strong {
    color: #D4AF37;
}


.member-message-contact-info span.no-message {
    color: #555555;
}


/* UNREAD */

.member-message-unread {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;

    padding: 0 4px;

    color: #111111;

    background: #D4AF37;

    border-radius: 10px;

    font-size: 8px;
    font-weight: 900;
}


/* ==========================================================
   NO MEMBERS
========================================================== */

.member-messages-no-members {
    padding: 40px 20px;

    text-align: center;

    color: #555555;
}


.member-messages-no-members i {
    margin-bottom: 10px;

    color: #D4AF37;

    font-size: 25px;
}


.member-messages-no-members p {
    margin: 0;

    font-size: 11px;
}


/* ==========================================================
   CONVERSATION
========================================================== */

.member-messages-conversation {
    display: flex;
    flex-direction: column;

    min-width: 0;

    min-height: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(212,175,55,.035),
            transparent 35%
        ),
        #0b0b0b;
}


/* ==========================================================
   CHAT HEADER
========================================================== */

.member-messages-chat-header {
    display: flex;
    align-items: center;

    min-height: 72px;

    padding: 0 22px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


.member-messages-chat-user {
    display: flex;
    align-items: center;

    gap: 12px;
}


.member-messages-chat-user strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 13px;
}


.member-messages-chat-user span {
    display: block;

    color: #D4AF37;

    font-size: 9px;
    font-weight: 700;
}


/* ==========================================================
   CHAT BODY
========================================================== */

.member-messages-chat-body {
    flex: 1;

    overflow-y: auto;

    padding: 25px;

    scroll-behavior: smooth;
}


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

.member-chat-message {
    display: flex;

    flex-direction: column;

    max-width: 70%;

    margin-bottom: 15px;
}


.member-chat-message.received {
    align-items: flex-start;

    margin-right: auto;
}


.member-chat-message.mine {
    align-items: flex-end;

    margin-left: auto;
}


/* BUBBLE */

.member-chat-bubble {
    padding: 11px 14px;

    color: #d0d0d0;

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

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

    border-radius: 13px 13px 13px 4px;

    font-size: 12px;

    line-height: 1.6;

    word-break: break-word;
}


.member-chat-message.mine
.member-chat-bubble {
    color: #151515;

    background: #D4AF37;

    border-color: #D4AF37;

    border-radius: 13px 13px 4px 13px;
}


/* TIME */

.member-chat-message time {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-top: 5px;

    color: #555555;

    font-size: 8px;
}


.member-chat-message.mine time i {
    color: #777777;
}


/* ==========================================================
   EMPTY CONVERSATION
========================================================== */

.member-messages-empty-conversation {
    display: flex;

    flex-direction: column;

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

    height: 100%;

    text-align: center;
}


.member-messages-empty-conversation > div {
    width: 58px;
    height: 58px;

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

    margin-bottom: 15px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

    border: 1px solid rgba(212,175,55,.13);

    border-radius: 50%;

    font-size: 21px;
}


.member-messages-empty-conversation h3 {
    margin: 0 0 7px;

    color: #dddddd;

    font-size: 17px;
}


.member-messages-empty-conversation p {
    margin: 0;

    color: #666666;

    font-size: 11px;
}


/* ==========================================================
   MESSAGE FORM
========================================================== */

.member-messages-form {
    display: flex;
    align-items: flex-end;

    gap: 10px;

    padding: 15px 18px;

    background: rgba(0,0,0,.25);

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


.member-messages-form textarea {
    flex: 1;

    min-height: 43px;
    max-height: 150px;

    box-sizing: border-box;

    padding: 12px 14px;

    color: #ffffff;

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

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

    border-radius: 10px;

    outline: none;

    resize: none;

    font-family: inherit;

    font-size: 11px;

    line-height: 1.5;
}


.member-messages-form textarea::placeholder {
    color: #555555;
}


.member-messages-form textarea:focus {
    border-color: rgba(212,175,55,.40);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.05);
}


.member-messages-form button {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    color: #111111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    border-radius: 10px;

    cursor: pointer;

    transition: .25s ease;
}


.member-messages-form button:hover {
    background: #e5c65a;

    border-color: #e5c65a;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(212,175,55,.15);
}


/* ==========================================================
   WELCOME
========================================================== */

.member-messages-welcome {
    display: flex;

    flex-direction: column;

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

    height: 100%;

    padding: 30px;

    text-align: center;
}


.member-messages-welcome-icon {
    width: 75px;
    height: 75px;

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

    margin-bottom: 18px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

    border: 1px solid rgba(212,175,55,.13);

    border-radius: 50%;

    font-size: 28px;
}


.member-messages-welcome h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 22px;
}


.member-messages-welcome p {
    max-width: 400px;

    margin: 0;

    color: #666666;

    font-size: 12px;

    line-height: 1.7;
}


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

@media (max-width: 850px) {

    .member-messages-app {
        grid-template-columns: 260px minmax(0,1fr);
    }

}


@media (max-width: 700px) {

    .member-messages-page {
        padding: 35px 12px 50px;
    }


    .member-messages-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .member-messages-header h1 {
        font-size: 34px;
    }


    .member-messages-back {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }


    .member-messages-app {
        grid-template-columns: 1fr;

        height: 700px;
    }


    .member-messages-sidebar {
        height: 230px;

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,.07);
    }


    .member-messages-sidebar-header {
        padding: 15px 15px 10px;
    }


    .member-messages-members {
        display: flex;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 10px 10px;
    }


    .member-message-contact {
        flex: 0 0 170px;
    }


    .member-messages-search {
        margin-bottom: 8px;
    }


    .member-messages-conversation {
        min-height: 470px;
    }


    .member-chat-message {
        max-width: 82%;
    }

}


@media (max-width: 450px) {

    .member-messages-page {
        padding-left: 8px;
        padding-right: 8px;
    }


    .member-messages-app {
        border-radius: 11px;
    }


    .member-messages-chat-body {
        padding: 18px 13px;
    }


    .member-messages-form {
        padding: 10px;
    }


    .member-message-contact {
        flex-basis: 150px;
    }

}
/* ==========================================================
   DASHBOARD MESSAGES
========================================================== */

.dashboard-messages-box {
    position: relative;
}


.dashboard-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}


.dashboard-box-title h3 {
    margin: 0;
}


.dashboard-box-title h3 i {
    margin-right: 6px;

    color: #D4AF37;
}


.dashboard-message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    box-sizing: border-box;

    color: #ffffff;

    background: #d92d20;

    border-radius: 50px;

    font-size: 9px;
    font-weight: 900;

    animation: tropical-message-pulse 2s infinite;
}


.dashboard-new-message {
    color: #D4AF37 !important;
}


.dashboard-new-message i {
    margin-right: 5px;
}


.dashboard-new-message strong {
    color: #ffffff;
}
/* ==========================================================
   MEMBER DASHBOARD - FINAL FIX
   The Tropical Dance
========================================================== */


/* ----------------------------------------------------------
   DASHBOARD GRID
---------------------------------------------------------- */

.member-page .dashboard-grid {

    display: grid;

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

    gap: 16px;

    width: 100%;

    margin-top: 20px;

}


/* ----------------------------------------------------------
   DASHBOARD BOX
---------------------------------------------------------- */

.member-page .dashboard-box {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 145px;

    padding: 22px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(25,25,25,.96),
            rgba(12,12,12,.96)
        );

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

    border-radius: 14px;

    color: #fff;

    overflow: hidden;

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

}


/* ----------------------------------------------------------
   GOLD TOP LINE
---------------------------------------------------------- */

.member-page .dashboard-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            transparent
        );

    opacity: .65;

}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.member-page .dashboard-box:hover {

    transform: translateY(-3px);

    border-color:
        rgba(212,175,55,.45);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 18px rgba(212,175,55,.08);

}


/* ----------------------------------------------------------
   BOX TITLE
---------------------------------------------------------- */

.member-page .dashboard-box-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    width: 100%;

    margin-bottom: 8px;

}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.member-page .dashboard-box h3 {

    margin: 0;

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.3;

}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.member-page .dashboard-box p {

    margin: 0;

    color: rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.6;

}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.member-page .dashboard-box .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    align-self: flex-start;

    margin-top: auto;

    padding: 9px 16px;

    border-radius: 8px;

    background: #d4af37;

    border: 1px solid #d4af37;

    color: #111 !important;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

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

}


.member-page .dashboard-box .btn:hover {

    background: #e4c45b;

    border-color: #e4c45b;

    color: #111 !important;

    transform: translateY(-1px);

}


/* ==========================================================
   MESSAGES
========================================================== */

.member-page .dashboard-messages-box {

    position: relative;

}


/* ----------------------------------------------------------
   MESSAGE BADGE
---------------------------------------------------------- */

.member-page .dashboard-message-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-width: 23px;

    height: 23px;

    padding: 0 7px;

    box-sizing: border-box;

    background: #e52b2b;

    color: #fff;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 0 0 3px rgba(229,43,43,.08),
        0 0 12px rgba(229,43,43,.25);

}


/* ----------------------------------------------------------
   NEW MESSAGE TEXT
---------------------------------------------------------- */

.member-page .dashboard-new-message {

    color: #d4af37 !important;

}


.member-page .dashboard-new-message strong {

    color: #fff;

    font-weight: 800;

}


/* ----------------------------------------------------------
   MESSAGE BOX WITH NEW MESSAGE
---------------------------------------------------------- */

.member-page
.dashboard-messages-box:has(.dashboard-message-badge) {

    border-color:
        rgba(212,175,55,.25);

}


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

@media (max-width: 900px) {

    .member-page .dashboard-grid {

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

        gap: 14px;

    }

}


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

@media (max-width: 650px) {

    .member-page .dashboard-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .member-page .dashboard-box {

        min-height: 135px;

        padding: 18px;

    }


    .member-page .dashboard-box h3 {

        font-size: 16px;

    }


    .member-page .dashboard-box p {

        font-size: 12px;

    }

}


/* ==========================================================
   VERY SMALL SCREENS
========================================================== */

@media (max-width: 400px) {

    .member-page .dashboard-box {

        padding: 16px;

    }


    .member-page .dashboard-box .btn {

        width: 100%;

    }

}
/* ==========================================================
   STAFF PAGE
   THE TROPICAL DANCE
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.staff-hero {

    position: relative;

    min-height: 380px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #080808,
            #151515
        );

}


.staff-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.16),
            transparent 45%
        );

}


.staff-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.20),
            rgba(0,0,0,.75)
        );

}


.staff-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 100px 20px;

}


.staff-kicker {

    display: block;

    margin-bottom: 12px;

    color: #d4af37;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;

}


.staff-hero h1 {

    margin: 0;

    color: #fff;

    font-size: clamp(42px, 7vw, 72px);

    font-weight: 900;

    letter-spacing: -2px;

}


.staff-hero p {

    max-width: 650px;

    margin: 18px auto 0;

    color: #aaa;

    font-size: 18px;

}


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

.staff-page {

    padding: 80px 20px;

    background:
        #080808;

}


/* ==========================================================
   ROLE SECTION
========================================================== */

.staff-role-section {

    margin-bottom: 90px;

}


.staff-role-section:last-child {

    margin-bottom: 20px;

}


/* ==========================================================
   SECTION HEADING
========================================================== */

.staff-section-heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-bottom: 40px;

    text-align: left;

}


.staff-section-icon {

    width: 65px;

    height: 65px;

    flex: 0 0 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(212,175,55,.08);

    border:
        1px solid
        rgba(212,175,55,.25);

    border-radius: 18px;

    font-size: 28px;

}


.staff-section-kicker {

    display: block;

    margin-bottom: 4px;

    color: #d4af37;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 3px;

}


.staff-section-heading h2 {

    margin: 0;

    color: #fff;

    font-size: 34px;

    font-weight: 800;

}


.staff-section-heading p {

    margin: 6px 0 0;

    color: #777;

    font-size: 13px;

}


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

.staff-grid {

    display: grid;

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

    gap: 22px;

}


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

.staff-card {

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #181818,
            #0d0d0d
        );

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

    border-radius: 16px;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.25);

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

}


.staff-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(212,175,55,.35);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.45);

}


/* ==========================================================
   IMAGE
========================================================== */

.staff-card-image {

    position: relative;

    height: 330px;

    overflow: hidden;

    background: #111;

}


.staff-card-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

}


.staff-card:hover
.staff-card-image img {

    transform:
        scale(1.05);

}


.staff-card-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            rgba(0,0,0,.75)
        );

    pointer-events: none;

}


/* ==========================================================
   ROLE BADGE
========================================================== */

.staff-role-badge {

    position: absolute;

    left: 15px;

    bottom: 15px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    color: #111;

    background: #d4af37;

    border-radius: 30px;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;

}


/* ==========================================================
   CARD CONTENT
========================================================== */

.staff-card-content {

    padding: 22px;

}


.staff-card-content h3 {

    margin: 0 0 12px;

    color: #fff;

    font-size: 20px;

    font-weight: 800;

}


.staff-card-content p {

    min-height: 65px;

    margin: 0;

    color: #888;

    font-size: 12px;

    line-height: 1.7;

}


.staff-card-content p.staff-no-bio {

    color: #555;

    font-style: italic;

}


/* ==========================================================
   SECOND LIFE BUTTON
========================================================== */

.staff-sl-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 20px;

    padding: 11px 14px;

    color: #111 !important;

    background: #d4af37;

    border-radius: 8px;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none !important;

    transition: .2s ease;

}


.staff-sl-button:hover {

    color: #111 !important;

    background: #e5c65a;

    transform:
        translateY(-2px);

}


.staff-sl-button i {

    font-size: 11px;

}


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

.staff-empty {

    max-width: 600px;

    margin: 50px auto;

    padding: 60px 30px;

    text-align: center;

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

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

    border-radius: 18px;

}


.staff-empty-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d4af37;

    background:
        rgba(212,175,55,.08);

    border-radius: 50%;

    font-size: 25px;

}


.staff-empty h2 {

    margin: 0 0 10px;

    color: #fff;

    font-size: 25px;

}


.staff-empty p {

    margin: 0;

    color: #777;

    font-size: 13px;

}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.staff-bottom {

    padding: 20px 20px 80px;

    background: #080808;

}


.staff-bottom-box {

    max-width: 850px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.025)
        );

    border:
        1px solid
        rgba(212,175,55,.15);

    border-radius: 16px;

}


.staff-bottom-icon {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #111;

    background: #d4af37;

    border-radius: 50%;

}


.staff-bottom-box h2 {

    margin: 0 0 6px;

    color: #fff;

    font-size: 20px;

}


.staff-bottom-box p {

    margin: 0;

    color: #888;

    font-size: 12px;

    line-height: 1.6;

}


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

@media (max-width: 1100px) {

    .staff-grid {

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

    }

}


@media (max-width: 800px) {

    .staff-grid {

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

    }


    .staff-section-heading {

        justify-content: flex-start;

    }

}


@media (max-width: 600px) {

    .staff-page {

        padding: 55px 15px;

    }


    .staff-grid {

        grid-template-columns: 1fr;

    }


    .staff-card-image {

        height: 380px;

    }


    .staff-section-heading {

        align-items: flex-start;

    }


    .staff-section-icon {

        width: 52px;

        height: 52px;

        flex-basis: 52px;

        font-size: 22px;

    }


    .staff-section-heading h2 {

        font-size: 27px;

    }


    .staff-bottom {

        padding:
            10px 15px 60px;

    }


    .staff-bottom-box {

        align-items: flex-start;

        padding: 22px;

    }

}
/* ==========================================================
   THE TROPICAL DANCE
   STAFF PAGE
========================================================== */

.staff-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.16),
            transparent 45%
        ),
        #080808 !important;
}

.staff-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.75)
        );
}

.staff-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at center,
            transparent,
            rgba(0,0,0,.55)
        );
}

.staff-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 110px 20px 80px;
    text-align: center;
}

.staff-kicker {
    display: block;
    margin-bottom: 12px;
    color: #d4af37 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.staff-hero h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 900;
}

.staff-hero p {
    max-width: 650px;
    margin: 18px auto 0 !important;
    color: #aaa !important;
    font-size: 18px;
}


/* ==========================================================
   STAFF PAGE
========================================================== */

.staff-page {
    padding: 80px 20px !important;
    background: #080808 !important;
}

.staff-role-section {
    margin-bottom: 90px;
}

.staff-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 40px;
}

.staff-section-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 18px;
    font-size: 28px;
}

.staff-section-kicker {
    display: block;
    margin-bottom: 4px;
    color: #d4af37 !important;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}

.staff-section-heading h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 34px;
    font-weight: 800;
}

.staff-section-heading p {
    margin: 6px 0 0 !important;
    color: #777 !important;
    font-size: 13px;
}


/* ==========================================================
   STAFF GRID
========================================================== */

.staff-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 22px;
}


/* ==========================================================
   STAFF CARD
========================================================== */

.staff-card {
    overflow: hidden;
    padding: 0 !important;
    background:
        linear-gradient(
            145deg,
            #181818,
            #0d0d0d
        ) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.staff-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212,175,55,.40) !important;
    box-shadow: 0 25px 55px rgba(0,0,0,.45);
}


/* ==========================================================
   IMAGE
========================================================== */

.staff-card-image {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #111;
}

.staff-card-image img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important;
    transition: transform .5s ease;
}

.staff-card:hover .staff-card-image img {
    transform: scale(1.05);
}

.staff-card-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0,0,0,.80)
        );
    pointer-events: none;
}


/* ==========================================================
   ROLE BADGE
========================================================== */

.staff-role-badge {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    color: #111 !important;
    background: #d4af37 !important;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.staff-card-content {
    padding: 22px !important;
}

.staff-card-content h3 {
    margin: 0 0 12px !important;
    color: #fff !important;
    font-size: 20px;
    font-weight: 800;
}

.staff-card-content p {
    min-height: 65px;
    margin: 0 !important;
    color: #999 !important;
    font-size: 12px;
    line-height: 1.7;
}

.staff-no-bio {
    color: #666 !important;
    font-style: italic;
}


/* ==========================================================
   SECOND LIFE BUTTON
========================================================== */

.staff-sl-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 14px;
    color: #111 !important;
    background: #d4af37 !important;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none !important;
}

.staff-sl-button:hover {
    color: #111 !important;
    background: #e5c65a !important;
    transform: translateY(-2px);
}


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

.staff-empty {
    max-width: 600px;
    margin: 50px auto;
    padding: 60px 30px;
    text-align: center;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
}

.staff-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    background: rgba(212,175,55,.08);
    border-radius: 50%;
    font-size: 25px;
}

.staff-empty h2 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: 25px;
}

.staff-empty p {
    margin: 0 !important;
    color: #777 !important;
}


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

.staff-bottom {
    padding: 20px 20px 80px !important;
    background: #080808 !important;
}

.staff-bottom-box {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.025)
        );
    border: 1px solid rgba(212,175,55,.15);
    border-radius: 16px;
}

.staff-bottom-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    background: #d4af37;
    border-radius: 50%;
}

.staff-bottom-box h2 {
    margin: 0 0 6px !important;
    color: #fff !important;
    font-size: 20px;
}

.staff-bottom-box p {
    margin: 0 !important;
    color: #888 !important;
    font-size: 12px;
    line-height: 1.6;
}


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

@media (max-width:1100px) {

    .staff-grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}

@media (max-width:800px) {

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

    .staff-section-heading {
        justify-content: flex-start;
    }

}

@media (max-width:600px) {

    .staff-page {
        padding: 55px 15px !important;
    }

    .staff-grid {
        grid-template-columns: 1fr;
    }

    .staff-card-image {
        height: 380px;
    }

    .staff-section-heading {
        align-items: flex-start;
    }

    .staff-section-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 22px;
    }

    .staff-section-heading h2 {
        font-size: 27px;
    }

    .staff-bottom {
        padding: 10px 15px 60px !important;
    }

    .staff-bottom-box {
        align-items: flex-start;
        padding: 22px;
    }

/* ==========================================================
   THE TROPICAL DANCE
   PAGE STAFF
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.staff-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(212,175,55,.16),
            transparent 45%
        ),
        #080808 !important;
}

.staff-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.80)
        );

    pointer-events: none;
}

.staff-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0,0,0,.45) 100%
        );
}

.staff-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 110px 20px 80px;

    text-align: center;
}

.staff-kicker {
    display: block;

    margin-bottom: 12px;

    color: #d4af37 !important;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.staff-hero h1 {
    margin: 0 !important;

    color: #fff !important;

    font-size: clamp(42px, 7vw, 72px);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -2px;
}

.staff-hero p {
    max-width: 650px;

    margin: 18px auto 0 !important;

    color: #aaa !important;

    font-size: 18px;

    line-height: 1.6;
}


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

.staff-page {
    padding: 80px 20px !important;

    background: #080808 !important;
}


/* ==========================================================
   ROLE SECTION
========================================================== */

.staff-role-section {
    margin-bottom: 90px;
}

.staff-role-section:last-child {
    margin-bottom: 20px;
}


/* ==========================================================
   SECTION TITLE
========================================================== */

.staff-section-heading {
    display: flex;

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

    gap: 18px;

    margin-bottom: 40px;
}

.staff-section-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: flex;

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

    background:
        rgba(212,175,55,.08);

    border:
        1px solid
        rgba(212,175,55,.25);

    border-radius: 18px;

    font-size: 28px;
}

.staff-section-kicker {
    display: block;

    margin-bottom: 4px;

    color: #d4af37 !important;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.staff-section-heading h2 {
    margin: 0 !important;

    color: #fff !important;

    font-size: 34px;

    font-weight: 800;

    line-height: 1.2;
}

.staff-section-heading p {
    margin: 6px 0 0 !important;

    color: #777 !important;

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   STAFF GRID
========================================================== */

.staff-grid {
    display: grid;

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

    gap: 22px;
}


/* ==========================================================
   STAFF CARD
========================================================== */

.staff-card {
    overflow: hidden;

    padding: 0 !important;

    background:
        linear-gradient(
            145deg,
            #181818,
            #0d0d0d
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.07) !important;

    border-radius: 16px !important;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.25);

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

.staff-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(212,175,55,.40) !important;

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.45);
}


/* ==========================================================
   IMAGE
========================================================== */

.staff-card-image {
    position: relative;

    height: 330px;

    overflow: hidden;

    background: #111;
}

.staff-card-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover !important;

    transition:
        transform .5s ease;
}

.staff-card:hover
.staff-card-image img {
    transform: scale(1.05);
}

.staff-card-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0,0,0,.80)
        );

    pointer-events: none;
}


/* ==========================================================
   ROLE BADGE
========================================================== */

.staff-role-badge {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 13px;

    color: #111 !important;

    background:
        #d4af37 !important;

    border-radius: 30px;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.staff-card-content {
    padding: 22px !important;
}

.staff-card-content h3 {
    margin: 0 0 12px !important;

    color: #fff !important;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.3;
}

.staff-card-content p {
    min-height: 65px;

    margin: 0 !important;

    color: #999 !important;

    font-size: 12px;

    line-height: 1.7;
}

.staff-card-content
.staff-no-bio {
    color: #666 !important;

    font-style: italic;
}


/* ==========================================================
   SECOND LIFE BUTTON
========================================================== */

.staff-sl-button {
    display: flex;

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

    gap: 8px;

    margin-top: 20px;

    padding: 12px 14px;

    color: #111 !important;

    background:
        #d4af37 !important;

    border-radius: 8px;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none !important;

    transition:
        .2s ease;
}

.staff-sl-button:hover {
    color: #111 !important;

    background:
        #e5c65a !important;

    transform:
        translateY(-2px);
}

.staff-sl-button i {
    font-size: 11px;
}


/* ==========================================================
   EMPTY STAFF
========================================================== */

.staff-empty {
    max-width: 600px;

    margin: 50px auto;

    padding: 60px 30px;

    text-align: center;

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

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

    border-radius: 18px;
}

.staff-empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;

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

    color: #d4af37;

    background:
        rgba(212,175,55,.08);

    border-radius: 50%;

    font-size: 25px;
}

.staff-empty h2 {
    margin: 0 0 10px !important;

    color: #fff !important;

    font-size: 25px;
}

.staff-empty p {
    margin: 0 !important;

    color: #777 !important;

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   BOTTOM MESSAGE
========================================================== */

.staff-bottom {
    padding:
        20px 20px 80px !important;

    background:
        #080808 !important;
}

.staff-bottom-box {
    max-width: 850px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.025)
        );

    border:
        1px solid
        rgba(212,175,55,.15);

    border-radius: 16px;
}

.staff-bottom-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    display: flex;

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

    color: #111;

    background:
        #d4af37;

    border-radius: 50%;
}

.staff-bottom-box h2 {
    margin: 0 0 6px !important;

    color: #fff !important;

    font-size: 20px;

    font-weight: 800;
}

.staff-bottom-box p {
    margin: 0 !important;

    color: #888 !important;

    font-size: 12px;

    line-height: 1.6;
}


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

@media (max-width: 1100px) {

    .staff-grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}


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

@media (max-width: 800px) {

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

    .staff-section-heading {
        justify-content: flex-start;
    }

}


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

@media (max-width: 600px) {

    .staff-page {
        padding: 55px 15px !important;
    }

    .staff-grid {
        grid-template-columns: 1fr;
    }

    .staff-card-image {
        height: 380px;
    }

    .staff-section-heading {
        align-items: flex-start;
    }

    .staff-section-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 22px;
    }

    .staff-section-heading h2 {
        font-size: 27px;
    }

    .staff-section-heading p {
        font-size: 12px;
    }

    .staff-bottom {
        padding:
            10px 15px 60px !important;
    }

    .staff-bottom-box {
        align-items: flex-start;

        padding: 22px;
    }

    .staff-bottom-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;
    }

    .staff-bottom-box h2 {
        font-size: 18px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 400px) {

    .staff-hero-content {
        padding:
            90px 15px 70px;
    }

    .staff-hero h1 {
        font-size: 38px;
    }

    .staff-hero p {
        font-size: 15px;
    }

    .staff-card-image {
        height: 350px;
    }

}
.next-event-card .event-content h3 {
    display: inline-block;
    color: #ffffff !important;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 14px;
    border-radius: 8px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    margin: 12px 0 18px;
}
/* =====================================================
   PROCHAIN ÉVÉNEMENT - TITRE
===================================================== */

.next-event-card .event-content h3 {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 15px 0 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
/* =====================================================
   FIX TITRE PROCHAIN ÉVÉNEMENT
===================================================== */

.hero-section .next-event-card .event-content h3 {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}
/* ==========================================================
   TROPICAL DANCE - MENU PUBLIC XL
   ========================================================== */

/* HEADER PLUS HAUT */
.main-header {
    min-height: 105px !important;
}

.main-header .header-wrapper {
    min-height: 105px !important;
}


/* LOGO */
.main-header .logo img {
    height: 92px !important;
    width: auto !important;
}


/* MENU PRINCIPAL */
.main-header .desktop-menu {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

.main-header .desktop-menu a {
    font-size: 19px !important;
    font-weight: 800 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 16px 6px !important;

    white-space: nowrap !important;

    line-height: 1.2 !important;
}

.main-header .desktop-menu a i {
    font-size: 21px !important;
}


/* EFFET AU SURVOL */
.main-header .desktop-menu a:hover {
    transform: translateY(-3px) !important;
}


/* BOUTONS À DROITE */
.main-header .header-actions {
    gap: 14px !important;
}

.main-header .header-actions > * {
    font-size: 16px !important;
}


/* CLUB OUVERT */
.main-header .header-actions .club-state {
    padding: 12px 18px !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* TELEPORT / DISCORD / COMPTE / CONNEXION */
.main-header .header-actions .btn-teleport,
.main-header .header-actions .btn-discord,
.main-header .header-actions .btn-account,
.main-header .header-actions .btn-login,
.main-header .header-actions .btn-register {

    min-height: 52px !important;

    padding: 13px 20px !important;

    font-size: 16px !important;
    font-weight: 800 !important;

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

    gap: 9px !important;

    white-space: nowrap !important;
}

.main-header .header-actions .btn-teleport i,
.main-header .header-actions .btn-discord i,
.main-header .header-actions .btn-account i,
.main-header .header-actions .btn-login i,
.main-header .header-actions .btn-register i {
    font-size: 19px !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1200px) {

    .main-header .desktop-menu {
        gap: 20px !important;
    }

    .main-header .desktop-menu a {
        font-size: 16px !important;
        padding: 12px 3px !important;
    }

    .main-header .desktop-menu a i {
        font-size: 18px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 992px) {

    .main-header {
        min-height: 85px !important;
    }

    .main-header .header-wrapper {
        min-height: 85px !important;
    }

    .main-header .logo img {
        height: 72px !important;
    }

    .main-header .menu-toggle {
        width: 58px !important;
        height: 58px !important;

        font-size: 28px !important;
    }


    /* LIENS DU MENU MOBILE */

    .main-header .mobile-menu nav a {
        font-size: 22px !important;
        font-weight: 800 !important;

        padding: 18px 22px !important;

        display: flex !important;
        align-items: center !important;

        gap: 16px !important;
    }

    .main-header .mobile-menu nav a i {
        width: 30px !important;
        font-size: 22px !important;
    }


    /* BOUTONS MOBILE */

    .main-header .mobile-buttons {
        gap: 14px !important;
    }

    .main-header .mobile-buttons a,
    .main-header .mobile-buttons .mobile-club-state {

        min-height: 54px !important;

        padding: 14px 20px !important;

        font-size: 17px !important;
        font-weight: 800 !important;

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

        gap: 10px !important;
    }

}


/* ==========================================================
   PETIT MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .main-header .logo img {
        height: 62px !important;
    }

    .main-header .menu-toggle {
        width: 52px !important;
        height: 52px !important;
        font-size: 25px !important;
    }

    .main-header .mobile-menu nav a {
        font-size: 20px !important;
        padding: 16px 20px !important;
    }

}
/* ==========================================================
   TROPICAL DANCE - MENU PUBLIC XXL
   ========================================================== */

header.main-header .header-wrapper {
    min-height: 110px !important;
}

header.main-header .desktop-menu {
    display: flex !important;
    align-items: center !important;
    gap: 35px !important;
}

header.main-header .desktop-menu a {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

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

    gap: 10px !important;

    padding: 15px 5px !important;

    white-space: nowrap !important;
}

header.main-header .desktop-menu a i {
    font-size: 21px !important;
}

header.main-header .desktop-menu a:hover {
    color: var(--gold) !important;
}


/* LOGO */

header.main-header .logo img {
    height: 95px !important;
    width: auto !important;
}


/* BOUTONS À DROITE */

header.main-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

header.main-header .header-actions a {
    font-size: 16px !important;
}


/* CLUB OPEN */

header.main-header .club-state {
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 12px 18px !important;
}


/* TELEPORT / DISCORD / COMPTE */

header.main-header .btn-teleport,
header.main-header .btn-discord,
header.main-header .btn-account,
header.main-header .btn-login,
header.main-header .btn-register {
    min-height: 52px !important;
    padding: 13px 20px !important;

    font-size: 16px !important;
    font-weight: 800 !important;

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

    gap: 9px !important;
}


/* ICÔNES DES BOUTONS */

header.main-header .btn-teleport i,
header.main-header .btn-discord i,
header.main-header .btn-account i,
header.main-header .btn-login i,
header.main-header .btn-register i {
    font-size: 19px !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1200px) {

    header.main-header .desktop-menu {
        gap: 20px !important;
    }

    header.main-header .desktop-menu a {
        font-size: 17px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 992px) {

    header.main-header .logo img {
        height: 72px !important;
    }

    header.main-header .menu-toggle {
        width: 58px !important;
        height: 58px !important;
        font-size: 28px !important;
    }

    header.main-header .mobile-menu nav a {
        font-size: 22px !important;
        font-weight: 800 !important;
        padding: 18px 22px !important;
    }

}
/* ==========================================================
   POPUP NOTIFICATION - CENTRAGE PARFAIT
========================================================== */

.notification-popup {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: none !important;

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

    padding: 20px !important;

    box-sizing: border-box !important;

    z-index: 999999 !important;

    background: rgba(0, 0, 0, 0.72) !important;

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

.notification-popup.is-visible {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}

.notification-popup-box {
    position: relative !important;

    margin: auto !important;

    width: min(520px, calc(100vw - 40px)) !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;

    transform: none !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .notification-popup {
        padding: 15px !important;
    }

    .notification-popup-box {
        width: calc(100vw - 30px) !important;
        max-height: calc(100vh - 30px) !important;
        padding: 25px 20px !important;
    }

}
/* ==========================================================
   MASQUER L'ANCIEN PLAYER RADIO
========================================================== */

/* Cache tous les anciens lecteurs audio */
body > audio,
main audio,
footer audio {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Le lecteur moderne reste visible */
#td-radio-player {
    display: flex !important;
    visibility: visible !important;
}