.diyarlist-agency-application,
.diyarlist-agency-dashboard,
.diyarlist-agency-notice-wrap {
    max-width: 760px;
    margin: 0 auto 2rem;
}

/* Gated states (logged-out / no-access / wrong-environment): a centred
   portal card with real breathing room instead of a bare banner jammed
   under the header. Uses the dl-ui kit + existing portal tokens only. */
.diyarlist-agency-notice-wrap.dl-portal-gate {
    display: flex;
    justify-content: center;
    padding: clamp(3rem, 12vh, 7rem) 1rem;
    margin: 0 auto;
}

.dl-portal-gate .dl-portal-gate-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    padding: 2rem 2.25rem;
}

.dl-portal-gate .dl-portal-gate-card__message {
    font-size: 1.05rem;
    color: var(--dl-text, #1f2933);
    margin: 0 0 1.25rem;
}

.dl-portal-gate .dl-portal-gate-card__action {
    margin: 0;
}

.dl-agency-registration .dl-agency-reg-section {
    border: 1px solid var(--diyarlist-border-soft, #e8ddd4);
    border-radius: var(--diyarlist-radius-card, 16px);
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--diyarlist-card-bg-solid, #fff);
    box-shadow: var(--diyarlist-card-shadow, 0 6px 24px rgba(31, 41, 51, 0.07));
}

.dl-agency-registration .dl-agency-reg-section legend {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dl-text, #1f2933);
    padding: 0 0.35rem;
}

.dl-agency-registration .dl-portal-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.dl-agency-registration .dl-portal-field input,
.dl-agency-registration .dl-portal-field textarea {
    width: 100%;
    max-width: 100%;
    min-height: var(--diyarlist-input-height, 44px);
    border-radius: var(--diyarlist-radius-input, 10px);
}

.dl-agency-registration .dl-portal-upload-card {
    border: 1px dashed var(--diyarlist-border-soft, #e8ddd4);
    border-radius: var(--diyarlist-radius-card, 12px);
    padding: 1rem;
    background: #faf8f6;
}

.dl-agency-registration .dl-portal-form-submit {
    margin-top: 0.5rem;
}

/* Agency registration form view: one layer of cards (owner, 2026-10-05).
   The page used to nest three frames: the application wrapper and the <form>
   were both .dl-portal-form-card, around the numbered section cards. The
   markup no longer gives those two the card class, so the section cards sit
   on the page background. The wrapper also drops the 760px cap it shares with
   the notice/success states, so the page heading, back link and cards share
   both edges of the page's form container. */
.diyarlist-agency-application.dl-agency-registration--form {
    max-width: none;
}

/* The same one layer of cards on the agency correction form (pending
   dashboard) and the two broker edit forms (pending submission, approved
   contact), owner 2026-10-05. The correction <form> no longer carries
   .dl-portal-form-card and the pending-submission wrapper no longer carries
   .dl-portal-card, so only the section cards are framed (the contact form
   never had an outer frame). The notices above these forms keep their own
   cards. The --single-card modifiers scope the submit-button rules below. */

/* Submit button: the portal button rule sets white-space: nowrap and a fixed
   height, so the one-line label "Submit agency application for verification"
   ran past a phone's edge (the page was 411px wide on a 390px screen). Let the
   label wrap inside its column; on a phone the button takes the full width,
   like the portal's other phone call-to-action buttons. The correction and
   broker edit forms' submit buttons do the same; the Cancel and back links
   keep their own size. */
.diyarlist-agency-application.dl-agency-registration--form .dl-portal-form-submit .dl-portal-btn-primary,
.dl-agency-correction-form.dl-agency-correction-form--single-card .dl-portal-form-submit .dl-ui-btn--primary,
.diyarlist-edit-agent-submission.diyarlist-edit-agent-submission--single-card .dl-portal-form-submit .dl-ui-btn--primary {
    max-width: 100%;
    height: auto;
    padding-block: 0.6rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

@media (max-width: 640px) {
    .diyarlist-agency-application.dl-agency-registration--form .dl-portal-form-submit .dl-portal-btn-primary,
    .dl-agency-correction-form.dl-agency-correction-form--single-card .dl-portal-form-submit .dl-ui-btn--primary,
    .diyarlist-edit-agent-submission.diyarlist-edit-agent-submission--single-card .dl-portal-form-submit .dl-ui-btn--primary {
        width: 100%;
        padding-inline: 0.75rem;
    }

    /* The broker submission's Cancel link drops below the full-width submit
       button; the row's gap keeps the two from touching. */
    .diyarlist-edit-agent-submission.diyarlist-edit-agent-submission--single-card .dl-portal-form-submit {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

.diyarlist-edit-agent-submission .diyarlist-agent-feedback {
    margin: 0.35rem 0 0;
    max-width: 220px;
    font-size: 0.85rem;
}

.diyarlist-agent-actions .dlv-badge {
    display: inline-block;
}

.diyarlist-agent-photo-preview__img {
    display: block;
    max-width: 120px;
    height: auto;
    margin: 0.5rem 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--diyarlist-border-soft, #e8ddd4);
}

.diyarlist-agency-form fieldset {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
}

.diyarlist-agency-form legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

.diyarlist-agency-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.diyarlist-agency-form .required {
    color: #c0392b;
}

.diyarlist-agency-form input[type="text"],
.diyarlist-agency-form input[type="email"],
.diyarlist-agency-form input[type="date"],
.diyarlist-agency-form input.regular-text {
    width: 100%;
    max-width: 100%;
}

.diyarlist-notice {
    border-radius: 4px;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
}

.diyarlist-notice-success {
    background: #ecfdf3;
    border: 1px solid #86efac;
    color: #166534;
}

.diyarlist-notice-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.diyarlist-notice-info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
}

.diyarlist-agency-summary dl,
.diyarlist-agency-pending-details dl {
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: minmax(140px, 35%) 1fr;
    margin: 0;
}

.diyarlist-agency-summary dt,
.diyarlist-agency-pending-details dt {
    font-weight: 600;
}

.diyarlist-agency-summary dd,
.diyarlist-agency-pending-details dd {
    margin: 0;
}

.diyarlist-agents-table {
    border-collapse: collapse;
    font-size: 0.95rem;
    width: 100%;
}

.diyarlist-agents-table th,
.diyarlist-agents-table td {
    border-bottom: 1px solid #e5e5e5;
    padding: 0.55rem 0.35rem;
    text-align: left;
    vertical-align: top;
}

.diyarlist-frontend-doc-upload {
    margin-top: 0.25rem;
}

.diyarlist-frontend-doc-status {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

/* Unmistakable card states: green + check once a document is accepted,
   red while the last selection was rejected. */
.diyarlist-frontend-doc-upload.has-uploaded-doc .diyarlist-frontend-doc-status {
    color: #15803d;
    font-weight: 600;
}

.diyarlist-frontend-doc-upload.has-uploaded-doc .diyarlist-frontend-doc-status::before {
    content: "✓ ";
}

.diyarlist-frontend-doc-upload.has-upload-error .diyarlist-frontend-doc-status {
    color: #dc2626;
    font-weight: 600;
}

.diyarlist-frontend-doc-upload.has-upload-error.has-uploaded-doc .diyarlist-frontend-doc-status {
    color: #15803d;
}

.diyarlist-frontend-doc-upload .diyarlist-field-error {
    color: #dc2626;
    display: block;
    font-size: 0.9em;
    margin-top: 0.35rem;
}

/* Per-field validation errors (server-side re-render + client-side JS). */
.dl-agency-registration-form .diyarlist-field-error,
.diyarlist-agency-form .diyarlist-field-error {
    color: #dc2626;
    display: block;
    font-size: 0.9em;
    margin-top: 0.35rem;
}

.dl-agency-registration-form .has-error input,
.dl-agency-registration-form .has-error textarea,
.dl-agency-registration-form .has-error select,
.diyarlist-agency-form .has-error input,
.diyarlist-agency-form .has-error textarea,
.diyarlist-agency-form .has-error select,
.dl-agency-registration-form input[aria-invalid="true"],
.dl-agency-registration-form textarea[aria-invalid="true"] {
    border-color: #dc2626 !important;
}

.dl-agency-correction-docs-summary {
    margin-top: 1rem;
}

.dl-agency-correction-docs-summary .dl-portal-section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
}

.dl-agency-correction-docs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-agency-correction-docs-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--diyarlist-border-soft, #e8ddd4);
}

.dl-agency-correction-docs-list__item:last-child {
    border-bottom: 0;
}

.dl-agency-correction-docs-list__label {
    min-width: 12rem;
    font-weight: 600;
}

.dl-agency-correction-docs-list__value {
    color: var(--dl-muted, #64748b);
}

/* Edit-agent submission (v3.0.352): documents side-by-side; the fieldset
   sections + dl-portal-field-row grid come from the registration form. */
.diyarlist-edit-agent-submission .dl-agent-docs-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}

.diyarlist-edit-agent-submission .dl-agent-docs-row > .diyarlist-field-wrap {
    margin: 0;
}

/* Legal agreements section (consent layer v3.0.428): checkbox rows on the
   application form. has-error border comes from the shared rules above; the
   checkbox itself gets an outline instead of a border.
   The generic field rules at the top of this file out-specify a plain
   `.dl-agency-reg-section--legal .dl-ui-check-row` (0,2,1 beats 0,2,0):
   `.dl-portal-field label {display:block; font-weight:600}` broke the flex row,
   so each checkbox sat on its own line above bold text, and
   `.dl-portal-field input {min-height:44px; width:100%}` stretched the checkbox
   into a faint tall box. These selectors carry the form ancestors so the
   check-row pattern wins: checkbox at the line start, centred on the first
   text line, normal-weight text beside it. gap-only spacing = RTL-safe. */
.dl-agency-registration .dl-agency-reg-section--legal .dl-portal-field label.dl-ui-check-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

/* font-size inherits the row's so 1.5em is exactly one text line: the top
   margin centres the box on the first line however the sentence wraps. */
.dl-agency-registration .dl-agency-reg-section--legal .dl-ui-check-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.05rem;
    max-width: none;
    height: 1.05rem;
    min-height: 0;
    margin: calc((1.5em - 1.05rem) / 2) 0 0;
    padding: 0;
    font-size: inherit;
    accent-color: #ff7900;
}

.dl-agency-reg-section--legal .dl-ui-check-row a {
    color: #ff7900;
    font-weight: 600;
}

.diyarlist-agency-form .dl-portal-field--checkbox.has-error input[type="checkbox"] {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}