/* Modal Overlay */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Padding around the modal for smaller screens */
    box-sizing: border-box;
}

.modal-overlay.modal-open {
    display: flex;
}

/* Modal Content Wrapper */
.modal-content-wrapper {
    background: #FFFFFF;
    border-radius: 24px; /* Figma: 24px */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: row; /* Figma: row */
    width: 961px; /* Figma: 961px */
    height: 489px; /* Figma: 489px */
    position: relative;
    overflow: hidden; 
    padding: 20px; /* Figma: 20px */
    gap: 26px; /* Figma: 26px */
    box-sizing: border-box;
}

.modal-close-btn {
    position: absolute;
    top: 20px; /* Aligned with padding */
    right: 20px; /* Aligned with padding */
    background: none;
    border: none;
    font-size: 24px; /* Figma: 24px for icon container */
    color: #000000; /* Figma: black vector */
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    z-index: 10; 
}

.modal-close-btn:hover {
    color: #555;
}

/* Left Panel (LeadBanner) */
.modal-left-panel {
    background: #1181D0; /* Figma: #1181D0 */
    color: #FFFFFF;
    padding: 25px 40px 60px 40px; 
    width: 330px; /* Increased from 300px */
    height: 100%; 
    border-radius: 4px; /* Figma: 4px */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    box-sizing: border-box;
}

.modal-left-panel h2 { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 34px;
    color: #FFFFFF;
    margin-bottom: 16px; /* Adjusted for Figma */
}

.modal-left-panel p { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #EBF1FD; 
    margin-bottom: 28px; /* Adjusted for Figma */
}

.modal-left-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px; /* Spacing between list items */
}

.modal-left-panel ul li { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 18px;
    line-height: 24px;
    color: #EBF1FD; 
    margin-bottom: 0; /* Handled by ul gap */
    display: flex;
    align-items: center;
    gap: 12px; /* Space between icon background and text */
}

.list-icon-bg {
    background-color: #379AEF; /* Lighter blue from Figma icon circles */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking if text is long */
}

.modal-left-panel ul li .list-icon-bg i { 
    font-size: 16px; /* Adjust icon size within circle */
    color: #FFFFFF; /* Icon color white */
}

/* Right Panel (Form Area) */
.modal-right-panel {
    padding: 10px 0 0 0; /* Top padding to align heading, other spacing by gap */
    flex: 1; 
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 28px; /* Adjusted general gap for right panel sections */
    height: 100%; 
    box-sizing: border-box;
}

.modal-right-panel h3 { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #5C5C5C; 
    margin: 0; /* Rely on parent flex gap */
}

#brochureForm { /* Targeting the form directly */
    display: flex;
    flex-direction: column;
    gap: 24px; /* Spacing between form rows and message group */
    flex-grow: 1;
}

.form-row {
    display: flex;
    gap: 39px; /* Figma: 39px */
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Figma: 8px between label and input line */
}

.form-group label { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #000000; 
    margin-bottom: 0; 
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    font-family: 'Geist', sans-serif; 
    font-style: normal;
    font-weight: 400;
    font-size: 18px; 
    line-height: 22px; 
    color: #333333; 
    padding: 8px 0; 
    border: none;
    border-bottom: 1px solid #8D8D8D; 
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="tel"]::placeholder,
.form-group textarea::placeholder { 
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px; 
    line-height: 22px;
    color: #8D8D8D; 
    opacity: 1; 
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom: 2px solid #1181D0; 
}

.form-group textarea {
    resize: none; 
    min-height: 60px; 
}

/* Download Now Button */
.btn-download-now {
    background-color: #168CE0; 
    color: #FFFFFF; 
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 500; 
    font-size: 18px; 
    line-height: 24px; 
    padding: 10px 16px; /* Adjusted padding for text part */
    border: 1px solid #FFFFFF; 
    border-radius: 8px; 
    cursor: pointer;
    display: flex; 
    align-items: center;
    justify-content: space-between; /* Pushes icon container to the right */
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: flex-start; 
    margin-top: 12px; /* Space above the button */
    min-width: 250px; /* Ensure button has some decent width */
}

.btn-download-now span:first-child { /* Text part */
    margin-right: auto; /* Pushes icon container away if justify-content was center */
    padding-left: 8px; /* Give some space if text is long */
}

.btn-download-now:hover {
    background-color: #1172b3; 
    transform: translateY(-2px);
}

.btn-download-now:active {
    transform: translateY(0);
}

.btn-download-now .icon-container { 
    background: #5BB0EC; 
    border-radius: 6px; /* Slightly less rounded than main button for visual hierarchy */
    width: 38px; 
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-download-now .icon-container i {
    font-size: 18px;
    color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 992px) { /* Medium screens */
    .modal-content-wrapper {
        width: 90%;
        max-width: 700px; 
        height: auto; 
        flex-direction: column; 
        padding: 15px;
        gap: 15px;
    }

    .modal-left-panel {
        width: 100%; 
        height: auto; 
        padding: 30px 20px;
        border-radius: 4px; 
    }

    .modal-left-panel ul {
        gap: 15px; /* Adjust list item gap for medium screens */
    }

    .list-icon-bg {
        width: 32px;
        height: 32px;
    }
    .modal-left-panel ul li .list-icon-bg i {
        font-size: 14px;
    }

    .modal-right-panel {
        width: 100%;
        padding: 20px 0 0 0; 
        gap: 20px; /* Adjust gap for right panel sections */
    }

    #brochureForm {
        gap: 20px; /* Adjust form gap */
    }

    .form-row {
        flex-direction: column; 
        gap: 18px; 
    }

    .modal-left-panel h2 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 15px;
    }

    .modal-left-panel p {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    .modal-left-panel ul li {
        font-size: 16px;
        line-height: 22px;
        gap: 10px;
    }

    .modal-right-panel h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .form-group label,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea,
    .form-group input[type="text"]::placeholder,
    .form-group input[type="email"]::placeholder,
    .form-group input[type="tel"]::placeholder,
    .form-group textarea::placeholder {
        font-size: 16px;
    }

    .btn-download-now {
        font-size: 16px;
        padding: 10px 16px;
        width: 100%; 
        min-width: unset;
    }

    .btn-download-now .icon-container {
        width: 32px;
        height: 32px;
    }
    .btn-download-now .icon-container i {
        font-size: 16px;
    }

}

@media (max-width: 576px) { /* Small screens */
    .modal-content-wrapper {
        padding: 10px;
        gap: 10px;
        margin: 10px; 
        width: calc(100% - 20px);
    }

    .modal-close-btn {
        top: 10px;
        right: 10px;
        font-size: 20px;
    }

    .modal-left-panel {
        padding: 20px 15px;
    }

    .modal-left-panel ul {
        gap: 12px; /* Adjust list item gap for small screens */
    }

    .list-icon-bg {
        width: 28px;
        height: 28px;
    }
    .modal-left-panel ul li .list-icon-bg i {
        font-size: 12px;
    }

    .modal-left-panel h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .modal-left-panel p {
        font-size: 13px;
        line-height: 17px;
    }

    .modal-left-panel ul li {
        font-size: 14px;
        line-height: 20px;
        gap: 8px;
    }

    .modal-right-panel {
        gap: 15px; /* Adjust gap for right panel sections */
    }

    #brochureForm {
        gap: 15px; /* Adjust form gap */
    }

    .modal-right-panel h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .form-group label,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea,
    .form-group input[type="text"]::placeholder,
    .form-group input[type="email"]::placeholder,
    .form-group input[type="tel"]::placeholder,
    .form-group textarea::placeholder {
        font-size: 14px;
    }

    .btn-download-now {
        font-size: 14px;
        padding: 8px 12px;
    }

    .btn-download-now .icon-container {
        width: 28px;
        height: 28px;
    }
    .btn-download-now .icon-container i {
        font-size: 14px;
    }
}