/* ============================================================
   KEDAI — Dropdown Component (Reusable)
   ============================================================ */

.kedai-dropdown {
  position: relative; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.kedai-dropdown-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.75rem 1rem; background: var(--k-surface);
  border: 1px solid var(--k-border); border-radius: var(--k-radius);
  font-size: 0.875rem; color: #64748b; cursor: pointer;
  transition: all var(--k-transition); outline: none; text-align: left;
  overflow: visible;
}
.kedai-dropdown-trigger .kedai-dropdown-text {
  overflow: visible;
  min-width: 0;
}
.kedai-dropdown-trigger:hover { border-color: var(--k-primary); }
.kedai-dropdown-trigger.has-value { color: #1e293b; }
.kedai-dropdown.active .kedai-dropdown-trigger {
  border-color: var(--k-primary); box-shadow: 0 0 0 3px rgba(5,150,105,0.08);
}
.kedai-dropdown-arrow {
  font-size: 0.7rem; color: #94a3b8; transition: transform 0.2s ease; flex-shrink: 0;
}
.kedai-dropdown.active .kedai-dropdown-arrow { transform: rotate(180deg); color: var(--k-primary); }
.kedai-dropdown-panel {
  position: absolute; top: calc(100% + 0.25rem); left: 0; min-width: 100%;
  background: white; border-radius: var(--k-radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12); border: 1px solid var(--k-border);
  z-index: 100; opacity: 0; visibility: hidden;
  transform: translateY(-8px); transition: all 0.2s ease;
  max-height: 18rem; display: flex; flex-direction: column; overflow: hidden;
}
.kedai-dropdown-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.kedai-dropdown-search {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--k-border);
  flex-shrink: 0;
}
.kedai-dropdown-search i { color: #94a3b8; font-size: 0.8rem; }
.kedai-dropdown-search input {
  flex: 1; border: none; outline: none; font-size: 0.8rem; color: #1e293b; background: transparent;
}
.kedai-dropdown-search input::-moz-placeholder { color: #94a3b8; }
.kedai-dropdown-search input::placeholder { color: #94a3b8; }
.kedai-dropdown-list {
  overflow-y: auto; flex: 1;
}
.kedai-dropdown-option {
  display: flex; align-items: center; padding: 0.7rem 1rem;
  font-size: 0.85rem; color: #334155; cursor: pointer;
  transition: all 0.12s ease; gap: 0.5rem;
  white-space: nowrap;
}
.kedai-dropdown-option:hover { background: #f0fdf6; color: var(--k-primary); }
.kedai-dropdown-option.selected { background: #ecfdf5; color: var(--k-primary); font-weight: 600; }
.kedai-dropdown-option i,
.kedai-dropdown-trigger .kedai-dropdown-text i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1rem !important;
}
.kedai-dropdown-text {
  display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: visible;
  flex: 1;
}
.kedai-dropdown-text i { flex-shrink: 0; font-size: 1rem; }

/* ---------- Wide Dropdown ---------- */
.kedai-dropdown.wide-dropdown .kedai-dropdown-panel { min-width: 220px; width: auto; max-width: 400px; }
.kedai-dropdown-text i { flex-shrink: 0; }
/* Ensure dropdown icons are visible */
.kedai-dropdown i { display: inline-block !important; visibility: visible !important; }
.kedai-dropdown .kedai-dropdown-option i,
.kedai-dropdown .kedai-dropdown-trigger i { opacity: 1 !important; font-size: 1rem !important; }
.kedai-dropdown i::before { opacity: 1 !important; display: inline-block !important; visibility: visible !important; }