/* ======================================================================
   UBD Visual UX · PRODUCT SELECT ARROW 1.6.15

   Objetivo:
   - Que las opciones tipo lista desplegable indiquen claramente que
     se puede elegir/abrir una opción.
   - Añade un chevron visual moderno a selects nativos y wrappers comunes.
   - No cambia la lógica funcional de los selects.
   ====================================================================== */

html.ubd-product-ready body#product.ubd-modular-page {
  --ubd-select-arrow-color: #17383e;
  --ubd-select-arrow-fade: rgba(23, 56, 62, .08);
}

/* Select nativo: recupera indicador visual incluso si antes se había limpiado. */
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item select.form-control,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item select.form-control-select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding-right: 46px !important;

  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ubd-select-arrow-color) 50%),
    linear-gradient(135deg, var(--ubd-select-arrow-color) 50%, transparent 50%),
    linear-gradient(to left, var(--ubd-select-arrow-fade), var(--ubd-select-arrow-fade));
  background-position:
    calc(100% - 21px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 40px) 50%;
  background-size:
    7px 7px,
    7px 7px,
    1px 22px;
  background-repeat: no-repeat !important;
}

/* Fallback/compatibilidad para wrappers de selects custom si aparecen. */
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .selector,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .selector,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .custom-select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .custom-select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .bootstrap-select .dropdown-toggle,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .bootstrap-select .dropdown-toggle {
  position: relative !important;
  padding-right: 46px !important;
}

html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .bootstrap-select .dropdown-toggle::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .bootstrap-select .dropdown-toggle::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .selector::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .selector::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item .custom-select::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-customization .product-customization-item .custom-select::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -6px !important;
  border-right: 2px solid var(--ubd-select-arrow-color) !important;
  border-bottom: 2px solid var(--ubd-select-arrow-color) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

/* Móvil: chevron ligeramente más centrado. */
@media (max-width: 767px) {
  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-variants .product-variants-item select.form-control,
  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-variants .product-variants-item select.form-control-select,
  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-variants .product-variants-item select,
  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-customization .product-customization-item select {
    padding-right: 44px !important;
    background-position:
      calc(100% - 20px) calc(50% - 2px),
      calc(100% - 14px) calc(50% - 2px),
      calc(100% - 38px) 50%;
  }
}