/* ==========================================================================
   NDP inline auth card — scoped under .ndp-shell
   Exact replica of ndp-apply.html Step 1 design
   ========================================================================== */

.ndp-shell {
    --ndp-navy:        #132A6B;
    --ndp-navy-deep:   #0E1F52;
    --ndp-ink:         #141821;
    --ndp-muted:       #6B7385;
    --ndp-orange:      #E2703A;
    --ndp-orange-dark: #C95C29;
    --ndp-orange-soft: #FDF1EA;
    --ndp-line:        #E6E9F0;
    --ndp-field-bg:    #F2F3F5;
    --ndp-shell-bg:    #F7F7F8;
    --ndp-r:           14px;
    --ndp-ease:        cubic-bezier(.22,.61,.36,1);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.ndp-shell {
    background:    var(--ndp-shell-bg);
    border-radius: var(--ndp-r);
    padding:       34px 40px 40px;
}

.ndp-shell__lead {
    font-size:   15px;
    font-weight: 600;
    margin:      0 0 12px;
    color:       var(--ndp-ink);
}

.ndp-shell__note {
    font-size:   14px;
    color:       var(--ndp-muted);
    margin:      0 0 30px;
    max-width:   96ch;
    line-height: 1.6;
}

/* ── Stepbar ─────────────────────────────────────────────────────────────── */
.ndp-shell .ndp-stepbar {
    display:       grid;
    gap:           0;
    margin-bottom: 34px;
}

.ndp-shell .ndp-stepbar[data-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.ndp-shell .ndp-stepbar__item {
    padding:     16px 4px 0;
    border-top:  2px solid #D9DCE4;
    display:     flex;
    align-items: center;
    gap:         11px;
    transition:  .2s var(--ndp-ease);
}

.ndp-shell .ndp-stepbar__item i {
    width:         22px;
    height:        22px;
    border-radius: 50%;
    flex:          none;
    display:       grid;
    place-items:   center;
    font-style:    normal;
    font-size:     11.5px;
    font-weight:   700;
    background:    #D9DCE4;
    color:         #fff;
    transition:    .2s var(--ndp-ease);
}

.ndp-shell .ndp-stepbar__item span {
    font-size:   14px;
    color:       var(--ndp-muted);
    font-weight: 500;
}

.ndp-shell .ndp-stepbar__item.is-active {
    border-top-color: var(--ndp-navy);
}

.ndp-shell .ndp-stepbar__item.is-active i {
    background: var(--ndp-navy);
}

.ndp-shell .ndp-stepbar__item.is-active span {
    color:       var(--ndp-ink);
    font-weight: 600;
}

.ndp-shell .ndp-stepbar__item.is-done {
    border-top-color: var(--ndp-orange);
}

.ndp-shell .ndp-stepbar__item.is-done i {
    background: var(--ndp-orange);
}

/* ── Alert ───────────────────────────────────────────────────────────────── */
.ndp-shell .admission-auth-alert {
    display:       none;
    margin:        0 0 22px;
    padding:       11px 14px;
    background:    #FCEEEB;
    border:        1px solid #F3D3C1;
    border-radius: 9px;
    font-size:     13.5px;
    color:         #8A4423;
    line-height:   1.5;
}

.ndp-shell .admission-auth-alert.is-visible {
    display: block;
}

/* ── Hidden tab bar ──────────────────────────────────────────────────────── */
.ndp-shell .ndp-tabs-sr {
    position: absolute !important;
    width:    1px      !important;
    height:   1px      !important;
    overflow: hidden   !important;
    clip:     rect(0,0,0,0) !important;
    border:   0        !important;
    padding:  0        !important;
    margin:   0        !important;
}

/* ── Panel show / hide ───────────────────────────────────────────────────── */
.ndp-shell .admission-auth-panel {
    display: none;
}

.ndp-shell .admission-auth-panel.is-active {
    display:   block;
    animation: ndp-shell-in .22s var(--ndp-ease);
}

@keyframes ndp-shell-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.ndp-shell .ndp-label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    margin-bottom: 9px;
    color:         var(--ndp-ink);
}

.ndp-shell .ndp-label em {
    color:      var(--ndp-orange);
    font-style: normal;
}

/* ── Field group ─────────────────────────────────────────────────────────── */
.ndp-shell .ndp-fgroup {
    margin-bottom: 22px;
}

/* ── Phone field (intl-tel-input wrapper) ─────────────────────────────────── */
.ndp-shell .mobile-field {
    width:    100%;
    display:  block;
    position: relative;
    overflow: visible;
}

/* Pre-ITI: raw input must be borderless/transparent so only extraDiv shows as the box */
.ndp-shell .extraDiv > input.phone_number {
    display:              block       !important;
    width:                100%        !important;
    height:               52px        !important;
    border:               none        !important;
    outline:              none        !important;
    background:           transparent !important;
    box-shadow:           none        !important;
    padding:              0 12px 0 14px !important;
    box-sizing:           border-box;
    font:                 inherit;
    color:                var(--ndp-ink);
}

.ndp-shell .extraDiv {
    width:         100%;
    display:       block;
    position:      relative;
    overflow:      visible;
    height:        52px;
    background:    var(--ndp-field-bg);
    border:        1px solid var(--ndp-line);
    border-radius: 8px;
    transition:    border-color .16s var(--ndp-ease),
                   box-shadow   .16s var(--ndp-ease);
}

.ndp-shell .extraDiv:focus-within {
    border-color: var(--ndp-orange);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(226,112,58,.14);
}

.ndp-shell .mobile-field.is-ok    .extraDiv { border-color: #BFE4CE; }
.ndp-shell .mobile-field.is-error .extraDiv { border-color: #F3B9AE; }

/* ITI root — fills the extraDiv exactly */
.ndp-shell .iti {
    width:    100% !important;
    display:  block !important;
    position: relative !important;
    overflow: visible !important;
    height:   52px !important;
}

/* Flag-container spans the full field width so the dropdown can
   use 100% of it; pointer-events:none so clicks on the number
   area fall through to the input. */
.ndp-shell .iti__flag-container {
    position:        absolute !important;
    top:             0        !important;
    bottom:          auto     !important;
    height:          100%     !important;
    left:            0        !important;
    right:           auto     !important;
    inset-inline-start: 0     !important;
    inset-inline-end:   auto  !important;
    min-width:       0        !important;
    width:           100%     !important;
    margin:          0        !important;
    padding:         0        !important;
    z-index:         6        !important;
    display:         flex     !important;
    align-items:     center   !important;
    cursor:          pointer  !important;
    pointer-events:  none     !important;
}

/* The actual clickable chip (flag + dial code) */
.ndp-shell .iti--separate-dial-code .iti__selected-flag,
.ndp-shell .iti__selected-flag {
    height:           100%        !important;
    min-width:        0           !important;
    width:            auto        !important;
    padding:          0 4px 0 14px !important;
    display:          flex        !important;
    align-items:      center      !important;
    justify-content:  flex-start  !important;
    background-color: transparent !important;
    border-radius:    8px 0 0 8px !important;
    box-sizing:       border-box;
    cursor:           pointer     !important;
    pointer-events:   auto        !important;
}

/* Dial code text */
.ndp-shell .iti__selected-dial-code {
    position:        static      !important;
    margin-inline-start: 8px    !important;
    padding:         0           !important;
    font-size:       14px        !important;
    font-weight:     600;
    color:           var(--ndp-ink) !important;
    line-height:     1           !important;
    white-space:     nowrap;
}

/* Remove the fake "⌵" glyph injected by a global unscoped site rule */
.ndp-shell .iti__selected-dial-code::after {
    content: none    !important;
    display: none    !important;
}

.ndp-shell .iti__arrow {
    display:             inline-block !important;
    margin-inline-start: 6px         !important;
    border-top-color:    var(--ndp-muted);
}

.ndp-shell .iti__flag { flex-shrink: 0; }

/* Show placeholder (a global rule hides it on .iti inputs) */
.ndp-shell .iti input::placeholder {
    display:  block   !important;
    color:    var(--ndp-muted) !important;
    opacity:  1       !important;
}

/* The number input — left padding makes room for flag + dial code */
.ndp-shell .iti input.phone_number,
.ndp-shell .iti input[type="tel"],
.ndp-shell .iti__flag-container + input[type="tel"] {
    position:              relative            !important;
    z-index:               1                  !important;
    width:                 100%               !important;
    height:                52px               !important;
    font:                  inherit            !important;
    color:                 var(--ndp-ink)     !important;
    box-sizing:            border-box         !important;
    border:                none               !important;
    background:            transparent        !important;
    border-radius:         0                  !important;
    box-shadow:            none               !important;
    outline:               none               !important;
    padding-top:           0                  !important;
    padding-bottom:        0                  !important;
    padding-inline-start:  120px              !important;
    padding-inline-end:    12px               !important;
}

/* Dropdown */
.ndp-shell .iti__country-list {
    z-index:       9999        !important;
    position:      absolute    !important;
    top:           100%        !important;
    left:          0           !important;
    max-height:    220px       !important;
    width:         100%        !important;
    min-width:     260px       !important;
    overflow-y:    auto        !important;
    overflow-x:    hidden      !important;
    white-space:   nowrap;
    border-radius: 8px         !important;
    border:        1px solid var(--ndp-line) !important;
    background:    #fff        !important;
    box-shadow:    0 10px 28px rgba(0,0,0,.18) !important;
    text-align:    left;
    pointer-events: auto       !important;
}

.ndp-shell .iti__country-list .iti__country {
    pointer-events: auto !important;
}

/* ── Notice (no-account) ─────────────────────────────────────────────────── */
.ndp-shell .ndp-notice {
    display:       flex;
    gap:           12px;
    align-items:   flex-start;
    margin:        0 0 26px;
    padding:       14px 16px;
    background:    var(--ndp-orange-soft);
    border:        1px solid #F3D3C1;
    border-radius: 9px;
    font-size:     13.5px;
    color:         #8A4423;
    line-height:   1.55;
}

/* ── Register sub-step stepper ───────────────────────────────────────────── */
.ndp-shell .ndp-reg-stepper {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 22px;
}

.ndp-shell .ndp-reg-step {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   13px;
    color:       var(--ndp-muted);
    font-weight: 500;
    white-space: nowrap;
}

.ndp-shell .ndp-reg-step.current { color: var(--ndp-ink); }
.ndp-shell .ndp-reg-step.done    { color: var(--ndp-ink); }

.ndp-shell .ndp-reg-dot {
    width:         22px;
    height:        22px;
    border-radius: 50%;
    background:    #D9DCE4;
    color:         #fff;
    font-size:     11.5px;
    font-weight:   700;
    display:       grid;
    place-items:   center;
    flex-shrink:   0;
    transition:    background .2s var(--ndp-ease);
}

.ndp-shell .ndp-reg-step.current .ndp-reg-dot { background: var(--ndp-navy); }
.ndp-shell .ndp-reg-step.done    .ndp-reg-dot { background: var(--ndp-orange); }

.ndp-shell .ndp-reg-step-line {
    flex:          1;
    height:        2px;
    background:    #D9DCE4;
    border-radius: 2px;
    min-width:     16px;
}

/* ── OTP boxes ───────────────────────────────────────────────────────────── */
.ndp-shell .ndp-otp {
    display: flex;
    gap:     10px;
}

.ndp-shell .ndp-otp input {
    width:         56px;
    height:        60px;
    text-align:    center;
    font-size:     22px;
    font-weight:   600;
    padding:       0;
    background:    #fff;
    border:        1.5px solid #DFE2EA;
    border-radius: 8px;
    outline:       none;
    font-family:   inherit;
    transition:    border-color .14s var(--ndp-ease), background .14s;
}

.ndp-shell .ndp-otp input:not(:placeholder-shown) {
    border-color: var(--ndp-orange);
    background:   var(--ndp-orange-soft);
}

/* ── Sent / resend / hint / helper ──────────────────────────────────────── */
.ndp-shell .ndp-sent {
    font-size:   13.5px;
    color:       var(--ndp-muted);
    margin:      0 0 20px;
    line-height: 1.55;
}

.ndp-shell .ndp-resend {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-top:  16px;
    font-size:   13.5px;
    color:       var(--ndp-muted);
}

.ndp-shell .ndp-hint {
    font-size:   13.5px;
    color:       var(--ndp-muted);
    margin:      16px 0 0;
}

.ndp-shell .ndp-helper {
    font-size: 13.5px;
    color:     #1E8B4D;
    margin:    8px 0 0;
}

/* ── Link button ─────────────────────────────────────────────────────────── */
.ndp-shell .ndp-linkbtn {
    background:            none;
    border:                0;
    padding:               0;
    font:                  inherit;
    font-size:             13.5px;
    color:                 var(--ndp-orange);
    font-weight:           600;
    text-decoration:       underline;
    text-underline-offset: 3px;
    cursor:                pointer;
}

.ndp-shell .ndp-linkbtn:disabled {
    color:           #AEB4C2;
    cursor:          default;
    text-decoration: none;
}

/* ── Back button ─────────────────────────────────────────────────────────── */
.ndp-shell .ndp-back {
    background:    none;
    border:        0;
    color:         var(--ndp-muted);
    font:          inherit;
    font-weight:   600;
    font-size:     13.5px;
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       0;
    margin-bottom: 18px;
    cursor:        pointer;
    transition:    color .14s;
}

.ndp-shell .ndp-back:hover { color: var(--ndp-ink); }

/* ── Actions ─────────────────────────────────────────────────────────────── */
.ndp-shell .ndp-actions {
    display:    flex;
    gap:        14px;
    margin-top: 34px;
    flex-wrap:  wrap;
}

/* ── Field inputs & selects ──────────────────────────────────────────────── */
.ndp-shell .ndp-field {
    width:          100%;
    height:         52px;
    padding:        0 16px;
    background:     var(--ndp-field-bg);
    border:         1px solid transparent;
    border-radius:  8px;
    font:           inherit;
    font-size:      14px;
    color:          var(--ndp-ink);
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color .16s var(--ndp-ease),
                    box-shadow   .16s var(--ndp-ease),
                    background   .16s;
    -webkit-appearance: none;
    appearance:     none;
}

.ndp-shell .ndp-field:focus {
    border-color: var(--ndp-orange);
    background:   #fff;
    box-shadow:   0 0 0 3px rgba(226,112,58,.14);
}

.ndp-shell .ndp-field--select {
    background-image:    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5l3-3' stroke='%236B7385' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 16px center;
    background-size:     13px;
    padding-right:       42px;
}

/* ── Input + action button row ───────────────────────────────────────────── */
.ndp-shell .ndp-input-action {
    display: flex;
    gap:     10px;
}

.ndp-shell .ndp-input-action .ndp-field {
    flex:      1;
    min-width: 0;
}

/* ── Profile form grid ───────────────────────────────────────────────────── */
.ndp-shell .ndp-form-grid {
    display:               grid;
    grid-template-columns: 90px 1fr 1fr;
    gap:                   14px 16px;
    margin-bottom:         16px;
}

.ndp-shell .ndp-form-grid .ndp-fgroup { margin: 0; }
.ndp-shell .ndp-fgroup--full          { grid-column: 1 / -1; }

/* ── Terms ───────────────────────────────────────────────────────────────── */
.ndp-shell .ndp-terms {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   14px;
    cursor:      pointer;
    margin:      4px 0 20px;
    line-height: 1.5;
}

.ndp-shell .ndp-terms input { flex-shrink: 0; margin-top: 3px; }
.ndp-shell .ndp-terms a     { color: var(--ndp-orange); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ndp-shell .ndp-btn {
    height:          52px;
    padding:         0 38px;
    border-radius:   999px;
    border:          1.5px solid transparent;
    font:            inherit;
    font-weight:     600;
    font-size:       14.5px;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    transition:      background   .16s var(--ndp-ease),
                     border-color .16s var(--ndp-ease);
    white-space:     nowrap;
}

.ndp-shell .ndp-btn--primary {
    background:   var(--ndp-orange);
    color:        #fff;
    border-color: var(--ndp-orange);
}

.ndp-shell .ndp-btn--primary:hover    { background: var(--ndp-orange-dark); border-color: var(--ndp-orange-dark); }
.ndp-shell .ndp-btn--primary:disabled { background: #D6D9E0; border-color: #D6D9E0; color: #fff; cursor: not-allowed; }

.ndp-shell .ndp-btn--ghost {
    background:   #fff;
    border-color: var(--ndp-orange);
    color:        var(--ndp-orange);
}

.ndp-shell .ndp-btn--ghost:hover    { background: var(--ndp-orange-soft); }
.ndp-shell .ndp-btn--ghost:disabled { border-color: #D6D9E0; color: #9AA1B1; cursor: not-allowed; }

.ndp-shell .ndp-btn--sm {
    height:    44px;
    padding:   0 20px;
    font-size: 13.5px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ndp-shell {
        padding: 24px 18px 30px;
    }

    .ndp-shell .ndp-stepbar[data-count="3"] {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

@media (max-width: 640px) {
    .ndp-shell .ndp-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ndp-shell .ndp-fgroup--title {
        grid-column: 1 / -1;
    }

    .ndp-shell .ndp-otp input {
        flex:      1;
        width:     0;
        min-width: 46px;
        height:    54px;
        font-size: 19px;
    }

    .ndp-shell .ndp-actions .ndp-btn {
        flex:    1;
        padding: 0 20px;
    }

    .ndp-shell .ndp-input-action {
        flex-direction: column;
    }

    .ndp-shell .ndp-input-action .ndp-btn {
        width: 100%;
    }
}

/* ── Narrow pane (login panel) ───────────────────────────────────────────── */
.ndp-shell .ndp-pane--narrow {
    max-width: 520px;
}

/* ── Register sub-stepper: JS toggles is-active / is-done ────────────────── */
.ndp-shell .ndp-reg-step.is-active              { color: var(--ndp-ink); }
.ndp-shell .ndp-reg-step.is-done                { color: var(--ndp-ink); }
.ndp-shell .ndp-reg-step.is-active .ndp-reg-dot { background: var(--ndp-navy); }
.ndp-shell .ndp-reg-step.is-done   .ndp-reg-dot { background: var(--ndp-orange); }