/*
    Palette sampled directly from the event key art in
    exports/2d-logo-banner.png rather than chosen by eye. Navy #10457e and
    cyan #45bedc are the two colours the artwork actually uses.

    This is the event brand, not the Baptist corporate brand. Deliberately no
    gold and no swoosh; those belong to styles.css, which dresses the same form
    as a page of ebaptisthealthcare.org.
*/
:root {
    --navy: #10457e;
    --navy-deep: #073e79;
    --navy-soft: #2a5f9b;
    --cyan: #45bedc;
    --cyan-deep: #2196b6;
    --cyan-pale: #cfeef6;
    --ink: #14212c;
    --muted: #5d6b78;
    --label: #3b4a57;
    --line: #d9e3ea;
    --field-line: #b9c7d3;
    --danger: #b42318;
    --success: #2f7d4f;
    --surface: #ffffff;
    --canvas: #f4f8fb;
    --display: "Figtree", "Segoe UI", Arial, sans-serif;
    --sans: "Open Sans", "Segoe UI", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

h1, h2, h3 {
    font-family: var(--display);
    letter-spacing: -0.015em;
}

.icon-defs {
    position: absolute;
}

/* ---------- masthead ---------- */

.masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.masthead-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 26px 0 22px;
    display: grid;
    justify-items: center;
}

.event-banner {
    display: block;
    width: min(940px, 100%);
    height: auto;
}

/* ---------- fact strip ---------- */

.factbar {
    background: var(--navy);
    color: #ffffff;
}

.factbar-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
}

.fact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
}

.fact svg {
    flex: 0 0 auto;
}

.fact b {
    font-weight: 600;
}

.fact-link {
    color: #ffffff;
    text-decoration: none;
}

/*
    The underline goes on the text span, not the anchor. On the anchor it draws
    beneath the icon and runs the full width of the flex item, which reads as a
    stray rule rather than a link.
*/
.fact-link span {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.fact-link:hover span {
    text-decoration-color: var(--cyan);
}

/*
    No margin-left: auto here. Pushing the badge to the far right looks fine
    while everything fits on one line and looks broken the moment it wraps,
    because the badge ends up alone on the second row against the right edge.
*/
.fact-open {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cyan);
    color: #063049;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- layout ---------- */

.shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 60px;
}

.columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}

.card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(16, 69, 126, 0.05);
}

.card + .card {
    margin-top: 20px;
}

.card-head {
    padding: 22px 26px 0;
}

.card-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
    font-weight: 800;
}

.card-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13.5px;
}

.card-body {
    padding: 18px 26px 26px;
}

/* ---------- tickets ---------- */

.tiers {
    display: grid;
    gap: 12px;
}

.ticket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.ticket-row.selected {
    border-color: var(--cyan);
    background: #f7fdff;
    box-shadow: inset 3px 0 0 var(--cyan);
}

.ticket-name {
    margin: 0;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
}

.ticket-description {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.ticket-price {
    min-width: 84px;
    color: var(--navy);
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.stepper {
    display: grid;
    grid-template-columns: 36px 36px 36px;
    align-items: center;
    border: 1px solid var(--field-line);
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface);
}

.stepper button {
    height: 38px;
    border: 0;
    background: var(--surface);
    color: var(--navy);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.stepper button:hover:not(:disabled) {
    background: var(--cyan-pale);
}

.stepper button:disabled {
    color: #b0bcc7;
    cursor: not-allowed;
}

.stepper output {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- rate selector ---------- */

.rate-options {
    display: grid;
    gap: 12px;
}

.rate-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

/* Hover must not borrow the selected treatment, or a hovered option reads as chosen. */
.rate-option:hover:not(.selected) {
    border-color: #9dc6dd;
    background: #fbfeff;
}

.rate-option.selected {
    border-color: var(--cyan);
    background: #f7fdff;
    box-shadow: inset 3px 0 0 var(--cyan);
}

.rate-option input,
.session-card input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--navy);
    cursor: pointer;
}

.rate-copy,
.session-copy {
    display: grid;
    gap: 3px;
}

.rate-name {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
}

.rate-desc {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.rate-price {
    display: grid;
    justify-items: end;
    gap: 1px;
    color: var(--navy);
    font-family: var(--display);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rate-price small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-member-block {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #bfe4f0;
    border-radius: 8px;
    background: var(--cyan-pale);
}

.team-member-block .field {
    max-width: 260px;
}

/* ---------- sessions ---------- */

.day-group + .day-group {
    margin-top: 22px;
}

.day-heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cyan);
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.session-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.session-card + .session-card {
    margin-top: 10px;
}

.session-card:hover:not(.selected) {
    border-color: #9dc6dd;
    background: #fbfeff;
}

.session-card.selected {
    border-color: var(--cyan);
    background: #f7fdff;
    box-shadow: inset 3px 0 0 var(--cyan);
}

.session-card input {
    margin-top: 3px;
}

.session-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.session-meta b {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
}

.session-meta span {
    color: var(--muted);
    font-size: 13px;
}

.session-title {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.session-desc {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.session-price {
    color: var(--navy);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
    Shown before a registration type is chosen, when there is no price yet. The
    label is far wider than a price, so it wraps rather than squeezing the
    session description out of the row.
*/
/*
    Shown before a registration type is chosen, when there is no price yet. It
    stays on one line: wrapped over two it is ragged left against a column of
    left aligned single line text, which reads as a layout fault rather than a
    hint. Same face and weight as the session description beside it.
*/
.session-price.pending {
    color: var(--muted);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.lunch-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 0 22px;
    padding: 15px 18px;
    border: 1px solid #9fd6ba;
    border-left: 5px solid #2f7d4f;
    border-radius: 8px;
    background: #e9f7ef;
    color: #1d4f33;
    font-size: 13.5px;
    line-height: 1.5;
}

.lunch-note svg {
    flex: 0 0 auto;
}

.lunch-note b {
    display: block;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
}

.ceu-note {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--cyan);
    background: #f4fafc;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
}
/* ---------- access gate ---------- */

.access-gate {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #bfe4f0;
    border-radius: 8px;
    background: var(--cyan-pale);
}

.field-help {
    margin: 0;
    color: #3c6172;
    font-size: 12.5px;
    line-height: 1.5;
}

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

.grid,
.card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/*
    align-content keeps a field's label and input packed to the top of its grid
    row. Without it a field sharing a row with a taller one (email carries help
    text, phone does not) has its rows stretched and the input drifts down.
*/
.field,
.card-field {
    display: grid;
    align-content: start;
    gap: 6px;
}

.wide {
    grid-column: 1 / -1;
}

.field label,
.card-field label {
    color: var(--label);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
}

.field input,
.field select,
.hosted-input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--field-line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field input::placeholder {
    color: #97a5b1;
}

.field input:focus,
.field select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(69, 190, 220, 0.28);
    outline: 0;
}

.field input:user-invalid {
    border-color: var(--danger);
}

.grid-billing {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.req {
    color: #c0392b;
    font-weight: 700;
}

.card-head .req {
    font-size: 15px;
}

/* ---------- pay action, sitting with the card fields ---------- */

.pay-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.pay-amount {
    display: grid;
    gap: 2px;
}

.pay-amount span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pay-amount strong {
    color: var(--navy);
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.pay-control {
    flex: 1 1 280px;
    display: grid;
    gap: 8px;
}

.rail-jump {
    display: inline-grid;
    place-items: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--navy);
    border-radius: 8px;
    color: var(--navy);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.rail-jump:hover {
    background: var(--cyan-pale);
}

/* ---------- hosted card frames ---------- */

.card-frame {
    padding: 20px;
    border: 1px solid #c3d5e2;
    border-radius: 9px;
    background: #f7fafd;
}

.card-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.card-frame-head b {
    color: var(--navy);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 800;
}

.card-marks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card-marks img {
    display: block;
    height: 23px;
    width: auto;
    border-radius: 3px;
    border: 1px solid rgba(16, 69, 126, 0.12);
}

/*
    Collect.js drops a cross origin iframe into each mount point and reports
    its height late, so the slot height is fixed here to stop the layout
    jumping under the pay button. Type inside the frame is styled by the
    customCss block in payment.js, not from this file.
*/
.hosted-input {
    padding: 0;
    overflow: hidden;
}

.hosted-input iframe {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
}

.card-note {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ---------- order rail ---------- */

.rail {
    position: sticky;
    top: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(16, 69, 126, 0.08);
}

.rail-head {
    padding: 18px 22px;
    background: var(--navy);
    color: #ffffff;
}

.rail-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.rail-head p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
}

.order-lines {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
    min-height: 96px;
    align-content: start;
}

.order-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    font-size: 13.5px;
}

.order-line strong {
    display: block;
    font-weight: 700;
}

.order-line span {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
}

.order-line > strong:last-child {
    font-variant-numeric: tabular-nums;
}

.empty-order {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.rail-total {
    padding: 18px 22px 22px;
    border-top: 1px solid var(--line);
    background: #f7fafd;
}

/*
    Stacked rather than a label pushed against the amount. In a 340px rail,
    space-between leaves a wide empty gap between a short word and a short
    number, which reads as a layout mistake. This also matches the amount
    beside the pay button.
*/
.rail-amount {
    display: grid;
    gap: 1px;
    margin-bottom: 14px;
}

.rail-amount span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rail-amount strong {
    color: var(--navy);
    font-family: var(--display);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.primary-button,
.secondary-button {
    display: inline-grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: background 150ms ease;
}

.primary-button {
    background: var(--navy);
    color: #ffffff;
}

.primary-button:hover:not(:disabled) {
    background: var(--navy-deep);
}

.primary-button:disabled {
    background: #9fb0bf;
    cursor: not-allowed;
}

.payment-status {
    min-height: 18px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
}

.payment-status.error {
    color: var(--danger);
    font-weight: 700;
}

.payment-status.ready {
    color: var(--success);
}

.assurances {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--line);
    list-style: none;
}

.assurances li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--label);
    font-size: 12.5px;
    line-height: 1.5;
}

.assurances svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* ---------- footer ---------- */

.site-footer {
    border-top: 4px solid var(--cyan);
    background: var(--navy);
    color: rgba(255, 255, 255, 0.88);
}

.footer-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 26px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 30px;
    font-size: 12.5px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.site-footer a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- responsive ---------- */

@media (max-width: 940px) {
    .columns {
        grid-template-columns: 1fr;
    }

    .rail {
        position: static;
    }
}

@media (max-width: 680px) {
    .masthead-inner {
        padding: 18px 0 16px;
    }

    .factbar-inner {
        gap: 8px 20px;
    }

    .shell {
        padding-top: 22px;
    }

    .card-head {
        padding: 18px 18px 0;
    }

    .card-body {
        padding: 16px 18px 20px;
    }

    .grid,
    .grid-billing,
    .card-fields {
        grid-template-columns: 1fr;
    }

    .pay-action {
        flex-direction: column;
        align-items: stretch;
    }

    .wide {
        grid-column: auto;
    }

    .ticket-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rate-option,
    .session-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rate-price,
    .session-price {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }

    .ticket-copy {
        grid-column: 1 / -1;
    }

    .ticket-price {
        text-align: left;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}