/* Custom dropdown — dark theme, Arabic RTL, Tajawal.
   Physical sides are avoided throughout (inset-inline, text-align: start) so
   the control is correct in both directions without a mirrored stylesheet. */

.qd { position: relative; font-family: Tajawal, sans-serif; }

/* The original <select> stays in the DOM — value, name, options and all — and
   is only visually removed. Not `display: none`: a hidden-but-present control
   keeps working with anything that reads or writes it. */
.qd-native {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.qd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1b1e25;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  color: var(--text-primary, #e8ecf3);
  font-size: 14px;
  font-family: Tajawal, sans-serif;
  text-align: start;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.qd-btn:hover:not(:disabled) {
  border-color: rgba(19, 181, 243, 0.45);
  background: #1e222a;
}
.qd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.qd-btn:focus-visible,
.qd.is-open .qd-btn {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(19, 181, 243, 0.16);
}

.qd-value { flex: 1; }
.qd-value.is-placeholder { color: #5d6675; }

/* Inline-end, so it sits left in RTL and right in LTR with no override. */
.qd-caret {
  color: #7d8798;
  font-size: 12px;
  transition: transform 0.2s;
}
.qd.is-open .qd-caret { transform: rotate(180deg); }

.qd-panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  background: #17191f;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 9999;
  overflow: hidden;
  padding: 6px;
}

/* 🔴 "MORE BELOW" WITHOUT A CLEAN EDGE. A list that ends flush reads as a list
   that ENDS, and an owner whose city is far down may never scroll. The
   max-height leaves a partial row showing, and this fade is what marks that
   partial row as deliberate rather than as a clipped one. It appears only
   while there is actually more to scroll to. */
.qd-panel::after {
  content: "";
  position: absolute;
  inset-inline: 6px;
  bottom: 6px;
  height: 38px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(to bottom, rgba(23, 25, 31, 0), #17191f 82%);
}
.qd-panel.has-more::after { opacity: 1; }

.qd-search {
  width: 100%;
  background: #101319;
  color: var(--text-primary, #e8ecf3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: Tajawal, sans-serif;
  font-size: 13px;
  margin-bottom: 6px;
}
.qd-search::placeholder { color: #5d6675; }
.qd-search:focus { outline: none; border-color: rgba(19, 181, 243, 0.5); }

.qd-list {
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
}
.qd-list::-webkit-scrollbar { width: 8px; }
.qd-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.qd-opt {
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-primary, #e8ecf3);
  font-size: 14px;
  line-height: 1.5;
}
/* Keyboard cursor and mouse hover paint identically — arrowing down should
   look like hovering, or the two input methods disagree about "where am I". */
.qd-opt.is-active { background: rgba(19, 181, 243, 0.14); }
.qd-opt[aria-selected="true"] {
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
}
.qd-empty {
  padding: 14px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}