/*==========================================
        BLACK FORGE FITNESS
        MEMBERSHIP PAGE
==========================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
        background: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
url("images/s6bg.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

min-height:100vh;
/* background:#0b0b0b; */
color:#fff;
overflow-x:hidden;
}

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

.membership-hero{

height:55vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background:
linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
url("images/s6bg.png");

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

inset:0;

}

.hero-content{

position:relative;

z-index:5;

}

.hero-content h4{

color:#D4AF37;

letter-spacing:5px;

margin-bottom:15px;

font-size:16px;

}

.hero-content h1{

font-size:68px;

font-weight:800;

margin-bottom:20px;

}

.hero-content p{

max-width:650px;

margin:auto;

color:#d0d0d0;

line-height:1.8;

font-size:18px;

}

/*==============================
      MAIN SECTION
==============================*/

.membership-section{

padding:90px 8%;

}

.membership-container{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:start;

}

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

.left-panel{

background:#141414;

padding:45px;

border-radius:20px;

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

position:relative;

overflow:hidden;

}

.left-panel::before{

content:"";

position:absolute;

top:-60%;

left:-40%;

width:20%;

height:220%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.20),
transparent);

transform:rotate(25deg);

transition:1s;

}

.left-panel:hover::before{

left:130%;

}

.left-panel h2{

font-size:40px;

margin-bottom:30px;

}

.left-panel h3{

margin:35px 0 20px;

color:#D4AF37;

font-size:24px;

}

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

.grid{

display:grid;

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

gap:20px;

}

.input-box{

display:flex;

flex-direction:column;

}

.input-box label{

margin-bottom:8px;

font-size:15px;

color:#ddd;

}

.input-box input,
.input-box select{

padding:16px;

background:#1d1d1d;

border:1px solid #333;

border-radius:12px;

color:#fff;

font-size:15px;

outline:none;

transition:.35s;

}

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

border-color:#D4AF37;

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

}
/*==========================================
        GOAL & PLAN CARDS
==========================================*/

.card-grid{

display:grid;

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

gap:20px;

margin-top:15px;

}

.goal-card,
.plan-card{

background:#1b1b1b;

border:1px solid #333;

border-radius:18px;

padding:25px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:12px;

cursor:pointer;

transition:.35s;

text-align:center;

}

.goal-card:hover,
.plan-card:hover{

border-color:#D4AF37;

transform:translateY(-6px);

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

}

.goal-card input,
.plan-card input{

margin-bottom:8px;

accent-color:#D4AF37;

}

.goal-card i{

font-size:30px;

color:#D4AF37;

}

.goal-card span{

font-size:18px;

font-weight:600;

}

.plan-card h4{

font-size:24px;

margin-bottom:5px;

}

.plan-card p{

color:#D4AF37;

font-size:22px;

font-weight:700;

}



/*==========================================
        TERMS
==========================================*/

.terms{

margin-top:35px;

font-size:15px;

color:#ddd;

}

.terms input{

margin-right:10px;

accent-color:#D4AF37;

}



/*==========================================
        RIGHT PANEL
==========================================*/

.right-panel{

position:sticky;

top:120px;

}

.summary-box{

background:#141414;

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

border-radius:20px;

padding:35px;

overflow:hidden;

position:relative;

}

.summary-box::before{

content:"";

position:absolute;

top:-60%;

left:-35%;

width:18%;

height:220%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.20),
transparent);

transform:rotate(25deg);

transition:1s;

}

.summary-box:hover::before{

left:120%;

}

.summary-box h2{

margin-bottom:30px;

font-size:34px;

}

.summary-row{

display:flex;

justify-content:space-between;

margin-bottom:22px;

font-size:16px;

}

.summary-row span{

color:#bdbdbd;

}

.summary-row strong{

font-size:18px;

}

.summary-box hr{

border:none;

border-top:1px solid #2d2d2d;

margin:25px 0;

}

.total{

font-size:22px;

font-weight:700;

color:#D4AF37;

}



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

.payment-btn{

width:100%;

padding:18px;

margin-top:25px;

border:none;

border-radius:50px;

background:#D4AF37;

color:#111;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.payment-btn:hover{

background:#fff;

transform:translateY(-5px);

box-shadow:0 12px 30px rgba(255,255,255,.18);

}



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

@media(max-width:992px){

.membership-container{

grid-template-columns:1fr;

}

.right-panel{

position:static;

margin-top:40px;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:16px;

padding:0 20px;

}

.grid,
.card-grid{

grid-template-columns:1fr;

}

.left-panel{

padding:25px;

}

.summary-box{

padding:25px;

}

}/*==========================================
      LUXURY FORM ANIMATION
==========================================*/

body{

overflow-x:hidden;

}

/* FORM */

.form-animation{

opacity:0;

transform:scale(.85) translateY(60px);

animation:formOpen .9s ease forwards;

}

@keyframes formOpen{

0%{

opacity:0;

transform:scale(.85) translateY(60px);

}

60%{

opacity:1;

transform:scale(1.03) translateY(-10px);

}

100%{

opacity:1;

transform:scale(1) translateY(0);

}

}

/* INPUTS */

.input-box{

opacity:0;

transform:translateX(-50px);

animation:inputSlide .8s forwards;

}

@keyframes inputSlide{

to{

opacity:1;

transform:translateX(0);

}

}

/* Delays */

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.35s;

}

.delay-3{

animation-delay:.5s;

}

.delay-4{

animation-delay:.65s;

}

.delay-5{

animation-delay:.8s;

}

.delay-6{

animation-delay:.95s;

}

.delay-7{

animation-delay:1.1s;

}

.delay-8{

animation-delay:1.25s;

}

.delay-9{

animation-delay:1.4s;

}

/* INPUT FOCUS */

.input-box input,

.input-box select{

transition:.35s;

}

.input-box input:focus,

.input-box select:focus{

transform:scale(1.03);

box-shadow:0 0 18px rgba(212,175,55,.45);

border-color:#D4AF37;

}

/* BUTTON */

.submit-btn{

transition:.35s;

}

.submit-btn:hover{

transform:translateY(-3px);

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

}
.submit-btn{

width:100%;

padding:16px;

background:linear-gradient(135deg,#D4AF37,#FFD54F);

border:none;

border-radius:12px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

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

}

.submit-btn:hover{

transform:translateY(-4px);

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

}

.submit-btn:active{

transform:scale(.98);

}
/*==========================================
      PREMIUM SUBMIT BUTTON
==========================================*/

.submit-btn{

width:100%;

padding:16px;

background:linear-gradient(135deg,#D4AF37,#FFD54F);

border:none;

border-radius:12px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

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

color:#111;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

}

.submit-btn:hover{

transform:translateY(-3px);

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

}

.submit-btn:disabled{

cursor:not-allowed;

opacity:.85;

}

.loader{

width:18px;

height:18px;

border:3px solid rgba(0,0,0,.2);

border-top:3px solid #111;

border-radius:50%;

display:none;

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.modal{

display:none;

position:fixed;

inset:0;

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

z-index:9999;

}

.modal-content{

background:#141414;

width:90%;

max-width:600px;

margin:8% auto;

padding:30px;

border-radius:15px;

color:white;

}

.close{

float:right;

font-size:30px;

cursor:pointer;

color:#D4AF37;

}

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);
    z-index:9999;
}

.modal-content{
    background:#141414;
    color:#fff;
    width:90%;
    max-width:600px;
    margin:6% auto;
    padding:30px;
    border-radius:15px;
    border:1px solid #D4AF37;
}

.modal-content h2{
    color:#D4AF37;
    margin-bottom:20px;
}

.modal-content ul{
    padding-left:20px;
}

.modal-content li{
    margin-bottom:12px;
    line-height:1.7;
}

.close{
    float:right;
    font-size:30px;
    cursor:pointer;
    color:#D4AF37;
}

.membership-conditions{

    background:#181818;

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

    border-radius:12px;

    padding:20px;

    margin:25px 0;

}

.membership-conditions h4{

    color:#D4AF37;

    margin-bottom:12px;

}

.membership-conditions ul{

    padding-left:20px;

}

.membership-conditions li{

    margin-bottom:10px;

    color:#ddd;

}

.terms{

    margin-top:15px;

}

.terms label{

    color:#ddd;

    cursor:pointer;

}

.terms input{

    margin-right:8px;

}

/* ==========================================
   FINAL MOBILE MEMBERSHIP FIX
========================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .membership-hero {
        width: 100%;
        height: 45vh;
        min-height: 300px;
        padding: 30px 18px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 38px;
        line-height: 1.1;
    }

    .hero-content p {
        font-size: 14px;
        padding: 0 10px;
    }

    .membership-section {
        width: 100%;
        padding: 45px 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .membership-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .left-panel {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px;
        box-sizing: border-box;
    }

    .left-panel h2 {
        font-size: 28px;
        line-height: 1.2;
        text-align: center;
    }

    .grid,
    .card-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .input-box {
        width: 100%;
        min-width: 0;
    }

    .input-box input,
    .input-box select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .right-panel {
        width: 100%;
        max-width: 100%;
        position: static;
        margin-top: 0;
    }

    .summary-box {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px;
        box-sizing: border-box;
    }

    .summary-row {
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
    }

    .payment-btn {
        width: 100%;
    }

    .terms {
        width: 100%;
        line-height: 1.6;
    }
}