/* Custom CSS for wishlist and cart indicators */

/* Base styles for all icon indicators */
.icon-indicator {
  position: relative;
}

/* Common styles for all indicator numbers */
.icon-indicator-number {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1rem;
  width: 1rem;
  font-size: 0.7rem;
  border-radius: 50%;
  color: #fff;
  z-index: 1;
}

/* Style for the wishlist count */
.icon-indicator-primary .icon-indicator-number {
  background-color: var(--phoenix-primary);
}

/* Style for the cart count */
.icon-indicator-danger .icon-indicator-number {
  background-color: var(--phoenix-danger);
}

/* Ensure the icon indicators don't generate pseudo-elements */
.icon-indicator::before,
.icon-indicator::after,
.icon-indicator-primary::before,
.icon-indicator-primary::after,
.icon-indicator-danger::before,
.icon-indicator-danger::after {
  display: none !important;
}

/* Ensure counter is visible even when it's 0 */
.icon-indicator-number:empty::before {
  content: "0";
}

/* Wishlist button styling.
 * Uses the Phoenix accent (--phoenix-primary) on Phoenix storefronts, and
 * falls back to --theme-color on Subas and --phoenix-warning as a last resort,
 * so the outline follows whichever accent the current template defines. */
.btn-wish {
  background-color: transparent;
  border: 1px solid var(--phoenix-primary, var(--theme-color, var(--phoenix-warning)));
  color: var(--phoenix-primary, var(--theme-color, var(--phoenix-warning)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 1.25rem;
  line-height: 1.5;
  border-radius: 50rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-wish:hover {
  background-color: var(--phoenix-primary, var(--theme-color, var(--phoenix-warning)));
  color: white;
}

/* Smaller wishlist button variant */
.btn-wish.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 50rem;
}

/* Cart button styling (mimics btn-wish visually, but sized for icon, using danger color) */
.btn-cart-icon {
  background-color: transparent; /* Initial background */
  border: 1px solid var(--phoenix-danger); /* RED border color */
  color: var(--phoenix-danger); /* RED text/icon color */
  /* Use padding similar to btn-sm for a compact icon button */
  padding: 0.25rem 0.5rem;
  line-height: 1.5; /* Match btn-sm line-height */
  /* Remove specific border-radius to use default from .btn */
  /* border-radius: 50%; */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  /* Ensure it behaves like a flex container for icon centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cart-icon:hover {
  background-color: var(--phoenix-danger); /* RED hover background */
  color: white; /* White hover text/icon color */
}

/* Sticky preview positioning for dashboard footer editor */
.sticky-preview {
  top: 1rem;
}

/* Social account provider logo */
.provider-logo {
  max-height: 40px;
}

/* Order item row - theme-aware background for light/dark mode */
.order-item-row {
  background-color: var(--phoenix-emphasis-bg);
}

/* Centered content wrapper - used for centered page content like product not found */
.content-wrapper-centered {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 15px;
}

/* Large icon size - theme-aware utility class for large icons */
.icon-lg {
  font-size: 5rem;
}

/* ============================================
   Theme Button Styles (for frontend e-commerce)
   Uses --theme-color with dark mode support
   ============================================ */

/* Primary theme button - solid background */
.btn-theme {
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  color: var(--phoenix-white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 1.25rem;
  line-height: 1.5;
  border-radius: var(--phoenix-border-radius, 0.375rem);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
              border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.btn-theme:hover,
.btn-theme:focus {
  background-color: color-mix(in srgb, var(--theme-color) 85%, black);
  border-color: color-mix(in srgb, var(--theme-color) 85%, black);
  color: var(--phoenix-white, #fff);
  text-decoration: none;
}

.btn-theme:focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--theme-color) 25%, transparent);
}

/* Outline theme button - transparent background with border */
.btn-outline-theme {
  background-color: transparent;
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 1.25rem;
  line-height: 1.5;
  border-radius: var(--phoenix-border-radius, 0.375rem);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
              border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.btn-outline-theme:hover,
.btn-outline-theme:focus {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--phoenix-white, #fff);
  text-decoration: none;
}

.btn-outline-theme:focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--theme-color) 25%, transparent);
}

/* Dark mode adjustments for theme buttons */
[data-bs-theme="dark"] .btn-theme {
  color: var(--phoenix-white, #fff);
}

[data-bs-theme="dark"] .btn-outline-theme {
  color: var(--theme-color);
}

[data-bs-theme="dark"] .btn-outline-theme:hover,
[data-bs-theme="dark"] .btn-outline-theme:focus {
  color: var(--phoenix-white, #fff);
}

/* ============================================
   Zero Price Button Styles
   Fixed height button for zero-price items
   ============================================ */

.btn-zero-price {
  height: 44px;
}

/* Phoenix search: use nearly full viewport width (theme caps .product-filter-container like .container) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .product-filter-container {
    max-width: min(calc(100vw - 1rem), 100rem) !important;
  }
}
@media (min-width: 1200px) {
  .product-filter-container {
    max-width: calc(100vw - 1rem) !important;
    /* Default container uses 2rem; a bit tighter frees horizontal space for cards */
    --phoenix-gutter-x: 1.15rem;
  }
}

/* Phoenix search results: keep exposed grid gutters white while cards/filters remain distinct gray panels. */
.product-search-results-section {
  background-color: var(--phoenix-emphasis-bg);
  margin-left: calc(var(--phoenix-gutter-x, 2rem) * -0.5);
  margin-right: calc(var(--phoenix-gutter-x, 2rem) * -0.5);
  padding-left: calc(var(--phoenix-gutter-x, 2rem) * 0.5);
  padding-right: calc(var(--phoenix-gutter-x, 2rem) * 0.5);
}

/* Phoenix storefront: product listing tiles (search grid + item bar sliders).
   Scoped so dashboard / product detail image swipers are unaffected.
   Subas storefront does not load this stylesheet. */
.product-filter-container .product-card-container,
.swiper-theme-container.products-slider .product-card-container {
  /* Light theme: subtle is slightly lighter than secondary-bg (card body vs white image well). */
  background-color: var(--phoenix-secondary-bg-subtle);
  border: 1px solid var(--phoenix-border-color-translucent);
  border-radius: var(--phoenix-border-radius-lg, 0.5rem);
  padding: 0.75rem;
  box-sizing: border-box;
}

[data-bs-theme="dark"] .product-filter-container .product-card-container,
[data-bs-theme="dark"] .swiper-theme-container.products-slider .product-card-container {
  /* In dark mode, secondary-bg-subtle is darker than secondary-bg — keep the original surface. */
  background-color: var(--phoenix-secondary-bg);
}

.swiper-theme-container.products-slider .product-card-container {
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

/* Phoenix storefront cards: let the media surface fill the card top, leaving details on the gray shell. */
.product-filter-container .product-card-media-shell,
.swiper-theme-container.products-slider .product-card-media-shell {
  margin-top: -0.75rem;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
  background-color: var(--phoenix-emphasis-bg);
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--phoenix-border-color-translucent) !important;
  border-radius: var(--phoenix-border-radius-lg, 0.5rem) var(--phoenix-border-radius-lg, 0.5rem) 0 0 !important;
  overflow: hidden;
}

/* Theme caps .product-card width inside .product-card-container; slides need full track width */
.swiper-theme-container.products-slider .product-card-container .product-card {
  width: 100%;
  max-width: 100% !important;
}

/* Phoenix search: facet groups as distinct cards on a lighter sidebar wash */
.product-filter-container #productFilterColumn .phoenix-filter-facet-section {
  box-shadow: var(--phoenix-box-shadow-sm);
}

/* Desktop: theme zeros .phoenix-offcanvas-filter padding (padding: 0 0 0 0.5rem !important),
   which removes right/top inset and makes facet cards + "Filters" hug the edges. */
@media (min-width: 992px) {
  .product-filter-container #productFilterColumn.phoenix-offcanvas-filter {
    padding-top: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1rem !important;
  }
}

.product-filter-container #productFilterColumn .phoenix-filter-sidebar-heading {
  padding-top: 0.35rem;
  padding-bottom: 0.85rem;
}

/* Search grid: same image well as recommendations (item_bar1_partial) — lighter strip inside gray card */
.product-filter-container .product-card-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 220px;
  max-height: 220px;
  overflow: hidden;
  background-color: var(--phoenix-emphasis-bg);
}

.product-filter-container .product-card-image-inner {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-filter-container .product-card-image-inner .product-thumbnail {
  max-width: min(100%, 210px);
  max-height: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Search results grid: white card shell + gray details band (scoped; item bar sliders keep gray-card layout). */
.product-search-results-section .product-card-container {
  background-color: var(--phoenix-emphasis-bg);
  padding: 0;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.product-search-results-section .product-card-container .product-card {
  width: 100%;
  max-width: 100% !important;
  height: 100%;
}

.product-search-results-section .product-card-media-shell {
  margin: 0;
  background-color: var(--phoenix-emphasis-bg);
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--phoenix-border-color-translucent) !important;
  border-radius: var(--phoenix-border-radius-lg, 0.5rem) var(--phoenix-border-radius-lg, 0.5rem) 0 0 !important;
  overflow: hidden;
}

.product-search-results-section .product-card-image-frame {
  background-color: transparent;
}

.product-search-results-section .product-card-details-shell {
  flex-grow: 1;
  width: 100%;
  background-color: var(--phoenix-secondary-bg-subtle);
  padding: 0.75rem;
  border-radius: 0 0 var(--phoenix-border-radius-lg, 0.5rem) var(--phoenix-border-radius-lg, 0.5rem);
}

[data-bs-theme="dark"] .product-search-results-section .product-card-details-shell {
  background-color: var(--phoenix-secondary-bg);
}

/* Phoenix dark mode: replace harsh white surfaces/text on product listing cards with theme light gray. */
[data-bs-theme="dark"] .product-filter-container .product-card-media-shell,
[data-bs-theme="dark"] .swiper-theme-container.products-slider .product-card-media-shell,
[data-bs-theme="dark"] .product-filter-container .product-card-image-frame,
[data-bs-theme="dark"] .swiper-theme-container.products-slider .product-card-image-frame {
  background-color: var(--phoenix-body-highlight-bg) !important;
}

[data-bs-theme="dark"] .product-search-results-section .product-card-container,
[data-bs-theme="dark"] .product-search-results-section .product-card-media-shell {
  background-color: var(--phoenix-body-highlight-bg);
}

[data-bs-theme="dark"] .product-filter-container .product-card .product-name,
[data-bs-theme="dark"] .product-filter-container .product-card .text-body-emphasis,
[data-bs-theme="dark"] .swiper-theme-container.products-slider .product-card .product-name,
[data-bs-theme="dark"] .swiper-theme-container.products-slider .product-card .text-body-emphasis,
[data-bs-theme="dark"] .product-search-results-section .product-card .product-name,
[data-bs-theme="dark"] .product-search-results-section .product-card .text-body-emphasis {
  color: var(--phoenix-body-highlight-color) !important;
}

[data-bs-theme="dark"] [data-item-bar-slider] .d-flex.flex-between-center > h3 {
  color: var(--phoenix-body-highlight-color);
}

/* Phoenix dark mode: soften bright white on product details page. */
[data-bs-theme="dark"] [data-product-details] .col-lg-6 h3.mb-2,
[data-bs-theme="dark"] [data-product-details] .col-lg-6 h1 {
  color: var(--phoenix-body-highlight-color);
}

[data-bs-theme="dark"] section.py-5.bg-body-highlight > .container-small h3.mb-2 {
  color: var(--phoenix-body-highlight-color);
}

[data-bs-theme="dark"] #tab-description.text-body-emphasis,
[data-bs-theme="dark"] #tab-description .product-description-content {
  color: var(--phoenix-body-highlight-color) !important;
}

[data-bs-theme="dark"] #tab-description .product-description-content :where(h1, h2, h3, h4, h5, h6, p, li, td, th, span, div, strong) {
  color: inherit;
}

[data-bs-theme="dark"] #tab-description a {
  color: var(--phoenix-link-color);
}

[data-bs-theme="dark"] #tab-specification,
[data-bs-theme="dark"] #tab-specification h5 {
  color: var(--phoenix-body-highlight-color);
}

[data-bs-theme="dark"] [data-product-details] .product-detail-image-frame {
  background-color: var(--phoenix-body-highlight-bg);
}

/* Phoenix product details: white image wells (scoped; listing cards unaffected). */
[data-product-details] .product-detail-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--phoenix-emphasis-bg);
  overflow: hidden;
}

[data-product-details] .product-detail-image-frame--main {
  min-height: 280px;
}

[data-product-details] .product-detail-image-frame img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}