/**
 * Free Event Tickets — cosmetics for the native Event Tickets UI.
 *
 * Two jobs, both scoped so paid events and the rest of the site are untouched:
 *   1) Hide all cost/dollar UI on FREE tickets (`[data-ticket-price="0"]`) —
 *      block AND the Attendee Registration modal.
 *   2) Brand-style the Attendee Registration modal to KidWind (see
 *      .claude/skills/kidwind-brand-style): Montserrat (inherited), dark-purple
 *      text/labels, coral primary action, brand inputs. Variables come from
 *      Cornerstone Global CSS; hex fallbacks keep it on-brand if that's absent.
 *
 * Loaded on single event pages that have any free ticket (incl. challenges,
 * which keep the native modal because their tickets require attendee info).
 */

/* ======================================================================
   1) Hide $ / cost on FREE tickets (block + modal cart summary)
   ====================================================================== */
.tribe-tickets__tickets-item[data-ticket-price="0"] .tribe-tickets__tickets-item-extra-price,
.tribe-tickets__tickets-item[data-ticket-price="0"] .tribe-tickets__tickets-item-total-wrap,
.tribe-tickets__tickets-item[data-ticket-price="0"] .tribe-tickets__tickets-footer-total,
.tribe-tickets__tickets-item[data-ticket-price="0"] .tribe-tickets__tickets-footer-quantity {
    display: none !important;
}

/* NOTE: do NOT hide `.tribe-modal__cart` — at runtime Event Tickets nests the
   entire attendee-registration form inside it, so hiding it blanks the whole
   modal. Dollar amounts are stripped by the granular rules above instead. */

/* ======================================================================
   2) Brand-style the Attendee Registration modal
   ====================================================================== */

/* Titles / headings → dark purple */
.tribe-modal__wrapper--ar .tribe-modal--ar__title,
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-title,
.tribe-modal__wrapper--ar .tribe-ticket__tickets-heading,
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-item-title {
    color: var(--darkpurple, #4d40b2) !important;
}

/* Attendee card — soft offwhite panel with a rounded border */
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-item {
    background: var(--offwhite, #f9f9f9) !important;
    border: 1.5px solid var(--lightgray, #f0f0f0) !important;
    border-radius: 0.667rem !important;
    padding: 1.5rem !important;
}

/* Field labels → dark purple, a touch bolder */
.tribe-modal__wrapper--ar .tribe-tickets__form-field-label {
    color: var(--darkpurple, #4d40b2) !important;
    font-weight: 600 !important;
}

/* Required asterisk → coral */
.tribe-modal__wrapper--ar .tribe-required {
    color: var(--coral, #ff5e5e) !important;
}

/* Stack each field's LABEL above its input, left-aligned. TEC squishes labels into
   a 102px flex column at ≥768px (`flex: 0 0 102px`); override it here so the long
   demographic questions read on their own line. */
.tribe-modal__wrapper--ar .tribe-tickets__form-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.tribe-modal__wrapper--ar .tribe-tickets__form-field-label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 0.24rem 0 !important;
    text-align: left !important;
}
.tribe-modal__wrapper--ar .tribe-tickets__form-field-input-wrapper,
.tribe-modal__wrapper--ar .tribe-common-form-control-checkbox-radio-group {
    width: 100% !important;
}

/* Text inputs / selects / textareas → light-purple border + focus. Target the
   text-control class only — radio/checkbox <input>s ALSO carry
   `tribe-tickets__form-field-input`, so styling that class breaks them. */
.tribe-modal__wrapper--ar .tribe-common-form-control-text__input {
    color: var(--darkpurple, #4d40b2) !important;
    background: var(--white, #fff) !important;
    border: 1.5px solid var(--lightpurple50, rgba(108, 89, 255, 0.5)) !important;
    border-radius: 0.24rem !important;
    width: 100% !important;
    transition: 0.3s ease-out;
}
.tribe-modal__wrapper--ar .tribe-common-form-control-text__input:focus {
    outline: var(--green, #00deab) auto 1px !important;
    border-color: var(--lightpurple, #6c59ff) !important;
}
.tribe-modal__wrapper--ar .tribe-common-form-control-text__input::placeholder {
    color: var(--lightpurple50, rgba(108, 89, 255, 0.5)) !important;
}

/* Radios + checkboxes → brand accent */
.tribe-modal__wrapper--ar .tribe-common-form-control-radio__input,
.tribe-modal__wrapper--ar .tribe-common-form-control-checkbox__input {
    accent-color: var(--darkpurple, #4d40b2);
}
.tribe-modal__wrapper--ar .tribe-common-form-control-radio__label,
.tribe-modal__wrapper--ar .tribe-common-form-control-checkbox__label {
    color: var(--darkpurple, #4d40b2) !important;
}

/* Validation notice → brand error accent (coral) */
.tribe-modal__wrapper--ar .tribe-tickets__validation-notice {
    color: var(--darkpurple, #4d40b2) !important;
    background: var(--offwhite, #f9f9f9) !important;
    border-top: 3px solid var(--coral, #ff5e5e) !important;
    border-radius: 0 0 0.24rem 0.24rem !important;
    font-weight: bold !important;
}

/* Footer: primary action = coral CTA, secondary "view cart" = quiet purple link */
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer-checkout-button {
    background: var(--coral, #ff5e5e) !important;
    border-color: var(--coral, #ff5e5e) !important;
    color: var(--white, #fff) !important;
    font-weight: bold !important;
    border-radius: 0.24rem !important;
    transition: 0.3s ease-out;
}
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer-checkout-button:hover {
    background: var(--darkpurple, #4d40b2) !important;
    border-color: var(--darkpurple, #4d40b2) !important;
    color: var(--white, #fff) !important;
}
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer-cart-button {
    color: var(--darkpurple, #4d40b2) !important;
}

/* The "Each attendee specified will receive an email…" disclaimer → readable purple */
.tribe-modal__wrapper--ar .tribe-tickets__iac-email-disclaimer {
    color: var(--darkpurple, #4d40b2) !important;
}

/* ======================================================================
   3) One-step registration: single action + confirmation panel
   ====================================================================== */

/* Collapse the "Save and View Cart / or / Checkout Now" choice — team-registration.js
   hides ET's native submit buttons and injects our own `.nk-team-submit`. This
   stylesheet only loads on FREE events, so paid modals are untouched. */
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer-cart-button,
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer-divider {
    display: none !important;
}

/* Our injected "Complete Registration" button — center it and clear the theme's
   button text-shadow/stroke that was making the label look outlined. */
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-footer {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}
.tribe-modal__wrapper--ar .nk-team-submit {
    margin: 0.5rem auto 0 !important;
    font-size: 1.1rem !important;
    padding: 0.85rem 2.5rem !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

/* Strip the "ticket / cart" chrome from the free AR modal — it's a registration,
   not a purchase. Scoped to the modal so the event-page block and paid events are
   untouched. */

/* Title + "Attendee 1" numbering + the cart-summary footer (whose border-top is
   the stray line): safe to remove outright — they aren't ticket items. */
.tribe-modal__wrapper--ar .tribe-modal--ar__title,
.tribe-modal__wrapper--ar .tribe-tickets__attendee-tickets-item-title,
.tribe-modal__wrapper--ar .tribe-tickets__tickets-footer {
    display: none !important;
}

/* Ticket-summary ITEMS must stay jQuery-:visible — Event Tickets counts VISIBLE
   items to clone the attendee-registration fields, so display:none => empty modal.
   Hide them off-screen instead. `.nk-offscreen` is applied to the event-page block
   item (team-registration.js) for the same reason. */
.nk-offscreen,
.tribe-modal__wrapper--ar .tribe-tickets__tickets-item[data-ticket-price="0"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Event-page Register card (free challenge) ------------------------------
   team-registration.js hides ET's native block chrome and injects a `.nk-express`
   card (styled by express-registration.css, which is also enqueued on these pages).
   Here we only center the contents and enlarge the primary Register button. Both
   the Register panel and the post-registration confirmation carry `.nk-team-panel`. */
/* Neutralize the native ticket wrapper's own box so only our .nk-express card
   shows (no empty nested box around/under the panel). */
.tribe-tickets__tickets-wrapper {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.nk-team-panel {
    text-align: center;
    padding: 1.75rem 1.5rem !important;
}
.nk-team-panel .nk-express__status {
    margin: 0 0 1rem !important;
}
.nk-team-panel .nk-express__note {
    margin: 0 auto 1.25rem !important;
    max-width: 22rem;
}
/* Every button in the card gets real padding (the secondary "Register another
   team" was cramped). */
.nk-team-panel .nk-express__btn {
    padding: 0.8rem 2rem !important;
}
.nk-team-panel .nk-express__btn--primary {
    font-size: 1.15rem !important;
    padding: 0.9rem 2.75rem !important;
}