/**
 * Feenix — global mobile / touch enhancements (all pages).
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* Prevent iOS zoom on focus */
@media (max-width: 768px) {
    input.form-input,
    select.form-input,
    textarea.form-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Touch-friendly controls */
@media (max-width: 768px) {
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    label.lc-source-row,
    .mobile-nav-link {
        -webkit-tap-highlight-color: rgba(133, 78, 242, 0.2);
    }

    .menu-item,
    nav a {
        min-height: 44px;
    }
}

/* Horizontal tab / pill rows */
@media (max-width: 768px) {
    .tab-scroll-row,
    .mobile-tab-row,
    main .flex.gap-2.mb-6,
    main .flex.gap-2.mb-4,
    main .flex.flex-wrap.gap-2.mb-6,
    main .flex.flex-wrap.gap-2.mb-4,
    #main-content-scroll > .flex.gap-2.mb-6,
    #main-content-scroll > .flex.gap-2.mb-4,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-6,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-4 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
        touch-action: pan-x;
    }

    .tab-scroll-row > *,
    .mobile-tab-row > *,
    main .flex.gap-2.mb-6 > a,
    main .flex.gap-2.mb-6 > button,
    main .flex.gap-2.mb-4 > a,
    main .flex.gap-2.mb-4 > button,
    main .flex.flex-wrap.gap-2.mb-6 > a,
    main .flex.flex-wrap.gap-2.mb-6 > button,
    main .flex.flex-wrap.gap-2.mb-4 > a,
    main .flex.flex-wrap.gap-2.mb-4 > button,
    main .flex.flex-wrap.gap-2.mb-4 > span,
    main .flex.flex-wrap.gap-2.mb-4 > form,
    #main-content-scroll > .flex.gap-2.mb-6 > a,
    #main-content-scroll > .flex.gap-2.mb-6 > button,
    #main-content-scroll > .flex.gap-2.mb-4 > a,
    #main-content-scroll > .flex.gap-2.mb-4 > button,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-6 > a,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-6 > button,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-4 > a,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-4 > button,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-4 > span,
    #main-content-scroll > .flex.flex-wrap.gap-2.mb-4 > form {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Modals & dialogs */
@media (max-width: 768px) {
    .fixed.inset-0.flex.items-center,
    .fixed.inset-0[class*="flex"][class*="justify-center"] {
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        align-items: flex-end;
    }

    .fixed.inset-0 .bg-gray-800.rounded-xl,
    .fixed.inset-0 .rainbow-card,
    #smtp-setup-gate > div {
        max-height: min(92dvh, calc(100dvh - 1.5rem));
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    [id$="Modal"],
    [id*="Modal"] .bg-gray-800.rounded-xl {
        max-height: 90dvh;
        overflow-y: auto;
    }
}

/* Code / embed blocks */
@media (max-width: 768px) {
    pre,
    code {
        word-break: break-word;
        white-space: pre-wrap;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Admin main content — single column grids */
@media (max-width: 768px) {
    #main-content-scroll .grid,
    main .grid:not(.dashboard-stat-grid) {
        grid-template-columns: 1fr !important;
    }

    #main-content-scroll .flex.justify-between.items-start {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    #main-content-scroll .flex.justify-between.items-start > .flex.gap-2 {
        flex-wrap: wrap;
    }

    .lcf-row {
        grid-template-columns: 1fr !important;
    }
}

/* Public site */
@media (max-width: 768px) {
    .max-w-6xl,
    .max-w-4xl {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .hero-slider {
        height: min(420px, 55dvh) !important;
    }

    .property-gallery .property-slider-prev,
    .property-gallery .property-slider-next {
        width: 40px;
        height: 40px;
    }
}

/* Fixed widgets — safe area */
@media (max-width: 768px) {
    #scroll-to-top-btn {
        bottom: max(1.25rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
        width: 48px;
        height: 48px;
    }

    #chat-widget,
    #chat-widget-root #chat-widget {
        bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        right: max(0.75rem, env(safe-area-inset-right)) !important;
    }

    #chat-widget #chat-panel {
        width: min(380px, calc(100vw - 1.5rem)) !important;
        max-width: calc(100vw - 1.5rem) !important;
        height: min(520px, calc(100dvh - 6rem)) !important;
        max-height: calc(100dvh - 6rem) !important;
    }

    #realestate-pwa-install-banner {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    #cookie-banner {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Lead form standalone */
@media (max-width: 480px) {
    .form-card {
        padding: 1.25rem !important;
        border-radius: 12px;
        max-width: 100%;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px !important;
    }
}

/* Utility: stack action button rows */
@media (max-width: 640px) {
    .mobile-stack-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-stack-actions > * {
        width: 100%;
    }
}
