/*
Theme Name: Apex Lounge (Hello Elementor Child)
Theme URI: https://apexloungebar.co.uk
Description: Custom child theme for Apex Lounge & Bar — dark charcoal, gold and purple lounge aesthetic, styled to match the site's Elementor pages and WooCommerce shop/checkout flow.
Author: Hola Web Solutions
Template: hello-elementor
Version: 1.0.0
Text Domain: apex-lounge-child
*/

/* =========================================================
   1. DESIGN TOKENS
   Change these once and the whole site (including WooCommerce)
   updates to match.
========================================================= */
:root {
  --apex-bg: #0d0b0e;              /* near-black charcoal background */
  --apex-bg-alt: #171317;          /* slightly lighter panel background */
  --apex-gold: #c9a24b;            /* primary accent — buttons, borders, prices */
  --apex-gold-light: #e4c878;      /* hover state gold */
  --apex-purple: #7c3aed;          /* ambient lounge lighting accent */
  --apex-purple-glow: rgba(124, 58, 237, 0.35);
  --apex-text: #f3ede2;            /* warm off-white body text */
  --apex-text-muted: #b8afa4;      /* secondary text */
  --apex-border: rgba(201, 162, 75, 0.25);
  --apex-radius: 2px;
  --apex-font-display: "Playfair Display", Georgia, serif;
  --apex-font-body: "Inter", -apple-system, sans-serif;
}

/* =========================================================
   2. GLOBAL BASE
========================================================= */
body {
  background-color: var(--apex-bg);
  color: var(--apex-text);
  font-family: var(--apex-font-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--apex-font-display);
  color: var(--apex-text);
  letter-spacing: 0.02em;
}

a {
  color: var(--apex-gold);
}
a:hover {
  color: var(--apex-gold-light);
}

/* Soft purple ambient glow utility — add class "apex-glow" to any
   Elementor section in the editor to echo the venue's lighting */
.apex-glow {
  position: relative;
}
.apex-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 20%, var(--apex-purple-glow), transparent 60%);
  z-index: 0;
}

/* Floral corner ornament utility — add class "apex-ornament" to a
   section/container to place a decorative corner accent */
.apex-ornament {
  position: relative;
}
.apex-ornament::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: 16px;
  bottom: 16px;
  background-image: url('images/floral-corner.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================================
   3. BUTTONS (Elementor + WooCommerce share this look)
========================================================= */
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.wp-block-button__link {
  background-color: transparent !important;
  color: var(--apex-gold) !important;
  border: 1px solid var(--apex-gold) !important;
  border-radius: var(--apex-radius) !important;
  font-family: var(--apex-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px 32px !important;
  transition: all 0.25s ease;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background-color: var(--apex-gold) !important;
  color: var(--apex-bg) !important;
  box-shadow: 0 0 24px var(--apex-purple-glow);
}

/* =========================================================
   4. WOOCOMMERCE — SHOP / ARCHIVE GRID
========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--apex-bg-alt);
  border: 1px solid var(--apex-border);
  border-radius: var(--apex-radius);
  padding: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--apex-gold);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--apex-font-display);
  color: var(--apex-text);
  font-size: 20px;
}
.woocommerce ul.products li.product .price {
  color: var(--apex-gold) !important;
  font-family: var(--apex-font-body);
  font-weight: 600;
}
.woocommerce span.onsale {
  background-color: var(--apex-purple) !important;
  border-radius: var(--apex-radius);
}

/* Category / archive headers */
.woocommerce-products-header__title,
.page-title {
  font-family: var(--apex-font-display);
  color: var(--apex-gold);
}

/* =========================================================
   5. WOOCOMMERCE — SINGLE PRODUCT PAGE
========================================================= */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--apex-gold) !important;
  font-family: var(--apex-font-display);
  font-size: 28px;
}
.woocommerce div.product .product_title {
  font-family: var(--apex-font-display);
  font-size: 36px;
}

/* Protein / Side / Drink add-on dropdowns (WooCommerce Product Add-Ons) */
.woocommerce div.product form.cart .addon,
.wc-pao-addon-container {
  border-top: 1px solid var(--apex-border);
  padding-top: 16px;
  margin-top: 16px;
}
.wc-pao-addon-name,
.addon-field-label {
  font-family: var(--apex-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--apex-text-muted) !important;
}
.woocommerce div.product form.cart select,
.wc-pao-addon-select {
  background-color: var(--apex-bg-alt) !important;
  color: var(--apex-text) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-radius) !important;
  padding: 10px 14px;
}

/* Quantity input */
.woocommerce div.product form.cart .quantity input.qty {
  background-color: var(--apex-bg-alt) !important;
  color: var(--apex-text) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-radius) !important;
}

/* =========================================================
   6. WOOCOMMERCE — CART
========================================================= */
.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--apex-bg-alt);
  border: 1px solid var(--apex-border);
  color: var(--apex-text);
}
.woocommerce-cart table.cart th {
  font-family: var(--apex-font-display);
  color: var(--apex-gold);
  border-bottom: 1px solid var(--apex-border);
}
.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--apex-gold) !important;
  font-size: 22px;
  font-family: var(--apex-font-display);
}

/* =========================================================
   7. WOOCOMMERCE — CHECKOUT
========================================================= */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-billing-fields {
  background-color: var(--apex-bg-alt);
  border: 1px solid var(--apex-border);
  border-radius: var(--apex-radius);
  padding: 24px;
}
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: var(--apex-bg) !important;
  color: var(--apex-text) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: var(--apex-radius) !important;
}
.woocommerce-checkout #place_order {
  width: 100%;
}

/* Delivery / Collection + time slot picker (Order Delivery Date plugin) */
.order_delivery_date_field,
.delivery-time-slot,
#delivery_checkout_shipping_time {
  background-color: var(--apex-bg) !important;
  border: 1px solid var(--apex-border) !important;
  color: var(--apex-text) !important;
  border-radius: var(--apex-radius) !important;
}

/* =========================================================
   8. ORDER CONFIRMATION
========================================================= */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--apex-font-display);
  color: var(--apex-gold);
  font-size: 24px;
  text-align: center;
}

/* =========================================================
   9. RESPONSIVE
========================================================= */
@media (max-width: 767px) {
  .woocommerce div.product .product_title { font-size: 26px; }
  .elementor-button, .woocommerce a.button { width: 100%; text-align: center; }
}