/* ==========================================================================
   Union Desk — citizen login & registration
   Loaded on the public website layout; everything is namespaced under .ca-page
   so the rest of the site is untouched.
   ========================================================================== */

.ca-page {
    --ca-green: #006a4e;
    --ca-green-dk: #004734;
    --ca-line: #e3eae6;
    --ca-ink: #16241e;
    --ca-muted: #6d7d76;
    --ca-danger: #b42318;

    padding-block: 2rem 3.5rem;
    background: #f4f7f5;
}

/* ---------- shell --------------------------------------------------------- */

.ca-shell {
    max-width: 480px;
    margin-inline: auto;
}

.ca-shell--wide {
    max-width: 960px;
}

.ca-head {
    text-align: center;
    margin-bottom: 1.1rem;
}

.ca-head__mark {
    width: 58px;
    height: 58px;
    margin: 0 auto .7rem;
    display: grid;
    place-items: center;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--ca-line);
    border-radius: 16px;
}

.ca-head__mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ca-head h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ca-ink);
}

.ca-head p {
    margin: .25rem 0 0;
    font-size: .9rem;
    color: var(--ca-muted);
}

.ca-card {
    background: #fff;
    border: 1px solid var(--ca-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px -28px rgba(16, 24, 40, .35);
    overflow: hidden;
}

.ca-card__bd {
    padding: clamp(1.15rem, 3vw, 1.9rem);
}

/* ---------- sections (registration) --------------------------------------- */

.ca-section+.ca-section {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--ca-line);
}

.ca-section__hd {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
}

.ca-section__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--ca-green);
    border-radius: 50%;
}

.ca-section__hd h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ca-ink);
}

.ca-section__hd small {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--ca-muted);
}

/* ---------- fields -------------------------------------------------------- */

.ca-page .form-group {
    margin-bottom: 0;
}

.ca-page label {
    display: block;
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ca-ink);
}

.ca-page .form-control,
.ca-page .form-select,
.ca-page select.form-control {
    width: 100%;
    min-height: 42px;
    padding: .5rem .8rem;
    font-size: .92rem;
    color: var(--ca-ink);
    background-color: #fff;
    border: 1px solid #d8e2dd;
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ca-page .form-control:hover,
.ca-page .form-select:hover {
    border-color: #c3d0ca;
}

.ca-page .form-control:focus,
.ca-page .form-select:focus {
    outline: none;
    border-color: var(--ca-green);
    box-shadow: 0 0 0 3px rgba(0, 106, 78, .13);
}

.ca-page .form-control::placeholder {
    color: #a3b0aa;
}

.ca-page input[type="file"].form-control {
    padding: .45rem .6rem;
    font-size: .82rem;
}

/* field with a leading icon */
.ca-field {
    position: relative;
}

.ca-field>i:first-child {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .92rem;
    color: var(--ca-muted);
    pointer-events: none;
    z-index: 2;
}

.ca-field--icon .form-control {
    padding-left: 2.45rem;
}

/* password reveal */
.ca-peek {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ca-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ca-peek:hover {
    color: var(--ca-green);
    background: #eef5f2;
}

.ca-field--peek .form-control {
    padding-right: 2.9rem;
}

/* errors */
.ca-page .form-control.is-invalid,
.ca-page .form-select.is-invalid {
    border-color: #fecdc9;
    background-color: #fef3f2;
}

.ca-err,
.ca-page span[class^="error_"],
.ca-page span[class*=" error_"] {
    display: block;
    margin-top: .22rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ca-danger);
}

.ca-err:empty {
    display: none;
}

/* live field check — the mobile is judged as it is typed, so it needs a
   settled state and a working one as well as a refusal */
.ca-page .form-control.is-valid,
.ca-page .form-select.is-valid {
    border-color: #b7e0cd;
    background-color: #f4fbf8;
}

.ca-field--state .form-control {
    padding-right: 2.4rem;
}

.ca-state {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: .92rem;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    color: var(--ca-muted);
}

.ca-state.is-on {
    display: block;
}

.ca-state--available {
    color: var(--ca-green);
}

.ca-state--taken,
.ca-state--invalid {
    color: var(--ca-danger);
}

.ca-hint {
    display: block;
    margin-top: .22rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ca-muted);
}

.ca-hint:empty {
    display: none;
}

.ca-hint--ok {
    color: var(--ca-green);
}

/* ---------- photo --------------------------------------------------------- */

.ca-photo {
    text-align: center;
    padding: 1rem;
    background: #fafbfa;
    border: 1px dashed #cfdad4;
    border-radius: 12px;
}

.ca-photo img {
    width: 100%;
    max-width: 150px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0 auto .7rem;
    display: block;
    background: #fff;
    border: 1px solid var(--ca-line);
    border-radius: 10px;
}

.ca-photo small {
    display: block;
    margin-top: .35rem;
    font-size: .74rem;
    color: var(--ca-muted);
}

/* ---------- actions ------------------------------------------------------- */

.ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .72rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--ca-green);
    border: 1px solid var(--ca-green);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .16s ease, transform .12s ease;
}

.ca-btn:hover {
    color: #fff;
    background: var(--ca-green-dk);
}

.ca-btn:active {
    transform: translateY(1px);
}

.ca-btn[disabled] {
    opacity: .7;
    cursor: progress;
}

.ca-btn--ghost {
    color: var(--ca-ink);
    background: #fff;
    border-color: var(--ca-line);
}

.ca-btn--ghost:hover {
    color: var(--ca-ink);
    background: #f4f7f5;
    border-color: #c3d0ca;
}

.ca-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin: .2rem 0 1.1rem;
}

.ca-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .87rem;
    color: var(--ca-ink);
    cursor: pointer;
}

.ca-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--ca-green);
    cursor: pointer;
}

.ca-link {
    font-size: .87rem;
    font-weight: 600;
    color: var(--ca-green);
    text-decoration: none;
}

.ca-link:hover {
    color: var(--ca-green-dk);
    text-decoration: underline;
}

.ca-foot {
    margin-top: 1.1rem;
    text-align: center;
    font-size: .88rem;
    color: var(--ca-muted);
}

.ca-note {
    display: flex;
    gap: .55rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    font-size: .82rem;
    line-height: 1.6;
    color: #12503e;
    background: #eef5f2;
    border: 1px solid #c8e0d6;
    border-radius: 10px;
}

.ca-note i {
    flex: 0 0 auto;
    margin-top: .15rem;
}

/* ---------- progress (registration) --------------------------------------- */

.ca-progress {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .9rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--ca-line);
    border-radius: 10px;
}

.ca-progress__track {
    flex: 1;
    height: 7px;
    background: #eef2f0;
    border-radius: 99px;
    overflow: hidden;
}

.ca-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #128f6c, var(--ca-green));
    transition: width .35s ease;
}

.ca-progress__text {
    font-size: .79rem;
    font-weight: 600;
    color: var(--ca-muted);
    white-space: nowrap;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 575.98px) {
    .ca-page {
        padding-block: 1.25rem 2.5rem;
    }

    .ca-section+.ca-section {
        margin-top: 1.2rem;
        padding-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ca-btn,
    .ca-page .form-control,
    .ca-progress__fill {
        transition: none;
    }
}