/* =====================================================
   THANK YOU / STATUS MODAL
===================================================== */

.form-status-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(17,24,39,.72);
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:99999;
}

.form-status-modal.active{
    opacity:1;
    visibility:visible;
}

/* Container */

.form-status-container{

    position:relative;

    width:min(920px,90vw);
    min-height:560px;

    display:grid;
    grid-template-columns:40% 60%;

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

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

    transform:translateY(30px) scale(.95);

    transition:.4s ease;
}

.form-status-modal.active .form-status-container{

    transform:translateY(0) scale(1);

}

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

.status-left{

    background:linear-gradient(160deg,#1f2937,#111827);

    color:#fff;

    padding:42px 36px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.status-left .popup-label{

    width:max-content;

    margin-bottom:28px;

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

    color:#fff;

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

.status-left h2{

    font-size:36px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:700;
}

.status-left p{

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

    font-size:16px;

    line-height:1.9;

    margin-bottom:40px;
}

.status-left .popup-features{

    display:flex;
    flex-direction:column;
    gap:18px;
}

.status-left .popup-feature{

    color:#fff;
}

.status-left .popup-feature i{

    color:#ff6b00;
}

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

.status-right{

    padding:42px 48px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    background:#fff;
}

/* Success Icon */

.success-circle{

    width:90px;
    height:90px;

    border-radius:50%;

    background:#ff6b00;

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

    margin-bottom:30px;

    animation:popSuccess .6s ease;
}

.success-circle i{

    color:#fff;

    font-size:44px;
}

@keyframes popSuccess{

    0%{
        transform:scale(.2) rotate(-30deg);
        opacity:0;
    }

    70%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

/* Heading */

#statusTitle{

    font-size:34px;

    color:#111827;

    margin-bottom:12px;

    font-weight:700;
}

.status-right h4{

    color:#ff6b00;

    font-size:20px;

    margin-bottom:30px;

    font-weight:600;
}

#statusMessage{

    color:#6b7280;

    font-size:16px;

    line-height:1.9;

    max-width:520px;

    margin-bottom:22px;
}

/* Success Badge */

.status-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#fff6ef;

    border:1px solid #ffd4b8;

    color:#ff6b00;

    padding:14px 22px;

    border-radius:999px;

    margin-bottom:35px;

    font-weight:600;
}

.status-badge i{

    font-size:22px;
}

/* Button */

.status-right .popup-btn{

    width:100%;
    max-width:260px;

    font-size:16px;

    padding:14px 0;

    border-radius:14px;

    transition:.3s;
}

.status-right .popup-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(255,107,0,.25);
}

/* Close */

.status-close{

    position:absolute;

    right:22px;
    top:22px;

    width:46px;
    height:46px;

    border:none;

    background:#f5f5f5;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

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

.status-close:hover{

    background:#ff6b00;

    color:#fff;

    transform:rotate(90deg);
}

.status-close i{

    font-size:22px;
}

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

@media(max-width:991px){

.form-status-container{

    width:95%;

    min-height:auto;

    grid-template-columns:1fr;
}

.status-left{

    padding:45px 35px;
}

.status-right{

    padding:45px 35px;
}

.status-left h2{

    font-size:34px;
}

#statusTitle{

    font-size:34px;
}

}

@media(max-width:600px){

.form-status-container{

    width:94%;
}

.status-left{

    padding:35px 25px;
}

.status-right{

    padding:35px 25px;
}

.success-circle{

    width:85px;
    height:85px;
}

.success-circle i{

    font-size:42px;
}

.status-left h2{

    font-size:28px;
}

#statusTitle{

    font-size:30px;
}

.status-right h4{

    font-size:18px;
}

#statusMessage{

    font-size:15px;
}

.status-badge{

    font-size:14px;
}

.status-right .popup-btn{

    max-width:100%;
}

}

.ri-spin{
    display:inline-block;
    animation:spin .8s linear infinite;
    margin-right:8px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* =========================================
   POPUP SELECT FIELDS
========================================= */

.popup-input select{

    width:100%;

    height:58px;

    padding:0 18px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#fff;

    color:#1f2937;

    font-size:15px;

    font-weight:500;

    font-family:inherit;

    outline:none;

    cursor:pointer;

    transition:.3s ease;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%236b7280' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;
}

.popup-input select:hover{

    border-color:#ff6b00;
}

.popup-input select:focus{

    border-color:#ff6b00;

    box-shadow:0 0 0 4px rgba(255,107,0,.12);
}

.popup-input select option{

    background:#fff;

    color:#1f2937;

    font-size:15px;
}

/* Placeholder color */

.popup-input select:invalid{

    color:#9ca3af;
}

.popup-input select optgroup {

    font-weight: 700;

    color: #ff6b00;

    background: #fff7f0;
}

.popup-input select option {

    color: #1f2937;

    font-weight: 500;

    background: #ffffff;
}