/* Account, authentication and payment adjustments for phone-sized screens. */
@media (max-width: 700px) {
    .auth-main {
        min-height: 0;
        place-items: start center;
        padding: 24px 12px 36px;
    }

    .auth-card {
        min-width: 0;
        padding: 24px 20px;
    }

    .auth-card h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.15rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .auth-card .form-stack {
        gap: 16px;
        margin-top: 24px;
    }

    .auth-card .form-stack label,
    .auth-card .password-field,
    .profile-dashboard-content form label,
    .profile-verification > div,
    .notification-card > div,
    .saved-card > div {
        min-width: 0;
    }

    .auth-card .form-stack input,
    .profile-dashboard-content input,
    .profile-dashboard-content select,
    .profile-dashboard-content textarea,
    .plans-page .saved-card-choice select,
    .feedback-form select,
    .feedback-form textarea,
    .service-editor-page .editor-form :is(input, select, textarea) {
        font-size: 16px;
        max-width: 100%;
    }

    .profile-dashboard-content .profile-personal-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-dashboard-content .profile-personal-form > label {
        grid-column: 1 / -1;
    }

    .auth-card .checkbox-row input {
        flex: 0 0 18px;
    }

    .auth-card .button,
    .profile-dashboard-content .button,
    .service-editor-page .button,
    .service-management .button {
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    .auth-card .password-visibility-toggle,
    .profile-password-form .password-visibility-toggle {
        right: 4px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .profile-password-form .password-field input {
        min-height: 48px;
    }

    .auth-card .form-between a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .profile-dashboard-sidebar {
        padding: 18px 16px 14px;
    }

    .profile-dashboard-sidebar .profile-identity {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        justify-items: start;
        align-items: center;
        text-align: left;
    }

    .profile-dashboard-sidebar .profile-avatar {
        grid-row: 1 / 3;
        width: 48px;
        height: 48px;
        margin: 0;
        font-size: 1.1rem;
    }

    .profile-dashboard-sidebar .profile-identity h1 {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .profile-dashboard-sidebar .profile-identity > p {
        margin: 0;
        font-size: .8rem;
    }

    .profile-dashboard-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 16px;
    }

    .profile-dashboard-sidebar nav a,
    .profile-dashboard-sidebar .account-logout {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        gap: 8px;
        padding: 9px 10px;
        font-size: .82rem;
        line-height: 1.25;
        white-space: normal;
    }

    .profile-dashboard-sidebar nav a span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .profile-verification p,
    .notification-card p,
    .notification-card h2,
    .notification-card small,
    .saved-card strong,
    .checkout-listing-title {
        overflow-wrap: anywhere;
    }

    .profile-verification button {
        min-height: 44px;
    }

    .notification-card {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 18px;
    }

    .notification-card form .button,
    .saved-cards-panel > form .button {
        width: 100%;
    }

    .saved-cards-panel {
        min-width: 0;
        padding: 18px;
    }

    .saved-cards-panel > .status-badge {
        justify-self: start;
        white-space: normal;
    }

    .account-payments-table table,
    .account-payments-table tbody {
        display: block;
    }

    .account-payments-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .account-payments-table tr {
        display: grid;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .account-payments-table tr:last-child {
        border-bottom: 0;
    }

    .account-payments-table td {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        padding: 7px 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .account-payments-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: .8rem;
        font-weight: 700;
    }

    .account-payments-table td .status-badge {
        justify-self: start;
        white-space: normal;
    }

    .account-payments-table td:last-child:not(:has(a)) {
        display: none;
    }

    .my-listings-page .management-toolbar {
        min-width: 0;
        padding: 12px;
        gap: 12px;
    }

    .my-listings-page .management-status-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
    }

    .my-listings-page .management-status-tabs button {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 48px;
        padding: 8px 4px;
    }

    .my-listings-page .management-status-tabs button span:first-child {
        display: inline;
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        font-size: .78rem;
    }

    .my-listings-page .management-status-tabs button span:last-child {
        margin: 0;
    }

    .my-listings-page .management-toolbar-controls select,
    .my-listings-page .management-search input {
        min-width: 0;
        min-height: 44px;
    }

    .my-listings-page .management-info,
    .service-management .management-info {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .my-listings-page .management-card {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        align-items: start;
    }

    .my-listings-page .management-thumb {
        width: 88px;
        height: 88px;
    }

    .my-listings-page .management-actions > .management-more-menu {
        flex: 0 0 44px;
    }

    .my-listings-page .management-actions > a {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .my-listings-page .management-actions .button {
        min-height: 44px;
        white-space: normal;
    }

    .my-listings-page .management-more-menu > summary {
        min-width: 44px;
        padding-inline: 0 !important;
    }

    .my-listings-page .management-more-menu a,
    .my-listings-page .management-more-menu button {
        min-height: 44px;
        white-space: normal;
    }

    .service-management {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .service-management .avatar-large {
        width: 56px;
        height: 56px;
    }

    .service-management .management-actions > * {
        flex: 1 1 84px;
    }

    .service-management .management-actions .button {
        width: 100%;
    }

    .service-editor-page .form-section-title > div,
    .service-editor-page .field-grid > label {
        min-width: 0;
    }

    .service-editor-page .category-checks label {
        min-height: 44px;
        overflow-wrap: anywhere;
    }

    .service-editor-page .category-checks input {
        flex: 0 0 18px;
    }

    .plans-page .pricing-price {
        flex-wrap: wrap;
    }

    .checkout-page .checkout-shell {
        min-width: 0;
        max-width: 100%;
    }

    .checkout-page .checkout-shell--payment {
        padding-inline: 0;
    }

    .checkout-page .checkout-summary-panel {
        border-radius: 12px 12px 0 0;
    }

    .checkout-page .checkout-assurance-panel {
        border-radius: 0 0 12px 12px;
    }

    .checkout-page .checkout-back-link,
    .checkout-page .checkout-change-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}