/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor's unhandled-error bar. The framework only needs #blazor-error-ui (it sets
   display:block on it), .reload and .dismiss; the visible box inside is the shared
   inline alert (المعيار 15) so it matches the rest of the site. */
#blazor-error-ui[b-kq9tmuaitp] {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(600px, calc(100% - 32px));
    z-index: 1000;
}

#blazor-error-ui .dga-alert[b-kq9tmuaitp] {
    box-shadow: var(--shadow-xl);
}

#blazor-error-ui .dismiss[b-kq9tmuaitp] {
    flex-shrink: 0;
    margin-top: -8px;
    margin-inline-end: -8px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Reconnect dialog — state visibility (the framework toggles the state classes on
   #components-reconnect-modal); geometry and colour come from the shared
   .dga-dialog / .dga-btn / .dga-featured-icon components. */
.components-reconnect-first-attempt-visible[b-vjjv1c7d7i],
.components-reconnect-repeated-attempt-visible[b-vjjv1c7d7i],
.components-reconnect-failed-visible[b-vjjv1c7d7i],
.components-pause-visible[b-vjjv1c7d7i],
.components-resume-failed-visible[b-vjjv1c7d7i],
.components-rejoining-animation[b-vjjv1c7d7i] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vjjv1c7d7i] {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed #components-reconnect-button[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-paused #components-resume-button[b-vjjv1c7d7i],
#components-reconnect-modal.components-reconnect-resume-failed #components-resume-button[b-vjjv1c7d7i] {
    display: inline-flex;
}

#components-reconnect-modal[b-vjjv1c7d7i] {
    width: min(400px, calc(100% - 32px));
}

.components-reconnect-container[b-vjjv1c7d7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.components-reconnect-container .dga-dialog__body[b-vjjv1c7d7i] {
    margin: 0;
}

.components-reconnect-container .dga-btn[b-vjjv1c7d7i] {
    margin-top: var(--spacing-md);
}

.components-reconnect-icon[b-vjjv1c7d7i] {
    position: relative;
    margin-bottom: var(--spacing-md);
}

/* المعيار 46: a ring spinner on the neutral track with the brand head. */
.components-rejoining-animation[b-vjjv1c7d7i] {
    position: absolute;
    inset: -6px;
    border-radius: var(--radius-full);
    border: 3px solid var(--border-neutral-secondary);
    border-top-color: var(--background-primary);
    animation: components-rejoining-spin-b-vjjv1c7d7i 0.9s linear infinite;
}

@keyframes components-rejoining-spin-b-vjjv1c7d7i {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation[b-vjjv1c7d7i] {
        animation: none;
    }
}
/* /Components/Pages/TamkenHost.razor.rz.scp.css */
.tamkeen-page-host[b-r70u2wfx0e] {
    min-width: 0;
}
/* /Components/Shared/ApplicantSummary.razor.rz.scp.css */
/*
    بيانات مقدم الطلب — the read-only identity fields above every service form.

    Matched to .srf-form-card and .srf-fields-grid on the request page: same white
    surface, same border and radius, same two-column grid at the same 20px gap. The
    section is meant to read as the first part of the form, so what sets it apart is
    the heading and the locked state of its fields, not a different visual language.

    The inputs themselves are styled by the portal's global input-style_v6.css through
    .input-label / .input-wrap.readonly / .input-hint — the design system's own
    Read-only state. Only the additions live here.
*/

.apl-card[b-dksf3vvjw2] {
    background: var(--background-white, #fff);
    border: 1px solid var(--border-neutral-primary, #e3e6e8);
    border-radius: var(--radius-lg, 12px);
    padding: 32px;
    margin-bottom: 24px;
}

.apl-head[b-dksf3vvjw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.apl-title[b-dksf3vvjw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-display, #1b1b1b);
    margin: 0;
}

.apl-title i[b-dksf3vvjw2] {
    font-size: 20px;
    /* --text-primary is the brand green in the DGA token set, not neutral body text. */
    color: var(--text-primary, #1b8354);
}

.apl-badge[b-dksf3vvjw2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--background-white, #fff);
    border: 1px solid var(--text-primary, #1b8354);
    color: var(--text-primary, #1b8354);
}

.apl-grid[b-dksf3vvjw2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Grid items default to min-width:auto, which lets a long email blow out the track. */
.apl-field[b-dksf3vvjw2] {
    min-width: 0;
}

/* The locked look. The system's .readonly state drops the focus underline but keeps
   the default surface, so on its own a read-only field is indistinguishable from an
   empty editable one — these rules are what say "given, not asked for". */
.apl-wrap[b-dksf3vvjw2] {
    background-color: var(--background-neutral-50, #f5f6f7) !important;
    cursor: default;
}

.apl-wrap input[b-dksf3vvjw2] {
    cursor: default;
    /* A read-only input is still focusable and selectable — people do copy their own
       ID number out of here — so it keeps full-strength text rather than a dimmed one. */
    color: var(--text-display, #1b1b1b);
    font-weight: 600;
}

.apl-wrap input[b-dksf3vvjw2]::placeholder {
    font-weight: 400;
    font-style: italic;
}

.apl-lock[b-dksf3vvjw2] {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--text-secondary-paragraph, #5b6670);
    opacity: .65;
}

.apl-hint-warning[b-dksf3vvjw2] {
    color: #a6690b;
}

.apl-warning[b-dksf3vvjw2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: #fdf5e6;
    border: 1px solid #e8c66a;
    color: #7a4e05;
    font-size: 14px;
    line-height: 1.6;
}

.apl-warning i[b-dksf3vvjw2] {
    flex-shrink: 0;
    margin-top: 2px;
}

.apl-foot[b-dksf3vvjw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-neutral-primary, #e3e6e8);
}

.apl-note[b-dksf3vvjw2] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary-paragraph, #5b6670);
}

.apl-link[b-dksf3vvjw2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary, #1b8354);
    text-decoration: none;
}

.apl-link:hover[b-dksf3vvjw2],
.apl-link:focus-visible[b-dksf3vvjw2] {
    text-decoration: underline;
}

/* The same breakpoint the request page collapses its own field grid at. */
@media (max-width: 767.98px) {
    .apl-grid[b-dksf3vvjw2] {
        grid-template-columns: 1fr;
    }

    .apl-card[b-dksf3vvjw2] {
        padding: 20px;
    }
}

/* The applicant's details are context; on paper the request itself is the point. */
@media print {
    .apl-foot[b-dksf3vvjw2],
    .apl-warning[b-dksf3vvjw2] {
        display: none !important;
    }
}
/* /Components/Shared/TamkenEmbeddedHost.razor.rz.scp.css */
.tamkeen-host[b-ye03fmepg4] {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--background-white, #fff);
}

.tamkeen-host__frame[b-ye03fmepg4] {
    position: relative;
    z-index: 999;
    display: block;
    width: 100%;
    height: 720px;
    min-height: 0;
    border: 0;
    background: #fff;
    overflow: hidden;
}

.tamkeen-host__state[b-ye03fmepg4] {
    min-height: 420px;
    padding: var(--spacing-8, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4, 1rem);
    text-align: center;
    color: var(--text-primary, #161616);
}

.tamkeen-host__state p[b-ye03fmepg4],
.tamkeen-host__state h2[b-ye03fmepg4] {
    margin: 0;
}

.tamkeen-host--overlay[b-ye03fmepg4] {
    overflow: visible;
}

.tamkeen-host--overlay .tamkeen-host__frame[b-ye03fmepg4] {
    position: fixed;
    z-index: 2147483000;
    top: var(--tamkeen-overlay-position-top, 0px);
    right: 0;
    left: 0;
    width: 100vw;
    max-width: none;
    height: var(--tamkeen-overlay-height, 100vh) !important;
    height: var(--tamkeen-overlay-height, 100dvh) !important;
    min-height: 0;
    border: 0;
    background: #fff;
}

.tamkeen-host__state h2[b-ye03fmepg4] {
    font-size: var(--text-xl-size, 1.25rem);
    line-height: var(--text-xl-line-height, 1.75rem);
}

.tamkeen-host__logo[b-ye03fmepg4] {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.tamkeen-host__spinner[b-ye03fmepg4] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-neutral-secondary, #d2d6db);
    border-top-color: var(--background-primary, #1b8354);
    border-radius: 50%;
    animation: tamkeen-host-spin-b-ye03fmepg4 0.8s linear infinite;
}

@keyframes tamkeen-host-spin-b-ye03fmepg4 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tamkeen-host__spinner[b-ye03fmepg4] {
        animation: none;
    }
}

@media (max-width: 991.98px) {
    .tamkeen-host__frame[b-ye03fmepg4] {
        height: 680px;
    }
}

@media print {
    .tamkeen-host__frame[b-ye03fmepg4] {
        display: none;
    }
}