/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
    --color-primary: #0867d9;
    --color-primary-dark: #071f46;
    --color-primary-soft: #eaf3ff;

    --color-primary-focus: rgba(8, 103, 217, 0.22);
    --color-primary-focus-soft: rgba(8, 103, 217, 0.16);
    --color-primary-border-soft: rgba(8, 103, 217, 0.42);

    --color-accent: #0a73e8;

    --color-danger: #b42318;
    --color-danger-soft: #fee4e2;

    --color-success: #067647;
    --color-success-soft: #dcfae6;

    --color-warning: #b54708;
    --color-warning-soft: #fef0c7;

    --color-text: #10233f;
    --color-muted: #667085;
    --color-border: #d8e2f0;
    --color-background: #f6f9fc;
    --color-surface: #ffffff;

    --shadow-card:
        0 1px 2px rgba(16, 24, 40, 0.05),
        0 8px 24px rgba(16, 24, 40, 0.06);

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 20px;

    --container-width: 1120px;
}

/* =========================================================
   2. Global reset and base styles
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.5;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--color-primary-focus);
    outline-offset: 3px;
}


/* =========================================================
   3. Shared layout
   ========================================================= */

.container {
    width: min(
        calc(100% - 32px),
        var(--container-width)
    );

    margin-inline: auto;
}

/* =========================================================
   4. Header, branding, and navigation
   ========================================================= */

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--color-text);
    text-decoration: none;
    font-weight: 800;
}

.brand:hover {
    color: var(--color-text);
}

.brand__logo-mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.brand__name {
    color: var(--color-primary-dark);
    font-size: 1.35rem;
    font-weight: 800;
}

.brand__name span {
    color: var(--color-primary);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 22px;
}

.main-navigation a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 650;
}

.main-navigation a:hover {
    color: var(--color-primary);
}

.notification-badge {
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    margin-left: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    color: white;
    background: var(--color-danger);

    font-size: 0.75rem;
    line-height: 1;
}

/* =========================================================
   5. Page structure and headings
   ========================================================= */

.page {
    flex: 1;
    padding: 40px 0 64px;
}

.page-header {
    margin-bottom: 28px;
}

.page-header h1 {
    margin: 0 0 8px;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
}

.page-header p {
    max-width: 680px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
}

/* =========================================================
   6. Cards and dashboards
   ========================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 20px;
}

.card {
    padding: 24px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.card h2,
.card h3 {
    margin-top: 0;
}

.card p:last-child {
    margin-bottom: 0;
}

.card__eyebrow {
    margin-bottom: 10px;

    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card__number {
    margin: 0 0 8px;

    color: var(--color-text);
    font-size: 2rem;
    font-weight: 800;
}

.card__number--light {
    color: white;
}

.card__description {
    color: var(--color-muted);
}

.action-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.action-card--primary {
    color: white;
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.action-card--primary .card__eyebrow,
.action-card--primary .card__description {
    color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   7. Buttons and action rows
   ========================================================= */

.button,
button {
    min-height: 44px;
    padding: 11px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    color: white;
    background: var(--color-primary);

    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.button:hover,
button:hover {
    color: white;
    background: var(--color-primary-dark);
}

.button--secondary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: white;
}

.button--secondary:hover {
    color: white;
    background: var(--color-primary);
}

.button--light {
    color: var(--color-primary);
    background: white;
}

.button--light:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

.button--danger {
    background: var(--color-danger);
}

.button--danger:hover {
    background: #912018;
}

.button:disabled,
button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.button:disabled:hover,
button:disabled:hover {
    background: var(--color-primary);
}

.button--secondary:disabled:hover {
    color: var(--color-primary);
    background: white;
}

.button--danger:disabled:hover {
    background: var(--color-danger);
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   8. Sections and status badges
   ========================================================= */

.section {
    margin-top: 28px;
}

.section-heading {
    margin-bottom: 16px;
}

.section-heading h2 {
    margin: 0 0 4px;
}

.section-heading p {
    margin: 0;
    color: var(--color-muted);
}

.status {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    background: #eaecf0;
    color: #344054;

    font-size: 0.82rem;
    font-weight: 750;
}

.status--success {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.status--warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
}

.status--danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.status--info {
    color: var(--color-primary);
    background: #dbeafe;
    border: 1px solid var(--color-primary-border-soft);
}

/* =========================================================
   9. Alerts and messages
   ========================================================= */

.alert {
    margin-bottom: 20px;
    padding: 14px 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: white;
}

.alert--success {
    color: var(--color-success);
    border-color: #abefc6;
    background: var(--color-success-soft);
}

.alert--error {
    color: var(--color-danger);
    border-color: #fecdca;
    background: var(--color-danger-soft);
}

.alert--warning {
    color: var(--color-warning);
    border-color: #fedf89;
    background: var(--color-warning-soft);
}

.alert--info {
    color: var(--color-primary-dark);
    border-color: #7fb3f4;
    background: #dbeafe;
}

/* Customer email verification banner */

.verification-banner {
    margin-bottom: 28px;
    padding: 16px 18px;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 14px;

    border: 1px solid #fedf89;
    border-radius: var(--radius-medium);

    background: var(--color-warning-soft);
}

.verification-banner__icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--color-warning);
    background: white;

    font-size: 1rem;
    font-weight: 800;
}

.verification-banner__content {
    min-width: 0;
}

.verification-banner__content strong {
    display: block;
    margin-bottom: 3px;

    color: var(--color-warning);
}

.verification-banner__content p {
    margin: 0;

    color: var(--color-text);
}

.verification-banner .button {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .verification-banner {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .verification-banner .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* =========================================================
   10. Forms and form validation
   ========================================================= */

form p {
    margin: 0 0 20px;
}

label {
    display: block;
    margin-bottom: 7px;

    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    max-width: 680px;

    padding: 11px 12px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    color: var(--color-text);
    background: white;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--color-primary-focus-soft);
    border-color: var(--color-primary);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

.password-field {
    position: relative;
    width: 100%;
    max-width: 680px;
}

.password-field input {
    width: 100%;
    max-width: none;
    padding-right: 48px;
}

.password-field input[type="password"]::-ms-reveal,
.password-field input[type="password"]::-ms-clear {
    display: none;
}

.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 6px;

    color: var(--color-muted);
    background: transparent;

    cursor: pointer;
    line-height: 1;
}

.password-field .password-toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.password-field .password-toggle:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    outline: 2px solid var(--color-primary-focus);
    outline-offset: 1px;
}

.helptext {
    display: block;
    margin-top: 6px;

    color: var(--color-muted);
    font-size: 0.88rem;
}

.errorlist {
    margin: 6px 0;
    padding-left: 20px;

    color: var(--color-danger);
}

/* =========================================================
   11. Footer
   ========================================================= */

.site-footer {
    padding: 26px 0;

    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);

    font-size: 0.9rem;
}

.site-footer p {
    margin: 0;
}

/* =========================================================
   12. Shared responsive styles
   ========================================================= */

@media (max-width: 720px) {
    .site-header__inner {
        min-height: auto;
        padding: 16px 0;

        align-items: flex-start;
        flex-direction: column;
    }

    .brand__logo-mark {
        width: 36px;
        height: 36px;
    }

    .brand__name {
        font-size: 1.15rem;
    }

    .main-navigation {
        width: 100%;
        justify-content: space-between;
    }

    .page {
        padding-top: 28px;
    }

    .card {
        padding: 20px;
    }

    .button,
    button {
        width: 100%;
    }

    .actions-row {
        flex-direction: column;
    }
}

/* =========================================================
   13. Login and authentication
   ========================================================= */

.auth-layout {
    width: min(100%, 900px);
    margin: 30px auto 0;

    display: grid;
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 56px;
}

.auth-intro h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
}

.auth-intro > p:last-child {
    max-width: 520px;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.auth-card {
    padding: 32px;
}

.auth-card form {
    display: grid;
    gap: 20px;
}

.form-group {
    display: grid;
    gap: 7px;
}

.form-group input {
    max-width: none;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-links {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.auth-links p {
    margin: 8px 0;
    color: var(--color-muted);
}

.auth-links a {
    font-weight: 700;
}

.email-change-actions {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.email-change-actions form {
    margin: 0;
}

.email-change-actions .button,
.email-change-actions button {
    width: 100%;
}

.verification-divider {
    margin: 0;

    text-align: center;

    color: var(--color-muted);

    font-size: 0.95rem;
    font-weight: 600;
}

.field-error {
    color: var(--color-danger);
    font-size: 0.9rem;
}

.field-error p,
.alert p {
    margin: 0;
}

@media (max-width: 800px) {
    .auth-layout {
        margin-top: 0;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .auth-intro {
        text-align: center;
    }

    .auth-intro > p:last-child {
        margin-inline: auto;
    }

    .auth-card {
        padding: 24px;
    }
}

/* =========================================================
   13b. Login landing page
   ========================================================= */

.login-landing-layout {
    width: min(100%, 1000px);
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 72px;
}

.login-intro__lead {
    max-width: 520px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
}

.login-benefits {
    margin-top: 34px;
}

.login-card__heading {
    margin-bottom: 24px;
}

.login-card__heading .card__eyebrow {
    margin-bottom: 6px;
}

.login-card__heading h2 {
    margin-bottom: 6px;
    font-size: 1.65rem;
}

.login-divider {
    margin: 26px 0;

    display: flex;
    align-items: center;
    gap: 14px;

    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--color-border);
}

.login-new-customer {
    padding: 20px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-background);
}

.login-new-customer > strong {
    display: block;
    margin-bottom: 5px;

    color: var(--color-primary-dark);
    font-size: 1.05rem;
}

.login-new-customer p {
    margin: 0 0 16px;
    color: var(--color-muted);
}

.login-customer-cta {
    width: 100%;
}

.login-plumber-link {
    margin-top: 22px;
    padding-top: 18px;
    text-align: center;
}

@media (max-width: 800px) {
    .login-landing-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .login-intro {
        text-align: left;
    }

    .login-intro__lead {
        margin-inline: 0;
    }

    .login-benefits {
        max-width: 560px;
    }
}

/* =========================================================
   14. Registration pages
   ========================================================= */

.registration-layout {
    grid-template-columns: minmax(0, 1fr) 480px;
    align-items: start;
}

.registration-card {
    padding: 32px;
}

.registration-benefits {
    margin-top: 32px;

    display: grid;
    gap: 20px;
}

.registration-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: start;
    gap: 14px;
}

.registration-benefit__number {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--color-primary);
    background: var(--color-primary-soft);

    font-weight: 800;
}

.registration-benefit strong {
    display: block;
    margin-bottom: 4px;
}

.registration-benefit p {
    margin: 0;
    color: var(--color-muted);
}

.registration-card .section-heading {
    margin-bottom: 24px;
}

.registration-card form {
    display: grid;
    gap: 20px;
}

.registration-card input,
.registration-card select,
.registration-card textarea {
    max-width: none;
}

.required-marker {
    color: var(--color-danger);
}

.registration-card ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.registration-card .helptext ul {
    margin-top: 8px;
}

@media (max-width: 900px) {
    .registration-layout {
        grid-template-columns: 1fr;
    }

    .registration-benefits {
        max-width: 600px;
    }
}

@media (max-width: 600px) {
    .registration-card {
        padding: 22px;
    }

    .registration-benefit {
        grid-template-columns: 36px 1fr;
    }

    .registration-benefit__number {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   15. Notifications
   ========================================================= */

.page-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.page-header__actions {
    flex-shrink: 0;
}

.notification-summary {
    margin-bottom: 20px;
    padding: 16px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
}

.notification-summary strong {
    margin-right: 4px;
    color: var(--color-primary);
    font-size: 1.4rem;
}

.notification-summary form {
    margin: 0;
}

.notification-list {
    display: grid;
    gap: 16px;
}

.notification-card {
    padding: 22px;

    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 14px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.notification-card--unread {
    border-color: var(--color-primary-border-soft);
    background: var(--color-primary-soft);
}

.notification-card__indicator {
    padding-top: 8px;
}

.notification-dot {
    width: 10px;
    height: 10px;

    display: block;

    border-radius: 999px;
    background: var(--color-primary);
}

.notification-dot--read {
    background: var(--color-border);
}

.notification-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.notification-card__header h2 {
    margin: 0 0 5px;
    font-size: 1.08rem;
}

.notification-card__date {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.86rem;
}

.notification-card__message {
    max-width: 760px;
    margin: 16px 0;
    color: var(--color-muted);
}

.notification-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pagination {
    margin-top: 28px;
    padding-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid var(--color-border);
}

.pagination__summary {
    margin: 0;
    color: var(--color-muted);
}

.pagination__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.empty-state {
    max-width: 620px;
    margin-inline: auto;
    padding: 48px 28px;
    text-align: center;
}

.empty-state__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    color: var(--color-success);
    background: var(--color-success-soft);

    font-size: 1.5rem;
    font-weight: 800;
}

.empty-state h2 {
    margin-bottom: 8px;
}

.empty-state p {
    max-width: 460px;
    margin: 0 auto 24px;
    color: var(--color-muted);
}

@media (max-width: 720px) {
    .page-header--split,
    .notification-summary,
    .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header__actions .button,
    .notification-summary button {
        width: 100%;
    }

    .notification-card {
        padding: 18px;
    }

    .notification-card__header {
        flex-direction: column;
        gap: 10px;
    }

    .notification-card__actions .button,
    .pagination__links .button {
        width: 100%;
    }

    .pagination__links {
        flex-direction: column;
    }
}

/* =========================================================
   16. Customer incident list
   ========================================================= */

.incident-list {
    display: grid;
    gap: 20px;
}

.incident-card {
    display: grid;
    gap: 20px;
}

.incident-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.incident-card__header h2 {
    margin: 4px 0 0;
    font-size: 1.3rem;
}

.incident-card__reference {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.incident-card__details {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(140px, 1fr)
        );

    gap: 16px;
    padding: 18px;

    border-radius: var(--radius-small);
    background: var(--color-background);
}

.incident-detail {
    display: grid;
    gap: 3px;
}

.incident-detail__label {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.incident-card__description {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
}

.incident-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.incident-card .alert {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .incident-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .incident-card__details {
        grid-template-columns: 1fr 1fr;
        padding: 15px;
    }

    .incident-card__footer .button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .incident-card__details {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   17. Customer incident details and responses
   ========================================================= */

.request-status-banner {
    margin-bottom: 24px;
    padding: 16px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
}

.request-status-banner__label {
    margin-right: 10px;
    color: var(--color-muted);
    font-weight: 700;
}

.request-status-banner__reference {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 750;
}

.request-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.request-detail-main {
    display: grid;
    gap: 20px;
}

.request-detail-sidebar {
    position: sticky;
    top: 24px;

    display: grid;
    gap: 20px;
}

.detail-grid {
    margin: 0;

    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 18px;
}

.detail-item {
    margin: 0;
}

.detail-item--wide {
    grid-column: 1 / -1;
}

.detail-item dt,
.summary-list dt {
    margin-bottom: 4px;

    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.detail-item dd,
.summary-list dd {
    margin: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.detail-section {
    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid var(--color-border);
}

.detail-section h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.detail-section p {
    margin: 0;
    color: var(--color-muted);
}

.summary-list {
    margin: 0;

    display: grid;
    gap: 16px;
}

.summary-list > div {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.summary-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.photo-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px, 220px)
        );

    gap: 16px;
}

.photo-card {
    margin: 0;
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);
}

.photo-card a {
    display: block;
}

.photo-card img {
    width: 100%;
    height: 140px;

    display: block;
    object-fit: cover;

    transition: transform 160ms ease;
}

.photo-card a:hover img {
    transform: scale(1.025);
}

.empty-inline {
    padding: 16px;

    border-radius: var(--radius-small);

    color: var(--color-muted);
    background: var(--color-background);
}

.selected-plumber-card__business,
.response-card__business {
    margin-top: -6px;
    color: var(--color-muted);
}

.rating-summary {
    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--color-border);
}

.rating-summary h3 {
    margin-bottom: 8px;
}

.rating-summary__score {
    margin: 0;

    color: var(--color-primary);
    font-size: 1.7rem;
    font-weight: 800;
}

.rating-summary__score span {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.response-list {
    display: grid;
    gap: 16px;
}

.response-card {
    display: grid;
    gap: 14px;

    padding: 20px;
}

.response-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.response-card__identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.response-card__identity-content {
    min-width: 0;
    flex: 1;
}

.response-card__name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.response-card__name-row h3 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.15rem;
    line-height: 1.2;
}

.response-card__headline-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    color: var(--color-muted);
    font-size: 0.88rem;
}

.response-card__headline-meta strong {
    color: var(--color-text);
}

.response-card__business {
    margin: 2px 0 0;

    color: var(--color-muted);
    font-size: 0.88rem;
}

.response-card__quick-facts {
    padding-top: 10px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;

    border-top: 1px solid var(--color-border);

    color: var(--color-muted);
    font-size: 0.9rem;
}

.response-card__quick-facts strong {
    color: var(--color-text);
}

.response-card__pricing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;

    color: var(--color-muted);
    font-size: 0.9rem;
}

.response-card__pricing span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.response-card__pricing strong {
    color: var(--color-text);
}

.response-message {
    margin: 0;
    padding: 0;
}

.response-message p {
    margin: 0;

    color: var(--color-text);
    line-height: 1.5;
}

.response-card__actions {
    margin: 20px 0;
    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;

    border-top: 1px solid var(--color-border);
}

.response-card__actions form {
    margin: 0;
}

.response-card__actions .button {
    min-height: 40px;
    padding: 9px 14px;
}

.review-card {
    max-width: 760px;
}

.review-form {
    display: grid;
    gap: 20px;
}

.draft-delete-confirmation {
    margin-top: 18px;
    padding: 18px;

    border: 1px solid #fecdca;
    border-radius: var(--radius-small);

    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.draft-delete-confirmation h3 {
    margin: 0 0 6px;
}

.draft-delete-confirmation p {
    margin: 0 0 16px;
}

.draft-delete-confirmation form {
    margin: 0;
}

@media (max-width: 920px) {
    .request-detail-layout {
        grid-template-columns: 1fr;
    }

    .request-detail-sidebar {
        position: static;
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(260px, 1fr)
            );
    }
}

@media (max-width: 680px) {
    .request-status-banner,
    .response-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .response-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .response-card__actions form,
    .response-card__actions .button {
        width: 100%;
    }

    .response-card__quick-facts,
    .response-card__pricing {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .photo-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(140px, 1fr)
            );
    }

    .photo-card img {
        height: 120px;
    }
}


/* =========================================================
   18. Tradesperson available jobs
   ========================================================= */

.privacy-notice {
    margin-bottom: 24px;
    padding: 18px 20px;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    border: 1px solid #abefc6;
    border-radius: var(--radius-medium);

    background: var(--color-success-soft);
}

.privacy-notice__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    color: var(--color-success);
    background: white;

    font-weight: 800;
}

.privacy-notice strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-success);
}

.privacy-notice p {
    margin: 0;
    color: #326b50;
}

.available-job-list {
    display: grid;
    gap: 14px;
}

.available-job-row {
    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.available-job-main {
    min-width: 0;
    flex: 1;
}

.available-job-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.available-job-title-row h2 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.15rem;
}

.available-job-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.available-job-status__group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.available-job-status__label {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.available-job-meta {
    margin: 7px 0 0;

    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 650;
}

.available-job-location {
    margin: 9px 0 0;

    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.available-job-location__match-label {
    color: var(--color-muted);
    font-weight: 600;
}

.available-job-location__match-value {
    color: var(--color-text);
    font-weight: 650;
}

.available-job-action {
    flex-shrink: 0;
}



@media (max-width: 760px) {
    .available-job-row {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .available-job-status {
        gap: 10px;
    }

    .available-job-action .button {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .privacy-notice {
        flex-direction: column;
    }
}

/* =========================================================
   19. Tradesperson job detail
   ========================================================= */

.job-detail-action-card {
    display: grid;
    gap: 16px;
}

.job-detail-action-card h2 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.35rem;
    line-height: 1.2;
}

.job-detail-action-card .card__eyebrow {
    margin-bottom: -6px;
}

.job-detail-action-card .card__description {
    margin: 0;
}

.job-detail-action-card .button {
    width: 100%;
}

.job-detail-action-card form {
    margin: 0;
}

.job-detail-action-card form .button {
    width: 100%;
}

.job-action-summary {
    padding: 14px;

    display: grid;
    gap: 3px;

    border-radius: var(--radius-small);

    background: var(--color-primary-soft);
}

.job-action-summary strong {
    color: var(--color-primary-dark);
    font-size: 1.05rem;
}

.job-action-summary span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.job-visit-summary {
    padding: 14px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    border-radius: var(--radius-small);

    background: var(--color-primary-soft);
}

.job-visit-summary__icon {
    width: 20px;
    min-width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);
}

.job-visit-summary__icon svg {
    width: 20px;
    height: 20px;

    display: block;
}

.job-visit-summary__content {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.job-visit-summary__content > span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.job-visit-summary__content strong {
    color: var(--color-primary-dark);
    font-size: 0.98rem;
}

.job-visit-summary__content small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.job-visit-list {
    display: grid;
    gap: 10px;
}

.job-visit-summary__actions {
    margin-top: 4px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.job-visit-summary__edit {
    width: fit-content;

    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.job-visit-summary__edit:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.job-visit-cancel-form {
    margin: 0;

    display: inline;
}

.job-visit-summary__cancel {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;

    color: var(--color-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    box-shadow: none;
    cursor: pointer;
}

.job-visit-summary__cancel:hover,
.job-visit-summary__cancel:active {
    border: 0;
    background: transparent;
    box-shadow: none;

    color: var(--color-danger);
    text-decoration: underline;
}

.job-visit-summary__cancel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;

    background: transparent;
    box-shadow: none;

    color: var(--color-danger);
}

.job-visit-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.job-visit-action {
    width: auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--color-primary);
    text-decoration: none;

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.job-visit-action svg {
    width: 15px;
    min-width: 15px;
    height: 15px;

    display: block;
    flex-shrink: 0;
}

.job-visit-action span {
    width: auto;
}

.job-visit-action:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.job-completion-guidance {
    padding-top: 14px;

    border-top: 1px solid var(--color-border);
}

.job-customer-card h2 {
    margin: 0;
}

.job-customer-details {
    display: grid;
    gap: 14px;
}

.job-customer-detail {
    display: grid;
    gap: 3px;
}

.job-customer-detail__label {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-customer-detail a {
    overflow-wrap: anywhere;
    font-weight: 650;
}

.job-customer-detail strong {
    overflow-wrap: anywhere;
}

.response-reference summary {
    color: var(--color-primary-dark);

    font-size: 1rem;
    font-weight: 750;

    cursor: pointer;
}

.job-progress-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.job-progress-actions form {
    margin: 0;
}

.progress-card .alert:last-child {
    margin-bottom: 0;
}

@media (max-width: 680px) {
    .request-detail-sidebar {
        grid-template-columns: 1fr;
    }

    .job-progress-actions {
        flex-direction: column;
    }

    .job-progress-actions form,
    .job-progress-actions button {
        width: 100%;
    }
}


/* =========================================================
   20. Tradesperson selected jobs
   ========================================================= */

.selected-job-list {
    display: grid;
    gap: 20px;
}

.selected-job-card {
    display: grid;
    gap: 20px;
}

.selected-job-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.selected-job-card__header h2 {
    margin: 4px 0 0;
    font-size: 1.3rem;
}

.selected-job-card__details {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 16px;
    padding: 18px;

    border-radius: var(--radius-small);
    background: var(--color-background);
}

.selected-job-card__description h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.selected-job-card__description p {
    margin: 0;
    color: var(--color-muted);
}

.selected-job-card .alert {
    margin-bottom: 0;
}

.selected-job-card__footer {
    padding-top: 18px;

    display: flex;
    justify-content: flex-end;

    border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
    .selected-job-card__header {
        flex-direction: column;
    }

    .selected-job-card__details {
        grid-template-columns: 1fr 1fr;
    }

    .selected-job-card__footer .button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .selected-job-card__details {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   20b. Tradesperson job scheduling
   ========================================================= */

.schedule-timing-card,
.schedule-form-card {
    padding: 22px;
}

.schedule-timing-card .section-heading,
.schedule-form-card .section-heading {
    margin-bottom: 16px;
}

.schedule-timing-summary {
    padding: 14px 16px;

    display: grid;
    gap: 3px;

    border-radius: var(--radius-small);

    background: var(--color-background);
}

.schedule-timing-summary strong {
    color: var(--color-primary-dark);
    font-size: 1rem;
}

.schedule-timing-summary span {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.schedule-form {
    display: grid;
    gap: 14px;
}

.schedule-form .form-group {
    margin: 0;
}

.schedule-form input {
    max-width: none;
}

.schedule-form .job-progress-actions {
    margin-top: 4px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .schedule-timing-card,
    .schedule-form-card {
        padding: 20px;
    }

    .schedule-timing-summary {
        padding: 12px 14px;
    }
}

/* =========================================================
   21. Create incident form
   ========================================================= */

.incident-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.incident-form-main {
    min-width: 0;
}

.incident-form-sidebar {
    position: sticky;
    top: 24px;

    display: grid;
    gap: 20px;
}

.incident-form {
    display: grid;
    gap: 22px;
}

.incident-form input,
.incident-form select,
.incident-form textarea {
    max-width: none;
}

.incident-form input[type="file"] {
    padding: 10px;
    border-style: dashed;
    background: var(--color-background);
}

.emergency-service-panel {
    padding: 18px;

    border: 1px solid #e6b94a;
    border-radius: var(--radius-small);

    background: #fff8e6;
}

.emergency-service-panel[hidden],
#preferred-time-of-day-group[hidden] {
    display: none;
}

.emergency-service-panel__heading {
    margin-bottom: 16px;
}

.emergency-service-panel__heading h3 {
    margin: 4px 0 6px;
}

.emergency-service-panel__heading p:last-child {
    margin: 0;
    color: var(--color-muted);
}

.emergency-service-panel .helptext {
    margin-top: 10px;
}

/* Google Maps location popup */

.gm-style-iw-chr button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

.gm-style-iw-chr button span {
    width: 14px !important;
    height: 14px !important;
    margin: 7px !important;
}

.guided-intake {
    padding: 22px;

    display: grid;
    gap: 24px;

    border: 1px solid var(--color-primary-border-soft);
    border-radius: var(--radius-medium);

    background: var(--color-primary-soft);
}

.guided-intake[hidden] {
    display: none;
}

.guided-intake__heading {
    display: grid;
    gap: 6px;
}

.guided-intake__heading .card__eyebrow {
    margin: 0;
}

.guided-intake__heading h3 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.2rem;
}

.guided-intake__heading p:last-child {
    margin: 0;

    color: var(--color-muted);
}

.guided-question {
    margin: 0;
    padding: 0;

    border: 0;
}

.guided-question legend {
    margin-bottom: 10px;

    color: var(--color-primary-dark);
    font-weight: 800;
}

.guided-question__options {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 10px;
}

.guided-choice {
    min-height: 52px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    margin: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-surface);
    color: var(--color-text);

    font-weight: 600;
    cursor: pointer;

    transition:
        border-color 140ms ease,
        background 140ms ease;
}

.guided-choice:hover {
    border-color: var(--color-primary-border-soft);
    background: #f8fbff;
}

.guided-choice:has(
    input[type="radio"]:checked
) {
    border-color: var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary-dark);

    box-shadow:
        0 0 0 2px var(--color-primary-focus-soft);
}

.guided-choice input[type="radio"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;

    accent-color: var(--color-primary);
}

.guided-choice span {
    margin: 0;
}

.guided-question .field-error {
    margin-top: 8px;
}

.existing-photo-section {
    margin-bottom: 18px;
}

.existing-photo-section .incident-photo-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(140px, 170px)
        );

    gap: 16px;
    align-items: start;
    justify-content: start;
}

.existing-photo-section .incident-photo-card {
    width: 170px;
    max-width: 170px;
    overflow: hidden;
}

.existing-photo-section .incident-photo-card img {
    display: block;
    width: 170px;
    max-width: 170px;
    height: 120px;

    object-fit: cover;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.existing-photo-section .incident-photo-card > p {
    margin: 8px 0;
    overflow-wrap: anywhere;

    color: var(--color-muted);
    font-size: 0.82rem;
}

.existing-photo-section .incident-photo-card > .button {
    width: 100%;
}

/* Draft photos and videos marked for removal when saved. */
.media-removal-status[hidden] {
    display: none;
}

.media-removal-option {
    margin-top: 8px;
    align-items: flex-start;
}

.media-removal-option span {
    font-size: 0.85rem;
}

.incident-photo-card > .media-removal-status,
.incident-video-card > .media-removal-status {
    margin: 6px 0;

    color: var(--color-danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.incident-photo-card.is-marked-for-removal img,
.incident-video-card.is-marked-for-removal video {
    opacity: 0.4;
    filter: grayscale(1);
}

.incident-form__actions {
    padding-top: 22px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    border-top: 1px solid var(--color-border);
}

.form-group--photos {
    display: block;
}

.form-group--photos > label {
    margin-top: 22px;
}

.form-group--photos > input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.form-group--photos > .helptext {
    margin-top: 8px;
}

.guidance-list {
    margin: 0;
    padding-left: 22px;

    display: grid;
    gap: 10px;

    color: var(--color-muted);
}

.guidance-list li::marker {
    color: var(--color-primary);
    font-weight: 800;
}

@media (max-width: 900px) {
    .incident-form-layout {
        grid-template-columns: 1fr;
    }

    .incident-form-sidebar {
        position: static;
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(240px, 1fr)
            );
    }
}

@media (max-width: 640px) {
    .existing-photo-section .incident-photo-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(120px, 150px)
            );
    }

    .existing-photo-section .incident-photo-card {
        width: 150px;
        max-width: 150px;
    }

    .existing-photo-section .incident-photo-card img {
        width: 150px;
        max-width: 150px;
        height: 105px;
    }

    .guided-intake {
        padding: 18px;
    }

    .guided-question__options {
        grid-template-columns: 1fr;
    }

    .guided-choice {
        width: 100%;
    }

    .incident-form__actions {
        flex-direction: column;
    }

    .incident-form__actions .button,
    .incident-form__actions button {
        width: 100%;
    }
}

/* =========================================================
   22. Respond to job form
   ========================================================= */

.response-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.response-form-main {
    min-width: 0;
}

.response-form-sidebar {
    position: sticky;
    top: 24px;

    display: grid;
    gap: 20px;
}

.response-form {
    display: grid;
    gap: 24px;
}

.response-form input,
.response-form select,
.response-form textarea {
    max-width: none;
}


/* Availability */

.response-availability {
    padding-top: 8px;

    display: grid;
    gap: 18px;

    border-top: 1px solid var(--color-border);
}

.response-availability__heading {
    display: grid;
    gap: 8px;
}

.response-availability__heading h3 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.15rem;
}

.response-availability__heading p {
    margin: 0;

    color: var(--color-muted);
}

.response-availability .form-group {
    gap: 10px;
}

.form-label-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 0;
}

.optional-marker {
    color: var(--color-muted);

    font-size: 0.88rem;
    font-weight: 600;
}

.response-availability__preference,
.response-availability__emergency {
    padding: 14px 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);
}

.response-availability__preference span {
    display: block;
    margin-bottom: 3px;

    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.response-availability__preference strong {
    color: var(--color-primary-dark);
}

.response-availability__emergency {
    border-color: #fedf89;
    background: var(--color-warning-soft);
}

.response-availability__emergency strong {
    display: block;
    margin-bottom: 3px;

    color: var(--color-warning);
}

.response-availability__emergency p {
    margin: 0;
    color: var(--color-warning);
}


/* Suggested replies */

.suggested-replies {
    margin-bottom: 12px;
}

.suggested-replies__label {
    margin: 0 0 8px;

    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.suggested-replies__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggested-reply {
    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;

    background: var(--color-primary-soft);
    color: var(--color-primary-dark);

    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;

    cursor: pointer;
}

.suggested-reply:hover,
.suggested-reply:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

/* Pricing */

.response-pricing {
    padding-top: 22px;

    display: grid;
    gap: 22px;

    border-top: 1px solid var(--color-border);
}

.response-pricing__heading h3 {
    margin: 0 0 5px;

    color: var(--color-primary-dark);
    font-size: 1.15rem;
}

.response-pricing__heading p {
    margin: 0;
    color: var(--color-muted);
}

.pricing-callout {
    display: grid;
    gap: 12px;
}

.pricing-callout .checkbox-row {
    width: fit-content;
}

.pricing-method {
    display: grid;
    gap: 10px;
}

.pricing-method__label {
    margin: 0;

    color: var(--color-primary-dark);
    font-weight: 800;
}

.pricing-method__options {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.pricing-method__option {
    min-height: 52px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    margin: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-surface);
    color: var(--color-text);

    font-weight: 600;
    cursor: pointer;
}

.pricing-method__option:hover {
    border-color: var(--color-primary-border-soft);
    background: var(--color-primary-soft);
}

.pricing-method__option:has(
    input[type="radio"]:checked
) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.pricing-method__option input[type="radio"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;

    accent-color: var(--color-primary);
}

.pricing-amount {
    max-width: 420px;
    padding: 16px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);
}

.pricing-amount label {
    color: var(--color-primary-dark);
    font-weight: 800;
}

.pricing-amount input {
    max-width: none;
}

.pricing-amount[hidden],
.pricing-inspection-message[hidden] {
    display: none;
}

.pricing-inspection-message {
    padding: 16px;

    border: 1px solid var(--color-primary-border-soft);
    border-radius: var(--radius-small);

    background: var(--color-primary-soft);
}

.pricing-inspection-message strong {
    display: block;
    margin-bottom: 4px;

    color: var(--color-primary-dark);
}

.pricing-inspection-message p {
    margin: 0;
    color: var(--color-muted);
}

/* Submit actions */

.response-form__actions {
    padding-top: 22px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    border-top: 1px solid var(--color-border);
}

.response-form-sidebar .privacy-notice {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .response-form-layout {
        grid-template-columns: 1fr;
    }

    .response-form-sidebar {
        position: static;
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(240px, 1fr)
            );
    }

    .pricing-method__options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .suggested-replies__options {
        display: grid;
        grid-template-columns: 1fr;
    }

    .suggested-reply {
        width: 100%;
        text-align: left;
    }

    .pricing-callout .checkbox-row {
        width: 100%;
    }

    .pricing-amount {
        max-width: none;
    }

    .response-form__actions {
        flex-direction: column;
    }

    .response-form__actions .button,
    .response-form__actions button {
        width: 100%;
    }
}


/* =========================================================
   23. After-hours acknowledgement
   ========================================================= */

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-field input[type="checkbox"] {
    width: auto;
    min-width: 18px;
    height: 18px;
    margin: 2px 0 0;
}

.checkbox-field label {
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}

.checkbox-field + .helptext {
    margin-top: 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-small);
    background: #fff8e6;
}

/* =========================================================
   24. Tradesperson profile checkboxes
   ========================================================= */

.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    margin: 0;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 0;
}

.checkbox-row span {
    margin: 0;
    font-weight: 600;
}

.registration-card .form-group > .checkbox-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    width: fit-content;
    margin: 0;
}

.registration-card .checkbox-row input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;
}

.registration-card .checkbox-row span {
    display: inline;
    margin: 0;

    font-weight: 700;
    line-height: 1.4;
}

.checkbox-select-group {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.checkbox-select-group > div {
    margin: 0;
}

.checkbox-select-group label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    width: fit-content;
    margin: 0;

    font-weight: 600;
    cursor: pointer;
}

.checkbox-select-group input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;
}

.tradesperson-profile-page .form-group > label {
    color: var(--color-primary-dark);
    font-size: 1rem;
    font-weight: 800;
}

#id_services_offered label,
#id_service_areas label {
    color: var(--color-text);
    font-weight: 600;
}

#id_services_offered,
#id_service_areas {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}

#id_services_offered {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

#id_service_areas {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

#id_services_offered > div,
#id_service_areas > div {
    margin: 0;
}

#id_services_offered label,
#id_service_areas label {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    margin: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-surface);

    font-weight: 600;
    cursor: pointer;
}

#id_services_offered label:hover,
#id_service_areas label:hover {
    border-color: var(--color-primary-border-soft);
    background: var(--color-primary-soft);
}

#id_services_offered input[type="checkbox"],
#id_service_areas input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;
}

#id_services_offered input[type="checkbox"]:checked,
#id_service_areas input[type="checkbox"]:checked {
    accent-color: var(--color-primary);
}

#id_services_offered label:has(input[type="checkbox"]:checked),
#id_service_areas label:has(input[type="checkbox"]:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

@media (max-width: 850px) {
    #id_service_areas {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 600px) {
    #id_services_offered,
    #id_service_areas {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   25. Tradesperson working hours
   ========================================================= */

.working-hours-layout {
    display: grid;
    grid-template-columns:
        340px
        minmax(0, 1fr);

    gap: 32px;
    align-items: stretch;
}

.working-hours-builder,
.working-hours-preview {
    padding: 24px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
}

.working-hours-builder {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.working-hours-builder h3,
.working-hours-preview h3 {
    margin: 0 0 8px;

    color: var(--color-primary-dark);
    font-size: 1.3rem;
}

.working-hours-builder p,
.working-hours-preview p {
    margin: 0 0 20px;

    color: var(--color-muted);
}

.working-hours-day-picker {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px 16px;
    margin-bottom: 24px;
}

.working-hours-day-picker label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    margin: 0;

    font-weight: 600;
    cursor: pointer;
}

.working-hours-day-picker input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;
    flex: 0 0 18px;

    accent-color: var(--color-primary);
}

.working-hours-time-fields {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
    margin-bottom: 20px;
}

.working-hours-time-fields .form-group {
    margin: 0;
}

.working-hours-time-fields input[type="time"] {
    width: 100%;
    max-width: none;
}

.working-hours-builder__actions {
    display: grid;
    gap: 10px;
}

.working-hours-builder__actions .button {
    width: 100%;
}

.working-hours-unavailable-action {
    width: fit-content;
    min-height: auto;
    margin-inline: auto;
    padding: 4px 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 0;
    border-radius: 0;

    color: var(--color-primary);
    background: transparent;

    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;

    cursor: pointer;
}

.working-hours-unavailable-action svg {
    width: 16px;
    min-width: 16px;
    height: 16px;

    display: block;
    flex-shrink: 0;
}

.working-hours-unavailable-action:hover,
.working-hours-unavailable-action:focus-visible {
    color: var(--color-primary-dark);
    background: transparent;
    text-decoration: underline;
}

/* Right side schedule preview */

.working-hours-preview {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #fbfdff 100%
    );
}

.working-hours-preview__heading {
    margin-bottom: 8px;
    padding-bottom: 16px;

    border-bottom: 1px solid var(--color-border);
}

.weekly-schedule-preview {
    display: grid;
}

.weekly-schedule-row {
    min-height: 58px;
    padding: 14px 4px;

    display: grid;
    grid-template-columns:
        140px
        minmax(0, 1fr);

    align-items: center;
    gap: 20px;

    border-bottom: 1px solid var(--color-border);
}

.weekly-schedule-row:last-child {
    border-bottom: 0;
}

.weekly-schedule-day {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.weekly-schedule-time {
    color: var(--color-text);
    font-weight: 600;
}

.weekly-schedule-time--unavailable {
    color: var(--color-muted);
    font-weight: 500;
}

.working-hours-hidden-fields {
    display: none;
}

.working-hours-error {
    grid-column: 1 / -1;
}


/* Responsive */

@media (max-width: 900px) {
    .working-hours-layout {
        grid-template-columns: 1fr;
    }

    .working-hours-builder {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .working-hours-day-picker {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .working-hours-time-fields {
        grid-template-columns: 1fr;
    }

    .weekly-schedule-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 420px) {
    .working-hours-day-picker {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   26. Profile form spacing
   ========================================================= */

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.content-card {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.content-card .section-heading {
    margin-bottom: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    align-items: start;
    gap: 24px;
}

.form-group-full {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-full {
        grid-column: auto;
    }
}

.tradesperson-profile-page form {
    display: grid;
    gap: 24px;
}

.tradesperson-profile-page .form-group {
    display: grid;
    gap: 8px;
    margin: 0;
}

.tradesperson-profile-page .checkbox-row {
    margin-bottom: 4px;
}

.tradesperson-profile-page .helptext {
    margin-top: 2px;
}

.profile-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-inline-field input {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.profile-inline-field .button {
    width: auto;
    min-width: auto;
    flex: 0 0 auto;
}

.button--small {
    min-height: 36px;
    padding: 7px 11px;

    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
}

.account-security-fields {
    max-width: 760px;

    display: grid;
    gap: 18px;
}

.account-security-field {
    display: grid;
    gap: 7px;
}

.account-security-field label {
    margin: 0;

    color: var(--color-primary-dark);
    font-weight: 800;
}

.account-security-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-security-control input {
    width: min(100%, 560px);
    max-width: 560px;
    flex: 1;
}

.account-security-password {
    width: min(100%, 560px);
    min-height: 44px;
    padding: 11px 12px;

    display: flex;
    align-items: center;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    color: var(--color-muted);
    background: var(--color-background);

    letter-spacing: 0.12em;
}

.account-security-control .button {
    width: auto;
    min-width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .account-security-control {
        align-items: stretch;
        flex-direction: column;
    }

    .account-security-control input,
    .account-security-password {
        width: 100%;
        max-width: none;
    }

    .account-security-control .button {
        width: fit-content;
    }
}

/* =========================================================
   Navigation logout button
   ========================================================= */

.navigation-logout-form {
    display: inline;
    margin: 0;
}

.navigation-logout-button {
    width: auto;
    min-height: auto;
    padding: 0;

    display: inline;

    border: 0;
    border-radius: 0;

    color: var(--color-text);
    background: transparent;

    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.navigation-logout-button:hover,
.navigation-logout-button:focus-visible {
    color: var(--color-primary);
    background: transparent;
    text-decoration: none;
}

@media (max-width: 720px) {
    .navigation-logout-button {
        width: auto;
    }
}


/* =========================================================
   Public tradesperson profile
   ========================================================= */

.public-tradesperson-profile {
    display: grid;
    gap: 28px;
}

.public-profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 32px;
    border-radius: var(--radius-large);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.public-profile-identity {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 20px;
}

.public-profile-identity > div:last-child {
    min-width: 0;
}

.public-profile-avatar {
    display: grid;
    place-items: center;

    width: 84px;
    min-width: 84px;
    height: 84px;
    min-height: 84px;
    flex: 0 0 84px;

    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 50%;

    background: var(--color-primary);
    color: #ffffff;

    font-size: 32px;
    font-weight: 700;
}

.public-profile-avatar img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.public-profile-subtitle {
    margin-top: 4px;
    color: var(--color-muted);
}

.public-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.public-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 16px;
}

.public-profile-stat {
    display: grid;
    gap: 6px;
    min-width: 120px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    text-align: center;
}

.public-profile-stat span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.public-profile-stat strong {
    font-size: 1.2rem;
}

.public-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.9fr);
    gap: 24px;
    align-items: start;
}

.public-profile-main,
.public-profile-sidebar {
    display: grid;
    gap: 24px;
}

.public-profile-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-profile-tag {
    padding: 8px 12px;

    border: 1px solid var(--color-primary-border-soft);
    border-radius: 999px;

    color: var(--color-primary-dark);
    background: var(--color-primary-soft);

    font-size: 0.9rem;
    font-weight: 650;
}

.public-working-hours {
    display: grid;
}

.public-working-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.public-working-hours__row:last-child {
    border-bottom: 0;
}

@media (max-width: 850px) {
    .public-profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-profile-stats {
        width: 100%;
    }

    .public-profile-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .public-profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-profile-stats {
        grid-template-columns: 1fr;
    }

    .public-profile-hero {
        padding: 22px;
    }
}


/* =========================================================
   Tradesperson profile photo editor
   ========================================================= */

.profile-photo-editor {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-photo-preview {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-controls {
    flex: 1;
    min-width: 0;
}

.profile-photo-controls input[type="file"],
.tradesperson-profile-page input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border-style: dashed;
    background: var(--color-background);
}

@media (max-width: 600px) {
    .profile-photo-editor {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   Plumber response profile photo
   ========================================================= */

.response-card__identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.response-card__avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.response-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   Selected plumber card
   ========================================================= */

.selected-plumber-card {
    display: grid;
    gap: 14px;
}

.selected-plumber-card .card__eyebrow {
    margin: 0 0 2px;
}

.selected-plumber-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.selected-plumber-card__avatar {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    overflow: hidden;

    border-radius: 50%;

    background: var(--color-primary);
    color: white;

    font-size: 20px;
    font-weight: 700;
}

.selected-plumber-card__avatar img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.selected-plumber-card__identity-content {
    min-width: 0;

    display: grid;
    gap: 3px;
}

.selected-plumber-card__identity h2 {
    margin: 0;

    color: var(--color-primary-dark);
    font-size: 1.25rem;
    line-height: 1.2;
}

.selected-plumber-card__business {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.9rem;
}

.selected-plumber-rating {
    margin: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;

    color: var(--color-muted);
    font-size: 0.88rem;
}

.selected-plumber-rating strong {
    color: var(--color-text);
}

.selected-plumber-contact {
    display: grid;
    gap: 8px;

    padding-top: 12px;

    border-top: 1px solid var(--color-border);
}

.selected-plumber-contact__item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;

    text-decoration: none;
}

.selected-plumber-contact__item span {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.selected-plumber-contact__item strong {
    min-width: 0;

    color: var(--color-primary);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.selected-plumber-contact__item:hover strong {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.selected-plumber-card__links {
    padding-top: 12px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;

    border-top: 1px solid var(--color-border);
}

.selected-plumber-card__links > a {
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.selected-plumber-card__links > a:hover {
    text-decoration: underline;
}

.response-reference {
    padding: 0;
    border: 0;
}

.response-reference summary {
    color: var(--color-primary-dark);

    font-size: 0.9rem;
    font-weight: 700;

    cursor: pointer;
}

.response-reference summary:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.response-reference[open] {
    width: 100%;
}

.response-reference[open] summary {
    margin-bottom: 8px;
}


/* =========================================================
   File replacement and removal controls
   ========================================================= */

.file-removal-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 14px;
    margin-bottom: 0;
    padding: 10px 12px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);
}

.file-removal-option input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.file-removal-option span {
    margin: 0;
    line-height: 1.3;
}

/* .form-group sets display: grid, which would override the
   hidden attribute app.js uses until a certificate is chosen. */
.consent-block[hidden] {
    display: none;
}

/* .helptext sets display: block, which would otherwise show the
   "marked for removal" notes app.js hides with the hidden attribute. */
.helptext[hidden] {
    display: none;
}

.document-removal {
    margin-top: 4px;
}

.document-removal > summary {
    width: fit-content;
    padding: 10px 0;

    color: var(--color-muted);
    font-size: 0.9rem;
    text-decoration: underline;

    cursor: pointer;
}

.document-removal[open] {
    padding: 0 12px 12px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    background: var(--color-background);
}

.document-removal .helptext {
    margin: 0 0 10px;
}

.document-removal .checkbox-row span {
    font-weight: 500;
    line-height: 1.3;
}

.current-file-status {
    margin-top: 14px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.current-file-status strong {
    font-size: 0.92rem;
}


/* =========================================================
   Shared form actions
   ========================================================= */

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   Tradesperson verification status
   ========================================================= */

.verification-steps {
    display: grid;
    gap: 20px;
}

.verification-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.verification-step h2 {
    margin: 0 0 6px;
}

.verification-step p:last-child {
    margin-bottom: 0;
    color: var(--color-muted);
}

.verification-step > .status {
    flex-shrink: 0;
}

.verification-status-actions {
    margin-top: 28px;
}

@media (max-width: 640px) {
    .verification-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .verification-step > .status {
        align-self: flex-start;
    }

    .verification-status-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .verification-status-actions .button {
        width: 100%;
    }
}


/* =========================================================
   Shared confirmation modals
   ========================================================= */

.modal-is-open {
    overflow: hidden;
}

.confirmation-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.confirmation-modal[hidden] {
    display: none;
}

.confirmation-modal__backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: rgba(23, 33, 43, 0.68);
    cursor: default;
}

.confirmation-modal__backdrop:hover,
.confirmation-modal__backdrop:focus {
    background: rgba(23, 33, 43, 0.68);
}

.confirmation-modal__dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 480px);
    padding: 32px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow:
        0 24px 70px rgba(16, 24, 40, 0.25);

    text-align: center;
}

.confirmation-modal__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--color-success-soft);
    color: var(--color-success);

    font-size: 27px;
    font-weight: 700;
}

.confirmation-modal__dialog h2 {
    margin: 6px 0 12px;
}

.confirmation-modal__dialog > p {
    margin: 0;

    color: var(--color-muted);
    line-height: 1.6;
}

/* The documents named in the removal confirmation. */
.confirmation-modal__list {
    display: inline-block;
    margin: 0 0 4px;
    padding-left: 20px;

    font-weight: 600;
    line-height: 1.6;
    text-align: left;
}

.confirmation-modal__notice {
    margin-top: 20px;
    padding: 14px 16px;

    border: 1px solid #fedf89;
    border-radius: var(--radius-small);

    background: var(--color-warning-soft);
    color: var(--color-warning);

    line-height: 1.5;
    text-align: left;
}

.confirmation-modal__actions {
    margin-top: 24px;

    display: flex;
    justify-content: center;
    gap: 12px;
}

.confirmation-modal__actions .button {
    min-width: 160px;
}

@media (max-width: 560px) {
    .confirmation-modal {
        padding: 16px;
    }

    .confirmation-modal__dialog {
        padding: 26px 20px;
    }

    .confirmation-modal__actions {
        flex-direction: column-reverse;
    }

    .confirmation-modal__actions .button {
        width: 100%;
    }
}


/* =========================================================
   Change password page
   ========================================================= */

.change-password-page .form-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
}

.change-password-page .form-group input {
    max-width: 680px;
}

@media (max-width: 640px) {
    .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .form-actions .button {
        width: 100%;
    }
}


/* =========================================================
   Customer profile links
   ========================================================= */

.profile-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-link-list a {
    font-weight: 700;
    text-decoration: none;
}

.profile-link-list a:hover {
    text-decoration: underline;
}

.customer-profile-page input,
.customer-profile-page select {
    max-width: none;
}

.customer-profile-page .profile-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-profile-page .profile-inline-field input {
    flex: 1;
    min-width: 220px;
}

.customer-profile-page .profile-inline-field .button {
    width: auto;
    min-width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .profile-link-list {
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   TradeConnect approval information
   ========================================================= */

.approval-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.approval-info {
    position: relative;
    display: inline-flex;
}

.approval-info__button {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    color: var(--color-primary-dark);
    background: var(--color-surface);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.approval-info__button:hover,
.approval-info__button:focus-visible {
    color: white;
    background: var(--color-primary);
}

.approval-info__tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;

    width: 270px;
    padding: 12px 14px;

    transform: translateX(-50%);

    border-radius: var(--radius-small);
    background: var(--color-primary-dark);
    color: white;

    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;

    box-shadow: var(--shadow-card);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.approval-info:hover .approval-info__tooltip,
.approval-info:focus-within .approval-info__tooltip {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 600px) {
    .approval-info__tooltip {
        left: auto;
        right: 0;
        width: min(270px, calc(100vw - 40px));
        transform: none;
    }
}