/* ---------------------------------------------------------------------------
   Staged organization registration.

   The doctor registration stepper is deliberately not reused here: its numbers and
   labels are translucent white because it sits on that page's blue gradient header,
   and on this page's card they would be white on white. This stepper is built for a
   panel background instead, from the project tokens so it follows light and dark
   mode, with logical properties so it mirrors in Arabic.
   --------------------------------------------------------------------------- */

.care-steps {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    gap: .25rem;
    list-style: none;
}

.care-step-item {
    display: grid;
    min-width: 5.5rem;
    max-width: 9rem;
    flex: 1 1 5.5rem;
    padding: .5rem .25rem;
    justify-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--care-muted);
    text-align: center;
    cursor: pointer;
}

.care-step-item:hover,
.care-step-item:focus-visible {
    color: var(--care-ink);
}

/* The number is a filled disc so the step reads as a marker rather than as a stray
   digit, and so the current step is distinguishable by shape as well as colour. */
.care-step-number {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--care-border);
    border-radius: 50%;
    background: var(--care-card, #fff);
    font-size: .875rem;
    font-weight: 700;
    color: var(--care-muted);
}

.care-step-item.is-active {
    color: var(--care-ink);
    font-weight: 700;
}

.care-step-item.is-active .care-step-number {
    /* The filled brand variant, because the number is printed in white on it. */
    background: var(--care-primary-strong);
    border-color: var(--care-primary-strong);
    color: #fff;
}

.care-step-item.is-complete .care-step-number {
    background: var(--care-success-transparent);
    border-color: var(--care-success-text);
    color: var(--care-success-text);
}

.care-step-connector {
    flex: 0 1 1.5rem;
    height: 2px;
    margin-block-start: 1.6rem;
    background: var(--care-border);
}

/* Panels ------------------------------------------------------------------ */

.care-step-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--care-border);
    border-radius: 1rem;
    background: var(--care-card, #fff);
}

.care-step-panel-heading {
    margin-block-end: 1.25rem;
}

.care-step-panel-count {
    margin: 0 0 .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--care-primary-dark);
}

.care-step-panel-heading h2 {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
}

/* Actions ---------------------------------------------------------------- */

.care-step-actions {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
    align-items: center;
    gap: .75rem;
}

/* Pushes the forward control to the end of the row, so Previous and Next sit at
   opposite ends and the position mirrors correctly in Arabic. */
.care-step-progress {
    margin-inline-start: auto;
    font-size: .8125rem;
    color: var(--care-muted);
}

@media (max-width: 575.98px) {
    /* The labels would wrap to three lines each on a phone; the numbers and the
       "Step 3 of 7" line already say where the reader is. */
    .care-step-label {
        display: none;
    }

    .care-step-item {
        min-width: 0;
        flex: 0 0 auto;
    }

    .care-step-actions .btn {
        flex: 1 1 100%;
    }

    .care-step-progress {
        margin-inline-start: 0;
        width: 100%;
        text-align: center;
    }
}

/* ===== Card shell: the same contained card the patient and doctor forms use —
   brand-green header carrying the title and step markers, white body, green
   footer. Replaces the full-width pale hero this page used to open with. ===== */

.organization-registration-page {
    background: var(--care-surface-soft);
}

.organization-registration-card {
    max-width: 60rem;
    margin-inline: auto;
    overflow: hidden;
    background: var(--care-card);
    border: 1px solid var(--care-border);
    border-radius: var(--sihatuna-radius-xl, 1.75rem);
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
}

.organization-registration-header {
    padding: 2rem 1.75rem 1.75rem;
    background: linear-gradient(135deg, #055744 0%, #0a8168 60%, #12977a 100%);
    color: #fff;
    text-align: center;
}

.organization-registration-eyebrow {
    display: inline-block;
    padding: .35rem 1rem;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.organization-registration-header h1 {
    margin: 1rem 0 .5rem;
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-weight: 700;
    color: #fff;
}

.organization-registration-header p {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .88);
}

/* The stepper now sits on the green header, so its markers invert: translucent
   white pills, with the active one filled solid white on green text. */
.organization-registration-header .care-steps {
    margin-block-start: 1.75rem;
}

.organization-registration-header .care-step-number {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.organization-registration-header .care-step-label {
    color: rgba(255, 255, 255, .85);
}

.organization-registration-header .care-step-item.is-active .care-step-number {
    background: #fff;
    border-color: #fff;
    color: var(--sihatuna-green-dark, #055744);
}

.organization-registration-header .care-step-item.is-active .care-step-label {
    color: #fff;
    font-weight: 600;
}

.organization-registration-header .care-step-connector {
    background: rgba(255, 255, 255, .35);
}

/* The form is the card's body now, so it drops the panel chrome it used to
   carry as a free-standing block. */
.organization-registration-card .organization-registration-form {
    max-width: none;
    margin: 0;
    padding: 1.75rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.organization-registration-footer {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #055744, #0a8168);
    color: rgba(255, 255, 255, .9);
    text-align: center;
    font-size: .95rem;
}

.organization-registration-footer a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .organization-registration-header,
    .organization-registration-card .organization-registration-form {
        padding-inline: 1.1rem;
    }
}

/* Inside the card the step panel is the body itself, so it drops the border and
   shadow it carried as a free-standing block — a card within a card otherwise. */
.organization-registration-card .care-step-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.organization-registration-card .care-step-actions {
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--care-border);
}