/* ================================================
   Mobile fixes for the downloaded site
   Supplements the original Tailwind CSS
   ================================================ */

/* Ensure the page fills the viewport width on mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Fix the background container on mobile */
.min-h-screen {
    width: 100%;
}

.mx-auto.max-w-\[1200px\] {
    width: 100%;
}

/* Touch-friendly form inputs — minimum 48px height for iOS/Android */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        min-height: 48px !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Stack form row items properly */
    .grid.grid-cols-2.gap-3 {
        grid-template-columns: 1fr !important;
    }

    /* Better spacing for stacked mobile sections */
    .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-12 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-8 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

    /* Carousel overflow protection */
    .overflow-hidden {
        overflow: hidden !important;
    }

    /* Prevent horizontal scroll from any wide element */
    img, svg, picture {
        max-width: 100% !important;
    }

    /* Better mobile padding for containers */
    .container-desktop {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Hero section mobile adjustments */
    .grid.grid-cols-1.md\:grid-cols-2.gap-0.items-stretch > div {
        min-height: auto !important;
    }

    /* Make sure the form card doesn't overflow */
    .p-6 {
        padding: 1.25rem !important;
    }

    /* Testimonial card dots — bigger touch targets */
    button.w-3.h-3.rounded-full {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px;
        min-height: 12px;
    }

    /* Bank logos grid — 2 columns on mobile instead of 3 */
    .grid.grid-cols-3.md\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Calculator cards — full width on mobile */
    .grid.grid-cols-1.md\:grid-cols-3 > div {
        width: 100%;
    }

    /* Footer columns stack on mobile */
    .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
        gap: 1.5rem !important;
    }
}

/* Small phones (<375px) */
@media (max-width: 374px) {
    .container-desktop {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1, .text-3xl, .text-4xl {
        font-size: 1.4rem !important;
    }

    h2, .text-2xl {
        font-size: 1.2rem !important;
    }
}

/* Tablet tweaks (768-1024) */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\:grid-cols-2 {
        gap: 1.5rem;
    }
}

/* Fix for Tailwind arbitrary color classes used in inline styles */
.bg-\[\#1a365d\] { background-color: #1a365d !important; }
.border-\[\#1a365d\] { border-color: #1a365d !important; }
.text-\[\#1a365d\] { color: #1a365d !important; }
.bg-\[\#059669\] { background-color: #059669 !important; }
.bg-\[\#0a6e4e\] { background-color: #0a6e4e !important; }

/* Trust badges (Google/Trustpilot) below form — prevent overflow */
.md\:hidden > .flex.gap-2 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem !important;
}

.md\:hidden > .flex.gap-2 > img {
    max-width: 45% !important;
    height: auto !important;
    object-fit: contain;
    flex: 0 1 auto !important;
}

@media (max-width: 374px) {
    .md\:hidden > .flex.gap-2 > img {
        max-width: 42% !important;
    }
}

/* Carousel smooth transitions */
.transition-transform {
    transition: transform 0.5s ease-in-out !important;
}

/* International phone input */
.iti {
    width: 100%;
}

.iti input[type="tel"] {
    width: 100%;
}

.iti__country-list {
    max-width: min(100vw - 2rem, 360px);
}