/* =========================================================
   Smart Select — styled dropdown used for every <select>
   (see public/js/smart-select.js). The native select stays
   in the page, hidden, for forms and Livewire.
   ========================================================= */
.ss { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; min-width: 0; }

.ss-native {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0 !important; pointer-events: none !important; margin: 0 !important;
}

.ss-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0;
  padding-right: 12px !important; text-align: left; cursor: pointer; box-sizing: border-box;
  background-color: #fff; border: 1px solid #CBD5E1; border-radius: 10px; color: #0F172A;
  font: inherit; transition: border-color .15s, box-shadow .15s;
}
.ss-button:hover { border-color: #94A3B8 !important; }
.ss-button:focus-visible, .ss.is-open .ss-button { outline: none; border-color: #123684 !important; box-shadow: 0 0 0 3px rgba(18, 54, 132, .12) !important; }
.ss.is-bare .ss-button, .ss.is-bare .ss-button:hover, .ss.is-bare.is-open .ss-button, .ss.is-bare .ss-button:focus-visible { border-color: transparent !important; box-shadow: none !important; }
.ss.is-bare .ss-button:focus-visible .ss-value { text-decoration: underline; text-decoration-color: #CBD5E1; text-underline-offset: 4px; }
.ss.is-disabled .ss-button { cursor: not-allowed; opacity: .65; }
.ss.is-invalid .ss-button { border-color: #EF4444 !important; }

.ss-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-value.is-placeholder { color: #94A3B8; }

.ss-caret { flex: 0 0 auto; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #64748B; border-bottom: 2px solid #64748B; transform: rotate(45deg); transition: transform .18s; }
.ss.is-open .ss-caret { transform: rotate(-135deg); margin-top: 4px; }

.ss-panel {
  position: fixed; z-index: 100000; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  animation: ssIn .12s ease; font-family: "Plus Jakarta Sans", "Inter", Arial, sans-serif;
}
.ss-panel[hidden] { display: none; }
.ss-panel.opens-up { animation-name: ssInUp; }

.ss-search { padding: 8px; border-bottom: 1px solid #F1F5F9; }
.ss-search input {
  width: 100%; height: 36px; box-sizing: border-box; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 0 10px 0 32px; font: inherit; font-size: 13px; outline: none;
  background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394A3B8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
}
.ss-search input:focus { border-color: #123684; background-color: #fff; }

.ss-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.ss-option {
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 9px 34px 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35;
  color: #1E293B; cursor: pointer; user-select: none;
}
.ss-option:hover, .ss-option.is-active { background: #F1F5F9; }
.ss-option.is-selected { color: #123684; font-weight: 700; background: #EEF3FF; }
.ss-option.is-selected::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border-right: 2px solid #f72559; border-bottom: 2px solid #f72559; transform: rotate(45deg);
}
.ss-option.is-placeholder { color: #64748B; }
.ss-option.is-disabled { color: #CBD5E1; cursor: not-allowed; background: none; }
.ss-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #94A3B8; }
.ss-empty { padding: 14px 12px; font-size: 13px; color: #94A3B8; text-align: center; }

@keyframes ssIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ssInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .ss-option { padding-top: 11px; padding-bottom: 11px; }
}