/* Global UI component styles for V2 */

/* Icon-based facet pill (used across modules: fasteners, extrusions, etc.) */
.v2-icon-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;
  padding: 8px;
  padding-top: 10px; /* ensures consistent top anchoring for icon */
  gap: 8px; /* slightly increased for better icon-label separation */

  border-radius: 8px;
  border: 1px solid #dddddd;
  background: #ffffff;

  cursor: pointer;
  text-align: center;
  margin: 5px;

  /* Fixed footprint for all icon pills */
  width: 110px;
  height: 140px;
  min-height: 130px; /* enforce consistent block size */
  color: #333333;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

/* -----------------------------------------------------------
   Small variant of icon pill (dense facets: Fasteners)
   Changes ONLY dimensions, inherits all other styling
   ----------------------------------------------------------- */
.v2-icon-pill--sm {
  width: 90px;
  height: 90px;
  min-height: 90px;

  padding: 8px;
  padding-top: 8px;
  gap: 6px;

  margin: 8px; /* dense layout for fasteners */
}

.v2-icon-pill--sm .v2-icon-pill__icon {
  width: 42px;
  height: 42px;
}

.v2-icon-pill--sm .v2-icon-pill__label {
  font-size: 12px;
  line-height: 1.1;
  height: 28px; /* compact 2-line label zone */
}

/* Icon container inside the pill */
.v2-icon-pill__icon {
  width: 80px;
  height: 80px;
  line-height: 0;
}

.v2-icon-pill__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Label below the icon */
.v2-icon-pill__label {
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
  height: 36px; /* fixed label zone (~2 lines, adjusted for larger icon) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Hover / focus styles */
.v2-icon-pill:hover {
  background: #EDE7DE;
  border-color: #BFB8B0;
}

.v2-icon-pill:focus-visible {
  outline: 2px solid #004C93;
  outline-offset: 2px;
}

/* Selected state */
.v2-icon-pill.v2-icon-pill--selected {
  background: #ffad4d;
  border-color: #eabe99;
  color: #000000;
}

/* Disabled state */
.v2-icon-pill[disabled],
.v2-icon-pill.v2-icon-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile tweak: slightly reduce min-height on small screens */
@media (max-width: 768px) {
  .v2-icon-pill {
    min-height: 70px;
  }

  .v2-icon-pill--sm {
    min-height: 90px; /* preserve fastener density */
  }
}
/* -----------------------------------------------------------
   Global Facet Utility (Card + Title + Scroll Track + Pills)
   Used across all modules: Extrusions, Fasteners, T-Nuts, etc.
   ----------------------------------------------------------- */

/* Facet card */
.v2-facet {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 4px;
  min-height: 108px;
}

/* Facet title */
.v2-facet__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #007ACC;
  text-align: center;
}

/* -----------------------------------------------------------
   Facet Horizontal Scroll Hint (Mobile Only)
   Injected via JS when overflow exists
   ----------------------------------------------------------- */

.v2-facet__scroll-hint {
  display: none;
  font-size: 12px;
  color: #777777;
  margin-top: -6px;
  margin-bottom: 6px;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* Show only on mobile AND only when overflow exists */
@media (max-width: 768px) {
  .v2-facet[data-has-overflow="1"] .v2-facet__scroll-hint {
    display: block;
  }
}

/* Scrollable horizontal track */
.v2-facet__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 4px;

  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
}

.v2-facet__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Inner pill row */
.v2-facet__pills {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Each icon pill behaves as a snap point */
.v2-facet__track .v2-icon-pill {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Text pills inside facet tracks must not shrink, else overflow detection fails */
.v2-facet__track .v2-text-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* -----------------------------------------------------------
   Global Section Card Utility
   Shared by: order table, summary, media, description, etc.
   Minimal styling only — module overrides will refine layout.
   ----------------------------------------------------------- */

.v2-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  padding: 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

/* Optional: card title (used in some modules) */
.v2-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #007ACC;
  text-align: center;
}

/* -----------------------------------------------------------
   Global Selection Summary Card
   Used in order screens to display the currently selected item
   ----------------------------------------------------------- */

.v2-selection-summary {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  padding: 8px 12px;
  margin-bottom: 8px;
  text-align: center;
  box-sizing: border-box;
}

.v2-selection-summary__label {
  font-size: 16px;
  font-weight: 500;
  color: #007ACC;
  margin: 0 0 4px 0;
}

.v2-selection-summary__name {
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  margin: 0;
  line-height: 1.3;
}
/* -----------------------------------------------------------
   Global Media Carousel
   Used to render horizontal image strips in order screens
   ----------------------------------------------------------- */

.v2-carousel {
  width: 100%;
}

/* Desktop: prefer the grid layout (carousel is mobile-only) */
@media (min-width: 769px) {
  .v2-carousel {
    display: none;
  }
}

.v2-carousel__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.v2-carousel__item {
  flex: 0 0 48%; /* ~2 items per row on mobile */
  scroll-snap-align: start;
}

/* Alias: some modules use v2-carousel__img in markup */
.v2-carousel__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.v2-carousel__empty {
  font-size: 14px;
  color: #777777;
  margin: 4px 0;
}

/* -----------------------------------------------------------
   Global Media Grid (Desktop)
   Used to render a compact 2x2 image gallery on desktop
   ----------------------------------------------------------- */

.v2-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.v2-media-grid__item {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border-pills-boxes-tableborders, #e5e5e5);
}

.v2-media-grid__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* On small screens, prefer the carousel/strip layout */
@media (max-width: 768px) {
  .v2-media-grid {
    display: none;
  }
}

/* Note: Image viewing is handled by GLightbox; no custom V2 lightbox CSS required here. */

/* -----------------------------------------------------------
   Global Price + Stock Pill
   Used below icon pills (e.g., Select Profile Size)
   ----------------------------------------------------------- */

.v2-price-stock-pill {
  width: 110px;             /* same width as icon pill */
  min-height: 54px;        /* two text lines comfortably */
  padding: 8px 6px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 5px;
  margin-right: 5px;
  box-sizing: border-box;

  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background: #f7f7f7;

  font-size: 13px;
  line-height: 1.25;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  flex: 0 0 auto; /* ensure consistent layout in scroll tracks */
}

/* In-stock state */
.v2-price-stock-pill--in {
  background: #e7f7ec;
  border-color: #7ac693;
  color: #1f7a38;
}

/* Out-of-stock state */
.v2-price-stock-pill--out {
  background: #fbeaea;
  border-color: #e59a9a;
  color: #b94242;
}

/* -----------------------------------------------------------
   Global Text Pill (Used for Series facet, etc.)
   ----------------------------------------------------------- */
.v2-text-pill {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: 48px;

  padding: 8px 10px;
  box-sizing: border-box;

  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  margin: 5px;
  font-size: 16px;
  color: #333333;
  text-align: center;

  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.v2-text-pill:hover {
  background: #EDE7DE;
  border-color: #BFB8B0;
}

.v2-text-pill--selected,
.v2-text-pill--selected:hover {
  background: #ffad4d;
  border-color: #eabe99;
  color: #000000;
}

.v2-text-pill[disabled],
.v2-text-pill.v2-text-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* -----------------------------------------------------------
   Global Swatch Pill (Used for Finish facet)
   ----------------------------------------------------------- */
.v2-swatch-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  width: 130px;
  height: 48px;

  padding: 8px 10px;
  box-sizing: border-box;

  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  margin: 5px;

  font-size: 14px;
  color: #333333;

  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.v2-swatch-pill__swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #cccccc;
}

.v2-swatch-pill__swatch--black {
  background: #000000;
  border-color: #000000;
}

.v2-swatch-pill__swatch--silver {
  background: #d0d0d0;
  border-color: #b0b0b0;
}

.v2-swatch-pill:hover {
  background: #EDE7DE;
  border-color: #BFB8B0;
}

.v2-swatch-pill--selected,
.v2-swatch-pill--selected:hover {
  background: #ffad4d;
  border-color: #eabe99;
  color: #000000;
}

.v2-swatch-pill[disabled],
.v2-swatch-pill.v2-swatch-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}