/* Shared responsive safeguards for public pages and all workspace screens. */
html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

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

pre,
code,
address,
[class*="url"],
[class*="email"] {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .app-layout,
    .app-main,
    .app-content,
    .main-content,
    main,
    .container {
        min-width: 0;
        max-width: 100%;
    }

    .app-content,
    .main-content {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .app-content :where(.card, .panel, .section-card, .content-card) {
        min-width: 0;
        max-width: 100%;
    }

    .app-content :where(.workspace-heading, .section-heading, .page-heading, .page-header,
        .card-heading, .toolbar, .filter-actions, .form-footer, .bulk-actions) {
        min-width: 0;
        flex-wrap: wrap;
    }

    .app-content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .app-content :where(.btn, .button, button[type="submit"], button[type="button"],
        input[type="submit"]) {
        min-height: 44px;
        max-width: 100%;
        white-space: normal;
    }

    .app-content :where(.icon-button, .row-action, .topbar-icon-btn) {
        min-width: 44px;
        min-height: 44px;
    }

    .app-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-content :where(dialog, .modal, .modal-content) {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow: auto;
    }

    .app-content :where(.grid, [class*="grid"] > *, .flex, [class*="flex"] > *) {
        min-width: 0;
    }

    .navbar,
    .navbar-container,
    .nav-links,
    .user-actions {
        max-width: 100%;
    }

    .navbar {
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-link,
    .user-actions a,
    .user-actions button {
        min-height: 44px;
    }

    .site-header,
    .site-header > *,
    .hero,
    .hero-copy,
    .hero-actions,
    .packages-inner,
    .package-grid,
    .package-card,
    .site-footer,
    .legal-layout,
    .closing-cta {
        min-width: 0;
        max-width: 100%;
    }

    .hero-actions :where(.button, .button-small) {
        max-width: 100%;
        white-space: normal;
    }

    .package-prices strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .test-ecard-dialog,
    .booking-prefill-dialog,
    .template-dialog {
        width: calc(100vw - 24px);
        max-width: 560px;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .test-ecard-form :where(input, select, textarea) {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .app-content,
    .main-content {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }

    .app-content :where(.card, .panel, .section-card, .content-card) {
        padding-left: 14px;
        padding-right: 14px;
    }
}