/* ===== RESET ===== */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Oswald',sans-serif;
    overflow:hidden;
}

/* ===== AGE GATE ===== */
.age-gate{
    position:fixed;
    inset:0;

    background:url("images/brarudi-bg.jpg") center center/cover no-repeat;

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

/* ===== OVERLAY PREMIUM ===== */
.age-gate::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,43,34,.70),
        rgba(0,43,34,.85)
    );

    z-index:1;
}

/* ===== CONTENT ===== */
.content{

    position:relative;
    z-index:2;

    width:90%;
    max-width:720px;

    padding:55px 50px;

    text-align:center;

    color:#fff;

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

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

    border-radius:24px;

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

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

/* ===== LOGO ===== */
.logo{
    width:170px;
    margin-bottom:30px;
}

/* ===== TITLE ===== */
h1{

    font-size:48px;

    line-height:1.1;

    margin:0 0 35px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:700;
}

/* ===== DATE INPUT ===== */
.date-input{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:35px 0;
}

.date-input input{

    width:90px;
    height:65px;

    border:none;

    border-radius:10px;

    background:#fff;

    color:#003b2f;

    font-size:28px;

    font-weight:700;

    text-align:center;

    outline:none;

    transition:.3s;
}

.date-input input:focus{

    transform:translateY(-2px);

    box-shadow:
    0 0 0 3px rgba(242,183,5,.35);
}

.date-input span{

    font-size:28px;

    color:#fff;
}

/* ===== BUTTON ===== */
.enter-btn{

    width:220px;

    height:65px;

    border:none;

    border-radius:10px;

    background:#f2b705;

    color:#003b2f;

    font-size:20px;

    font-weight:700;

    letter-spacing:1px;

    cursor:pointer;

    transition:.3s;
}

.enter-btn:hover{

    background:#ffd233;

    transform:translateY(-3px);

    box-shadow:
    0 12px 30px rgba(242,183,5,.35);
}

/* ===== TEXT ===== */
.legal{

    margin-top:25px;

    font-size:13px;

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

    line-height:1.6;
}

.warning{

    margin-top:15px;

    font-size:13px;

    font-weight:600;

    color:#f2b705;

    letter-spacing:.5px;
}

/* ===== MESSAGE ERREUR ===== */
.error-message{

    margin-top:15px;

    background:rgba(255,0,0,.15);

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

    color:#ffb3b3;

    padding:12px;

    border-radius:8px;

    opacity:0;

    transition:.3s;
}

.error-message.show{
    opacity:1;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

    .content{

        padding:35px 25px;
    }

    .logo{

        width:130px;
    }

    h1{

        font-size:32px;
    }

    .date-input{

        gap:8px;
    }

    .date-input input{

        width:70px;
        height:55px;
        font-size:22px;
    }

    .date-input span{

        font-size:22px;
    }

    .enter-btn{

        width:180px;
        height:58px;
    }
}