/* ==================== MOBILE LAYOUT FIXES ==================== */

/* Prevent any overlapping on mobile */
@media (max-width: 767px) {

    /* ==================== HERO SECTION - FIX LAYOUT ==================== */

    /* Force hero grid to stack vertically */
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Ensure proper spacing between elements */
    .hero-content {
        position: relative;
        z-index: 10;
        padding-bottom: 1rem;
        order: 1;
    }

    .hero-image {
        position: relative;
        z-index: 5;
        margin-top: 0;
        order: 2;
        width: 100%;
    }

    .hero-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* Prevent WhatsApp button from overlapping */
    .whatsapp-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 56px;
        height: 56px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    /* Ensure header doesn't overlap content */
    body {
        padding-top: 0;
    }

    /* Better spacing for sections */
    section {
        padding: 60px 0;
    }

    /* ==================== SERVICE CARDS - ENSURE ALL ARE VISIBLE ==================== */

    /* Force all service cards to be visible */
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    /* Ensure each service card is visible */
    .service-card {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem;
        padding: 1.5rem;
    }

    .service-card h3 {
        font-size: 1.25rem;
    }

    .service-icon {
        font-size: 2.5rem;
    }

    /* ==================== CALCULATOR FIXES ==================== */

    /* Ensure calculators are visible on mobile */
    .calculator-content.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Calculator cards - prevent overflow */
    .calculator-card {
        padding: 1.5rem;
        overflow-x: hidden;
        margin-bottom: 2rem;
    }

    /* Loan type selector - 2x2 GRID LAYOUT */
    .loan-type-selector {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    /* Loan type buttons - compact for 2x2 grid */
    .loan-type-btn {
        padding: 1rem;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .loan-type-icon {
        font-size: 1.5rem;
        width: 45px;
        height: 45px;
        margin-bottom: 0.5rem;
    }

    .loan-type-title {
        font-size: 0.875rem;
        text-align: center;
        line-height: 1.2;
    }

    .loan-type-rate {
        font-size: 0.75rem;
        text-align: center;
    }

    /* Calculator grid - stack vertically */
    .calculator-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Input groups - better spacing */
    .calc-input-group {
        margin-bottom: 1rem;
    }

    /* Larger inputs for mobile */
    .calc-input-lg {
        height: 3.5rem;
        font-size: 1.25rem;
    }

    /* Results card - better visibility */
    .calc-results {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }

    .calc-result-value {
        font-size: 2rem;
    }

    /* Mode selector - stack vertically */
    .calc-mode-buttons {
        flex-direction: column !important;
        gap: 0.75rem;
    }

    .calc-mode-btn {
        padding: 0.875rem;
        min-height: 60px;
    }

    /* Stats - stack vertically on small screens */
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .stat {
        text-align: left;
    }

    /* Ensure buttons don't overflow */
    .btn-primary,
    .btn-secondary,
    .btn-cta {
        width: 100%;
        max-width: 100%;
    }

    /* Container padding for mobile */
    .container {
        padding: 0 1.25rem;
    }

    /* Calculator section - ensure visibility */
    .calculator-section {
        overflow: visible;
        padding: 60px 0;
    }

    /* Fix calculator content wrapper */
    .calculator-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
}

/* Extra small devices */
@media (max-width: 374px) {
    .hero-content h1 {
        font-size: 1.75rem;
    }

    .logo img {
        width: 150px !important;
        max-width: 150px !important;
    }

    .header-content {
        height: 70px;
    }

    .loan-type-btn {
        padding: 0.875rem;
        min-height: 90px;
    }

    .loan-type-icon {
        font-size: 1.25rem;
        width: 40px;
        height: 40px;
    }

    .loan-type-title {
        font-size: 0.8rem;
    }

    .loan-type-rate {
        font-size: 0.7rem;
    }

    .calc-result-value {
        font-size: 1.75rem;
    }

    .service-card {
        padding: 1.25rem;
    }
}

/* Prevent horizontal scroll on all devices */
body {
    overflow-x: hidden;
}

* {
    max-width: 100%;
}

/* Ensure images don't cause overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for calculator visibility - force display */
.calculator-content.active {
    display: block !important;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}