/*
 * Front‑end styles for Truvita Custom plugin.
 *
 * This file defines styles for the pill‑style sorting interface, hidden checkout fields,
 * and hides the default WooCommerce ordering dropdown when enabled.
 */

/* Pill sorting container */
.tc-sort-pills {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}

/* Base pill
 *
 * The pill UI inherits colours from the current theme. We avoid setting
 * explicit colours so that the text colour is based on the surrounding
 * design. A subtle border and background are used for separation.
 */
.tc-sort-pills .pill {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-pill-border, #ddd);
  background-color: var(--tc-pill-bg, #f8f8f8);
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.875rem;
}

/* Active pill
 *
 * Highlight the active sorting option. We attempt to use a theme colour
 * if available via the CSS custom property `--wp--preset--color--primary`.
 */
.tc-sort-pills .pill.active {
  background-color: var(--tc-pill-active-bg, var(--wp--preset--color--primary, transparent));
  /* Use white text by default on active pills for better contrast; users can override via CSS custom property */
  color: var(--tc-pill-active-color, #fff);
  border-color: var(--tc-pill-active-border, var(--wp--preset--color--primary, currentColor));
  font-weight: 600;
}

/* Dropdown pill container */
.tc-sort-pills .pill.dropdown {
  position: relative;
}

/* Add arrow indicator to dropdown label */
.tc-sort-pills .pill.dropdown > span::after {
  content: "\25BC"; /* downward triangle */
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.7em;
  line-height: 1;
}

/* Dropdown menu */
.tc-sort-pills .pill.dropdown .menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background: var(--tc-pill-menu-bg, #fff);
  border: 1px solid var(--tc-pill-border, #ddd);
  border-radius: 0.5rem;
  min-width: 140px;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Show dropdown on hover or focus */
.tc-sort-pills .pill.dropdown:hover .menu,
.tc-sort-pills .pill.dropdown:focus-within .menu {
  display: block;
}

/* Dropdown items */
/*
 * Dropdown menu items should not inherit the active pill colour. Explicitly
 * reset the text colour to avoid white-on-white when the parent pill is active.
 */
.tc-sort-pills .pill.dropdown .menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  /* reset color to browser default; fallback ensures readability */
  color: initial;
  text-decoration: none;
  font-size: 0.875rem;
}

/* Active or hover item */
.tc-sort-pills .pill.dropdown .menu a.active,
.tc-sort-pills .pill.dropdown .menu a:hover {
  background-color: var(--tc-pill-bg-hover, #f5f5f5);
  /* keep text readable on hover */
  color: initial;
}

/* Hidden checkout fields */
.tc-hidden {
  display: none !important;
}

/* Hide WooCommerce default ordering dropdown when pill UI with hide is enabled */
.tc-hide-ordering .woocommerce-ordering {
  display: none !important;
}

/*
 * Product information styling (SKU, stock and custom price)
 *
 * These classes are used by the plugin to output SKU/stock and price
 * information on single product pages. Default colours are provided
 * via CSS variables with sensible fallbacks. Users can override the
 * variables in their theme or via plugin settings.
 */
.truvita-sku-stock .label {
  color: var(--tc-sku-stock-label-color, #2c5f2d);
}
.truvita-sku-stock .value {
  color: var(--tc-sku-stock-value-color, #2c5f2d);
}
.truvita-price-label .label {
  color: var(--tc-price-label-color, inherit);
}
.truvita-price-label .value {
  color: var(--tc-price-value-color, inherit);
}