/* === Modal Customizations === */
.modal-dialog {
    max-width: 600px; /* Fixed width */
    margin: 1.75rem auto; /* Bootstrap default for centering */
}

.modal-content {
    border-radius: 10px; /* Smaller border-radius */
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Smaller shadow */
    background: var(--white-ivory);
    height: 600px; /* Fixed height for 600:800 ratio */
    overflow: hidden; /* Prevent content overflow */
}

.modal-header {
    background: linear-gradient(45deg, var(--teal-accent), var(--navy-blue-dark));
    color: var(--white-ivory);
    border-radius: 10px 10px 0 0; /* Adjusted for smaller border-radius */
    border-bottom: none;
    padding: 12px 20px; /* Reduced padding */
}

.modal-title {
    font-weight: 600; /* Lighter weight */
    font-size: 1.25rem; /* Smaller font */
    color: var(--white-ivory);
}

.modal-body {
    padding: 10px; /* Reduced padding */
    color: var(--navy-blue-dark);
    font-size: 0.9rem; /* Smaller base font */
    max-height: 700px; /* Adjusted for header/footer, scrollable */
    overflow-y: auto; /* Enable vertical scrollbar */
}

    .modal-body h2 {
        color: var(--navy-blue-dark);
        font-size: 1.2rem; /* Smaller font */
        margin-bottom: 10px; /* Reduced margin */
    }

    .modal-body p {
        font-size: 0.9rem; /* Smaller font */
    }

    .modal-body a {
        color: var(--teal-accent);
        text-decoration: underline;
        font-size: 0.9rem; /* Smaller font */
    }

    .modal-body ul {
        padding-left: 15px; /* Reduced padding */
        font-size: 0.9rem; /* Smaller font */
    }

.btn-close {
    filter: invert(1); /* Makes X icon white for dark header */
    font-size: 0.8rem; /* Smaller size */
}

.terms-conditions-section, .privacy-policy-section {
    margin-bottom: 15px; /* Reduced margin */
    padding: 15px; /* Reduced padding */
    background: rgba(45, 184, 163, 0.05);
    border-left: 3px solid var(--teal-accent); /* Smaller border */
    border-radius: 0 6px 6px 0; /* Smaller border-radius */
}


@media (max-width: 768px) {
    .modal-dialog {
        margin: 15px auto; /* Centered with smaller margin */
        max-width: 90%; /* Fit smaller screens */
    }

    .modal-content {
        height: 533px; /* Maintain 600:800 ratio (800 * 0.6667) */
    }

    .modal-body {
        max-height: 450px; /* Adjusted for header, maintaining proportionality */
    }
}