/* ================================================================
   E-commerce Conference 2026 — WooCommerce + FooEvents styling
   ----------------------------------------------------------------
   Loaded only on shop / cart / checkout / account pages (see
   functions.php). Re-skins the *classic* (shortcode) WooCommerce
   cart & checkout and the FooEvents attendee fields to match the
   dark conference theme.

   Design tokens (inherited from style.css :root):
     --page-bg  #010404   --panel-bg rgba(2,18,20,.78)
     --cyan     #59CCC7   --yellow   #F3DE36   --violet #D33CFF
     --text     #fff      --muted    rgba(255,255,255,.78)
     --edge     rgba(255,255,255,.09)
   ================================================================ */

:root {
  --wc-radius: 0.55rem;
  --wc-radius-sm: 0.35rem;
  --wc-field-bg: rgba(0, 0, 0, 0.42);
  --wc-field-border: rgba(89, 204, 199, 0.34);
  --wc-panel: rgba(2, 18, 20, 0.78);
  --wc-panel-border: rgba(89, 204, 199, 0.2);
}

/* ----------------------------------------------------------------
   0. Page shell — give the WC pages breathing room + width
   ---------------------------------------------------------------- */
.woocommerce,
.woocommerce-page {
  font-family: var(--font-main);
  color: var(--text);
}

.woocommerce-cart .wp-block-post-content,
.woocommerce-checkout .wp-block-post-content,
.woocommerce-account .wp-block-post-content,
.woocommerce-cart main,
.woocommerce-checkout main,
.woocommerce-account main,
.woocommerce main {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

/* Checkout: drop the main padding (requested) */
.woocommerce-checkout main {
  padding: 0;
}

/* Hide the page title (CHECKOUT / CART / MY ACCOUNT) on WooCommerce pages */
.woocommerce-page h1.wp-block-post-title {
  display: none;
}

.woocommerce .entry-title,
.woocommerce-page .entry-title,
.woocommerce h1.wp-block-post-title,
.woocommerce-page h1.wp-block-post-title {
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.woocommerce h2,
.woocommerce h3,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   1. Buttons — mirror the homepage cyan "ticket-button" CTA
   ---------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #place_order,
.wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0 1.85rem;
  border: 1px solid rgba(89, 204, 199, 0.55);
  border-radius: var(--wc-radius-sm);
  background: rgba(89, 204, 199, 0.12);
  color: var(--cyan);
  font-family: var(--font-main);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 190ms ease, background 190ms ease,
    box-shadow 190ms ease, color 190ms ease, border-color 190ms ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  transform: translateY(-2px);
  background: rgba(89, 204, 199, 0.2);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 20px rgba(89, 204, 199, 0.28);
}

/* Primary / "alt" buttons — solid cyan (Proceed to checkout, Place order) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.wc-proceed-to-checkout a.checkout-button.button.alt {
  background: var(--cyan);
  color: #020606;
  border-color: rgba(7, 243, 247, 0.55);
  box-shadow: 0 0 18px rgba(89, 204, 199, 0.28);
  font-weight: 900;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.wc-proceed-to-checkout a.checkout-button.button.alt:hover {
  background: #72ddd8;
  color: #020606;
  box-shadow: 0 0 26px rgba(89, 204, 199, 0.45);
}

.woocommerce #place_order,
.wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  min-height: 3.5rem;
  font-size: 0.95rem;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   2. Form fields — inputs, selects, textareas
   ---------------------------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-checkout label,
.woocommerce-account label,
.woocommerce .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  border-radius: var(--wc-radius-sm);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 180ms ease, box-shadow 180ms ease,
    background 180ms ease;
}

.woocommerce form .form-row textarea {
  min-height: 7rem;
  resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .input-text:focus,
.woocommerce input:focus,
.woocommerce textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(89, 204, 199, 0.18);
}

.woocommerce form .form-row input::placeholder,
.woocommerce textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

/* Native select arrow on dark bg */
.woocommerce form .form-row select,
.woocommerce select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.woocommerce form .form-row select option,
.woocommerce select option {
  background: #061416;
  color: var(--text);
}

/* Required asterisk → cyan instead of default red */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
  color: var(--cyan);
  border: none;
  text-decoration: none;
}
.woocommerce form .form-row .optional {
  color: rgba(255, 255, 255, 0.4);
}

/* Field validation states */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: rgba(255, 110, 110, 0.7);
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: rgba(89, 204, 199, 0.7);
}

/* Password reveal button */
.woocommerce form .password-input .show-password-input {
  top: 0.95rem;
  color: var(--cyan);
}

/* select2 (country / state dropdowns). The dropdown is appended to
   <body>, so these selectors are intentionally unscoped. */
.woocommerce .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: auto;
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  background: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  border-radius: var(--wc-radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
  line-height: 1.4;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
}
.select2-container--open .select2-selection--single {
  border-color: var(--cyan);
}
.select2-dropdown {
  background: #061416;
  border: 1px solid var(--cyan-line, rgba(89, 204, 199, 0.64));
  color: var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  color: var(--text);
  border-radius: var(--wc-radius-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(89, 204, 199, 0.18);
  color: #fff;
}

/* Checkboxes / radios accent */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
  accent-color: var(--cyan);
  width: 1.05rem;
  height: 1.05rem;
}

/* ----------------------------------------------------------------
   3. Tables — cart, order review, account orders
   ---------------------------------------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  background: var(--wc-panel);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table thead th {
  background: rgba(89, 204, 199, 0.08);
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem 1.1rem;
  border: none;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 1rem 1.1rem;
  vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:first-child td {
  border-top: none;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  background: rgba(89, 204, 199, 0.05);
  color: var(--text);
  font-weight: 700;
}

.woocommerce table.shop_table .product-name a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover {
  color: var(--cyan);
}

.woocommerce .product-thumbnail img,
.woocommerce table.cart img {
  width: 64px;
  height: auto;
  border-radius: var(--wc-radius-sm);
  border: 1px solid var(--wc-panel-border);
}

/* Remove-item "×" */
.woocommerce a.remove {
  color: var(--cyan) !important;
  border: 1px solid rgba(89, 204, 199, 0.4);
  background: transparent;
  font-weight: 700;
  line-height: 1.4;
}
.woocommerce a.remove:hover {
  background: var(--violet) !important;
  border-color: var(--violet);
  color: #fff !important;
}

/* Quantity stepper */
.woocommerce .quantity input.qty {
  width: 4.2rem;
  min-height: 2.8rem;
  text-align: center;
  background: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  border-radius: var(--wc-radius-sm);
  color: var(--text);
}

/* Prices */
.woocommerce .woocommerce-Price-amount,
.woocommerce .amount {
  color: var(--text);
  font-weight: 700;
}
.woocommerce del .woocommerce-Price-amount {
  color: rgba(255, 255, 255, 0.4);
}
.woocommerce ins {
  background: transparent;
}

/* ----------------------------------------------------------------
   4. Cart page specifics
   ---------------------------------------------------------------- */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1.5rem;
}
.woocommerce-cart .cart_totals h2 {
  margin-top: 0;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.woocommerce-cart .cart_totals table.shop_table {
  border: none;
  background: transparent;
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  color: var(--cyan);
  font-size: 1.25rem;
}

/* Coupon row */
.woocommerce-cart .cart .actions .coupon {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}
.woocommerce-cart .cart .actions .coupon .input-text {
  width: auto;
  max-width: 16rem;
}

/* ----------------------------------------------------------------
   5. Checkout page specifics
   ---------------------------------------------------------------- */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1.6rem clamp(1.1rem, 2.5vw, 1.9rem);
  margin-bottom: 1.5rem;
}

/* Tickets are virtual products — no shipping address is needed, so hide
   the shipping fields and the "Ship to a different address?" toggle. */
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #ship-to-different-address {
  display: none !important;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  margin-top: 0;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(89, 204, 199, 0.18);
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
}

/* Order review + payment column */
#order_review {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1.6rem clamp(1.1rem, 2.5vw, 1.9rem);
}
.woocommerce-checkout #order_review_heading {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total .woocommerce-Price-amount {
  color: var(--cyan);
  font-size: 1.2rem;
}

/* Payment methods box */
.woocommerce-checkout #payment,
.woocommerce #payment {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--wc-radius);
}
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid rgba(89, 204, 199, 0.18);
  padding: 1.2rem;
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
  color: var(--text);
}
.woocommerce-checkout #payment div.payment_box,
.woocommerce #payment div.payment_box {
  background: rgba(89, 204, 199, 0.08);
  color: var(--muted);
  border-radius: var(--wc-radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce #payment div.payment_box::before {
  border-bottom-color: rgba(89, 204, 199, 0.08);
}
.woocommerce-checkout #payment .place-order,
.woocommerce #payment .place-order {
  padding: 1.2rem;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment .wc-terms-and-conditions {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Login / coupon toggle bars at top of checkout */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce form.login,
.woocommerce form.checkout_coupon {
  background: rgba(89, 204, 199, 0.06);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius-sm);
}

/* Two-column layout on wide screens.
   Float-based (not grid): the order-review *heading* and *table* are two
   separate form children, so a 2-col grid pushed the table to a new row far
   below the tall billing column. Floating customer_details left and both
   review elements right (clear:right) stacks the heading + table neatly at
   the top of the right column. flow-root on the form contains the floats. */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flow-root;
  }
  .woocommerce-checkout #customer_details {
    float: left;
    width: 57%;
  }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    float: right;
    width: 39%;
    clear: right;
  }
  .woocommerce-checkout #order_review_heading {
    margin-top: 0;
  }
  /* Keep the order summary in view while scrolling the billing column.
     The form (containing block) is tall and has no overflow:hidden
     ancestor, so sticky tracks the viewport correctly. */
  .woocommerce-checkout #order_review {
    position: sticky;
    top: 1.5rem;
  }
}

/* ----------------------------------------------------------------
   6. Notices — success / info / error
   ---------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background: var(--wc-panel);
  border-top: none;
  border-radius: var(--wc-radius-sm);
  color: var(--text);
  padding: 1rem 1.1rem 1rem 3rem;
}
.woocommerce-message {
  border-left: 3px solid var(--cyan);
}
.woocommerce-message::before {
  color: var(--cyan);
}
.woocommerce-info {
  border-left: 3px solid var(--yellow);
}
.woocommerce-info::before {
  color: var(--yellow);
}
.woocommerce-error {
  border-left: 3px solid #ff7676;
}
.woocommerce-error::before {
  color: #ff7676;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  min-height: 2.4rem;
  padding: 0 1rem;
}

/* ----------------------------------------------------------------
   7. My Account
   ---------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  overflow: hidden;
  background: var(--wc-panel);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.9rem 1.1rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(89, 204, 199, 0.12);
  color: var(--cyan);
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1.6rem;
  color: var(--text);
}

/* ----------------------------------------------------------------
   8. Shop / product listing
   ---------------------------------------------------------------- */
.woocommerce ul.products li.product {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1rem;
  transition: transform 190ms ease, border-color 190ms ease,
    box-shadow 190ms ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-line, rgba(89, 204, 199, 0.64));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--text);
  font-weight: 800;
}
.woocommerce ul.products li.product .price {
  color: var(--cyan);
}
.woocommerce span.onsale {
  background: var(--yellow);
  color: #020606;
  font-weight: 900;
  border-radius: 999px;
}

/* Single product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--cyan);
  font-size: 1.6rem;
  font-weight: 800;
}

/* ----------------------------------------------------------------
   9. FooEvents — attendee / custom checkout fields
   ----------------------------------------------------------------
   FooEvents for WooCommerce injects attendee + custom ticket fields
   into the classic checkout (commonly under "Additional information"
   or via woocommerce_after_order_notes). Markup differs slightly
   between versions, so we target both the explicit FooEvents classes
   and any [class*="fooevents"] / [id*="fooevents"] wrapper. Plain
   text inputs already inherit the global field styling above; here
   we give the blocks structure, headings and per-attendee cards.
   ---------------------------------------------------------------- */
.fooevents,
.fooevents_attendee_fields,
.fooevents_custom_attendee_fields,
#fooevents_add_attendees,
[id*="fooevents"][id*="attendee"],
[class*="fooevents"][class*="attendee"] {
  font-family: var(--font-main);
  color: var(--text);
}

/* Outer container — a panel like the billing/shipping boxes */
.woocommerce-checkout .fooevents_custom_attendee_fields,
.woocommerce-checkout #fooevents_custom_attendee_fields,
.woocommerce-checkout .fooevents_attendee_fields,
.woocommerce-checkout #fooevents_add_attendees,
.woocommerce-checkout .fooevents-checkout {
  background: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius);
  padding: 1.6rem clamp(1.1rem, 2.5vw, 1.9rem);
  margin: 0 0 1.5rem;
}

/* Section + per-attendee headings */
.fooevents h2,
.fooevents h3,
.fooevents h4,
.fooevents_attendee_heading,
[class*="fooevents"] .fooevents_attendee_directory_heading,
.woocommerce-checkout .fooevents_custom_attendee_fields h2,
.woocommerce-checkout .fooevents_custom_attendee_fields h3,
.woocommerce-checkout .fooevents_attendee_fields h3 {
  color: var(--cyan);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(89, 204, 199, 0.18);
}

/* Per-attendee group — a subtle card so multiple tickets read clearly */
.fooevents_attendee_fields .fooevents_attendee_fields_block,
.fooevents_custom_attendee_fields_block,
[class*="fooevents"][class*="ticket"][class*="block"],
.fooevents_attendee {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(89, 204, 199, 0.14);
  border-radius: var(--wc-radius-sm);
  padding: 1.15rem;
  margin-bottom: 1rem;
}

/* The attendee number / ticket badge FooEvents prints */
.fooevents_attendee_number,
[class*="fooevents"] .fooevents_ticket_number {
  display: inline-block;
  background: rgba(89, 204, 199, 0.16);
  color: var(--cyan);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

/* Labels + inputs inside FooEvents blocks (catch markup the global
   .woocommerce rules don't reach, e.g. bare label/input pairs) */
.fooevents label,
[class*="fooevents"] label,
[id*="fooevents"] label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.fooevents input[type="text"],
.fooevents input[type="email"],
.fooevents input[type="tel"],
.fooevents input[type="number"],
.fooevents select,
.fooevents textarea,
[class*="fooevents"] input[type="text"],
[class*="fooevents"] input[type="email"],
[class*="fooevents"] input[type="tel"],
[class*="fooevents"] input[type="number"],
[class*="fooevents"] select,
[class*="fooevents"] textarea,
[id*="fooevents"] input[type="text"],
[id*="fooevents"] input[type="email"],
[id*="fooevents"] select,
[id*="fooevents"] textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.9rem;
  background: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  border-radius: var(--wc-radius-sm);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 0.95rem;
  transition: border-color 180ms ease, box-shadow 180ms ease,
    background 180ms ease;
}

.fooevents input:focus,
.fooevents select:focus,
.fooevents textarea:focus,
[class*="fooevents"] input:focus,
[class*="fooevents"] select:focus,
[class*="fooevents"] textarea:focus,
[id*="fooevents"] input:focus,
[id*="fooevents"] select:focus,
[id*="fooevents"] textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(89, 204, 199, 0.18);
}

.fooevents input::placeholder,
[class*="fooevents"] input::placeholder,
[class*="fooevents"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

/* "Same as billing / purchaser details" helper checkboxes & links */
.fooevents .fooevents_synch_attendee,
[class*="fooevents"] a {
  color: var(--cyan);
}

/* FooEvents seating / variation tables follow the shop_table styling
   above; ensure any stray light backgrounds are cleared. */
[class*="fooevents"] table {
  background: transparent;
  color: var(--text);
}

/* ----------------------------------------------------------------
   10. Small-screen tweaks
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Stack ONLY the responsive cart line-items table (4 columns with
     data-title labels). The checkout order-review table and cart totals
     have no data-title labels, so they stay normal 2-column tables and
     read cleanly at mobile width instead of breaking into a staircase. */
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tr,
  .woocommerce table.shop_table_responsive td {
    display: block;
    width: 100%;
  }
  .woocommerce table.shop_table_responsive thead {
    display: none;
  }
  .woocommerce table.shop_table_responsive td {
    text-align: right;
    padding: 0.65rem 1rem;
  }
  /* Keep the coupon input + Apply button on one line on mobile: the input
     grows/shrinks to fill the row, the button stays its natural width and
     never wraps its label. */
  .woocommerce-cart .cart .actions .coupon {
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .woocommerce-cart .cart .actions .coupon .input-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .woocommerce-cart .cart .actions .coupon .button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 0.9rem;
  }
  /* Desktop checkout main is flush (padding:0 by request); on phones add a
     small side gutter so the panels don't touch the screen edges. */
  .woocommerce-checkout main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ----------------------------------------------------------------
   11. Specificity overrides vs WooCommerce core
   ----------------------------------------------------------------
   Core sets `.woocommerce form .form-row .input-text, ... select`
   to a white background (var(--wc-form-color-background, #fff)) at
   specificity 0,0,3,1. Our base field rule matched <textarea> only
   as `.woocommerce form .form-row textarea` (0,0,2,2), which loses
   the class-count tie, so the order-notes textarea (a
   textarea.input-text) rendered white. Mirror core's selector here
   so our value wins on load order, and cover select2 the same way.
   ---------------------------------------------------------------- */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select {
  background-color: var(--wc-field-bg);
  border: 1px solid var(--wc-field-border);
  color: var(--text);
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(89, 204, 199, 0.18);
}

/* Notices — beat core's 0,0,1,0 grouped rule via the body page class */
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error {
  background: var(--wc-panel);
  border-top: none;
  color: var(--text);
}
.woocommerce-page .woocommerce-message {
  border-left: 3px solid var(--cyan);
}
.woocommerce-page .woocommerce-info {
  border-left: 3px solid var(--yellow);
}
.woocommerce-page .woocommerce-error {
  border-left: 3px solid #ff7676;
}
.woocommerce-page .woocommerce-info a,
.woocommerce-page .woocommerce-message a:not(.button) {
  color: var(--cyan);
}

/* select2 single + dropdown — core uses :where() (0 specificity) so a
   plain class chain wins; keep it dark to match the native selects. */
.woocommerce-page .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  background-color: var(--wc-field-bg);
}
.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
  background-color: #061416;
}

/* ----------------------------------------------------------------
   12. Block-component notice banners
   ----------------------------------------------------------------
   Modern WooCommerce renders cart/checkout notices (added-to-cart,
   "Have a coupon?", login prompt, errors) as block components
   (.wc-block-components-notice-banner) with a hard-coded white
   background + dark text, even on the classic shortcode checkout.
   Re-skin them to dark panels with our accent borders.
   ---------------------------------------------------------------- */
.woocommerce-page .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
  background-color: var(--wc-panel);
  border: 1px solid var(--wc-panel-border);
  border-radius: var(--wc-radius-sm);
  color: var(--text);
}
.woocommerce-page .wc-block-components-notice-banner.is-info {
  border-left: 3px solid var(--yellow);
}
.woocommerce-page .wc-block-components-notice-banner.is-success {
  border-left: 3px solid var(--cyan);
}
.woocommerce-page .wc-block-components-notice-banner.is-error {
  border-left: 3px solid #ff7676;
}
.woocommerce-page .wc-block-components-notice-banner.is-warning {
  border-left: 3px solid var(--yellow);
}
.wc-block-components-notice-banner,
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner__content p {
  color: var(--text);
}
/* Links inside banners (e.g. "Click here to enter your code", "View cart")
   — core sets color:#2f2f2f!important, so we must match it. */
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner__content a {
  color: var(--cyan) !important;
}
/* Info-banner icon chip → on-brand instead of the default dark grey */
.woocommerce-page .wc-block-components-notice-banner.is-info > svg {
  background-color: var(--cyan);
  fill: #020606;
}

/* Coupon toggle bar — no border at all (requested). Unscoped + !important
   so it beats the block-notice-banner border rules regardless of state. */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon-toggle .wc-block-components-notice-banner,
.woocommerce-form-coupon-toggle .woocommerce-info {
  border: none !important;
}