/* ============================================================
   Intensity Hoops — Event Booking: Registration Pages
   Covers com_eventbooking/register/{default,group,cart}.php —
   individual, group, and cart registration/checkout.
   ============================================================ */

/* ── Card wrapper ─────────────────────────────────────────── */

.eb-register-card {
    background: var(--surface, #1c1c1c);
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

@media (max-width: 767px) {
    .eb-register-card {
        padding: 1.5rem 1.25rem;
        border-radius: 12px;
    }
}

/* ── Page heading — divider under it, scoped to this card so
   the Event Detail page's .eb-page-heading (styled in
   eb-event-detail.css) is untouched. ── */

.eb-register-card .eb-page-heading {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* group.php uses a different heading class than default.php/cart.php
   (.eb-page-title, not .eb-page-heading) and had no styling at all
   before this file — same treatment, own selector since the class
   name genuinely differs. */
.eb-register-card .eb-page-title {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text, #ffffff);
    text-shadow: 1px 1px 1px var(--black, #000000);
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* ── Section headings (Billing / Payment / per-member) — one
   brand-blue accent bar, matching the site's one-accent-color
   discipline (not a red/green contextual pair). ── */

.eb-heading-payment-wrap {
    margin-bottom: .75rem;
    border-radius: 6px;
}

h3.eb-heading.eb-heading-payment{
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #ffffff);
    width: 100%;
    margin: 0px;
    padding: .75rem 0 .75rem .75rem;
    border-left: 3px solid var(--brand-primary, #1272ba);
    
}

/* Base treatment for every plain .eb-heading (h3, "Ticket Information" /
   "Billing Information") — same accent-bar box as .eb-form-heading below,
   so every section heading in the card reads as one system.
   .eb-heading-payment (above) is more specific and still wins where it
   differs (its border-top divider). EventBooking's bundled style.min.css
   sets `h3.eb-heading { display: inline-block; margin-right: 20px; }` —
   display:block + margin-right:0 here resets that, or the heading shrinks
   to its text width and clips against .eb-heading-payment's border-top. */
.eb-register-card .eb-heading {
    display: block;
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #ffffff);
    margin: 2rem 0 1.25rem;
    margin-right: 0;
    padding: .75rem 0 .75rem .75rem;
    border-left: 3px solid var(--brand-primary, #1272ba);
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
}

.eb-register-card .eb-heading:first-of-type {
    margin-top: 0;
}

/* Payment Information specifically gets a divider above it,
   separating it from the ticket/field section before it. */
.eb-register-card .eb-heading-payment {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* group.php's multi-step wizard sections (Number of Members / Members
   Information / Billing Information) use their own heading class —
   same accent-bar treatment as .eb-heading, own selector since the
   markup pattern (div, not h3) differs. Was unstyled before this file. */
.eb-register-card .eb-form-heading {
    /* Same root cause as .eb-heading above — EventBooking's bundled CSS
       also puts a light-grey background/border/padding on all four sides
       of .eb-form-heading, which the border-left-only override below
       didn't fully reset (only that one side competed; top/right/bottom
       and background/padding had no competing declaration and were still
       showing through). */
    display: block;
    background: transparent;
    border: none;
    border-left: 3px solid var(--brand-primary, #1272ba);
    padding: .85rem 0 .85rem 0.85rem;
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #ffffff);
    margin: 2rem 0 1.25rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
}

.eb-register-card #eb-number-group-members .eb-form-heading {
    margin-top: 0;
}

/* ── Form status message (errors, waitlist notices, etc.) ─── */

.eb-register-card .eb-message {
    background: var(--surface-2, #262626);
    border: 1px solid var(--brand-primary-light, #2e8fd4);
    border-left: 3px solid var(--brand-primary-light, #2e8fd4);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-body, #e0e0e0);
}

/* HTMLHelper::_('content.prepare', ...) wraps the message text in a <p>,
   which otherwise carries its own browser-default margin inside the
   already-padded box above. */
.eb-register-card .eb-message p {
    margin: 0px;
}

/* ── Required-field asterisk ──────────────────────────────── */

.eb-register-card .required {
    color: #e05252;
    margin-left: 0.15rem;
}

/* ── Form actions row (submit + loading indicator) ───────────── */

.eb-register-card .form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.eb-register-card #btn-submit {
    padding: 0.85rem 2.25rem;
    font-size: 1.05rem;
    box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb, 18, 114, 186), .35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.eb-register-card #btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb, 18, 114, 186), .45);
}

/* ── Loading indicator — replaces EventBooking's animated GIF.
   Toggled the same way as the original: plain jQuery .show()/
   .hide() on #ajax-loading-animation (confirmed in
   media/com_eventbooking/js/site-register-default.min.js) —
   that toggle doesn't care about element type, so swapping the
   <img> for this <span> is safe. ── */

.eb-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 1rem;
    color: var(--text-muted, #a0a0a0);
    font-size: 0.9rem;
}

.eb-loading-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--border, rgba(18, 114, 186, 0.25));
    border-top-color: var(--brand-primary-light, #2e8fd4);
    border-radius: 50%;
    animation: eb-spin 0.7s linear infinite;
}

@keyframes eb-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eb-loading-spinner { animation: none; }
    .eb-register-card #btn-submit { transition: none; }
}

/* ── Field labels — vertical centering ───────────────────────
   Each field renders as row.form-group > .col-md-3.form-control-label
   (label) + .col-md-9.eb-form-control (input), per
   administrator/components/com_eventbooking/libraries/rad/ui/bootstrap5.php.
   .row is flex, so the two columns stretch to match height whenever the
   input side is taller (tooltip icon, wrapped label text, validation
   message, textarea, etc.) — but the plain block-level <label> inside just
   sits at the top of that stretched column instead of centering. Making
   the column itself a flex container centers its label child on the
   cross axis. */
.eb-register-card .form-control-label {
    display: flex;
    align-items: center;
}

.eb-register-card .form-control-label label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.035em;
}

/* ── Ticket / cart item tables ────────────────────────────────
   register/default_tickets.php's "Ticket Information" table and
   register/cart_items.php's cart-review table (neither previously
   copied into this template — see this doc's §7 note on the other 14
   register/ files staying untouched) both render a bare Bootstrap
   `table.table.table-striped.table-bordered` with no wrapper class of
   their own, unlike the Event Detail page's ticket table
   (.eb-ticket-information, styled in eb-event-detail.css) — so this is
   scoped through the card wrapper instead, since it's the only
   table.table-bordered that ever renders inside .eb-register-card.
   Surface-2 (not the card's own surface) for contrast against the
   card background, same reasoning as .eb-message below. */

.eb-register-card table.table-bordered {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-2, #262626);
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* Kill Bootstrap's striped alternating row backgrounds */
.eb-register-card table.table-bordered.table-striped > tbody > tr > * {
    background-color: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.eb-register-card table.table-bordered td,
.eb-register-card table.table-bordered th {
    padding: 0.75rem 1rem;
    border-color: var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
    background-color: transparent !important;
    color: var(--text-body, #e0e0e0);
    vertical-align: middle;
}

.eb-register-card table.table-bordered thead th {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a0a0a0);
    border-bottom: 2px solid var(--border, rgba(18, 114, 186, 0.25)) !important;
}

/* .eb-ticket-type-title / .eb-ticket-type-description (ticket name +
   description, inside default_tickets.php's first column) are already
   styled in eb-event-detail.css — those rules are unscoped class
   selectors, not tied to that page's own table, so they apply here too.
   Not redeclared. */

@media (max-width: 767px) {
    .eb-register-card table.table-bordered td,
    .eb-register-card table.table-bordered th {
        padding: 0.6rem 0.75rem;
    }
}

/* ── Ticket quantity dropdown ─────────────────────────────────
   `.ticket_type_quantity` carries `.form-select`, which custom.css's
   sitewide dark-input rule deliberately excludes (see that rule's own
   comment) — so it still renders as Bootstrap's stock white box with a
   dark arrow (bootstrap.min.css's `.form-select`: #fff background,
   #212529 text, a hardcoded dark chevron baked into the background-image
   SVG) unless styled here. Two classes beat bootstrap.min.css's one, so
   no !important needed for colors/border; the chevron SVG still needs
   overriding since color can't reach into a background-image. */

.eb-register-card .ticket_type_quantity {
    font-family: var(--font-body, "Inter", sans-serif);
    color: var(--text, #ffffff);
    background-color: var(--surface, #1c1c1c);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 6px;
}

.eb-register-card .ticket_type_quantity:focus {
    outline: 0;
    border-color: var(--brand-primary, #1272ba);
    box-shadow: 0 0 0 3px var(--brand-primary-tint, rgba(18, 114, 186, 0.15));
}