/* ============================================================================
   enrollment-campaign.css  —  Grozdober 2026 campaign reskin for /enroll
   ----------------------------------------------------------------------------
   PURPOSE
   The enrolment form is an AdminLTE back-office page. Its header gradient is
   AdminLTE's default blue, rgba(60,141,188,.8), which is the single biggest
   reason the form looks unrelated to maksimaedu.mk. This file repaints it in
   the public site's palette and type. It changes NOTHING else.

   ⚠️ LOAD ORDER IS LOad-BEARING.
   SignUp.cshtml carries an inline <style> block (lines ~25-222) that defines
   almost every selector below: .enrollment-container, .enrollment-header,
   .school-logo, .welcome-text, .enrollment-body, .form-control, .btn-submit,
   .checkbox-group, .input-group-text, .form-group, .text-danger, and its own
   @media (max-width:768px). This file MUST be linked AFTER that </style>,
   immediately before </head>. Linked next to adminlte.min.css it would sit
   BEFORE the inline block, lose on document order, and do almost nothing.

   SCOPE — deliberately colour, type and spacing only. No structural CSS, no
   display/position changes except the two noted below, both of which are
   required rather than cosmetic:
     * body            : flex -> block. The inline rule centres a single flex
                         child; with a taller campaign header that traps the
                         page. Block flow + auto margins is what the container
                         rules below assume.
     * html, body      : height:100% -> min-height:100%, so a form longer than
                         the viewport scrolls instead of being clipped.

   Palette and fonts are lifted from wwwroot/site/css/style.css and
   _SiteLayout.cshtml so the two properties actually match rather than merely
   look similar. Verified 2026-09-03 against those files.

   NOT overridden, on purpose: .program-highlight, .datetimepicker-input,
   #dobDatePicker and .welcome-text ul/li are declared in the inline block but
   appear NOWHERE in the markup. Overriding dead rules adds noise and no pixels.
   The date-of-birth control is a plain .form-control inside an .input-group,
   so it is reskinned by the rules below like every other field.

   REVERTING: delete the <link> in SignUp.cshtml. Nothing else references this
   file, and the inline block is untouched, so the form returns to exactly its
   pre-campaign appearance.
   ========================================================================= */

:root {
    --mx-purple: #5b217a; /* site --pur    */
    --mx-purple-dark: #3e1454; /* site --pur-d  */
    --mx-purple-light: #7c3aa5; /* site --pur-l  */
    --mx-gold: #e8a32b; /* site --gold   */
    --mx-gold-light: #f7c960; /* site --gold-l */
    --mx-cream: #fffbf4; /* site --cream  */
    --mx-ink: #2a1338; /* site --ink    */
    --mx-muted: #6f6278;
    --mx-border: #e9ddf0;
}

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

html,
body {
    min-height: 100%;
    height: auto;
}

body {
    display: block;
    padding: 32px 18px;
    background:
        radial-gradient(circle at 10% 10%, #eedffb 0, transparent 32%),
        radial-gradient(circle at 90% 25%, #ffe6c4 0, transparent 30%),
        var(--mx-cream);
    color: var(--mx-ink);
    font-family: "Manrope", "Source Sans Pro", "Segoe UI", sans-serif;
}

/* The form's outer wrapper is a direct child of body. Scoped with > so it
   cannot leak onto any nested .container. */
body > .container {
    width: 100%;
    max-width: 1000px;
    padding-inline: 16px;
}

/* ---- card -------------------------------------------------------------- */

.enrollment-container {
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(91, 33, 122, .09);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 30px 80px -35px rgba(62, 20, 84, .42);
}

/* ---- header ------------------------------------------------------------ */

.enrollment-header {
    min-height: auto;
    padding: 54px 40px 36px;
    background:
        linear-gradient(135deg, rgba(62, 20, 84, .94), rgba(91, 33, 122, .88)),
        url("/images/school-bg-blur.png") center / cover;
}

    .enrollment-header h2 {
        margin-bottom: 16px !important;
        color: #fff;
        font-family: "Onest", sans-serif;
        font-size: clamp(1.9rem, 5vw, 2.8rem);
        font-weight: 800;
        letter-spacing: -.035em;
    }

.welcome-text {
    max-width: 650px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, .88);
}

    .welcome-text strong {
        color: var(--mx-gold-light);
    }

/* The inline block pins the logo with top:0 !important, so this needs the
   same weapon to move it.

   The filter is not decoration. logo_small_transparent.png is a dark magenta
   wordmark drawn for AdminLTE's mid-blue header; on this darker purple it is
   very nearly invisible. brightness(0) flattens it to black and invert(1)
   lifts it to white, which is the normal treatment for a wordmark on a dark
   ground. Done in CSS rather than by swapping the img src so the whole reskin
   still reverts by deleting one <link>. */
.school-logo {
    top: 16px !important;
    left: 24px;
    width: auto;
    height: 58px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .95;
}

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

.enrollment-body {
    padding: 38px 42px;
}

.control-label,
label.control-label {
    margin-bottom: 8px;
    color: var(--mx-ink);
    font-family: "Onest", sans-serif;
    font-weight: 700;
}

.form-group {
    margin-bottom: 24px;
}

.form-control {
    min-height: 50px;
    border: 2px solid var(--mx-border);
    border-radius: 13px;
    background: #fcfafe;
    color: var(--mx-ink);
    font-family: "Manrope", sans-serif;
}

    .form-control:focus {
        border-color: var(--mx-purple-light);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(91, 33, 122, .11);
    }

    .form-control::placeholder {
        color: var(--mx-muted);
        opacity: .75;
    }

.input-group-text {
    min-width: 44px;
    justify-content: center;
    border: 2px solid var(--mx-border);
    border-right: 0;
    border-radius: 13px 0 0 13px;
    background: #f5edf9;
    color: var(--mx-purple);
}

/* An .input-group pairs a prepend with a .form-control; square off the join so
   the two 13px radii do not fight in the middle. */
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-text.text-muted {
    color: var(--mx-muted) !important;
}

/* ---- course / discount selection --------------------------------------- */

.checkbox-group {
    padding: 20px;
    border: 2px solid var(--mx-border);
    border-radius: 16px;
    background: #fcfafe;
}

/* Checkbox rows are laid out with flex rather than left as inline-block.
   This is a display change and therefore worth justifying:

   The original markup is `<input> <label>` where the label is inline-block. It
   only ever worked because every label was short enough to fit beside the box
   on one line. Manrope is a wider face than Source Sans Pro, so the longest
   course — „Програма за Подготовка за Ученици од I до V одд." — grew from
   365px to 388px, stopped fitting in its column, and wrapped onto the line
   BELOW its own checkbox, which reads as an unlabelled box.

   Flex with align-items:flex-start pins the box to the first line of the label
   however long the text is, so this cannot recur with a longer course name or
   a narrower screen. padding-left is zeroed because Bootstrap's .form-check
   pairs a 1.25rem indent with a -1.25rem margin on the input; under flex that
   pairing would just indent the whole row. */
.form-check,
.icheck-primary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-block: 7px;
    padding-left: 0;
}

    /* position:static is REQUIRED, not tidying. Bootstrap 4 sets
       `.form-check-input { position:absolute; margin-left:-1.25rem }` and reserves
       room for it with `.form-check { padding-left:1.25rem }`. Zeroing that padding
       above without releasing the input from absolute positioning drops the box on
       top of the first word of its own label — „По 30% попуст…" rendered with the
       „По" hidden underneath the checkbox. Making it static puts it back in flow so
       flex + gap place it properly. The course rows use .icheck-primary, whose
       inputs are already static, which is why only the discounts were affected. */
    .form-check > input[type="checkbox"],
    .form-check > input[type="radio"],
    .form-check-input,
    .icheck-primary > input[type="checkbox"],
    .icheck-primary > input[type="radio"] {
        position: static;
        flex: 0 0 auto;
        margin-top: 3px; /* optical alignment with the first line of text */
        margin-left: 0;
    }

    .form-check > label,
    .icheck-primary > label {
        flex: 1 1 auto;
        margin-bottom: 0;
        cursor: pointer;
    }

/* Native inputs (the course and discount boxes) honour accent-color. */
.form-check-input,
.icheck-primary input {
    accent-color: var(--mx-purple);
}

/* The terms checkbox is a Bootstrap 4 custom-control: the real input is hidden
   and the box is drawn as ::before, which accent-color cannot reach. Without
   these three rules it stays AdminLTE blue, directly above the submit button. */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--mx-purple);
    background-color: var(--mx-purple);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(91, 33, 122, .25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--mx-purple-light);
}

.custom-control-label,
.form-check-label {
    color: var(--mx-ink);
}

/* Disabled discounts must LOOK disabled, and this rule exists because the rule
   directly above broke it. The JS marks a locked row with
   `.closest('.form-check').toggleClass('text-muted', !isCombinable)` (SignUp.cshtml
   ~line 950, and addClass at ~942 for the promo-code path), and Bootstrap's
   .text-muted greys the row by INHERITANCE. Setting an explicit colour on
   .form-check-label above stops it inheriting, so a locked checkbox kept a fully
   dark label and looked clickable while silently refusing.
   Re-muting the label explicitly restores the signal. not-allowed on both the box
   and the label makes the reason legible on hover rather than leaving a parent to
   wonder why nothing happens. */
.form-check.text-muted .form-check-label,
.form-check.text-muted .form-check-label .text-muted {
    color: var(--mx-muted) !important;
}

.form-check.text-muted {
    opacity: .72;
}

    .form-check.text-muted .form-check-label,
    .form-check.text-muted .form-check-input {
        cursor: not-allowed;
    }

/* The consent link is a SIBLING of the label now (moving it out is what stops
   it toggling the checkbox), so it no longer inherits the label colour and
   falls back to Bootstrap's link blue. Bring it into the palette and keep it
   visibly a link — it opens the terms modal. */
.custom-control.custom-checkbox > a {
    color: var(--mx-purple);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .custom-control.custom-checkbox > a:hover,
    .custom-control.custom-checkbox > a:focus {
        color: var(--mx-purple-dark);
    }

/* ---- buttons ----------------------------------------------------------- */

.btn-submit {
    min-height: 56px;
    padding: 14px 36px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mx-purple-light), var(--mx-purple));
    color: #fff;
    font-family: "Onest", sans-serif;
    font-weight: 800;
    box-shadow: 0 14px 30px -12px rgba(91, 33, 122, .65);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .btn-submit:hover,
    .btn-submit:focus {
        background: linear-gradient(135deg, var(--mx-purple-light), var(--mx-purple-dark));
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 18px 36px -12px rgba(91, 33, 122, .7);
    }

/* ---- promo code row ----------------------------------------------------
   The „Примени" button is NOT inside the input-group — it is a sibling in a
   d-flex wrapper — and it ships as .btn-outline-success.btn-sm: Bootstrap
   GREEN, 31px tall, beside a 50px input. That height and colour mismatch is
   what makes the row look unfinished.

   The input group also keeps Bootstrap's 3.2px corners here, because
   `.input-group-sm > .form-control` (0,0,3,0) outranks the plain `.form-control`
   rule above. Matched below at equal-or-higher specificity.

   Each of .input-group-sm, .btn-sm and .btn-outline-success occurs exactly ONCE
   on this page and all three are this row, so targeting them is safe and cannot
   leak onto another control. Verified in the DOM 2026-09-03. */

/* NOTE: this markup has NO .input-group-prepend wrapper — the icon span is a direct
   child of .input-group. So neither Bootstrap's radius rules nor a
   `.input-group-sm > .input-group-prepend > .input-group-text` override apply here;
   the plain `.input-group-text` rule above wins uncontested and is what rounds the
   left edge. Verified in the DOM rather than assumed: the chain is
   span.input-group-text.px-2 > div.input-group.input-group-sm.
   The icon matches the field's 50px because .input-group stretches its children,
   not because anything sets a height on it.

   Do NOT try to set a width here. The group carries an inline style="width:160px"
   in the markup, which beats any stylesheet rule short of !important, and it is not
   worth an !important: an 8-character code measures 112px against a 112px content
   box, so it fits without scrolling. Measured, not assumed.
   nowrap stays as cheap insurance — .input-group is flex-wrap:wrap by default, so
   anything that grows the icon or the field would otherwise drop the input onto a
   second line underneath it. */
.input-group-sm {
    flex-wrap: nowrap;
}

#promotionalCode {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 50px;
    border-radius: 0 13px 13px 0;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    #promotionalCode::placeholder {
        letter-spacing: normal;
        text-transform: none;
    }

/* Match the field's height and the card's radius, and drop the green. */
#applyPromoCode {
    min-height: 50px;
    padding: 0 24px;
    border: 2px solid var(--mx-purple);
    border-radius: 13px;
    background: #fff;
    color: var(--mx-purple);
    font-family: "Onest", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

    #applyPromoCode:hover,
    #applyPromoCode:focus {
        background: var(--mx-purple);
        border-color: var(--mx-purple);
        color: #fff;
        box-shadow: 0 10px 22px -10px rgba(91, 33, 122, .6);
    }

/* ---- terms modal -------------------------------------------------------
   Scoped to #termsModal by ID, which is unique to this page, so these rules
   cannot reach SweetAlert's dialogs or any other modal.

   This is included because it is the one screen a cautious parent deliberately
   opens before agreeing to anything, and leaving it in AdminLTE grey — square
   corners, a grey „Затвори" — undoes the point of the reskin at exactly the
   moment trust matters. Colour, radius and type only; no layout, no structure,
   no change to the text. */
#termsModal .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 40px 90px -30px rgba(62, 20, 84, .5);
}

#termsModal .modal-header,
#termsModal .modal-footer {
    border-color: var(--mx-border);
}

#termsModal .modal-title {
    font-family: "Onest", sans-serif;
    font-weight: 800;
    color: var(--mx-ink);
    letter-spacing: -.02em;
}

#termsModal .modal-body {
    color: var(--mx-ink);
}

    /* The two section headings inside the terms text. */
    #termsModal .modal-body h5 {
        font-family: "Onest", sans-serif;
        font-weight: 800;
        color: var(--mx-purple);
        letter-spacing: -.02em;
    }

#termsModal .btn-secondary {
    min-height: 44px;
    padding: 10px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mx-purple-light), var(--mx-purple));
    color: #fff;
    font-family: "Onest", sans-serif;
    font-weight: 700;
}

    #termsModal .btn-secondary:hover,
    #termsModal .btn-secondary:focus {
        background: linear-gradient(135deg, var(--mx-purple-light), var(--mx-purple-dark));
        color: #fff;
    }

/* ---- keyboard focus ----------------------------------------------------
   Every other control already shows focus: the text fields get a purple border
   plus a 4px ring, the terms checkbox gets a ring on its ::before, and the
   course boxes and the terms link keep the browser's native outline (nothing
   here removes it — verified by measuring each one with the document actually
   focused).

   The two buttons were the exception. Bootstrap replaces their outline with a
   shadow, so focusing them only deepened an existing drop shadow — a change,
   but not a distinct indicator. :focus-visible restricts this ring to keyboard
   navigation, so a mouse user sees no change at all. Gold rather than purple
   because the ring has to read against a purple button. */
#applyPromoCode:focus-visible,
.btn-submit:focus-visible {
    outline: 3px solid var(--mx-gold);
    outline-offset: 2px;
}

/* ---- validation -------------------------------------------------------- */

/* SCOPED to validation messages on purpose. `.text-danger` is not only the class on
   `<span asp-validation-for=...>`; it is also the class on the inline required marker
   inside a label — `Име на Родител/Старател <span class="text-danger">*</span>`.
   An unscoped `display:block` here put that asterisk on its own line above the field.
   asp-validation-for always emits data-valmsg-for, so keying on that hits exactly the
   messages and nothing else. */
.text-danger[data-valmsg-for],
span.field-validation-error {
    display: block;
    margin-top: 6px;
    font-weight: 600;
}

/* ---- mobile ------------------------------------------------------------ */

@media (max-width: 768px) {
    body {
        padding: 0;
        background: #fff;
    }

    body > .container {
        max-width: none;
        padding: 0;
    }

    .enrollment-container {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .enrollment-header {
        padding: 90px 24px 30px;
    }

    .school-logo {
        top: 18px !important;
        left: 50%;
        height: 48px;
        transform: translateX(-50%);
    }

    .enrollment-body {
        padding: 28px 20px 42px;
    }

    .form-group {
        margin-bottom: 22px;
    }

    .checkbox-group {
        padding: 16px;
    }

    .btn-submit {
        width: 100%;
    }
}