/* ═══════════════════════════════════════════════════════════════
   Glamera Premium Select — CSS
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper */
.gls-wrap{
  position:relative;
  display:inline-block;
  width:100%;
  font-family:'Instrument Sans','DM Sans','Inter',sans-serif;
}

/* Trigger */
.gls-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 16px;
  background:#fff;
  border:1px solid rgba(143,166,138,0.22);
  border-radius:12px;
  cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s;
  min-height:42px;
  -webkit-user-select:none;user-select:none;
}
.gls-trigger:hover{
  border-color:rgba(143,166,138,0.45);
}
.gls-trigger:focus-visible{
  outline:none;
  border-color:#8fa68a;
  box-shadow:0 0 0 3px rgba(143,166,138,0.12);
}
.gls-wrap.gls-open .gls-trigger{
  border-color:#8fa68a;
  box-shadow:0 0 0 3px rgba(143,166,138,0.1);
}

/* Label */
.gls-label{
  font-size:13px;font-weight:400;
  color:#3a4e38;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-0.01em;
}
.gls-placeholder .gls-label{
  color:#9a9590;font-weight:300;
}

/* Chevron */
.gls-chevron{
  display:flex;align-items:center;
  color:#8a9288;
  transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);
  flex-shrink:0;
}
.gls-wrap.gls-open .gls-chevron{
  transform:rotate(180deg);
}

/* ── Dropdown panel ── */
.gls-dropdown{
  position:absolute;
  top:calc(100% + 6px);left:0;right:0;
  z-index:100;
  background:#fff;
  border:1px solid rgba(143,166,138,0.18);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(58,78,56,0.10), 0 2px 8px rgba(58,78,56,0.04);
  max-height:280px;
  overflow:hidden;
  display:none;
  opacity:0;
  transform:translateY(-4px);
}
.gls-wrap.gls-open .gls-dropdown{
  display:block;
  animation:glsIn 0.22s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes glsIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Flip upward */
.gls-dropdown.gls-flip{
  top:auto;
  bottom:calc(100% + 6px);
  transform-origin:bottom;
}
.gls-wrap.gls-open .gls-dropdown.gls-flip{
  animation:glsInFlip 0.22s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes glsInFlip{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Search ── */
.gls-search{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(143,166,138,0.1);
  color:#8a9288;
}
.gls-search-input{
  flex:1;border:none;outline:none;
  font-family:inherit;font-size:12.5px;font-weight:300;
  color:#3a4e38;background:transparent;
}
.gls-search-input::placeholder{color:#b5b0ab}

/* ── Options ── */
.gls-options{
  overflow-y:auto;max-height:230px;
  padding:5px;
  scrollbar-width:thin;
  scrollbar-color:rgba(143,166,138,0.2) transparent;
}
.gls-options::-webkit-scrollbar{width:4px}
.gls-options::-webkit-scrollbar-track{background:transparent}
.gls-options::-webkit-scrollbar-thumb{background:rgba(143,166,138,0.25);border-radius:4px}

/* Single option */
.gls-option{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
  font-size:13px;font-weight:400;
  color:#3a4e38;
  letter-spacing:-0.005em;
}
.gls-option:hover{
  background:rgba(143,166,138,0.08);
}
.gls-option.gls-selected{
  background:rgba(143,166,138,0.12);
  font-weight:500;
}
.gls-option.gls-disabled{
  color:#c0bbb6;cursor:default;
  font-style:italic;
}
.gls-option.gls-disabled:hover{background:transparent}

/* Option icon */
.gls-opt-icon{
  display:flex;align-items:center;
  color:#7e9b72;flex-shrink:0;
}
.gls-option.gls-selected .gls-opt-icon{color:#4a6741}
.gls-option.gls-disabled .gls-opt-icon{color:#c0bbb6}

/* Option text */
.gls-opt-text{
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Checkmark */
.gls-opt-check{
  display:flex;align-items:center;
  color:#7e9b72;
  opacity:0;transition:opacity 0.15s;
  flex-shrink:0;
}
.gls-option.gls-selected .gls-opt-check{opacity:1}

/* ── Compact variant (for inline forms like availability) ── */
.gls-wrap.gls-compact .gls-trigger{
  padding:8px 12px;min-height:36px;
  border-radius:10px;
}
.gls-wrap.gls-compact .gls-label{font-size:12px}
.gls-wrap.gls-compact .gls-option{padding:7px 10px;font-size:12px}
.gls-wrap.gls-compact .gls-dropdown{border-radius:12px}

/* ── Borderless variant (for register forms with bottom-border style) ── */
.gls-wrap.gls-borderless .gls-trigger{
  padding:0.65rem 0;
  background:transparent;
  border:none;border-bottom:1.5px solid rgba(168,184,158,0.35);
  border-radius:0;
  min-height:auto;
}
.gls-wrap.gls-borderless .gls-trigger:hover{border-bottom-color:#7e9b72}
.gls-wrap.gls-borderless.gls-open .gls-trigger{
  border-color:#4a6741;box-shadow:none;
}
.gls-wrap.gls-borderless .gls-label{font-size:0.95rem}
.gls-wrap.gls-borderless .gls-dropdown{left:-12px;right:-12px}

/* ── Small sort variant ── */
.gls-wrap.gls-sort{width:auto;display:inline-block}
.gls-wrap.gls-sort .gls-trigger{
  padding:6px 12px;min-height:32px;
  border-radius:10px;
  border:1.5px solid rgba(143,166,138,0.22);
}
.gls-wrap.gls-sort .gls-label{font-size:12px;color:#6b6b6b}
.gls-wrap.gls-sort .gls-dropdown{min-width:180px}
.gls-wrap.gls-sort .gls-option{font-size:12px;padding:8px 12px}

/* ── Grid child (fill parent cell) ── */
.pe-svc-row .gls-wrap{width:100%}
.pe-svc-row .gls-trigger{
  padding:8px 10px;min-height:34px;border-radius:10px;
  background:var(--off-white, #fafaf8);
  border:1px solid rgba(168,184,158,0.2);
}
.pe-svc-row .gls-label{font-size:12.5px}
.pe-svc-row .gls-dropdown{border-radius:12px}
.pe-svc-row .gls-option{font-size:12.5px;padding:8px 10px}

/* Availability form compact */
.av-add-row .gls-wrap{display:inline-block}
.av-add-row .gls-trigger{
  padding:8px 12px;min-height:36px;border-radius:10px;
  background:white;border:1px solid rgba(168,184,158,0.3);
}
.av-add-row .gls-label{font-size:13px}
.av-add-row .gls-dropdown{min-width:140px;border-radius:12px}
.av-add-row .gls-option{font-size:12.5px;padding:8px 12px}

/* Setup profile selects */
.svc-row .gls-wrap{width:100%;margin-bottom:16px}
.svc-row .gls-trigger{
  padding:14px 18px;min-height:46px;border-radius:12px;
  border:1px solid rgba(143,166,138,0.25);
}
.avail-times .gls-wrap{display:inline-block;width:auto;min-width:90px}
.avail-times .gls-trigger{
  padding:8px 12px;min-height:34px;border-radius:10px;
  border:1px solid rgba(143,166,138,0.25);font-size:13px;
}
.avail-times .gls-dropdown{min-width:110px}
.avail-times .gls-option{font-size:12.5px;padding:7px 10px}