/*
 * P0 responsive guardrails for the customer-facing public-booking funnel.
 *
 * This stylesheet is intentionally loaded last. Older public-booking layers
 * still provide the visual design, while this file owns layout safety across
 * mobile, tablet, desktop, narrow WebViews and long Persian content.
 */

html,
body.public-booking-body {
    width: 100%;
    max-width: 100%;
}

body.public-booking-body {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body.public-booking-body {
        overflow-x: hidden;
    }
}

.public-booking-app,
.pb-page-shell,
.pb-business-header,
.pb-business-identity,
.pb-business-header__actions,
.pb-content-card,
.pb-content-heading,
.pb-booking-grid,
.pb-summary-card,
.pb-service-grid,
.pb-service-card,
.pb-service-card__link,
.pb-section-block,
.pb-payment-card,
.pb-progress,
.pb-date-strip,
.pb-time-form,
.pb-time-fieldset,
.pb-time-grid,
.pb-customer-form,
.pb-form-grid,
.pb-form-field,
.pb-provider-grid,
.pb-provider-card,
.pb-payment-summary,
.pb-result-card,
.pb-result-summary,
.pb-result-actions,
.pb-gateway-card,
.pb-gateway-actions,
.pb-platform-footer,
.pb-business-modal,
.pb-business-modal__dialog,
.pb-business-modal__scroll,
.pb-business-modal__content,
.pb-business-modal__identity,
.pb-business-modal__section,
.pb-business-modal__contact,
.pb-business-modal__contact-group {
    min-width: 0;
    max-width: 100%;
}

.pb-business-identity > div,
.pb-content-heading > div,
.pb-provider-card > span,
.pb-result-business > div,
.pb-business-modal__identity > div,
.pb-business-modal__topbar-title {
    min-width: 0;
}

.pb-business-header h1,
.pb-content-heading h2,
.pb-summary-card h2,
.pb-result-card h1,
.pb-gateway-card h1,
.pb-service-card h3,
.pb-section-title h3,
.pb-business-modal h2,
.pb-business-modal h3,
.pb-business-header p,
.pb-content-heading p,
.pb-service-description,
.pb-provider-card strong,
.pb-provider-card small,
.pb-summary-card dd,
.pb-result-summary dd,
.pb-payment-summary strong,
.pb-alert,
.pb-empty-state,
.pb-text-link,
.pb-business-contact,
.pb-business-modal__contact,
.pb-business-modal__services li {
    overflow-wrap: anywhere;
    word-break: normal;
}

.pb-service-card__link,
.pb-primary-action,
.pb-secondary-button,
.pb-text-button,
.pb-copy-button,
.pb-back-link,
.pb-about-button,
.pb-contact-button {
    max-width: 100%;
}

.pb-progress {
    width: 100%;
    overflow: hidden;
}

.pb-progress > span,
.pb-progress > span > span {
    min-width: 0;
}

.pb-progress > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-date-strip {
    width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.pb-date-card {
    max-width: min(146px, calc(100vw - 48px));
}

.pb-time-input + .pb-time-chip {
    min-width: 0;
}

.pb-form-field input,
.pb-form-field textarea,
.pb-form-field select {
    min-width: 0;
    max-width: 100%;
}

.pb-provider-card input {
    flex: 0 0 auto;
}

.pb-summary-card dl > div,
.pb-result-summary > div,
.pb-payment-summary > div {
    min-width: 0;
}

.pb-summary-card dt,
.pb-summary-card dd,
.pb-result-summary dt,
.pb-result-summary dd,
.pb-payment-summary span,
.pb-payment-summary strong {
    min-width: 0;
}

.pb-reference-value {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pb-reference-value strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pb-business-modal__topbar {
    min-width: 0;
}

.pb-business-modal__contact a,
.pb-business-modal__contact-group--phones a {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .public-booking-app {
        width: min(var(--pb-max-width), calc(100% - 24px));
    }

    .pb-business-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .pb-business-header__actions {
        align-self: center;
    }

    .pb-content-heading {
        flex-wrap: wrap;
    }

    .pb-booking-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-summary-card {
        position: static;
        top: auto;
    }

    .pb-summary-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-business-modal__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-business-modal__identity,
    .pb-business-modal__section,
    .pb-business-modal__contact {
        grid-column: 1;
    }
}

@media (max-width: 700px) {
    .public-booking-app {
        width: min(var(--pb-max-width), calc(100% - 16px));
        padding-top: max(8px, env(safe-area-inset-top));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
    }

    .pb-page-shell {
        width: 100%;
    }

    .pb-business-header,
    .pb-business-header--compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .pb-business-identity {
        width: 100%;
        align-items: flex-start;
    }

    .pb-business-header--compact h1 {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .pb-business-header__actions,
    .pb-business-header--compact .pb-business-header__actions,
    .pb-business-header:not(.pb-business-header--compact) .pb-business-header__actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
        justify-content: stretch;
        margin-inline-start: 0;
    }

    .pb-business-header__actions > * {
        width: 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .pb-content-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-count-badge,
    .pb-date-summary,
    .pb-status-badge {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .pb-progress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pb-service-grid,
    .pb-form-grid,
    .pb-provider-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-form-field--wide {
        grid-column: auto;
    }

    .pb-summary-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-summary-card dl > div,
    .pb-result-summary > div,
    .pb-payment-summary > div {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: 10px;
    }

    .pb-summary-card dd,
    .pb-result-summary dd,
    .pb-payment-summary strong {
        text-align: left;
    }

    .pb-section-title {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pb-section-title > span {
        max-width: 100%;
        text-align: right;
        white-space: normal;
    }

    .pb-time-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pb-form-field input,
    .pb-form-field textarea,
    .pb-form-field select {
        font-size: 16px;
    }

    .pb-sticky-action {
        width: 100%;
        max-width: 100%;
        bottom: max(6px, env(safe-area-inset-bottom));
    }

    .pb-sticky-action .pb-primary-action {
        width: 100%;
    }

    .pb-result-card,
    .pb-gateway-card {
        width: 100%;
    }

    .pb-result-actions,
    .pb-gateway-actions {
        width: 100%;
    }

    .pb-platform-footer {
        width: min(calc(100% - 16px), var(--pb-max-width));
        margin-inline: auto;
    }

    .pb-business-modal {
        padding:
            max(6px, env(safe-area-inset-top))
            max(6px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left));
    }

    .pb-business-modal__dialog {
        width: 100%;
        height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        max-height: none;
    }

    .pb-business-modal__content {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .public-booking-app {
        width: min(var(--pb-max-width), calc(100% - 8px));
    }

    .pb-business-header,
    .pb-content-card,
    .pb-summary-card,
    .pb-result-card,
    .pb-gateway-card {
        border-radius: 20px;
    }

    .pb-business-header,
    .pb-business-header--compact,
    .pb-content-card,
    .pb-summary-card {
        padding-inline: 14px;
    }

    .pb-business-logo,
    .pb-business-header--compact .pb-business-logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 15px;
    }

    .pb-business-header h1,
    .pb-business-header--compact h1 {
        font-size: 21px;
        line-height: 1.55;
    }

    .pb-business-header p {
        font-size: 12px;
    }

    .pb-business-header__actions,
    .pb-business-header--compact .pb-business-header__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-progress {
        gap: 3px;
        padding: 4px;
    }

    .pb-progress > span {
        min-height: 40px;
        padding-inline: 3px;
    }

    .pb-progress > span > span {
        display: none;
    }

    .pb-progress .is-active > span {
        display: inline;
    }

    .pb-progress b {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .pb-summary-card dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-summary-card dl > div,
    .pb-result-summary > div,
    .pb-payment-summary > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .pb-summary-card dd,
    .pb-result-summary dd,
    .pb-payment-summary strong {
        text-align: right;
    }

    .pb-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-time-chip {
        min-height: 64px;
        padding-inline: 4px;
    }

    .pb-service-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-primary-action,
    .pb-secondary-button,
    .pb-result-actions .pb-text-button,
    .pb-gateway-actions > * {
        width: 100%;
    }

    .pb-reference-value {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: stretch;
        text-align: right;
    }

    .pb-reference-value .pb-copy-button {
        width: auto;
    }

    .pb-platform-footer {
        flex-direction: column;
        gap: 6px;
    }

    .pb-platform-footer__separator {
        display: none;
    }

    .pb-business-modal__topbar {
        gap: 8px;
        padding-inline: 11px;
    }

    .pb-business-modal__close {
        min-width: 72px;
        padding-inline: 9px;
    }

    .pb-business-modal__content {
        padding: 12px;
    }

    .pb-business-modal__identity {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
    }

    .pb-business-modal__logo {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        border-radius: 16px;
    }
}

@media (max-width: 350px) {
    .pb-business-header__actions,
    .pb-business-header--compact .pb-business-header__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .pb-progress > span {
        min-height: 38px;
    }

    .pb-progress .is-active > span {
        display: none;
    }

    .pb-result-card,
    .pb-gateway-card {
        padding-inline: 13px;
    }

    .pb-business-modal__close span:last-child {
        display: none;
    }

    .pb-business-modal__close {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }
}