/* ============================================================================
   application-form.css — rules specific to the public notification page
   (resources/views/web/application/create.blade.php).

   Load after the theme files. Everything shared lives in
   dashboard/css/theme/components.css; only what is genuinely unique to this
   page belongs here, and it still uses the design tokens rather than raw hex.
   ========================================================================== */

/* The submit block that closes the registration form. */
.iitd-submit {
    background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 100%);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-lg);
    padding: 26px 20px 20px;
    margin-top: 28px;
    text-align: center;
}
.iitd-submit .iitd-submit-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 auto 18px;
    max-width: 52ch;
    text-align: start;
}
.iitd-submit .iitd-submit-note i { color: var(--brand); margin-top: 2px; flex: 0 0 auto; }
.iitd-submit .iitd-cta { max-width: 420px; margin-inline: auto; }
.iitd-submit .iitd-terms { font-size: 12.5px; color: var(--ink-mute); margin: 14px 0 0; }
.iitd-submit .iitd-terms a { color: var(--brand); font-weight: 600; }

/* Conditional blocks the form reveals (long residence, OCI/PIO, national
   service). Hidden by default; JavaScript fades them in. */
.iitd-conditional { display: none; }

/* Field-level validation hint repeated under every required control. */
.iitd-card .invalid-feedback { font-weight: 500; }

/* The date-of-birth control keeps the native picker but loses the spinner
   padding that makes it sit taller than its neighbours. */
.iitd-card input[type="date"].form-control { padding-block: 9px; }

/* Important-dates list inside the aside: one row per milestone.

   The label and the date are deliberately far apart in weight, size and
   colour — a small muted caption over a large near-black date — so the eye
   lands on the date first and the caption reads as a caption. The source
   markup is `<b>Label:</b><br>date`, so the date is a bare text node and the
   row itself carries the date styling. */
.iitd-milestones { list-style: none; margin: 0; padding: 0; }
.iitd-milestones li {
    padding: 12px 22px;
    border-bottom: 1px dashed var(--line);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.iitd-milestones li:last-child { border-bottom: none; }
.iitd-milestones li:nth-child(odd) { background: rgba(0, 0, 0, .012); }
.iitd-milestones b {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1px;
    line-height: 1.4;
}
/* The <br> after the label would add a blank line on top of the block
   label's own line box; collapse it. */
.iitd-milestones b + br { display: none; }
.iitd-milestones span { color: inherit; }
[dir="rtl"] .iitd-milestones li,
[dir="rtl"] .iitd-milestones span { unicode-bidi: plaintext; }