/* D-SYA responsive and standalone layout fixes */

html,
body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100dvh;
    background: #f0f9ff !important;
    -webkit-text-size-adjust: 100%;
}

#screen-auth,
#screen-reset-password,
#screen-app {
    background: #f0f9ff !important;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* Public landing page: prevent long headings and flex children from forcing a desktop-width canvas. */
.hero,
.hero-content,
.section,
.section > *,
.features-grid,
.role-cards,
.steps,
.role-card,
.feature-item,
.step {
    min-width: 0;
    max-width: 100%;
}

.hero-content {
    width: min(100%, 800px);
}

.section {
    width: 100%;
    box-sizing: border-box;
}

.section h1,
.section h2,
.section h3,
.section p,
.section li,
.hero-title,
.hero-subtitle,
.section-sub,
.role-title,
.role-desc,
.feature-title,
.feature-desc,
.step-title,
.step-desc {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

#filosofi > div,
#filosofi > div > div {
    min-width: 0;
    max-width: 100%;
}

#filosofi h2 {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    line-height: 1.2 !important;
}

#filosofi p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.footer-links {
    flex-wrap: wrap;
}

/* Customer, driver, and merchant shells: use the complete viewport available to the PWA. */
#screen-auth.active,
#screen-reset-password.active,
#screen-app.active {
    width: 100vw;
    max-width: 100%;
    min-width: 0;
    min-height: 100dvh;
    box-sizing: border-box;
}

#screen-auth.active,
#screen-reset-password.active {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
}

#screen-auth .auth-card,
#screen-reset-password .auth-card {
    width: min(100%, 420px) !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100dvh - 2rem);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#screen-app.active {
    height: 100dvh;
    padding-top: calc(var(--nav-h, 64px) + env(safe-area-inset-top));
    padding-bottom: calc(var(--bottom-h, 70px) + env(safe-area-inset-bottom));
}

.app-topbar {
    top: 0;
    min-width: 0;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--nav-h, 64px) + env(safe-area-inset-top));
}

.bottom-nav {
    min-width: 0;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-h, 70px) + env(safe-area-inset-bottom));
}

.location-inputs,
.loc-input,
.location-inputs input,
.form-input,
.order-form,
.tab-content,
.modal,
.modal-overlay {
    min-width: 0;
    max-width: 100%;
}

#map,
#dash-map,
#full-map,
#merchant-map,
#merchant-registration-map {
    width: 100% !important;
    max-width: 100%;
}

@media (max-width: 640px) {
    .section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #filosofi > div {
        padding: 1.5rem 1rem !important;
    }

    #filosofi > div > div {
        display: block !important;
        gap: 1.25rem !important;
    }

    #filosofi > div > div > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    #filosofi img[alt="D-SYA Logo"] {
        width: min(170px, 55vw) !important;
        height: min(170px, 55vw) !important;
    }

    .hero-title {
        font-size: clamp(2.15rem, 11vw, 3.5rem);
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 0.98rem;
    }

    .hero-cta .btn-primary,
    .hero-cta .btn-secondary {
        width: 100%;
        justify-content: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-stats {
        gap: 1rem !important;
        flex-wrap: wrap;
    }

    .hero-stat {
        flex: 1 1 120px;
        min-width: 0;
    }

    #screen-auth .auth-card,
    #screen-reset-password .auth-card {
        padding: 1.25rem !important;
    }

    #screen-auth .role-selector-grid,
    #screen-auth .role-chip {
        min-width: 0;
    }

    #screen-auth .role-chip {
        font-size: 0.7rem;
    }
}


/* Final cross-device hardening for the public landing page. */
#filosofi > div:first-child {
    width: 100%;
    box-sizing: border-box;
}

#filosofi > div:first-child > div,
#filosofi > div:first-child > div > div,
#filosofi > div:first-child > div > div > div,
#filosofi > div:first-child > div > div > div > div {
    box-sizing: border-box;
    min-width: 0;
}

#filosofi > div:first-child h2,
#filosofi > div:first-child p,
#filosofi > div:first-child strong,
#filosofi > div:first-child span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .nav-links {
        gap: 0.65rem;
    }

    .nav-links li:not(:last-child) {
        display: none;
    }

    .hero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-cta {
        width: 100%;
        gap: 0.75rem;
    }

    .hero-cta > * {
        min-width: 0;
        max-width: 100%;
    }

    .hero-stats {
        width: 100%;
        gap: 0.75rem !important;
    }

    .hero-stat {
        flex: 1 1 calc(50% - 0.75rem);
    }

    #filosofi > div:first-child {
        padding: 1.25rem 0.9rem !important;
        border-radius: 18px;
    }

    #filosofi > div:first-child > div {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 1.25rem !important;
    }

    #filosofi > div:first-child > div > div {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #filosofi > div:first-child img[alt="D-SYA Logo"] {
        width: min(170px, 55vw) !important;
        height: min(170px, 55vw) !important;
    }

    #filosofi > div:first-child > div > div > div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    #filosofi > div:first-child > div > div > div[style*="display: inline-block"] {
        display: inline-block !important;
        max-width: 100%;
        white-space: normal;
    }

    #filosofi > div:first-child > div > div > div[style*="background: #ffffff"] {
        padding: 1rem !important;
    }

    #filosofi > div:first-child > div > div > div[style*="background: #ffffff"] > div:first-child {
        display: block !important;
        line-height: 1.5;
    }

    #filosofi > div:first-child > div > div > div[style*="background: #f0f9ff"] {
        padding: 0.9rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    #filosofi > div:first-child > div {
        gap: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}