/* =============================================================================
 * ui-foundation.css — Jaguar Adventure
 * Native modern CSS (2026). MINIMAL, SAFE scope: only the header/nav legibility
 * fix on hero-less pages. (The earlier WooCommerce/portal restyle was rolled
 * back because it conflicted with Astra/Elementor/WooCommerce layout; it will
 * be re-introduced incrementally with visual verification.)
 *
 * Unlayered on purpose: the host styles are unlayered and would otherwise beat
 * any @layer rule regardless of specificity.
 * ===========================================================================*/

:root {
  --ja-ink:    #0a090c;
  --ja-orange: #f18f01;
  --ja-yellow: #f7ed33;
}

/* -----------------------------------------------------------------------------
 * HEADER / NAV — force a solid, legible header on hero-less pages.
 * Root cause: the solid-header JS matched slugs 'cart'/'checkout', but the real
 * slugs are 'carro' and 'finalizar-comprar', so the header stayed transparent
 * → light menu text over a white page = invisible. Driven off body classes so
 * it can never drift again.
 * ---------------------------------------------------------------------------*/
body.woocommerce-cart           header.site-header,
body.woocommerce-checkout       header.site-header,
body.woocommerce-order-received header.site-header,
body.page-id-1879               header.site-header {
  background-color: var(--ja-ink);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--ja-yellow) 55%, transparent);
}

body.woocommerce-cart           header.site-header :where(.menu-link, .menu-item > a),
body.woocommerce-checkout       header.site-header :where(.menu-link, .menu-item > a),
body.woocommerce-order-received header.site-header :where(.menu-link, .menu-item > a),
body.page-id-1879               header.site-header :where(.menu-link, .menu-item > a) {
  color: #fff;
}
body.woocommerce-cart           header.site-header :where(.menu-link, .menu-item > a):hover,
body.woocommerce-checkout       header.site-header :where(.menu-link, .menu-item > a):hover,
body.woocommerce-order-received header.site-header :where(.menu-link, .menu-item > a):hover,
body.page-id-1879               header.site-header :where(.menu-link, .menu-item > a):hover {
  color: var(--ja-yellow);
}

/* -----------------------------------------------------------------------------
 * WOOCOMMERCE CART/CHECKOUT — ADDITIVE polish only (verified via screenshots).
 * No display/structure changes (the classic form has hook-injected children;
 * a grid here reshuffles them — never do that). Cosmetic-only overrides.
 * ---------------------------------------------------------------------------*/

/* Fix the invisible "Ver carrito" button in WC notices (was yellow on yellow). */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  background: var(--ja-ink) !important;
  color: var(--ja-yellow) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.95rem !important;
  font-weight: 700 !important;
}

/* Fields: consistent radius + brand focus ring. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
  border: 1px solid color-mix(in srgb, var(--ja-ink) 18%, transparent) !important;
  border-radius: 9px !important;
  min-height: 46px;
  padding: 0.6rem 0.8rem !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--ja-orange) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ja-orange) 25%, transparent) !important;
  outline: none !important;
}

/* Order summary as a clearer card. */
.woocommerce-checkout #order_review {
  border: 1px solid color-mix(in srgb, var(--ja-ink) 12%, transparent);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--ja-ink) 8%, transparent),
              0 12px 28px -12px color-mix(in srgb, var(--ja-ink) 22%, transparent);
}

/* Place-order button polish (keeps the brand yellow + dark text). */
.woocommerce #place_order {
  border-radius: 10px !important;
  padding: 0.95rem 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
 * WOOCOMMERCE MY ACCOUNT (incl. lost-password) — same hero-less header fix as
 * cart/checkout, plus brand-aligned account forms (additive only).
 * ---------------------------------------------------------------------------*/
body.woocommerce-account header.site-header {
  background-color: var(--ja-ink);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--ja-yellow) 55%, transparent);
}
body.woocommerce-account header.site-header :where(.menu-link, .menu-item > a) { color: #fff; }
body.woocommerce-account header.site-header :where(.menu-link, .menu-item > a):hover { color: var(--ja-yellow); }

/* Center + card the account forms (lost password / login / register). */
.woocommerce-account .woocommerce { max-width: 560px; margin-inline: auto; }
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ja-ink) 12%, transparent);
  border-radius: 14px;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--ja-ink) 8%, transparent),
              0 12px 28px -12px color-mix(in srgb, var(--ja-ink) 22%, transparent);
  border-block-start: 3px solid var(--ja-orange);
}

/* Account buttons: dark text on brand orange (was invisible: yellow on yellow). */
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account .button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ja-orange) !important;
  color: var(--ja-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1.4rem !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: filter 0.2s;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover { filter: brightness(1.06); }

/* -----------------------------------------------------------------------------
 * B2B "keep booking" CTA on the order-received (thank-you) page.
 * ---------------------------------------------------------------------------*/
.b2b-back-cta { margin: 2rem 0 0.5rem; text-align: center; }
.b2b-back-cta--top { margin: 0 0 1.75rem; }
.b2b-back-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 10px;
  background: var(--ja-orange);
  color: var(--ja-ink);
  font-weight: 800;
  text-decoration: none;
  transition: filter 0.2s, transform 0.05s;
}
.b2b-back-cta__btn::before { content: "\2190"; font-weight: 700; } /* ← */
.b2b-back-cta__btn:hover { filter: brightness(1.06); }
.b2b-back-cta__btn:active { transform: translateY(1px); }

/* -----------------------------------------------------------------------------
 * WooCommerce loading overlay (jQuery blockUI) — replace the default dark
 * "ball" loader + harsh overlay with a clean brand ring spinner. Applies on
 * checkout place-order, order-review/cart updates, etc.
 * ---------------------------------------------------------------------------*/
@keyframes ja-spin { to { transform: rotate(360deg); } }

/* Kill WooCommerce's giant dimmed overlay; show a small centered loading chip. */
.woocommerce .blockUI.blockOverlay,
.blockUI.blockOverlay {
  background: transparent !important;
  cursor: wait;
}
/* White chip behind the spinner (the visible loading badge). */
.woocommerce .blockUI.blockOverlay::after,
.blockUI.blockOverlay::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 84px !important;
  height: 84px !important;
  margin: -42px 0 0 -42px !important;
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ja-ink) 35%, transparent) !important;
  z-index: 0 !important;
}
/* Brand ring spinner. */
.woocommerce .blockUI.blockOverlay::before,
.blockUI.blockOverlay::before {
  content: "" !important;
  width: 38px !important;
  height: 38px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -19px 0 0 -19px !important;
  background: none !important;            /* remove the default dark svg loader */
  border: 3px solid color-mix(in srgb, var(--ja-ink) 15%, transparent) !important;
  border-top-color: var(--ja-orange) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  animation: ja-spin 0.7s linear infinite !important;
  z-index: 1 !important;
}