/* =========================
CONTACT SECTION
PREMIUM RED + BLACK UI
========================= */

.contact-v2-section{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    position:relative;
    padding:
        clamp(30px,6vw,50px)
        20px;
    background: url('../images/map.webp') center/cover no-repeat;
    overflow:hidden;
}

/* =========================
CONTAINER
========================= */

.contact-v2-container{
    position:relative;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:34px;
    align-items:stretch;
}

/* =========================
PANELS
========================= */

.contact-v2-left,
.contact-v2-right{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:38px;
    border-radius:28px;
    background:
        rgba(0,0,0,0.45);
    backdrop-filter:blur(10px);
    border:
        1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.45);
    overflow:hidden;

}

/* glow */

.contact-v2-left::before,
.contact-v2-right::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            transparent 40%
        );
    pointer-events:none;
}

/* =========================
TYPOGRAPHY
========================= */

.contact-v2-title{
    margin:0;
    font-size:
        clamp(30px,4vw,48px);
    line-height:1.05;
    font-weight:800;
    color:#ffffff;
    letter-spacing:-0.03em;

}

.contact-v2-subtitle{
    margin-top:10px;
    max-width:500px;
    font-size:15px;
    line-height:1.8;
    color:
        rgba(255,255,255,0.78);
}

/* =========================
MAP
========================= */

.contact-v2-map{
    position:relative;
    margin-top:28px;
    flex:1;
    min-height:540px;
    border-radius:0px;
    overflow:hidden;
}

.contact-v2-map iframe{

    width:100%;
    height:100%;

    border:none;

    filter:brightness(.95);

    transition:
        transform .6s ease,
        filter .5s ease;
}

.contact-v2-map:hover iframe{

    transform:scale(1.04);

    filter:brightness(1);

}

/* dark overlay */

.contact-v2-map::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.08),
            rgba(0,0,0,0.48)
        );
    pointer-events:none;

}

/* floating card */

.contact-v2-map-card{
    position:absolute;
    left:18px;
    bottom:18px;
    z-index:5;
    padding:
        14px
        18px;
    border-radius:16px;
    background:
        rgba(0,0,0,0.55);
    backdrop-filter:blur(14px);
    border:
        1px solid rgba(255,255,255,0.08);
    color:#ffffff;
    font-size:14px;
    font-weight:600;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.28);
}

/* =========================
FORM
========================= */

.contact-v2-form{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:18px;
    flex:1;
}

/* rows */
.contact-v2-row{
    display:flex;
    gap:18px;
}

/* =========================
FORM GROUP
========================= */
.form-group{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.form-group label{
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    color:#ffffff;
}

/* =========================
INPUTS
========================= */

.contact-v2-form input,
.contact-v2-form select,
.contact-v2-form textarea{
    width:100%;
    padding:
        16px
        18px;
    border-radius:16px;
    border:
        1px solid rgba(255,255,255,0.08);
    background:
        rgba(255,255,255,0.92);
    color:#000000;
    font-size:14px;
    font-weight:500;
    transition:
        .35s ease;
}

/* placeholder */
.contact-v2-form input::placeholder,
.contact-v2-form textarea::placeholder{
    color:#666666;
}

/* focus */
.contact-v2-form input:focus,
.contact-v2-form select:focus,
.contact-v2-form textarea:focus{
    outline:none;
    border-color:#CE0F2C;
    background:#ffffff;
    box-shadow:
        0 0 0 4px rgba(206,15,44,0.16);
    transform:
        translateY(-1px);
}

/* =========================
TEXTAREA
========================= */
.contact-v2-form textarea{
    resize:none;
    min-height:110px;
}

.contact-v2-form textarea.large{
    min-height:170px;
}

/* =========================
RADIO
========================= */
.contact-v2-radio{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.contact-v2-radio p{
    margin:0;
    font-size:14px;
    font-weight:600;
    color:#ffffff;
}

.radio-group{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
}

.radio-group label{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
}

.radio-group input{
    accent-color:#CE0F2C;
    transform:scale(1.08);
}

/* =========================
CONSENT
========================= */

.contact-consent{
    margin-top:6px;
    padding:18px;
    border-radius:18px;
    background:
        rgba(0,0,0,0.24);
    border:
        1px solid rgba(255,255,255,0.06);
}

.consent-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#ffffff;
    font-size:13px;
    line-height:1.8;
    cursor:pointer;
}

.consent-label input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:#CE0F2C;
    flex-shrink:0;
}

.consent-label span{
    flex:1;
    color:
        rgba(255,255,255,0.82);
}

/* =========================
PRIVACY POLICY LINK
========================= */
.consent-label a{
    position:relative;
    color:#000;
    font-weight:600;
    text-decoration:none;
    word-break:break-word;
    transition:all .3s ease;
    text-shadow:0 1px 2px rgba(0,0,0,0.25);
}

/* Animated Underline */
.consent-label a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0%;
    height:2px;
    background:#CE0F2C;
    transition:.4s ease;
}

/* Hover Effect */
.consent-label a:hover{
    color:#ffffff;
}

.consent-label a:hover::after{
    width:100%;
}

/* =========================
BUTTON
========================= */
.contact-v2-form button{
    position:relative;
    margin-top:10px;
    height:60px;
    border:none;
    border-radius:999px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #CE0F2C 0%,
            #ff2748 100%
        );
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    cursor:pointer;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
    box-shadow:
        0 18px 35px rgba(206,15,44,0.28);
}

/* shine */

.contact-v2-form button::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );
    transition:.65s ease;
}

.contact-v2-form button:hover::before{
    left:100%;
}

.contact-v2-form button:hover{
    transform:
        translateY(-2px);
    box-shadow:
        0 22px 40px rgba(206,15,44,0.36);
}

/* =========================
LAPTOP
========================= */

@media (max-width:1100px){
    .contact-v2-container{
        grid-template-columns:1fr;
    }
    
    .contact-page-layout .contact-v2-right{
        order:1;
    }

    .contact-page-layout .contact-v2-left{
        order:2;
    }
}

/* =========================
TABLET
========================= */

@media (max-width:768px){
    .contact-v2-section{
        padding:80px 16px;
    }

    .contact-v2-left,
    .contact-v2-right{
        padding:26px;
        border-radius:24px;
    }

    .contact-v2-row{
        flex-direction:column;
        gap:16px;
    }

    .contact-v2-map{
        min-height:380px;
    }

    .contact-v2-title{
        line-height:1.1;
    }
}

/* =========================
MOBILE
========================= */

@media (max-width:576px){
    .contact-v2-section{
        padding:35px 14px;
    }
    .contact-v2-left,
    .contact-v2-right{
        padding:22px;
        border-radius:20px;
    }
    .contact-v2-map{
        min-height:300px;
        border-radius:20px;
    }

    .contact-v2-form input,
    .contact-v2-form select,
    .contact-v2-form textarea{
        padding:15px 16px;
        border-radius:14px;
    }

    .contact-v2-form button{
        height:56px;
        font-size:14px;
    }
    .consent-label{
        font-size:12px;
        line-height:1.7;
    }
}

/* =========================
EXTRA SMALL
========================= */
@media (max-width:380px){
    .contact-v2-title{
        font-size:28px;
    }
    .contact-v2-left,
    .contact-v2-right{
        padding:18px;
    }
}
