/*==================================================
TONINO LAMBORGHINI RESIDENCES
File: assets/css/popup.css
Styles for the enquiry popup only (behaviour lives in
assets/js/popup.js, markup comes from popup.php).

CONTENTS
  1. Overlay + open/close animation
  2. Popup left panel (brand image + selling points)
  3. Popup right panel (lead form)
  4. Close button
  5. Responsive tweaks (tablet, small mobile)
==================================================*/

/*==================================================
PREMIUM LUXURY POPUP
==================================================*/

.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:99999;
    padding:20px;
}

.popup-overlay.active{
    opacity:1;
    visibility:visible;
}

.popup-container{
    position:relative;
    width:100%;
    max-width:1050px;
    display:flex;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 35px 100px rgba(0,0,0,.45);
    animation:popupZoom .35s ease;
}

@keyframes popupZoom{

    from{

        transform:scale(.90);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.popup-left{

    width:45%;

    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.65)),
    url("../images/popup-bg.jpg") center center/cover;

    color:#fff;

    padding:60px 45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.popup-logo{

    width:220px;

    margin-bottom:35px;

}

.popup-left h2{

    color:#fff!important;

    font-size:34px;

    font-weight:700;

    margin-bottom:5px;

}

.popup-left h3{

    color:#dc251c!important;

    font-size:28px;

    margin-bottom:20px;

}

.popup-left p{

    font-size:18px;

    line-height:30px;

    color:#eee;

}

.popup-left ul{

    margin-top:35px;

    padding:0;

    list-style:none;

}

.popup-left ul li{

    margin-bottom:18px;

    font-size:16px;

    display:flex;

    align-items:center;

}

.popup-left ul i{

    color:#dc251c;

    margin-right:12px;

    font-size:18px;

}

.popup-right{

    width:55%;

    padding:55px;

    background:#fff;

}

.popup-right h3{

    font-size:34px;

    margin-bottom:30px;

    text-align:center;

    color:#dc251c!important;

    font-weight:700;

}

.popup-right .form-control{

    height:58px;

    border-radius:12px;

    margin-bottom:18px;

    border:1px solid #ddd;

    padding:0 18px;

    box-shadow:none;

}

.popup-right textarea.form-control{

    height:120px;

    resize:none;

    padding-top:15px;

}

.popup-right .form-control:focus{

    border-color:#dc251c;

    box-shadow:0 0 0 .18rem rgba(220,37,28,.15);

}

.popup-check{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:14px;

    margin-bottom:20px;

    color:#555;

}

.popup-check input{

    margin-top:5px;

}

.popup-right button{

    width:100%;

    height:56px;

    border:none;

    border-radius:12px;

    background:#dc251c;

    color:#fff;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.popup-right button:hover{

    background:#b91f18;

}

.popup-close{

    position:absolute;

    top:18px;

    right:18px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.20);

    font-size:20px;

    cursor:pointer;

    transition:.35s;

    z-index:999;

}

.popup-close:hover{

    transform:rotate(90deg);

    background:#dc251c;

    color:#fff;

}

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

@media(max-width:991px){

.popup-container{

    flex-direction:column;

    max-width:650px;

}

.popup-left{

    width:100%;

    padding:40px 30px;

    text-align:center;

}

.popup-left ul{

    text-align:left;

}

.popup-right{

    width:100%;

    padding:35px 25px;

}

.popup-logo{

    width:180px;

    margin:auto;

    margin-bottom:25px;

}

}

@media(max-width:576px){

.popup-overlay{

    padding:15px;

}

.popup-container{

    border-radius:18px;

}

.popup-left{

    display:none;

}

.popup-right{

    padding:30px 20px;

}

.popup-right h3{

    font-size:28px;

}

.popup-right .form-control{

    height:52px;

    font-size:15px;

}

.popup-right textarea.form-control{

    height:100px;

}

.popup-close{

    width:42px;

    height:42px;

    top:12px;

    right:12px;

}

}