/* Enrolment-choice cards for language courses only, shared by two callers that both use these
   same class names: theme_educard_add_enrol_choice_ui() (this file's other half, theme/educard/
   lib.php) reshapes the real boxes into cards with JS on enrol/index.php; local_coursebrochure_
   build_enrol_cards() (local/coursebrochure/lib.php) builds the identical markup directly in PHP
   on the course brochure page, for every visitor alike - some rules below (the :has() static-
   fitem hide, the nth-child price styling) exist only for that second, JS-free caller, but apply
   harmlessly on both since the underlying DOM is the same either way. Colours match the "cb-*"
   pricing/CTA styling already used on the brochure page. */

.educard-enrol-choice {
    margin: 4px 0 32px;
}

.educard-enrol-choice-heading {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
}

.educard-enrol-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.educard-enrol-choice-grid-1 {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

@media (max-width: 700px) {
    .educard-enrol-choice-grid-2 {
        grid-template-columns: 1fr;
    }
}

.educard-enrol-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    padding: 28px 24px;
}

.educard-enrol-card-badge {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 14px;
}

.educard-enrol-card-trial .educard-enrol-card-badge,
.educard-enrol-card-member .educard-enrol-card-badge {
    background: rgba(99, 199, 106, .15);
    color: #2f8f37;
}

.educard-enrol-card-buy .educard-enrol-card-badge {
    background: rgba(15, 111, 197, .12);
    color: #0f6fc5;
}

.educard-enrol-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.educard-enrol-card-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-grow: 1;
}

.educard-enrol-card-features li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .75);
}

.educard-enrol-card-features li::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: 700;
}

.educard-enrol-card-trial .educard-enrol-card-features li::before,
.educard-enrol-card-member .educard-enrol-card-features li::before {
    color: #2f8f37;
}

.educard-enrol-card-buy .educard-enrol-card-features li::before {
    color: #0f6fc5;
}

.educard-enrol-card-action {
    margin-top: auto;
    text-align: center;
}

.educard-enrol-card-action form {
    margin: 0;
}

/* Hide the self-enrol mform's own redundant collapsible header ("Zelf aanmelden (Leerling)"
   legend + the chevron/heading Moodle's own JS builds for it on top) - our card already has
   its own badge/title above. Done in CSS, not JS: the toggler/h3 markup is built by Moodle's
   own collapsible-fieldset JS after page load, which can run after ours, so a one-off JS hide
   can lose that race - a CSS rule always applies once the elements exist. */
.educard-enrol-card-action legend,
.educard-enrol-card-action fieldset.collapsible > div:first-of-type {
    display: none !important;
}

.educard-enrol-card-action fieldset.collapsible {
    border-bottom: 0 !important;
}

.educard-enrol-card-action .fitem,
.educard-enrol-card-action .form-group,
.educard-enrol-card-action .felement {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Hides a static-text-only row (e.g. "No enrolment key required.") the same way
   theme_educard_add_enrol_choice_ui()'s JS already does on enrol/index.php - written in CSS too
   since local_coursebrochure_build_enrol_cards() embeds the same real box without running that
   JS at all. */
.educard-enrol-card-action .fitem:has([data-fieldtype="static"]) {
    display: none !important;
}

/* The submit button's mform row still carries a (now-empty, since we hide static labels)
   Bootstrap label column - col-md-3 - in front of it, which reserves 25% of the row's width
   and pushes the button itself off-centre instead of flush with the card's edges like the
   enrol_fee button beside it. Drop the label column and let the button's own column take the
   full row width. */
.educard-enrol-card-action .col-md-3 {
    display: none !important;
}

.educard-enrol-card-action .col-md-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* a.btn is local_coursebrochure_render_guest_enrol_card()'s plain link, standing in for the
   real button on the anonymous-visitor preview cards (see local/coursebrochure/lib.php) - same
   styling as the real submit button/input below. */
.educard-enrol-card-action button,
.educard-enrol-card-action input[type="submit"],
.educard-enrol-card-action a.btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    /* The theme paints buttons with a gradient background-image (see .btn-primary /
       .btn-secondary in the compiled theme CSS) that sits on top of background-color and
       would otherwise hide the colour below - drop it so the flat colour shows through. */
    background-image: none !important;
}

.educard-enrol-card-trial .educard-enrol-card-action button,
.educard-enrol-card-trial .educard-enrol-card-action input[type="submit"],
.educard-enrol-card-trial .educard-enrol-card-action a.btn,
.educard-enrol-card-member .educard-enrol-card-action button,
.educard-enrol-card-member .educard-enrol-card-action input[type="submit"],
.educard-enrol-card-member .educard-enrol-card-action a.btn {
    background-color: #63c76a !important;
}

.educard-enrol-card-buy .educard-enrol-card-action button,
.educard-enrol-card-buy .educard-enrol-card-action input[type="submit"],
.educard-enrol-card-buy .educard-enrol-card-action a.btn {
    background-color: #0f6fc5 !important;
}

.educard-enrol-card-action button:hover,
.educard-enrol-card-action input[type="submit"]:hover,
.educard-enrol-card-action a.btn:hover {
    opacity: .9;
}

.educard-enrol-card-buy .enrol_fee_payment_region {
    text-align: center;
}

.educard-enrol-card-buy .enrol_fee_payment_region p {
    margin: 0 0 16px;
}

.educard-enrol-card-buy .enrol_fee_payment_region p.educard-enrol-price-main {
    margin-bottom: 2px;
}

.educard-enrol-card-buy .enrol_fee_payment_region p.educard-enrol-price-main b {
    font-size: 36px;
    color: #0f6fc5;
}

/* The real enrol_fee box (embedded as-is by local_coursebrochure_build_enrol_cards(), or moved
   here by enrol/index.php's JS) always renders "<p>payment required text</p><p><b>cost</b></p>"
   in that fixed order - our own link-case price markup above already carries the
   educard-enrol-price-main class and is the only <p> there, so :not()/:nth-child(2) never match
   it. Hide the first (our card's badge/title already say all this) and style the second like our
   own price paragraph above. */
.educard-enrol-card-buy .enrol_fee_payment_region p:first-child:not(.educard-enrol-price-main) {
    display: none;
}

.educard-enrol-card-buy .enrol_fee_payment_region p:nth-child(2) b {
    font-size: 36px;
    color: #0f6fc5;
}

.educard-enrol-price-period {
    font-size: 13px;
    color: rgba(0, 0, 0, .55);
    margin-bottom: 18px;
}

/* Moodle 5.3 wraps each enrolment option in a Bootstrap card; inside our own
   choice cards that inner card should be invisible chrome (no border/background),
   with only the price (fee) and the action button left showing. */
.educard-enrol-card .enrol-instance > .card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.educard-enrol-card .enrol-instance > .card > .card-body,
.educard-enrol-card .enrol-instance > .card > .card-footer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.educard-enrol-card .enrol-instance > .card > .card-footer {
    margin-top: .75rem;
}
.educard-enrol-card span.educard-enrol-price-main {
    display: block;
}
.educard-enrol-card .enrol-instance.box.generalbox {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
}