/* ============================================================
   kol-dropdown.css — accessible replacement for native <select>,
   from Carolain's styles/shared/dropdown.css.
   Paired with js/dropdown.js, which upgrades every <select> on
   the page. A page that has not been ported keeps its native
   selects, which kol-tokens.css already shapes to match.
   ============================================================ */

/* Desplegable estilizado — reemplaza el listado nativo del sistema.
   Se aplica automáticamente a cada <select> vía dropdown.js */

.select-wrap{position:relative;display:inline-block;vertical-align:middle}
.select-wrap.select-block{display:block;width:100%}
.select-wrap>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;appearance:none}

.select-button{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  width:100%;height:42px;padding:0 34px 0 13px;
  border:1px solid var(--line,#e8e4dc);border-radius:12px;background:#fff;
  color:var(--ink,#171916);font:inherit;font-size:13px;font-weight:600;text-align:left;
  cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s;
}
.select-button:hover{border-color:#d8d1c3}
.select-button:focus-visible{outline:0;border-color:var(--amber,var(--brand-76));box-shadow:0 0 0 3px rgba(var(--brand-rgb), .15)}
.select-wrap.open>.select-button{border-color:var(--amber,var(--brand-76));box-shadow:0 0 0 3px rgba(var(--brand-rgb), .13)}
.select-button>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-button:after{
  content:"";position:absolute;right:14px;top:50%;
  width:7px;height:7px;margin-top:-5px;
  border-right:1.8px solid #8b8f88;border-bottom:1.8px solid #8b8f88;
  transform:rotate(45deg);transition:transform .18s;
}
.select-wrap.open>.select-button:after{transform:rotate(-135deg);margin-top:-2px}

.select-menu{
  position:absolute;z-index:200;top:calc(100% + 6px);left:0;
  min-width:100%;max-height:290px;overflow:auto;padding:6px;
  border:1px solid var(--line,#e8e4dc);border-radius:14px;background:#fff;
  box-shadow:0 18px 44px rgba(30,26,18,.16),0 2px 6px rgba(30,26,18,.06);
  animation:selectIn .16s ease;
}
.select-menu.align-right{left:auto;right:0}
.select-menu.drop-up{top:auto;bottom:calc(100% + 6px)}
@keyframes selectIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.select-option{
  position:relative;display:flex;align-items:center;gap:9px;
  width:100%;padding:9px 12px 9px 30px;
  border:0;border-radius:9px;background:none;
  color:#4b504a;font:inherit;font-size:13px;text-align:left;white-space:nowrap;cursor:pointer;
}
.select-option:hover,.select-option.active{background:#f6f4f0;color:var(--ink,#171916)}
.select-option[aria-selected="true"]{background:var(--cream,color-mix(in oklab, var(--brand-98), #f8f8f8 11%));color:var(--brand-51);font-weight:700}
.select-option[aria-selected="true"]:before{
  content:"";position:absolute;left:12px;top:50%;
  width:5px;height:9px;margin-top:-6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.select-option:disabled{color:#b3b6b1;cursor:default}

/* el select conserva su clase original en el botón, así hereda el tamaño de cada contexto */
.create-fields .select-wrap,.publish-fields .select-wrap,.address-fields .select-wrap{display:block;width:100%}
.create-fields .select-button,.publish-fields .select-button{height:46px;font-weight:400;font-size:14px}
.address-fields .select-button{height:40px;font-weight:400;font-size:13px;border-radius:9px}
.catalog-toolbar .select-button,.catalog-results .select-button{font-weight:400}

@media(max-width:720px){
  .select-menu{max-height:240px}
}

/* campos de formulario a ancho completo: peso y tamaño de texto como los inputs */
.select-wrap.select-block>.select-button{font-weight:400;font-size:14px}