/*
 *    TBC EVENTS - REGISTRATION FORM STYLES
 *    Marketplace product cards: photo left, fields right.
*/


/*    ACF FIELD GRID -----------------------------------
 *    Replace ACF's default inline-block/table layout with a 12-column
 *    grid so the 50/33/25% widths set on individual fields turn into
 *    spans and we get a real 10px gutter between siblings.
 */

.tbc-form .acf-fields {
   display: grid;
   grid-template-columns: repeat( 12, 1fr );
   column-gap: 10px;
   row-gap: 10px;
}

.tbc-form .acf-fields > .acf-field {
   grid-column: 1 / -1;          /* default full width */
}

.tbc-form .acf-fields > .acf-field[ style*='width: 50%' ],
.tbc-form .acf-fields > .acf-field[ style*='width:50%' ] {
   grid-column: span 6;
   width: auto !important;
}

.tbc-form .acf-fields > .acf-field[ style*='width: 33.3' ],
.tbc-form .acf-fields > .acf-field[ style*='width:33.3' ] {
   grid-column: span 4;
   width: auto !important;
}

/* At narrower widths, collapse 33.33% fields (shooter repeater) to 50% so
   they wrap two-per-row instead of three. */
@media ( max-width: 1080px ) {
   .tbc-form .acf-fields > .acf-field[ style*='width: 33.3' ],
   .tbc-form .acf-fields > .acf-field[ style*='width:33.3' ] {
      grid-column: span 6;
   }
}

/* On phones, every multi-column field stacks one-per-row — applies to the
   50% contact fields above PARTICIPANTS as well as the (now-50%) shooter
   sub-fields inside the repeater. */
@media ( max-width: 499px ) {
   .tbc-form .acf-fields > .acf-field[ style*='width: 50%' ],
   .tbc-form .acf-fields > .acf-field[ style*='width:50%' ],
   .tbc-form .acf-fields > .acf-field[ style*='width: 33.3' ],
   .tbc-form .acf-fields > .acf-field[ style*='width:33.3' ] {
      grid-column: 1 / -1;
   }
}

.tbc-form .acf-fields > .acf-field[ style*='width: 25%' ],
.tbc-form .acf-fields > .acf-field[ style*='width:25%' ] {
   grid-column: span 3;
   width: auto !important;
}


/*    REPEATER ROWS ------------------------------------
 *    Inner padding so fields don't touch the row's container edges.
 *    Note: .acf-row is a <tr>, padding doesn't apply to <tr>. We pad the
 *    <td.acf-fields> cell where the fields actually live.
 */

.tbc-form .acf-repeater .acf-row > td.acf-fields {
   padding: 20px !important;
}


/*    FIELD HEIGHT + BORDERS --------------------------
 *    Native <select> renders shorter than <input> in many browsers.
 *    Force matching height + a uniform light grey border so inputs,
 *    selects and number spinners all share the same visual weight.
 */

.tbc-form .acf-input input[ type='text' ],
.tbc-form .acf-input input[ type='email' ],
.tbc-form .acf-input input[ type='tel' ],
.tbc-form .acf-input input[ type='number' ],
.tbc-form .acf-input select {
   height: 42px;
   line-height: normal;
   padding: 0 10px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid rgba( 0, 0, 0, 0.2 );
   border-radius: 4px;
   background: #fff;
}

.tbc-form .acf-input select {
   /* Disable native arrow + draw our own SVG so we can control the gap. */
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding-right: 35px;
   background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
   background-repeat: no-repeat;
   background-position: right 15px center;
   background-size: 12px 8px;
   background-color: #fff;
}


/*    SECTION BLOCK -----------------------------------
 *    Shared markup used by both PARTICIPANTS and MARKETPLACE so both
 *    section headings render identically. Injected via render hooks
 *    in form.php — see tbc_render_participants_heading() and the
 *    marketplace render path.
 */

.tbc-form .tbc-section-block {
   margin-top: 1.5rem;
   margin-bottom: 1rem;
}

.tbc-form .tbc-section-block-heading {
   margin: 0 0 0.5rem;
   font-size: 2rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   color: #000;
}

.tbc-form .tbc-section-block-intro {
   margin: 0 0 10px;
   color: rgba( 0, 0, 0, 0.7 );
}

/* Hide the empty native .acf-label slots on the heading wrappers since
   the styled heading is rendered inside .acf-input. */
.tbc-form .tbc-section-heading > .acf-label,
.tbc-form .tbc-marketplace-anchor > .acf-label {
   display: none;
}


/*    REGISTRATION COST -------------------------------
 *    Display-only total: large action-coloured text, no field chrome.
 *    Label uses ACF default styling to match the Credit/Debit Card label.
 */

.tbc-form .acf-field[ data-key='field_tbc_reg_total' ] input[ type='text' ] {
   border: 0 !important;
   background: transparent !important;
   padding: 0 !important;
   height: auto !important;
   font-size: 25px !important;
   line-height: 1 !important;
   font-weight: 600 !important;
   color: var( --mbw-color-action ) !important;
   box-shadow: none !important;
   margin: 0 !important;
   width: auto !important;
   pointer-events: none;
   min-width: 6ch;
}

.tbc-marketplace-products {
   display: grid;
   gap: 1.5rem;
   margin-top: 20px;
}

.tbc-swag-product {
   display: grid;
   grid-template-columns: minmax(180px, 280px) 1fr;
   gap: 1.5rem;
   padding: 1rem;
   border: 1px solid rgba( 0, 0, 0, 0.1 );
   border-radius: 6px;
   background: #fff;
}

@media ( max-width: 600px ) {
   .tbc-swag-product {
      grid-template-columns: 1fr;
   }
}

.tbc-swag-media {
   position: relative;
}

.tbc-swag-content > * + * {
   margin-top: 0.75rem;
}

.tbc-swag-name {
   margin: 0 0 25px;
   font-size: 20px;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.5rem;
   justify-content: space-between;
}

.tbc-swag-name + .tbc-swag-variant,
.tbc-swag-description + .tbc-swag-variant,
.tbc-swag-name + .tbc-swag-sizes,
.tbc-swag-description + .tbc-swag-sizes {
   margin-top: 25px;
}

.tbc-swag-price {
   font-size: 20px;
   font-weight: 600;
   white-space: nowrap;
}

.tbc-swag-description {
   margin: 0;
   color: rgba( 0, 0, 0, 0.7 );
   font-size: 0.9rem;
}

.tbc-swag-variant + .tbc-swag-variant {
   margin-top: 0.75rem;
}

.tbc-swag-variant-label {
   margin: 0 0 0.5rem;
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   opacity: 0.7;
}

.tbc-swag-sizes {
   display: grid;
   grid-template-columns: repeat( auto-fit, minmax( 70px, 1fr ) );
   gap: 10px;
}

/* At narrower widths, force three sizes per row instead of letting auto-fit
   pack all six in a tight strip. */
@media ( max-width: 1080px ) {
   .tbc-swag-sizes {
      grid-template-columns: repeat( 3, 1fr );
   }
}

/* On phones, drop to two per row so the inputs stay tappable. */
@media ( max-width: 499px ) {
   .tbc-swag-sizes {
      grid-template-columns: repeat( 2, 1fr );
   }
}

.tbc-swag-size {
   display: flex;
   flex-direction: column;
   align-items: stretch;     /* let span + input share full cell width */
   font-size: 0.85rem;
   font-weight: 600;
}

.tbc-swag-size span {
   display: block;
   text-align: center;
   margin-bottom: 0.35rem;
   opacity: 0.7;
}

.tbc-swag-size input {
   width: 100%;
   height: 42px;             /* match the rest of the form fields */
   text-align: center;
   padding: 0 8px;
   border: 1px solid rgba( 0, 0, 0, 0.2 );
   border-radius: 4px;
   box-sizing: border-box;
   appearance: textfield;     /* hide spinner buttons that pull text left */
   -moz-appearance: textfield;
}

.tbc-swag-size input::-webkit-outer-spin-button,
.tbc-swag-size input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}


/*    SLIDER ----------------------------------------- */

.tbc-swag-slider {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   border-radius: 4px;
   background: rgba( 0, 0, 0, 0.04 );
}

.tbc-swag-media-placeholder {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 4px;
   background: rgba( 0, 0, 0, 0.04 );
}

.tbc-swag-slides {
   position: relative;
   width: 100%;
   height: 100%;
}

.tbc-swag-slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 0.25s ease;
   pointer-events: none;
}

.tbc-swag-slide.is-active {
   opacity: 1;
   pointer-events: auto;
}

.tbc-swag-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.tbc-swag-slider-nav {
   position: absolute;
   top: 50%;
   transform: translateY( -50% );
   width: 32px;
   height: 32px;
   border: 0;
   border-radius: 50%;
   background: rgba( 0, 0, 0, 0.6 );
   color: #fff;
   font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   z-index: 2;
   transition: background 0.15s ease;
}

.tbc-swag-slider-nav:hover,
.tbc-swag-slider-nav:focus-visible {
   background: rgba( 0, 0, 0, 0.85 );
   outline: none;
}

.tbc-swag-slider-nav.prev {
   left: 6px;
}

.tbc-swag-slider-nav.next {
   right: 6px;
}

.tbc-swag-slider-dots {
   position: absolute;
   bottom: 8px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 6px;
   z-index: 2;
}

.tbc-swag-slider-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: 0;
   padding: 0;
   background: rgba( 255, 255, 255, 0.6 );
   cursor: pointer;
   box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
   transition: background 0.15s ease;
}

.tbc-swag-slider-dot.is-active {
   background: #fff;
}

.tbc-swag-slider-dot:focus-visible {
   outline: 2px solid #1976d2;
   outline-offset: 2px;
}


/*    STRIPE CARD --------------------------------------- */

.tbc-stripe-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 10px;
}

@media ( max-width: 600px ) {
   .tbc-stripe-grid {
      grid-template-columns: 1fr 1fr;
   }
   .tbc-stripe-field--number {
      grid-column: 1 / -1;
   }
}

.tbc-stripe-field {
   display: flex;
   flex-direction: column;
}

.tbc-stripe-label {
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   opacity: 0.7;
   margin-bottom: 0.3rem;
}

.tbc-stripe-input {
   height: 42px;
   padding: 0 12px;
   border: 1px solid rgba( 0, 0, 0, 0.2 );
   border-radius: 4px;
   background: #fff;
   display: flex;
   align-items: center;
   box-sizing: border-box;
}

.tbc-stripe-input > div {
   width: 100%;
}

.tbc-stripe-input.StripeElement--focus {
   border-color: #1976d2;
   box-shadow: 0 0 0 1px #1976d2;
}

.tbc-stripe-input.StripeElement--invalid {
   border-color: #b00020;
}

.tbc-stripe-error {
   margin-top: 0.5rem;
   color: #b00020;
   font-size: 0.9rem;
   min-height: 1.1em;
}