/**
 * @file assets/css/theme-overrides.css
 * @ai-rules WooCommerce overrides only. Use Tailwind in templates for everything else.
 *           Only add CSS here if: 1) WC core override, 2) Plugin styling, 3) Pseudo-elements
 */

/* ==========================================================================
   GLOBAL CONTAINER WIDTH - Ensures consistent width across all pages
   Must match nav.php header container (max-w-screen-2xl = 1536px)
   ========================================================================== */
.max-w-screen-2xl {
  max-width: 1536px !important;
  width: 100%;
}

/* Ensure all main content wrappers have consistent width */
main > section,
main > div,
.single-product-wrapper,
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering {
  box-sizing: border-box;
}

/* ==========================================================================
   CART ITEM VARIATION DATA
   ========================================================================== */
.woocommerce-cart-item-data,
.variation {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.woocommerce-cart-item-data dt,
.variation dt { 
  display: inline;
  font-weight: 500;
  color: #9ca3af;
}
.woocommerce-cart-item-data dd,
.variation dd {
  display: inline;
  margin: 0;
  margin-right: 0.75rem;
  color: #374151;
  font-weight: 500;
}
.woocommerce-cart-item-data p,
.variation p {
  margin: 0;
  display: inline;
}

/* ==========================================================================
   BULK DISCOUNT TABLE (Advanced Woo Discount Rules)
   ========================================================================== */
.single-product .joalpe-bulk-pricing {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.single-product .wdr_bulk_table_msg {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
  margin: 0;
  background: transparent;
}
.single-product .wdr_bulk_table_thead th {
  background: #f9fafb;
  color: #171717;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.single-product .wdr_bulk_table_thead th:last-child {
  text-align: right;
  color: #f97316;
}
.single-product .wdr_bulk_table_tr td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f3f4f6;
  font-size: 0.95rem;
  color: #111827;
}
.single-product .wdr_bulk_table_tr td:last-child {
  text-align: right;
  color: #f97316;
  font-weight: 700;
}
.single-product .wdr_bulk_table_tr:first-child td { border-top: none; }
.single-product .wdr_bulk_table_tr:nth-child(even) td { background: #fafafa; }
.single-product .awdr_discount_bar {
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

/* Color swatches - see color-swatches.css for styling */

/* ==========================================================================
   VARIATION CARDS - Unified Design System
   ========================================================================== */

/* Variation label - consistent across all types */
.single-product .joalpe-variation-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #171717;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: static;
  transform: none;
  background: transparent;
  padding: 0;
  margin-bottom: 0.75rem;
  box-shadow: none;
}

/* Color swatches container - remove border when inside variation options */
.single-product .joalpe-variation-options .color-swatches-container,
.single-product .color-swatches-container { 
  position: relative;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.single-product .color-swatches-container:hover {
  box-shadow: none;
}

/* Color swatch title - consistent label style */
.single-product .color-swatches-container .joalpe-swatch-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: auto !important;
  clear: none !important;
  margin: 0 0 0.75rem 0 !important;
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #171717 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.single-product .color-swatches-container .joalpe-swatch-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: #f97316;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Variation sections wrapper - adds spacing and visual separation */
.single-product .variations {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Each variation section gets a subtle card look */
.single-product .joalpe-variation-card {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  transition: border-color 0.2s ease;
}

.single-product .joalpe-variation-card:hover {
  border-color: #d1d5db;
}

/* ==========================================================================
   PRODUCT GALLERY - Viewport-constrained with equal margins
   Uses CSS custom property --gallery-top set by JS for dynamic positioning
   ========================================================================== */

/* Gallery column: use CSS variable for dynamic max-height */
#joalpe-gallery-column {
  --gallery-top: 140px; /* Default fallback, JS updates this */
  --gallery-bottom-margin: 24px;
}

/* The white card wrapper: constrain to available viewport space */
#joalpe-gallery-column > .bg-white {
  height: calc(100vh - var(--gallery-top) - var(--gallery-bottom-margin));
  display: flex;
  flex-direction: column;
}

/* Gallery container inside the card */
.single-product .joalpe-product-gallery {
  flex: 1 1 auto;
  min-height: 0; /* Critical: allows flex shrinking */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main image area: fills remaining space after thumbnails */
.single-product .joalpe-main-image-area {
  flex: 1 1 auto;
  min-height: 0; /* Critical: allows flex item to shrink below content size */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Zoom link wrapper inside main image area */
.single-product .joalpe-main-image-area .joalpe-zoom-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Main product image: never crop, always show full image */
.single-product .joalpe-main-image-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Thumbnail strip: fixed height, doesn't shrink */
.single-product .variation-thumbnails-gallery {
  flex: 0 0 auto;
}

/* ==========================================================================
   PRODUCT ADD TO CART FORMS
   ========================================================================== */

/* Quantity input styling */
.single-product .quantity .qty {
    height: 3.5rem !important;
    min-width: 92px !important;
    padding: 0 14px !important;
    border-radius: 1rem !important;
    border: 1px solid #d1d5db !important;
    background: white !important;
    font-size: 1rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.single-product .quantity .qty:focus {
    border-color: #fb923c !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2) !important;
}

/* Add to cart button styling */
.single-product .single_add_to_cart_button {
    height: 3.5rem !important;
    padding: 0 20px !important;
    border-radius: 1rem !important;
    background: linear-gradient(to right, #fb923c, #f97316) !important;
    border: 1px solid #fb923c !important;
    color: white !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease-out !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .single-product .single_add_to_cart_button {
        width: auto !important;
        flex: 1 !important;
    }
}

.single-product .single_add_to_cart_button:hover {
    filter: brightness(0.95) !important;
    transform: translateY(1px) !important;
}

.single-product .single_add_to_cart_button:active {
    transform: translateY(2px) !important;
}

.single-product .single_add_to_cart_button:focus {
    box-shadow: 0 0 0 16px rgba(251, 146, 60, 0.4) !important;
}

/* Form layout */
.single-product form.cart {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Variable products: the variation form is a full content block.
   Without this override, the flex row layout above can shrink the entire
   "Product options" section to the width of the widest child (which can be
   very narrow on products with few colors/options). */
.single-product form.variations_form.cart {
    flex-direction: column !important;
    align-items: stretch !important;
}

.single-product form.variations_form.cart > * {
    width: 100% !important;
}


.single-product form.cart .quantity {
    position: relative !important;
}

/* ==========================================================================
   VARIATION DETAILS BOX
   ========================================================================== */
.single-product .woocommerce-variation {
  margin-top: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.single-product .woocommerce-variation.j-has-content { display: block; }
.single-product .woocommerce-variation p { margin: 0.25rem 0; }
.single-product .woocommerce-variation strong { color: #7c2d12; }

/* Compact meta information */
.single-product .woocommerce-variation .variation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.single-product .woocommerce-variation .sku-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.single-product .woocommerce-variation .sku-value {
  font-weight: 600;
  color: #374151;
}

.single-product .woocommerce-variation .reset_variations {
  font-size: 0.75rem;
  font-weight: 500;
  color: #ea580c;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.single-product .woocommerce-variation .reset_variations:hover {
  color: #dc2626;
  background: #fef2f2;
  text-decoration: none;
}

/* ==========================================================================
   LEVERTIJD (Delivery Time)
   ========================================================================== */
.single-product .price-card .levertijd-row { margin-top: 0.5rem; }
.single-product .price-card .levertijd-row .levertijd-value { font-weight: 700; color: #374151; }

.single-product .price-card .product-levertijd {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #374151;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  align-self: flex-start;
}
.single-product .price-card .product-levertijd *,
.single-product .price-card .product-levertijd span,
.single-product .price-card .product-levertijd .levertijd-value {
  text-align: left;
}
.single-product .price-card .product-levertijd .levertijd-label { font-weight: 700; }
.single-product .price-card .product-levertijd i { color: #f59e0b; }

/* ==========================================================================
   ATTRIBUTES TABLE
   ========================================================================== */
.single-product .price-card .shop_attributes,
.single-product .price-card .woocommerce-product-attributes {
  width: 100%;
}
.single-product .price-card .shop_attributes th,
.single-product .price-card .woocommerce-product-attributes th,
.single-product .price-card .shop_attributes td,
.single-product .price-card .woocommerce-product-attributes td,
.single-product .price-card .woocommerce-product-attributes-item__label,
.single-product .price-card .woocommerce-product-attributes-item__value {
  text-align: left;
  vertical-align: middle;
}
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td,
.single-product .woocommerce-product-attributes-item__label,
.single-product .woocommerce-product-attributes-item__value {
  text-align: left;
}

/* Variation table color circles */
.single-product .variation-table td span[style*="border-radius:50%"],
.single-product .variation-table td span[style*="border-radius: 50%"] {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   VARIATION CARD TRANSITIONS
   ========================================================================== */
.joalpe-variation-card,
.color-swatches-container {
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, transform 0.3s ease;
  opacity: 1;
  max-height: 500px;
  overflow: visible;
}
.joalpe-variation-card {
  overflow: visible;
}
.joalpe-variation-card.joalpe-hidden-variation,
.color-swatches-container.joalpe-hidden-variation {
  opacity: 0;
  max-height: 0;
  margin: 0;
  transform: scale(0.95);
  pointer-events: none;
}
/* .color-swatch.disabled - see color-swatches.css */

/* ==========================================================================
   STEP LAYOUT VARIATIONS
   ========================================================================== */
.single-product .joalpe-steps-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.single-product .joalpe-variation-step {
  position: relative !important;
}

/* Position the vertical line and circles */
.single-product .joalpe-variation-step:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  left: 14px !important; /* Center of the circle */
  top: 36px !important; /* Below the circle/label row */
  bottom: -1.25rem !important; /* Above next step */
  width: 1px !important;
  background: #e5e7eb !important; /* Lighter, more subtle */
  z-index: 0 !important;
}

/* Step indicator and title alignment - same height */
.single-product .joalpe-variation-step .flex.items-center.gap-2,
.single-product .joalpe-variation-step .flex.items-center.gap-3 {
  align-items: center !important;
  margin-bottom: 0.5rem !important;
}

.single-product .joalpe-step-indicator {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  background: #f3f4f6 !important; /* Lighter background */
  color: #6b7280 !important; /* Subtle text color */
}

.single-product .joalpe-variation-legend {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4b5563 !important; /* Softer than pure black */
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important; /* Reduced letter spacing */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Options container - aligned with label text */
.single-product .joalpe-variation-options {
  margin-top: 0 !important;
  margin-left: 36px !important; /* Reduced to match smaller circle */
  position: relative !important;
  z-index: 1 !important;
}

/* Remove left margin for single-attribute inline layout */
.single-product .variations:not(.joalpe-step-variations) .joalpe-variation-options {
  margin-left: 0 !important;
}

/* Single-attribute card styling */
.single-product .joalpe-single-attribute-card {
  transition: all 0.2s ease;
}

.single-product .joalpe-single-attribute-card:hover {
  border-color: #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.single-product .joalpe-attribute-icon {
  transition: all 0.2s ease;
}

.single-product .joalpe-single-attribute-card:hover .joalpe-attribute-icon {
  background: #fed7aa;
  color: #ea580c;
}

/* Ensure option boxes in single-attribute cards have proper styling */
.single-product .joalpe-single-attribute-card .joalpe-option-boxes {
  margin-top: 0;
  gap: 0.5rem;
}

/* Fix label display in single-attribute cards */
.single-product .joalpe-single-attribute-card .joalpe-variation-legend {
  display: inline !important;
  width: auto !important;
  flex: none !important;
}


.single-product .joalpe-option-boxes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important; /* Tighter gap */
  margin-top: 0 !important;
}

/* ==========================================================================
   PRODUCT SPECIFICATIONS TABLE
   ========================================================================== */
.single-product details.joalpe-specs-toggle > summary::-webkit-details-marker {
  display: none;
}
.single-product details.joalpe-specs-toggle > summary::marker {
  content: '';
}
.single-product details.joalpe-specs-toggle > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

/* Toggle label + chevron state (do not rely on Tailwind's group-open variant) */
.single-product details.joalpe-specs-toggle .joalpe-specs-less {
  display: none;
}
.single-product details.joalpe-specs-toggle[open] .joalpe-specs-more {
  display: none;
}
.single-product details.joalpe-specs-toggle[open] .joalpe-specs-less {
  display: inline;
}
.single-product details.joalpe-specs-toggle .joalpe-specs-chevron {
  transition: transform 0.2s ease;
}
.single-product details.joalpe-specs-toggle[open] .joalpe-specs-chevron {
  transform: rotate(180deg);
}

.single-product .bg-white.rounded-2xl dt {
  color: #6b7280 !important; /* Softer label color */
  font-size: 11px !important; /* Even smaller labels */
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

.single-product .bg-white.rounded-2xl dd {
  color: #374151 !important; /* Darker value color */
  font-size: 12px !important; /* Even smaller values */
  font-weight: 400 !important; /* Regular weight instead of medium */
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important; /* System font for better readability */
  line-height: 1.2 !important; /* Very tight line height */
}

/* Specification rows - more compact */
.single-product .bg-white.rounded-2xl .flex.justify-between {
  padding: 0.375rem 0 !important; /* Even more reduced padding */
  border-bottom-color: #f3f4f6 !important; /* Lighter border */
}

.single-product .bg-white.rounded-2xl .flex.justify-between:last-child {
  border-bottom: none !important;
}

/* Also target the dl elements directly */
.single-product dl dt {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

.single-product dl dd {
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   OPTION BOXES (Non-color Attributes)
   ========================================================================== */
.joalpe-select-hidden { 
  position: absolute !important; 
  width: 0 !important; 
  height: 0 !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  opacity: 0 !important; 
  pointer-events: none !important; 
}
.joalpe-option-boxes { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.375rem; 
  margin-top: 0.25rem; 
}
.joalpe-option-box {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  min-height: 32px; 
  padding: 0.375rem 0.625rem;
  border: 1px solid #e5e7eb; 
  border-radius: 0.375rem; 
  background: #ffffff;
  color: #4b5563; /* Softer text color */
  font-size: 13px; /* Smaller text */
  font-weight: 400; /* Regular weight */
  line-height: 1; 
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); /* Subtle shadow */
  transition: all 0.2s ease;
  position: relative;
}
.joalpe-option-box:hover { 
  border-color: #d1d5db; 
  background: #f9fafb;
  color: #374151;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.joalpe-option-box.selected { 
  border-color: #f97316; 
  background: #fff7ed; 
  color: #c2410c; /* Darker orange for better contrast */
  font-weight: 500; /* Slightly bolder when selected */ 
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.15);
}
.joalpe-option-box.disabled { 
  opacity: 0.5; 
  pointer-events: none; 
  filter: grayscale(.5);
  border-color: #E5E7EB;
  background: #F9FAFB;
  color: #9CA3AF;
  position: relative;
}
.joalpe-option-box.disabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 6px);
  pointer-events: none;
  border-radius: 0.375rem;
}

/* ==========================================================================
   LOCKED BADGE (Single Option)
   ========================================================================== */
.joalpe-variation-locked { position: relative; }
.joalpe-locked-badge {
  display: inline-block; 
  margin-top: 0.375rem; 
  padding: 2px 6px;
  font-size: 10px; 
  font-weight: 700; 
  color: #6b7280;
  background: #f3f4f6; 
  border: 1px solid #e5e7eb; 
  border-radius: 9999px;
}
.color-swatches-container.locked .color-swatch { cursor: default; }
/* Disabled color swatch styling in color-swatches.css */

/* ==========================================================================
   PRODUCT GRID SPACING
   ========================================================================== */
/* WooCommerce clearfix pseudo-elements break CSS Grid - disable them */
.tw-grid-products::before,
.tw-grid-products::after {
  content: none !important;
  display: none !important;
}

.woocommerce .products ul,
.woocommerce ul.products {
  margin-top: 0 !important;
  margin-bottom: 2.5em;
}

/* Ensure product container and sidebar filters align perfectly at grid top */
.product-archive-container,
.product-archive-container > ul.products,
#product-filters,
#mobile-filters {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Force sidebar and products to align at same grid row start */
#mobile-filters,
.product-archive-container {
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Sticky filter sidebar on desktop */
@media (min-width: 1024px) {
  #mobile-filters {
    top: calc(var(--header-offset, 96px) + 2rem);
  }
}

/* ==========================================================================
   PAGINATION - Custom styles handled in loop/pagination.php with Tailwind
   ========================================================================== */
.woocommerce-pagination ul.page-numbers {
  display: none; /* Hide default WC pagination if it appears */
}

/* ==========================================================================
   LIVE SEARCH SPINNER
   ========================================================================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.6s linear infinite;
}

/* ==========================================================================
   PRODUCT CARD BUTTON - Diagonal Orange Accent
   ========================================================================== */
.joalpe-card-btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(135deg, transparent 50%, #f97316 50%);
  transition: all 0.2s ease;
}

.joalpe-card-btn:hover::before {
  opacity: 0;
}

/* ==========================================================================
   PRODUCT CARD PRICE (WooCommerce output override)
   ========================================================================== */
.joalpe-product-card .price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
}
.joalpe-product-card .price del {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 400;
  order: 2;
}
.joalpe-product-card .price ins {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.joalpe-product-card .price .woocommerce-Price-amount {
  font-feature-settings: 'tnum';
  font-weight: 500; /* Less bold, consistent with product page */
}

/* ==========================================================================
   MY ACCOUNT REGISTRATION PRIVACY TEXT
   ========================================================================== */
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
  display: none;
}

/* ==========================================================================
   MY ACCOUNT FORMS - Orange Accent Styling
   ========================================================================== */

/* Account form fields inherit orange focus styling */
.woocommerce-account .woocommerce-Input,
.woocommerce-account .woocommerce-input-wrapper input,
.woocommerce-account .woocommerce-input-wrapper select,
.woocommerce-account .woocommerce-input-wrapper textarea {
  border-color: #d1d5db;
  transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account .woocommerce-input-wrapper input:focus,
.woocommerce-account .woocommerce-input-wrapper select:focus,
.woocommerce-account .woocommerce-input-wrapper textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  outline: none;
}

/* Form labels consistent styling */
.woocommerce-account .woocommerce-form-row label {
  color: #374151;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Required field indicators */
.woocommerce-account .woocommerce-form-row label .required {
  color: #ef4444;
}

/* Validation errors */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-left: 4px solid #f97316;
  background: #fff7ed;
  color: #7c2d12;
}

.woocommerce-account .woocommerce-error {
  border-left-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
}

.woocommerce-account .woocommerce-message {
  border-left-color: #10b981;
  background: #f0fdf4;
  color: #065f46;
}

/* Address form field styling override */
.woocommerce-account form .form-row {
  padding: 0;
  margin: 0;
}

.woocommerce-account form .form-row .woocommerce-input-wrapper {
  width: 100%;
}

.woocommerce-account form .form-row input,
.woocommerce-account form .form-row select,
.woocommerce-account form .form-row textarea {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.woocommerce-account form .form-row input:focus,
.woocommerce-account form .form-row select:focus,
.woocommerce-account form .form-row textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  outline: none;
}

/* Country/state select styling */
.woocommerce-account form .form-row .select2-container--default .select2-selection--single {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
}

.woocommerce-account form .form-row .select2-container--default .select2-selection--single:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  outline: none;
}

/* ==========================================================================
   CHECKOUT PAYMENT METHODS
   ========================================================================== */

/* Payment methods list container */
#payment .wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each payment method item */
#payment .wc_payment_method {
  margin-bottom: 0.75rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Radio button inline with label - align to center of payment card */
#payment .wc_payment_method > input[type="radio"] {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 0 0 1rem !important;
  align-self: center !important;
  accent-color: #f97316 !important;
}

#payment .wc_payment_method:last-child {
  margin-bottom: 0 !important;
}

#payment .wc_payment_method:hover {
  border-color: #d1d5db !important;
}

/* Selected payment method */
#payment .wc_payment_method.wc_payment_method_selected {
  border-color: #f97316 !important;
  background: #fffbeb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

/* Payment method label - inline with radio */
#payment .wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1rem 1rem 1rem 0.75rem !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-weight: 500 !important;
  color: #374151 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label,
#payment .payment_method_woocommerce_payments_ideal > label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label > img,
#payment .payment_method_woocommerce_payments_ideal > label > img {
  height: 24px !important;
  width: auto !important;
  max-width: none !important;
  align-self: center !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label .payment-method-icons,
#payment .payment_method_woocommerce_payments_ideal > label .payment-method-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  align-self: center !important;
}

/* Payment box - full width below radio+label */
#payment .wc_payment_method > .payment_box {
  flex-basis: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem !important;
  padding-left: 2.75rem !important;
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  box-sizing: border-box !important;
}

/* Payment method title text */
#payment .wc_payment_method label .wc-gateway-title,
#payment .wc_payment_method label > span:first-of-type {
  flex: 1 !important;
}

#payment .wc_payment_method > label .wc-gateway-title,
#payment .wc_payment_method > label > span:first-of-type {
  min-width: 0 !important;
}

#payment .wc_payment_method > label .joalpe-gateway-title {
  min-width: 0 !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label .joalpe-gateway-title,
#payment .payment_method_woocommerce_payments_ideal > label .joalpe-gateway-title {
  flex: 1 !important;
  min-width: 0 !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label .wc-gateway-title,
#payment .payment_method_woocommerce_payments_bancontact > label > span:first-of-type,
#payment .payment_method_woocommerce_payments_ideal > label .wc-gateway-title,
#payment .payment_method_woocommerce_payments_ideal > label > span:first-of-type {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Payment icons container */
#payment .wc_payment_method label img,
#payment .wc_payment_method label .payment-method-icons img {
  height: 24px !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0.25rem !important;
  align-self: center !important;
}

/* Payment icons wrapper for consistent positioning */
#payment .wc_payment_method label .payment-method-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  align-self: center !important;
}

/* +3 card counter - hide it, show all logos inline instead */
#payment .wc_payment_method label .payment-methods--logos-count {
  display: none !important;
}

/* Show all card logos from dialog inline */
#payment .wc_payment_method label button[aria-describedby] dialog {
  display: contents !important;
  position: static !important;
}

#payment .wc_payment_method label button[aria-describedby] dialog img {
  height: 20px !important;
  width: auto !important;
}

/* WooPayments specific - icon buttons */
#payment .wc_payment_method label button[aria-describedby] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
}


#payment .payment_method_woocommerce_payments_bancontact label button[aria-describedby],
#payment .payment_method_woocommerce_payments_ideal label button[aria-describedby] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
}

#payment .wc_payment_method label button[aria-describedby] img {
  height: 20px !important;
  width: auto !important;
}


#payment .wc_payment_method .payment_box p {
  margin: 0 0 0.75rem 0 !important;
  line-height: 1.5 !important;
}

#payment .wc_payment_method .payment_box p:last-child {
  margin-bottom: 0 !important;
}

/* Stripe/WooPayments card fields */
#payment .wc_payment_method .payment_box fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#payment .wc_payment_method .payment_box label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin-bottom: 0.25rem !important;
}

/* Save payment checkbox */
#payment .wc_payment_method .payment_box .woocommerce-SavedPaymentMethods-saveNew,
#payment .wc_payment_method .payment_box .wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
}

#payment .wc_payment_method .payment_box input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #f97316 !important;
}

/* Redirect-only gateways (WooPayments UPE) show a generic message inside a Stripe iframe.
   We can't edit iframe copy reliably, so we hide that block and show our own note. */
#payment .payment_method_woocommerce_payments_bancontact .payment_box .wcpay-upe-element,
#payment .payment_method_woocommerce_payments_ideal .payment_box .wcpay-upe-element {
  display: none !important;
}

#payment .payment_method_woocommerce_payments_bancontact .payment_box > :not(.joalpe-redirect-gateway-note),
#payment .payment_method_woocommerce_payments_ideal .payment_box > :not(.joalpe-redirect-gateway-note) {
  display: none !important;
}

#payment .payment_method_woocommerce_payments_bancontact .payment_box,
#payment .payment_method_woocommerce_payments_ideal .payment_box {
  display: none !important;
}

#payment .payment_box .joalpe-redirect-gateway-note {
  margin: 0 !important;
  padding: 0.75rem 0.875rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  color: #374151 !important;
}

#payment .wc_payment_method > label .joalpe-redirect-gateway-inline-note {
  display: block !important;
  margin-top: 0.25rem !important;
  text-align: left !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
}

#payment .payment_method_woocommerce_payments_bancontact > label .joalpe-redirect-gateway-inline-note,
#payment .payment_method_woocommerce_payments_ideal > label .joalpe-redirect-gateway-inline-note {
  display: none !important;
}

/* Show redirect text in payment box instead */
#payment .payment_method_woocommerce_payments_bancontact .payment_box::before,
#payment .payment_method_woocommerce_payments_ideal .payment_box::before {
  content: "Je wordt doorgestuurd om te betalen.";
  display: block !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* ==========================================================================
   CART QUANTITY INPUT - Hide native spinbuttons
   ========================================================================== */
.joalpe-qty-input::-webkit-outer-spin-button,
.joalpe-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.joalpe-qty-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ==========================================================================
   CART REMOVE ITEM - Loading State
   Shows a spinner when removing item from cart
   ========================================================================== */
.remove-item.loading {
  pointer-events: none;
  cursor: wait;
}

/* Hide the X icon when loading */
.remove-item.loading .fa-times {
  display: none;
}

/* Show spinner via ::after pseudo-element */
.remove-item.loading::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: #f97316;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ==========================================================================
   PRICE CHANGE FEEDBACK ANIMATIONS
   Visual feedback when price updates due to variant/quantity changes
   ========================================================================== */

/* Price pulse animation - subtle scale + glow effect */
@keyframes joalpe-price-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Price highlight animation - background flash */
@keyframes joalpe-price-highlight {
  0% {
    background-color: rgba(249, 115, 22, 0.3);
  }
  100% {
    background-color: transparent;
  }
}

/* Price changed class - applied temporarily on update */
.joalpe-price-changed {
  animation: joalpe-price-pulse 0.4s ease-out;
}

#joalpe-price-value.joalpe-price-changed,
#joalpe-mini-price-value.joalpe-price-changed {
  animation: joalpe-price-pulse 0.4s ease-out;
  border-radius: 0.5rem;
}

/* Hero price highlight effect */
#joalpe-price-display.joalpe-price-highlight {
  animation: joalpe-price-highlight 0.8s ease-out;
}

/* Floating price toast - appears when scrolled and price changes */
#joalpe-price-toast {
  position: fixed;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: white;
  padding: 0.875rem 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  font-size: 0.9375rem;
  font-weight: 500;
  max-width: calc(100vw - 2rem);
}

#joalpe-price-toast.joalpe-toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#joalpe-price-toast .joalpe-toast-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#joalpe-price-toast .joalpe-toast-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  color: white;
}

#joalpe-price-toast .joalpe-toast-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

#joalpe-price-toast .joalpe-toast-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  font-weight: 600;
}

#joalpe-price-toast .joalpe-toast-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f97316;
  line-height: 1.2;
}

#joalpe-price-toast .joalpe-toast-close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: 0.25rem;
}

#joalpe-price-toast .joalpe-toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

#joalpe-price-toast .joalpe-toast-close svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Sticky mini-header enhanced visibility */
#joalpe-sticky-mini-header.joalpe-mini-header-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Mini header price pulse - more prominent */
#joalpe-sticky-mini-header #joalpe-mini-price-value.joalpe-price-changed {
  animation: joalpe-price-pulse 0.4s ease-out;
  background: rgba(249, 115, 22, 0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  margin: -0.25rem -0.5rem;
}

/* Price direction indicators */
.joalpe-price-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 0.375rem;
  font-size: 0.75em;
  animation: joalpe-arrow-fade 2s ease-out forwards;
}

@keyframes joalpe-arrow-fade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.joalpe-price-arrow.down {
  color: #22c55e;
}

.joalpe-price-arrow.up {
  color: #ef4444;
}

/* Bulk pricing table row highlight on tier match */
.joalpe-bp-tier-row.joalpe-tier-active {
  background: #fff7ed !important;
  /* Use box-shadow for left border indicator - doesn't affect table layout */
  box-shadow: inset 3px 0 0 #f97316;
}

.joalpe-bp-tier-row.joalpe-tier-active td {
  font-weight: 600 !important;
}

/* Mobile-friendly adjustments */
@media (max-width: 640px) {
  #joalpe-price-toast {
    bottom: 5rem;
    left: 1rem;
    right: 1rem;
    transform: translateX(0) translateY(100px);
    max-width: none;
  }
  
  #joalpe-price-toast.joalpe-toast-visible {
    transform: translateX(0) translateY(0);
  }
}

/* ==========================================================================
   QUANTITY INPUT WITH +/- BUTTONS
   ========================================================================== */
.joalpe-quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  height: 56px;
}

.joalpe-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #525252;
}

.joalpe-qty-btn:hover {
  background: #f3f4f6;
  color: #f97316;
}

.joalpe-qty-btn:active {
  background: #e5e7eb;
}

.joalpe-qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.joalpe-qty-btn svg {
  width: 1rem;
  height: 1rem;
}

.joalpe-qty-input {
  width: 60px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #171717;
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.joalpe-qty-input::-webkit-outer-spin-button,
.joalpe-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.joalpe-qty-input:focus {
  outline: none;
  background: #fef3e2;
}

/* Quantity button click handler */
.joalpe-qty-btn[data-qty-change] {
  user-select: none;
}

/* ==========================================================================
   PLUGIN OVERRIDES - Hide unwanted shipping bar on cart/checkout
   ========================================================================== */
.woocommerce-notices-wrapper [role="alert"]:has(a[href*="winkel"]) {
  display: none !important;
}