/* New Badge Layout */
.fx-badges-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.fx-badge-sub {
    font-size: 0.65rem !important;
    background: rgba(236, 96, 51, 0.15) !important;
    color: var(--theme-orange) !important;
    border: 1px solid rgba(236, 96, 51, 0.3);
    padding: 4px 10px !important;
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
}

/* Contact Button in Calculator Footer */
.fx-split-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.fx-contact-btn {
    flex-grow: 1;
    text-align: center;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pre-Approval Modal Specifics */
.fx-modal-sm {
    max-width: 500px !important;
    height: auto !important;
    max-height: 90vh;
    padding: 0 !important;
}

.fx-modal-header {
    margin-bottom: 0px !important;
    margin-top: 30px !important;
    text-align: center;
}

.fx-modal-body {
    padding: 30px;
    overflow-y: auto;
}

.fx-close-modal-pre {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    z-index: 10;
    line-height: 1;
}

.fx-close-modal-pre:hover {
    color: var(--theme-orange);
}

.fx-radio-group {
    display: flex;
    gap: 20px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.fx-radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.width-100 {
    width: 100%;
}

/* Form Row Layout */
.fx-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 0px;
    /* input groups have their own margin? checking... */
}

/* Adjust input group margin if needed */
.fx-input-group {
    margin-bottom: 15px;
}

.width-50 {
    flex: 1;
    min-width: 0;
    /* Prevents flex overflow */
}

@media (max-width: 600px) {
    .fx-form-row {
        flex-direction: column;
        gap: 0;
    }

    .fx-split-footer {
        flex-direction: column-reverse;
    }

    .fx-contact-btn {
        width: 100%;
    }

    .fx-back-btn {
        width: 100%;
    }
}

#fx-preapproval-msg {
    margin-top: 15px;
    font-size: 0.9rem;
    text-align: center;
}

.success-message {
    color: #28a745;
    background: #e6ffed;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #c3e6cb;
}

.error-message {
    color: #dc3545;
    background: #ffe6e6;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #f5c6cb;
}

@media (max-width: 600px) {
    .fx-split-footer {
        flex-direction: column-reverse;
    }

    .fx-contact-btn {
        width: 100%;
    }

    .fx-back-btn {
        width: 100%;
    }
}

/* Content Updates Styling */

/* How It Works Steps */
.process-card__title {
    font-size: 20px !important;
    font-weight: 700;
}

.process-card__desc {
    font-size: 14px !important;
    line-height: 1.6;
}

/* Equal Height for Horizontal Scroll Cards */
/* Already handled by flex: column and height: 100% in existing CSS, but reinforcing */
.process-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.process-card__content {
    flex-grow: 1;
}

/* Padding Updates for 2x2 Grids */
.benefits-grid-2x2 .benefit-card-minimal {
    padding: 20px !important;
}

/* Services Split 2x2 Grid Padding */
.services-split .benefit-card-minimal {
    padding: 20px !important;
}

/* Helper for descriptions below titles */
.max-w-800 {
    max-width: 800px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt-16 {
    margin-top: 16px;
}

/* Remove button from steps if present (user request) */
.process-card .btn-primary,
.process-card .open-mortgage-calculator {
    display: none !important;
}

/* Mortgage Calculator Lead Form Adjustments */
/* Hide consent checkbox container but keep it functional */
#fx-lead-form .checkbox-group {
    display: none !important;
}

/* Center submit button in calculator lead form */
#fx-lead-form button[type="submit"] {
    display: block;
    margin: 20px auto 0;
    width: auto !important;
    min-width: 200px;
}

We will handle the "checked" state in JS or via `checked` attribute in HTML/JS generation. Here we just hide the UI. */
/* --- Mobile Optimization Fixes (QA) --- */

/* 1. Fix Horizontal Scroll Overflow */
.testimonial-slider-container {
    overflow-x: hidden !important;
    width: 100%;
}

@media (max-width: 768px) {

    body,
    html {
        overflow-x: hidden;
    }
}

/* 2. Typography Scaling */
@media (max-width: 600px) {

    h1.service-hero__title,
    h1.hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    h2.title-solid,
    h2.section-title {
        font-size: 1.75rem !important;
    }
}

/* 3. Pre-Approval Form Mobile Layout (Side-by-Side) */
@media (max-width: 600px) {
    .fx-form-row {
        flex-direction: row !important;
        /* Force row on mobile */
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .width-50 {
        flex: 1 1 45% !important;
        /* Allow sharing row */
        min-width: 140px;
        /* Fallback to stack if VERY small */
    }

    /* Ensure inputs don't overflow */
    .fx-input-group input {
        width: 100% !important;
    }
}

/* 4. Calculator Wizard Cards Compact */
@media (max-width: 600px) {
    .fx-radio-card {
        padding: 10px !important;
        min-height: auto !important;
    }

    .fx-card-inner {
        flex-direction: row !important;
        /* Side-by-side icon/text */
        gap: 10px;
    }

    .fx-card-inner .icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
    }
}

/* 5. Hero & Rates Mobile Polish (User Request) */
@media (max-width: 600px) {

    /* Hero Title Constraints: Force wrapping as requested */
    .service-hero__title {
        max-width: 250px !important;
        /* Forces "Unlock Your Dream / with UAE's Most..." */
        margin-left: auto !important;
        margin-right: auto !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    /* Center Buttons */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        /* Stack buttons or side by side? User said "centered". */
        align-items: center !important;
        gap: 15px !important;
    }

    .hero-buttons button {
        width: 80% !important;
        /* Ensure they look good centered */
        margin: 0 auto !important;
    }

    /* Standard Spacing/Padding Override (Keep "Standard") */
    /* Assuming standard is already 20px padding from container, just ensure no extra margins */
    .service-hero__container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Benefits Description Alignment */
    .mortgage-benefits-split .section-header p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Also ensure title is left aligned as user implied
    .mortgage-benefits-split .section-header h2 {
        text-align: left !important;
    }
    */

    .mortgage-benefits-split .section-header {
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* Rates Grid: 2 Top, 1 Bottom Center */
    .fx-tiles-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .fx-entry-tile {
        flex: 1 1 45% !important;
        /* 2 items take row */
        max-width: 48% !important;
    }

    /* 3rd item (Non-Resident) centers automatically if flex-wrap occurs & justify-content is center */
    /* 3rd item (Non-Resident) centers automatically if flex-wrap occurs & justify-content is center */
}

/* 6. Mobile Spacing Reduction (User Request) */
@media (max-width: 600px) {

    /* Reduce general section spacing */
    .section-spacing-standard {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Target specific "How To Apply" scroll section if needed */
    .how-it-works-scroll {
        padding-top: 20px !important;
        /* Even tighter for this section if stickiness creates gaps */
    }

    /* Reduce title spacing in that section */
    .sticky-title-container h2 {
        margin-bottom: 10px !important;
    }

    .sticky-title-container p.section-desc {
        margin-top: 5px !important;
        font-size: 1rem !important;
    }
}