/* =========================================================================================
   PGI lead forms - shared chrome
   -----------------------------------------------------------------------------------------
   Everything that used to be duplicated as inline <style> blocks inside _Layout.cshtml:

     .pgi-hp        honeypot field, hidden from humans but NOT via display:none
     .lead-flow     ONE dialog with two sliding panes: WhatsApp verification -> result
     .lead-popup    the auto-opening enquiry + brochure popup

   Both dialogs are centred on both axes with the same flex pattern and scroll internally on
   short viewports, so a long message never pushes the card off-screen.
   ========================================================================================= */

/* ---------------------------------------------------------------- honeypot ---------------
   Must stay focusable-but-invisible rather than display:none / hidden: some bots skip fields
   that are display:none, which would defeat the trap. Pulled off-canvas instead. */
.pgi-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------------- shared dialog shell ---- */
.lead-flow,
.lead-popup {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;      /* vertical centring   */
    justify-content: center;  /* horizontal centring */
    padding: 16px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.lead-popup { z-index: 2000; }
.lead-flow  { z-index: 2150; }

.lead-flow.is-open,
.lead-popup.is-open {
    opacity: 1;
    visibility: visible;
}

.lead-flow__backdrop,
.lead-popup__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 40, .62);
    backdrop-filter: blur(3px);
}

.lead-flow__card,
.lead-popup__card {
    position: relative;
    z-index: 1;
    margin: auto;             /* keeps it centred even when the shell scrolls */
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(8, 20, 40, .4);
    transform: translateY(18px) scale(.97);
    transition: transform .35s cubic-bezier(.2, .85, .25, 1);
}

.lead-flow.is-open .lead-flow__card,
.lead-popup.is-open .lead-popup__card {
    transform: none;
}

/* Shared close button */
.lead-flow__close,
.lead-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 16px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, color .2s, transform .25s;
}

.lead-flow__close:hover { background: #e2e8f0; transform: rotate(90deg); }
.lead-popup__close:hover { background: #e11d2a; color: #fff; transform: rotate(90deg); }

/* ---------------------------------------------------------------- the sliding shell ------
   ONE card, TWO panes. The track slides horizontally between them and the viewport animates
   its height to the active pane, so verify -> verified is a single continuous surface instead
   of one popup closing and another opening at a different size. */
.lead-flow__card {
    width: min(460px, 100%);
    text-align: center;
    overflow: hidden;
}

.lead-flow__viewport {
    overflow: hidden;
    transition: height .38s cubic-bezier(.22, .85, .28, 1);
}

.lead-flow__track {
    display: flex;
    align-items: flex-start;
    width: 200%;
    transform: translateX(0);
    transition: transform .42s cubic-bezier(.22, .85, .28, 1);
}

.lead-flow.is-pane-result .lead-flow__track { transform: translateX(-50%); }

.lead-flow__pane {
    width: 50%;
    flex: 0 0 50%;
    padding: 32px 26px 26px;
    /* The inactive pane must not be reachable by tab or screen readers. */
    opacity: 1;
    transition: opacity .3s ease;
}

.lead-flow:not(.is-pane-result) .lead-flow__pane[data-pane="result"],
.lead-flow.is-pane-result .lead-flow__pane[data-pane="otp"] {
    opacity: 0;
    pointer-events: none;
}

/* The verification pane is a hard gate: hide the only way out while it is showing. */
.lead-flow.is-locked .lead-flow__close { display: none; }
.lead-flow.is-locked .lead-flow__backdrop { pointer-events: none; }

.lead-result__icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    background: #64748b;
}

.lead-flow.is-success .lead-result__icon { background: #16a34a; }
.lead-flow.is-error   .lead-result__icon { background: #e11d2a; }
.lead-flow.is-notice  .lead-result__icon { background: #d97706; }

.lead-result__title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.lead-flow.is-success .lead-result__title { color: #16a34a; }
.lead-flow.is-error   .lead-result__title { color: #e11d2a; }
.lead-flow.is-notice  .lead-result__title { color: #b45309; }

.lead-result__msg {
    margin: 0 0 22px;
    color: #475569;
    font-size: .95rem;
    line-height: 1.5;
}

.lead-result__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.lead-result__btn {
    background: #0d477d;
    color: #fff;
    border: 0;
    border-radius: 11px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .2s, transform .15s;
}

.lead-result__btn:hover { background: #0a365f; transform: translateY(-1px); color: #fff; }
.lead-result__btn--portal { background: #16a34a; }
.lead-result__btn--portal:hover { background: #128038; }
.lead-result__btn[hidden] { display: none; }

/* ---------------------------------------------------------------- enquiry / brochure popup */
.lead-popup__card {
    width: min(440px, 100%);
    padding: 26px 24px 24px;
}

.lead-popup__head { text-align: center; margin-bottom: 15px; }

.lead-popup__head h2 {
    margin: 0;
    color: #e11d2a;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.lead-popup__head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.35;
}

.lead-popup__form { display: grid; gap: 10px; }

.lead-popup__form input,
.lead-popup__form select,
.lead-popup__form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #dbe5ef;
    border-radius: 11px;
    font-size: .9rem;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.lead-popup__form input::placeholder,
.lead-popup__form textarea::placeholder { color: #94a3b8; }

.lead-popup__form select:has(option[value=""]:checked) { color: #94a3b8; }

.lead-popup__form input:focus,
.lead-popup__form select:focus,
.lead-popup__form textarea:focus {
    border-color: #0d477d;
    box-shadow: 0 0 0 3px rgba(13, 71, 125, .12);
}

.lead-popup__form textarea { resize: vertical; min-height: 52px; }

.lead-popup__form .lp-submit {
    margin-top: 3px;
    background: #e11d2a;
    color: #fff;
    border: 0;
    border-radius: 11px;
    padding: 13px;
    font-weight: 800;
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: .3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .15s;
}

.lead-popup__form .lp-submit:hover { transform: translateY(-1px); }
.lead-popup__form .lp-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- OTP dialog -------------
   No close button, and the backdrop is inert (pointer-events:none) so a stray click cannot
   dismiss it. Only verifying or reloading gets past this step - by design. */
.otp-verify__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #fff;
    background: #b0253a;
}

.otp-verify__title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; color: #0f172a; }
.otp-verify__msg { margin: 0 0 20px; color: #475569; font-size: .93rem; line-height: 1.45; }
.otp-verify__msg b { color: #0f172a; white-space: nowrap; }

/* Six boxes have to fit a 320px phone, so they flex down instead of overflowing. */
.otp-verify__boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.otp-verify__box {
    width: 46px;
    height: 54px;
    min-width: 0;
    flex: 0 1 46px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.otp-verify__box:focus { border-color: #0d477d; box-shadow: 0 0 0 3px rgba(13, 71, 125, .15); }
.otp-verify__box.is-error { border-color: #e11d2a; background: #fff5f5; }
.otp-verify__box.is-filled { border-color: #0d477d; }

.otp-verify__error { min-height: 18px; margin: 0 0 12px; color: #e11d2a; font-size: .85rem; font-weight: 600; }
.otp-verify__error.is-ok { color: #16a34a; }

.otp-verify__btn {
    width: 100%;
    background: #b0253a;
    color: #fff;
    border: 0;
    border-radius: 11px;
    padding: 13px 28px;
    font-weight: 700;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .15s, opacity .2s;
}

.otp-verify__btn:hover:not(:disabled) { background: #961e30; transform: translateY(-1px); }
.otp-verify__btn:disabled { opacity: .5; cursor: not-allowed; }

.otp-verify__resend { margin: 14px 0 0; color: #64748b; font-size: .86rem; }

.otp-verify__resend-btn {
    background: none;
    border: 0;
    padding: 0;
    color: #0d477d;
    font-weight: 700;
    font-size: .86rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.otp-verify__resend-btn:disabled { color: #94a3b8; cursor: not-allowed; text-decoration: none; }

/* While the CRM insert finishes, the boxes are locked so nobody can type a code before
   one has actually been sent. */
.lead-flow.is-waiting .otp-verify__box {
    background: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.lead-flow.is-waiting .otp-verify__error {
    color: #0b4f9f;
    font-weight: 600;
}

.lead-flow.is-waiting .otp-verify__error::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    vertical-align: -1px;
    border: 2px solid #bcd7ee;
    border-top-color: #0b4f9f;
    border-radius: 50%;
    animation: otp-spin .8s linear infinite;
}

@keyframes otp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lead-flow.is-waiting .otp-verify__error::before { animation: none; }
}

/* ---- why verify ---- */
.otp-benefits {
    margin: 20px 0 0;
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(180deg, #f0f9ff, #f8fbff);
    border: 1px solid #d7e9f7;
    border-radius: 12px;
}

.otp-benefits__head {
    margin: 0 0 8px;
    font-size: .84rem;
    font-weight: 800;
    color: #0b4f9f;
    display: flex;
    align-items: center;
    gap: 7px;
}

.otp-benefits__list { margin: 0; padding-left: 18px; }

.otp-benefits__list li {
    margin: 0 0 5px;
    color: #41576f;
    font-size: .82rem;
    line-height: 1.45;
}

.otp-benefits__list li:last-child { margin-bottom: 0; }
.otp-benefits__list strong { color: #10213d; }

/* Bottom-right help link, as a quiet escape hatch that does not dismiss the dialog. */
.otp-verify__help {
    display: block;
    margin: 12px 0 0;
    text-align: right;
    font-size: .8rem;
    font-weight: 700;
    color: #0d477d;
    text-decoration: none;
}

.otp-verify__help:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- small screens ---------- */
@media (max-width: 480px) {
    .lead-flow__pane { padding: 26px 18px 20px; }
    .lead-popup__card { padding: 26px 18px 20px; }

    .otp-verify__box { width: 40px; height: 48px; font-size: 1.15rem; flex: 0 1 40px; }
    .otp-verify__boxes { gap: 6px; }
    .otp-benefits__list li { font-size: .78rem; }
    .lead-result__actions { flex-direction: column; }
    .lead-result__btn { width: 100%; }
}

/* Respect a user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .lead-flow, .lead-popup,
    .lead-flow__card, .lead-popup__card,
    .lead-flow__track, .lead-flow__viewport { transition: none; }
}

/* ---------------------------------------------------------------- consent line -----------
   Rendered by _LeadConsent.cshtml, directly above the submit button on all five lead forms.

   Every property is stated explicitly rather than inherited, because these forms live on
   pages with very different stylesheets (contact.css, admission-apply.css, the inline CSS in
   AdmissionProcess, plus the drawer and popup). Without that the same markup renders four
   different ways. Scoped under .pgi-consent so it cannot leak into page styles either. */
.pgi-consent {
    /* This is a <label>, and every page it lands on restyles labels differently:
         .page label        (admission-apply)  block, its own margins
         .form-field label  (style.css)        bold, block, margin-bottom
         .field label       (contact.css)      its own sizing
         .form-group label  (AdmissionProcess) UPPERCASE, 12px, letter-spaced, white
       All of those outrank a single class, and page stylesheets load AFTER this file via
       @section Styles - so without !important the same markup renders four different ways,
       and on the admission-process form the whole sentence renders in capitals.
       These are marked important to keep ONE consent line across the whole site. */
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 18px 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #5e6d83 !important;
    cursor: pointer;
}

.pgi-consent input[type="checkbox"] {
    /* Pages impose sweeping input rules - admission-apply.css alone sets
       `.page input { width:100%; min-height:47px; border:1px solid }`, which wrapped this
       16px checkbox in a 47px bordered rectangle. Resetting only width/height was not
       enough: every box-model property a page might set has to be neutralised, and the
       geometry ones are !important because a page stylesheet loads AFTER this file
       (via @section Styles) and would otherwise win any specificity tie. */
    -webkit-appearance: checkbox;
    appearance: checkbox;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    outline: none;
    accent-color: #b0253a;
    cursor: pointer;
    vertical-align: top;
}

.pgi-consent span {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-consent:hover span { color: #41576f; }

/* On the dark-panelled admission-process form the default ink is unreadable. */
.doc-form-card .pgi-consent,
.doc-form-card .pgi-consent span { color: rgba(255, 255, 255, .78) !important; }
.doc-form-card .pgi-consent:hover span { color: rgba(255, 255, 255, .95) !important; }

/* The popup is the tightest layout - shave it slightly so the card does not grow. */
.lead-popup__form .pgi-consent { margin: 10px 0 6px !important; font-size: 11.5px !important; }

@media (max-width: 480px) {
    .pgi-consent { font-size: 11.5px !important; gap: 8px !important; }
}

/* =========================================================================================
   INLINE VERIFICATION  (forms marked data-inline-otp)
   -----------------------------------------------------------------------------------------
   The form keeps its own design all the way down to the consent line. The code block simply
   sits between the consent and the button, so the step reads as part of the form rather than
   a takeover. The ONLY thing that ever covers the form is the duplicate card, and that is
   clipped to the form's own radius over a light blur.
   ========================================================================================= */
.has-inline-otp { position: relative; }

/* ---------------------------------------------------------------- the code block --------- */
.pgi-otp { margin: 4px 0 14px !important; padding: 0 !important; text-align: center; }
.pgi-otp[hidden] { display: none; }

.pgi-otp__lead {
    margin: 0 0 10px !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #5e6d83 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-otp__lead b { color: #10213d; white-space: nowrap; }

.pgi-otp__boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 9px !important;
    padding: 0 !important;
}

/* Same neutralising as the consent checkbox: these sit on pages whose stylesheets set
   sweeping rules on every input. */
.pgi-otp__box {
    width: 44px !important;
    height: 50px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    flex: 0 1 44px;
    padding: 0 !important;
    text-align: center;
    font-family: inherit;
    font-size: 1.25rem !important;
    font-weight: 800;
    color: #0f172a !important;
    background: #fff !important;
    border: 2px solid #dbe5ef !important;
    border-radius: 11px !important;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.pgi-otp__box:focus { border-color: #0d477d !important; box-shadow: 0 0 0 3px rgba(13,71,125,.14) !important; }
.pgi-otp__box.is-filled { border-color: #0d477d !important; }
.pgi-otp__box.is-error { border-color: #e11d2a !important; background: #fff6f6 !important; }
.pgi-otp__box:disabled { background: #f1f5f9 !important; color: #94a3b8 !important; }

.pgi-otp__msg {
    min-height: 16px;
    margin: 0 0 8px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: transparent;
    line-height: 1.4;
}

.pgi-otp__msg.is-error   { color: #e11d2a !important; }
.pgi-otp__msg.is-ok      { color: #16a34a !important; }
.pgi-otp__msg.is-notice  { color: #b45309 !important; }
.pgi-otp__msg.is-working { color: #0b4f9f !important; }

.pgi-otp__resend {
    margin: 0 !important;
    font-size: .8rem !important;
    color: #64748b !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-otp__resend-btn {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: #0d477d;
    text-decoration: underline;
    cursor: pointer;
}

.pgi-otp__resend-btn:disabled { color: #94a3b8; cursor: not-allowed; text-decoration: none; }

/* Revealed only when someone tries to leave mid-verification. */
.pgi-otp__why {
    margin: 12px 0 0 !important;
    padding: 12px 14px !important;
    text-align: left;
    background: linear-gradient(180deg, #f0f9ff, #f8fbff);
    border: 1px solid #d7e9f7;
    border-radius: 11px;
    animation: pgi-why-in .28s ease both;
}

.pgi-otp__why[hidden] { display: none; }

@keyframes pgi-why-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pgi-otp__why-head {
    margin: 0 0 7px !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    color: #0b4f9f !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-otp__why-list { margin: 0 !important; padding: 0 0 0 17px !important; }
.pgi-otp__why-list li { margin: 0 0 4px !important; padding: 0 !important; font-size: .78rem; line-height: 1.45; color: #41576f; }
.pgi-otp__why-list li:last-child { margin-bottom: 0; }
.pgi-otp__why-list strong { color: #10213d; }

/* A short shake when they try to leave - noticed, not punishing. */
.pgi-otp.is-nudging { animation: pgi-nudge .45s ease; }
@keyframes pgi-nudge {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
}

/* ---------------------------------------------------------------- duplicate card --------- */
.pgi-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px !important;
    border-radius: inherit;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    animation: pgi-cover-in .25s ease both;
}

.pgi-cover[hidden] { display: none; }

@keyframes pgi-cover-in { from { opacity: 0; } to { opacity: 1; } }

.pgi-cover__card {
    width: 100%;
    max-width: 320px;
    text-align: center;
    background: #fff;
    border: 1px solid #dbe8f5;
    border-radius: 14px;
    padding: 22px 20px !important;
    box-shadow: 0 16px 40px rgba(8, 20, 40, .16);
}

.pgi-cover__icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    background: #d97706;
}

.pgi-cover.is-success .pgi-cover__icon { background: #16a34a; }

.pgi-cover__title {
    margin: 0 0 6px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #10213d !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-cover.is-success .pgi-cover__title { color: #16a34a !important; }

.pgi-cover__text {
    margin: 0 !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #5e6d83 !important;
    text-wrap: pretty;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pgi-cover__btn {
    display: inline-block;
    margin: 14px 6px 0 !important;
    padding: 10px 20px !important;
    border: 0;
    border-radius: 10px;
    background: #0d477d;
    color: #fff;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.pgi-cover__btn:hover { background: #0a365f; transform: translateY(-1px); color: #fff; }
.pgi-cover__btn[hidden] { display: none; }
.pgi-cover__btn--portal { background: #16a34a; }
.pgi-cover__btn--portal:hover { background: #128038; }

/* No way out of the drawer while a code is outstanding. */
.drawer.is-locked .drawer__close { display: none; }

/* ---------------------------------------------------------------- per-form fitting --------
   The five forms sit on very different surfaces, so the verification block adapts rather than
   imposing one look. Only colour and scale change; the structure and behaviour are identical
   everywhere. */

/* --- the auto-popup: a tight 440px card, so everything shrinks a notch --- */
.lead-popup__form .pgi-otp { margin: 2px 0 10px; }
.lead-popup__form .pgi-otp__lead { font-size: .78rem !important; margin-bottom: 8px !important; }
.lead-popup__form .pgi-otp__box { width: 40px !important; height: 46px !important; flex: 0 1 40px; font-size: 1.1rem !important; }
.lead-popup__form .pgi-otp__boxes { gap: 7px; margin-bottom: 7px; }
.lead-popup__form .pgi-otp__resend,
.lead-popup__form .pgi-otp__msg { font-size: .75rem !important; }
.lead-popup__form .pgi-otp__why { padding: 10px 12px; }
.lead-popup__form .pgi-otp__why-list li { font-size: .74rem; }
.lead-popup .lead-popup__card { position: relative; }
.lead-popup.is-locked .lead-popup__close { display: none; }

/* --- the admission-process panel: white text on a near-black surface ---
   Without this the block would render its light-theme greys on a dark card and be unreadable.
   Colours are taken from that page's own palette (--dark / --gold / --red-light). */
.doc-form-card .pgi-otp__lead { color: rgba(255, 255, 255, .72) !important; }
.doc-form-card .pgi-otp__lead b { color: #fff; }

.doc-form-card .pgi-otp__box {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .26) !important;
    color: #fff !important;
}

.doc-form-card .pgi-otp__box:focus { border-color: #d63049 !important; box-shadow: 0 0 0 3px rgba(176, 37, 58, .3) !important; }
.doc-form-card .pgi-otp__box.is-filled { border-color: #E8A020 !important; }
.doc-form-card .pgi-otp__box.is-error { border-color: #d63049 !important; background: rgba(214, 48, 73, .12) !important; }
.doc-form-card .pgi-otp__box:disabled { background: rgba(255, 255, 255, .05) !important; color: rgba(255, 255, 255, .4) !important; }

.doc-form-card .pgi-otp__resend { color: rgba(255, 255, 255, .6) !important; }
.doc-form-card .pgi-otp__resend-btn { color: #E8A020; }
.doc-form-card .pgi-otp__resend-btn:disabled { color: rgba(255, 255, 255, .35); }
.doc-form-card .pgi-otp__msg.is-working { color: #9fc6f0 !important; }
.doc-form-card .pgi-otp__msg.is-ok { color: #4ade80 !important; }
.doc-form-card .pgi-otp__msg.is-error { color: #ff8290 !important; }
.doc-form-card .pgi-otp__msg.is-notice { color: #E8A020 !important; }

.doc-form-card .pgi-otp__why {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

.doc-form-card .pgi-otp__why-head { color: #E8A020 !important; }
.doc-form-card .pgi-otp__why-list li { color: rgba(255, 255, 255, .7); }
.doc-form-card .pgi-otp__why-list strong { color: #fff; }

.doc-form-card .pgi-cover { background: rgba(15, 17, 23, .55); }

.doc-form-card .pgi-cover__card {
    background: #1a1f2e;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.doc-form-card .pgi-cover__title { color: #fff !important; }
.doc-form-card .pgi-cover__text { color: rgba(255, 255, 255, .68) !important; }
.doc-form-card .pgi-cover.is-success .pgi-cover__title { color: #4ade80 !important; }
.doc-form-card .pgi-cover__btn { background: #B0253A; }
.doc-form-card .pgi-cover__btn:hover { background: #8B1527; }

/* --- the admission register: that page sets sweeping rules on every input --- */
.page .pgi-otp__box { min-height: 0 !important; }

@media (max-width: 480px) {
    .pgi-otp__box { width: 40px !important; height: 46px !important; flex: 0 1 40px; font-size: 1.1rem !important; }
    .pgi-otp__boxes { gap: 5px; }
    /* Narrow cards (the sticky admission-process panel) get a floor so the row never
       collapses to something unusable when it has to shrink. */
    .pgi-otp__box { min-width: 34px !important; }
    .pgi-cover__card { padding: 18px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pgi-otp.is-nudging, .pgi-otp__why, .pgi-cover { animation: none; }
}