/* Center field icons even with the legacy Tailwind build, whose translate
   utilities only set variables and require a separate transform class. */
:is(svg, i, span).absolute.top-1\/2.-translate-y-1\/2 {
  transform: translate(var(--tw-translate-x, 0), -50%);
}

/* Shared native controls: preserve validation, Alpine bindings and dynamic options. */
:root {
  --select-surface: #ffffff;
  --select-text: #172b46;
  --select-border: #dce5ef;
  --select-hover: #f1f7fc;
  --select-accent: #009fe8;
  --select-selected: #eaf7ff;
}

:root.dark, html.dark, [data-theme="dark"], body.dark {
  --select-surface: #202c3c;
  --select-text: #edf5ff;
  --select-border: #3a485c;
  --select-hover: #29394d;
  --select-selected: #153d54;
}

body select:not([multiple]):not([size]), body select[size="1"] {
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}

body select:focus-visible {
  outline: 2px solid var(--select-accent);
  outline-offset: 2px;
}

body select:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@supports (appearance: base-select) {
  body select:not([multiple]):not([size]), body select[size="1"],
  body select:not([multiple]):not([size])::picker(select), body select[size="1"]::picker(select) {
    appearance: base-select !important;
  }
  /* Gizli select'ler (hidden, .hidden, satır içi display:none) hariç: aksi halde !important ile görünür olurlar (ör. SweetAlert2'nin gizli seçim kutusu). */
body select:not([multiple]):not([size]):not([hidden]):not(.hidden):not([style*="display: none"]):not([style*="display:none"]), body select[size="1"]:not([hidden]):not(.hidden):not([style*="display: none"]):not([style*="display:none"]) {
    background-image: none !important;
    gap: 12px;
    align-items: center;
    background-color: var(--cp-surface, var(--select-surface));
    color: var(--cp-text, var(--select-text));
    display: inline-flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;
  }
  body.sc-admin.sc-client-aligned #admin-content select:not([multiple]):not([size]) {
    background-image: none !important;
  }
  body select::picker-icon {
    color: var(--cp-muted, #8191a7);
    font-size: 12px;
    margin-inline-start: auto !important;
  }
  body select::picker(select) {
    margin-block: 7px;
    padding: 6px;
    border: 1px solid var(--cp-border, var(--select-border));
    border-radius: 15px;
    background: var(--cp-surface, var(--select-surface));
    color: var(--cp-text, var(--select-text));
    box-shadow: 0 16px 44px #10243c24, 0 3px 9px #10243c0d;
    max-block-size: min(340px, 65dvh);
    overflow: auto;
    overscroll-behavior: contain;
    min-inline-size: anchor-size(self-inline);
    max-inline-size: calc(100vw - 24px);
    scrollbar-width: thin;
    scrollbar-color: var(--cp-border, var(--select-border)) transparent;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .2s ease, translate .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
  }
  body select:open::picker(select) {
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    body select:open::picker(select) {
      opacity: 0;
      translate: 0 -8px;
    }
  }
  body select::picker-icon {
    transition: rotate .2s ease;
  }
  body select:open::picker-icon {
    rotate: 180deg;
  }
  body select option {
    box-sizing: border-box;
    padding: 10px 12px;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: inherit !important;
    background: transparent !important;
    gap: 12px;
    cursor: pointer;
    white-space: normal;
  }
  body select option:hover, body select option:focus {
    background: var(--cp-subtle, var(--select-hover)) !important;
    outline: none;
  }
  body select option:checked {
    background: var(--cp-accent-soft, var(--select-selected)) !important;
    color: var(--cp-brand, var(--select-accent)) !important;
    font-weight: 600;
  }
  body select option::checkmark {
    order: 2;
    margin-inline-start: auto;
    color: var(--cp-brand, var(--select-accent));
  }
  body select option:disabled {
    opacity: .45;
    cursor: not-allowed;
  }
  body select optgroup {
    padding: 5px 0;
  }
  body select optgroup > legend {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cp-muted, #8191a7);
  }
}

body select[multiple], body select[size]:not([size="1"]) {
  border-radius: 12px;
  padding: 6px;
}

body select[multiple] option {
  padding: 9px 12px;
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  body select, body select::picker-icon, body select::picker(select), .cp-select-menu, .dropdown-menu {
    transition: none !important;
  }
}

/* Animate custom language popovers and Bootstrap action menus as well. */
.cp-select-menu:popover-open, .dropdown-menu.show {
  animation: shared-dropdown-enter .2s ease both;
}
@keyframes shared-dropdown-enter {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-select-menu:popover-open, .dropdown-menu.show { animation: none; }
}