/**
 * Public enrolment wizard — skeleton enrol_step.tpl port with --ab-* design tokens.
 */

/* -------------------------------------------------------------------------
 * Guest page shell (skeleton header_guest.tpl)
 * ------------------------------------------------------------------------- */
body.enrol-guest {
    min-height: 100vh;
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-base);
    line-height: var(--ab-line-normal);
    color: var(--ab-color-text);
    /* Light base so the faded artwork reads soft like the old collage */
    background-color: #f5f7f8;
    background-image: none;
}

body.enrol-guest::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('../img/background.png') no-repeat center center;
    background-size: cover;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.enrol-guest__main {
    position: relative;
    z-index: 1;
    max-width: 960px;
    /* Clear space for brand title baked into background.png */
    padding-top: clamp(4.5rem, 12vw, 7.5rem);
}

/* Brand mark is baked into background.png — hide HTML duplicate */
.enrol-guest__brand {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.enrol-guest__logo {
    display: inline-block;
    font-family: var(--ab-font-display);
    font-size: clamp(1.75rem, 6vw, 4.25rem);
    font-weight: 700;
    text-align: center;
    color: #000;
    text-shadow: 0 0 5px #000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    line-height: 1.15;
}

.enrol-guest__home {
    position: fixed;
    top: var(--ab-space-4);
    left: var(--ab-space-4);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--ab-primary-500);
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ab-border-default);
    border-radius: var(--ab-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.enrol-guest__home:hover {
    color: var(--ab-primary-600);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    text-decoration: none;
}

.enrol-guest__home svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Main enrolment card (skeleton .enrolment)
 * ------------------------------------------------------------------------- */
.enrolment {
    background-color: var(--ab-surface-card);
    padding: var(--ab-space-5);
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.enrol-step-description {
    display: block;
    font-family: var(--ab-font-body);
    font-weight: var(--ab-font-weight-bold);
    font-size: 1.25rem;
    color: var(--ab-color-headline);
    padding: var(--ab-space-3) var(--ab-space-3) 0;
    margin-bottom: 0;
}

.enrol-step-divider {
    margin-top: 0;
    margin-bottom: var(--ab-space-4);
    border: 0;
    border-top: 1px solid var(--ab-primary-500);
    opacity: 1;
}

/* -------------------------------------------------------------------------
 * Progress bar (skeleton enrol_step.tpl)
 * ------------------------------------------------------------------------- */
#progressbar {
    margin: 10px 0 15px;
    overflow: hidden;
    color: var(--ab-neutral-700);
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

#progressbar::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 30px;
    right: 30px;
    height: 2px;
    background: var(--ab-neutral-200);
    z-index: 0;
}

#progressbar li {
    list-style-type: none;
    position: relative;
    z-index: 1;
    text-align: center;
    flex: 0 1 auto;
    min-width: 60px;
    padding: 0 5px;
    margin: 0;
}

#progressbar li::before {
    width: 28px;
    height: 28px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--ab-font-weight-semibold);
    background: var(--ab-surface-card);
    border: 2px solid var(--ab-neutral-700);
    border-radius: 50%;
    color: var(--ab-neutral-700);
    margin: 0 auto 5px;
    position: relative;
    transition: all 0.2s ease;
}

#progressbar #step1::before { content: '1'; }
#progressbar #step2::before { content: '2'; }
#progressbar #step3::before { content: '3'; }
#progressbar #step4::before { content: '4'; }
#progressbar #step5::before { content: '5'; }
#progressbar #step6::before { content: '6'; }
#progressbar #step7::before { content: '7'; }
#progressbar #step8::before { content: '8'; }

#progressbar li.completed::before {
    background: var(--ab-primary-500);
    color: var(--ab-color-on-primary-solid);
    border-color: var(--ab-primary-500);
}

#progressbar li.active::before {
    background: var(--ab-tertiary-200);
    color: #003b10;
    border-color: var(--ab-primary-500);
}

#progressbar li.error::before {
    background: var(--ab-color-danger);
    color: var(--ab-color-on-primary-solid);
    border-color: var(--ab-color-danger);
}

#progressbar .enrol-progress-step {
    display: block;
    color: inherit;
    text-decoration: none;
}

#progressbar li .step-title {
    font-family: var(--ab-font-body);
    font-size: 12px;
    font-weight: var(--ab-font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    color: var(--ab-color-text-muted);
}

#progressbar li.active .step-title,
#progressbar li.completed .step-title {
    color: var(--ab-primary-700);
}

@media (max-width: 768px) {
    #progressbar {
        padding: 0 10px;
    }

    #progressbar li {
        min-width: 40px;
        padding: 0 2px;
    }

    #progressbar li .step-title {
        font-size: 9px;
    }

    #progressbar li::before {
        width: 22px;
        height: 22px;
        line-height: 20px;
        font-size: 11px;
    }

    #progressbar::before {
        left: 15px;
        right: 15px;
        top: 12px;
    }

    .enrolment {
        padding: var(--ab-space-4);
    }
}

/* -------------------------------------------------------------------------
 * Form fields
 * ------------------------------------------------------------------------- */
.enrol-wizard label {
    font-weight: var(--ab-font-weight-normal);
}

.enrol-wizard .form-label {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    font-weight: var(--ab-font-weight-semibold);
    color: var(--ab-color-headline);
    margin-bottom: 0.35rem;
}

.enrol-wizard .form-group {
    margin-bottom: 0;
}

.enrol-wizard .enrol-field-group {
    margin-bottom: var(--ab-space-4);
}

.enrol-wizard .form-control,
.enrol-wizard .form-select {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    color: var(--ab-color-text);
    background-color: var(--ab-surface-card);
    border: 1px solid var(--ab-border-default);
    border-radius: var(--ab-radius-md);
    min-height: 38px;
}

.enrol-wizard .form-control:focus,
.enrol-wizard .form-select:focus,
.enrol-wizard .enrol-date-input:focus {
    border-color: var(--ab-primary-400);
    box-shadow: var(--ab-focus-ring);
}

.enrol-wizard .enrol-date-input {
    min-height: 38px;
}

.enrol-wizard .enrol-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.enrol-wizard .enrol-date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.enrol-wizard .form-check-label {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    color: var(--ab-color-text);
    line-height: var(--ab-line-normal);
}

.enrol-wizard .form-check-label .etr-editable,
.enrol-wizard .form-label .etr-editable {
    display: inline;
    min-width: 0;
}

.enrol-wizard .enrol-required-marker {
    white-space: nowrap;
    color: var(--ab-color-danger);
    font-weight: var(--ab-font-weight-bold);
}

.enrol-wizard .enrol-required-marker[data-conditional-required],
.enrol-wizard .enrol-required-marker[data-required-when-field] {
    display: none;
}

.enrol-wizard .form-check-input:checked {
    background-color: var(--ab-primary-500);
    border-color: var(--ab-primary-500);
}

.enrol-wizard .form-check-input:focus {
    box-shadow: var(--ab-focus-ring);
}

.enrol-wizard .btn-link {
    color: var(--ab-primary-500);
    font-weight: var(--ab-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.enrol-wizard .btn-link:hover {
    color: var(--ab-primary-700);
}

.enrol-wizard .enrol-section > p,
.enrol-wizard .enrol-section > strong {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    color: var(--ab-color-headline);
}

/* -------------------------------------------------------------------------
 * Validation (skeleton enrol_step.tpl)
 * ------------------------------------------------------------------------- */
.enrol-wizard .error input,
.enrol-wizard .error select,
.enrol-wizard .error textarea {
    border: 1px dotted var(--ab-color-danger);
}

.enrol-wizard .error label:not(.form-check-label):not(.no-bold) {
    color: var(--ab-color-danger);
}

.enrol-wizard .form-text.error,
.enrol-wizard .form-text.text-danger {
    font-size: 12px;
    color: var(--ab-color-danger);
}

.enrol-wizard .no-bold {
    font-weight: var(--ab-font-weight-normal) !important;
}

/* -------------------------------------------------------------------------
 * Section cards (skeleton enrol_step_3.layout — card-primary / card-secondary)
 * ------------------------------------------------------------------------- */
.enrol-wizard .card.card-primary,
.enrol-wizard .card.card-secondary {
    border: 1px solid var(--ab-border-default);
    border-radius: var(--ab-radius-md);
    box-shadow: none;
    overflow: hidden;
    margin-bottom: var(--ab-space-4);
}

.enrol-wizard .card.card-primary > .card-header {
    background-color: var(--ab-primary-500);
    color: var(--ab-color-on-primary-solid);
    border-bottom: 1px solid var(--ab-primary-600);
    padding: 0.75rem 1.25rem;
}

.enrol-wizard .card.card-secondary > .card-header {
    background-color: var(--ab-secondary-500);
    color: var(--ab-color-on-primary-solid);
    border-bottom: 1px solid var(--ab-secondary-600);
    padding: 0.75rem 1.25rem;
}

.enrol-wizard .card.card-primary .card-title,
.enrol-wizard .card.card-secondary .card-title {
    font-family: var(--ab-font-headline);
    font-size: 1.1rem;
    font-weight: var(--ab-font-weight-normal);
    margin-bottom: 0;
    color: inherit;
}

.enrol-wizard .card.card-primary > .card-body,
.enrol-wizard .card.card-secondary > .card-body {
    padding: 1.25rem;
}

.enrol-wizard .card .card-body .mb-3:last-child,
.enrol-wizard .card .card-body .enrol-field:last-child,
.enrol-wizard .card .card-body .form-check:last-child {
    margin-bottom: 0 !important;
}

/* Content blocks inside wizard */
.enrol-wizard .enrol-block .header h1,
.enrol-wizard .enrol-block h3,
.enrol-wizard .enrol-block h4 {
    font-family: var(--ab-font-headline);
    color: var(--ab-primary-500);
    font-size: 1.1rem;
}

.enrol-wizard .enrolment {
    overflow: hidden;
    max-width: 100%;
}

.enrol-wizard .enrol-block img,
.enrol-wizard .enrol-content-image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

.enrol-wizard .enrol-content-image-wrap {
    max-width: 100%;
    overflow: hidden;
}

.enrol-wizard .enrol-block {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    color: var(--ab-color-text);
    line-height: var(--ab-line-normal);
}

.enrol-wizard .enrol-block ul {
    list-style: disc outside;
    margin: 0 0 var(--ab-space-3);
    padding-left: 1.5rem;
}

.enrol-wizard .enrol-block ol {
    list-style: decimal outside;
    margin: 0 0 var(--ab-space-3);
    padding-left: 1.5rem;
}

.enrol-wizard .enrol-block li {
    display: list-item;
    list-style-position: outside;
    margin-bottom: 0.35rem;
}

.enrol-wizard .enrol-block li .etr-editable,
.enrol-wizard .enrol-block li small .etr-editable {
    display: inline;
    min-width: 0;
}

.enrol-wizard .enrol-block table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--ab-space-3);
}

.enrol-wizard .enrol-block table th,
.enrol-wizard .enrol-block table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ab-border-default);
    font-size: var(--ab-font-size-sm);
}

.enrol-wizard .enrol-block table th {
    background-color: var(--ab-primary-50);
    color: var(--ab-primary-700);
    font-weight: var(--ab-font-weight-semibold);
}

.enrol-wizard .enrol-book-costs-table tr > th:last-child:not([colspan]),
.enrol-wizard .enrol-book-costs-table tr > td:last-child:not([colspan]) {
    white-space: nowrap;
    width: 1%;
    vertical-align: top;
}

.enrol-wizard .enrol-book-costs-table td:last-child:not([colspan]) .etr-editable {
    display: inline;
    white-space: nowrap;
    min-width: 0;
}

/* -------------------------------------------------------------------------
 * Skeleton CTA buttons (theme.css btn-save / btn-cancel)
 * ------------------------------------------------------------------------- */
.enrol-wizard .btn-save {
    color: var(--ab-color-on-primary-solid);
    background-color: var(--ab-primary-500);
    border: 1px solid var(--ab-neutral-300);
    font-family: var(--ab-font-body);
    font-weight: var(--ab-font-weight-bold);
    letter-spacing: 0.05em;
    border-radius: 2px;
    padding: 0.5rem 1.25rem;
    min-height: 38px;
}

.enrol-wizard .btn-save:hover,
.enrol-wizard .btn-save:active,
.enrol-wizard .btn-save:focus {
    background: var(--ab-surface-card);
    color: var(--ab-primary-500);
    border-color: var(--ab-neutral-300);
}

.enrol-wizard .btn-cancel {
    color: var(--ab-color-on-primary-solid);
    background-color: var(--ab-neutral-400);
    border: 1px solid var(--ab-neutral-300);
    font-family: var(--ab-font-body);
    font-weight: var(--ab-font-weight-bold);
    letter-spacing: 0.05em;
    border-radius: 2px;
    padding: 0.5rem 1.25rem;
    min-height: 38px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.enrol-wizard .btn-cancel:hover,
.enrol-wizard .btn-cancel:active,
.enrol-wizard .btn-cancel:focus {
    background: var(--ab-surface-card);
    color: var(--ab-primary-500);
    border-color: var(--ab-neutral-300);
}

.enrol-wizard__actions {
    padding-top: var(--ab-space-2);
}

/* -------------------------------------------------------------------------
 * Alerts
 * ------------------------------------------------------------------------- */
.enrol-wizard .alert-danger {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: var(--ab-color-danger);
    border-radius: var(--ab-radius-md);
    font-size: var(--ab-font-size-sm);
}

/* -------------------------------------------------------------------------
 * Translation editor (admin preview)
 * ------------------------------------------------------------------------- */
.enrol-wizard .etr-editable {
    outline: 1px dashed rgba(var(--ab-primary-500-rgb), 0.35);
    cursor: text;
    min-width: 2.5em;
    display: inline-block;
}

.enrol-wizard .etr-editable:focus {
    outline: 2px solid rgba(var(--ab-primary-500-rgb), 0.75);
    background: rgba(255, 255, 200, 0.35);
}

.enrol-wizard .etr-editable-saved::after {
    content: ' \2713';
    color: var(--ab-success-deep, #15803d);
    font-weight: bold;
}

.enrol-wizard .etr-editable-error::after {
    content: ' \2717';
    color: var(--ab-color-danger);
    font-weight: bold;
}

/* Thanks page card sits outside .enrolment wrapper */
.enrol-wizard > .card.card-primary {
    border: 1px solid var(--ab-border-default);
    border-radius: var(--ab-radius-md);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.enrol-wizard > .card.card-primary > .card-header {
    background-color: var(--ab-primary-500);
    color: var(--ab-color-on-primary-solid);
    border-bottom: 1px solid var(--ab-primary-600);
}

.enrol-wizard > .card.card-primary .card-title {
    font-family: var(--ab-font-headline);
    font-size: 1.25rem;
    color: inherit;
}

.enrol-wizard > .card.card-primary > .card-body {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-base);
    line-height: var(--ab-line-normal);
    color: var(--ab-color-text);
}