/*
 * CUSTOM CSS - BRICKEEZ
 * --------------------------------------------------------------------------
 * 1. Global Utilities & Elementor Overrides
 * 2. Header & Navigation (Mobile Menu Fixes)
 * 3. Checkout Page Architecture (Tunnel Mode)
 * 4. Checkout Components (Steps, Summary, Reassurance)
 * 5. UI Elements (Forms, Buttons)
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
   1. GLOBAL UTILITIES & ELEMENTOR OVERRIDES
   ========================================================================== */

/* Hide countdown widget if no real countdown exists */
.elementor-widget-product-sale-countdown.elementor-widget-countdown:not(
    :has(.elementor-countdown-wrapper)
  ) {
  display: none !important;
}

/* Fix Elementor Lightbox background */
.elementor-lightbox-image {
  background: #fff;
}

/* ==========================================================================
   2. HEADER & NAVIGATION (MOBILE MENU FIXES)
   Target: .elementor-element-8ca08ad
   ========================================================================== */

@media (max-width: 768px) {
  /* Fix Dropdown Container: Full screen overlay */
  .elementor-element-8ca08ad nav.elementor-nav--dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    z-index: 9998 !important;
    padding-top: 70px !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    display: block !important;
  }

  /* Ensure Burger Toggle remains clickable */
  .elementor-element-8ca08ad .elementor-menu-toggle {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Reset UL styles for this menu */
  .elementor-element-8ca08ad nav.elementor-nav--dropdown ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    list-style: none !important;
  }

  /* Main Menu Items Styling */
  .elementor-element-8ca08ad
    nav.elementor-nav--dropdown
    > ul
    > li
    > a.elementor-item {
    font-size: 18px !important;
    padding: 20px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    background-color: transparent !important;
    color: #000 !important;
  }

  /* Sub-menu styling (Accordion style) */
  .elementor-element-8ca08ad nav.elementor-nav--dropdown ul.sub-menu {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    background-color: #f9f9f9 !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sub-menu Items Styling */
  .elementor-element-8ca08ad
    nav.elementor-nav--dropdown
    ul.sub-menu
    li
    a.elementor-sub-item {
    font-size: 15px !important;
    padding: 12px 20px 12px 40px !important;
    height: auto !important;
    line-height: 1.4 !important;
    display: block !important;
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333 !important;
  }

  /* Hide Arrow on sub-items */
  .elementor-element-8ca08ad nav.elementor-nav--dropdown .sub-arrow {
    position: absolute;
    right: 20px;
    top: 22px;
  }
}

/* ==========================================================================
   3. CHECKOUT PAGE ARCHITECTURE (TUNNEL MODE)
   Applies only to body#checkout
   ========================================================================== */

/* Hide Header Distractions (Nav, Search, Cart, Login) */
body#checkout .elementor-1170101 .elementor-widget-nav-menu,
body#checkout .elementor-1170101 .elementor-widget-ajax-search,
body#checkout .elementor-1170101 .elementor-widget-sign-in,
body#checkout .elementor-1170101 .elementor-widget-shopping-cart,
body#checkout .elementor-1170101 .elementor-menu-toggle,
body#checkout header.site-header .main-navigation,
body#checkout .top-banner {
  display: none !important;
}

/* Center Logo in Tunnel Mode */
body#checkout .elementor-1170101 .elementor-element-30b96e8,
body#checkout .elementor-1170101 .elementor-col-33 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100%;
}

body#checkout .elementor-1170101 .elementor-widget-image {
  text-align: center;
  margin: 0 auto;
}

body#checkout .elementor-1170101 .elementor-widget-image img {
  margin: 0 auto;
  display: block;
}

/* Hide Footer Distractions */
body#checkout .elementor-3170101 .elementor-widget-icon-list,
body#checkout .elementor-3170101 .elementor-widget-social-icons,
body#checkout .elementor-3170101 .elementor-widget-text-editor {
  display: none !important;
}

/* Minimal Footer Styling */
body#checkout #footer {
  padding: 20px 0 !important;
  border-top: 1px solid #eee;
}

/* General Layout Reset */
.checkout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* ==========================================================================
   4. CHECKOUT COMPONENTS (Steps, Summary, Reassurance)
   ========================================================================== */

/* --- Step Indicators --- */
.checkout-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
  padding: 0 1rem;
}

.checkout-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e5e5e5;
  z-index: 0;
}

.checkout-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  color: #999;
}

.checkout-step .step-circle {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
  margin: 0 auto 0.25rem;
  font-weight: 600;
  color: #666;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Active Step Highlight */
.checkout-step.active .step-circle,
.checkout-step.completed .step-circle,
body#checkout .checkout__steps__item .nav-link.active {
  border-color: #e31e24;
  background-color: #e31e24; /* Fallback/Base */
  color: #e31e24 !important;
}

/* Fix for specific PrestaShop step classes */
.checkout-step.completed .step-circle {
  border-color: #a3e7a3;
  background-color: #a3e7a3;
  color: #fff;
}

body#checkout .step-title {
  color: #e31e24 !important;
  font-weight: 800;
}

/* --- Cart Summary (Right Column) --- */
.order-summary,
body#checkout .cart-summary {
  flex: 1;
  min-width: 260px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1.5rem;
  background-color: #fafafa;
  height: fit-content;
}

/* Sticky Summary on Desktop */
@media (min-width: 992px) {
  body#checkout .cart-grid-right {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    z-index: 10;
  }
}

/* --- Reassurance Block --- */
body#checkout .blockreassurance_product {
  background: #fdfdfd;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

body#checkout .blockreassurance_product .block-title {
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ==========================================================================
   5. UI ELEMENTS (FORMS & BUTTONS)
   ========================================================================== */

/* --- Forms (Fitts's Law Optimization) --- */
body#checkout .form-control {
  min-height: 50px; /* Larger click area for mobile */
  background-color: #fcfcfc;
  border: 1px solid #dcdcdc;
  font-size: 16px; /* Prevent auto-zoom on iOS */
  padding-left: 15px;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body#checkout .form-control:focus {
  background-color: #ffffff;
  border-color: #e31e24;
  box-shadow: 0 0 0 0.2rem rgba(227, 30, 36, 0.15);
}

/* Validation Feedback */
input:invalid {
  border-color: #e31e24;
}

/* --- Buttons (Primary & Continue) --- */
body#checkout .btn-primary,
body#checkout button[name="continue"],
body#checkout #payment-confirmation button,
.checkout-button {
  width: 100%;
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 20px;
  border-radius: 6px;
  background-color: #e31e24;
  color: #fff;
  border: none; /* Reset borders */
  transition: all 0.3s ease;
  margin-top: 15px;
  cursor: pointer;
}

body#checkout .btn-primary:hover,
body#checkout button[name="continue"]:hover {
  background-color: #c41217;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body#checkout .btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* --- Checkboxes & Radios --- */
.checkout-form .checkbox input,
.checkout-form .radio input {
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
  accent-color: #e31e24;
}

/* Responsive adjustments for layout */
@media (max-width: 768px) {
  .checkout-container {
    flex-direction: column;
  }
  .order-summary {
    position: static;
    width: 100%;
  }
}