/* Shared filters — fantasy-gold replacement for the legacy mana-blue pass.
   Covers Deck Building, Collection, Shop and every reused filter component. */
:root {
  --filter-gold: #d5a13c;
  --filter-gold-bright: #f4d780;
  --filter-gold-pale: #fff0bd;
  --filter-gold-deep: #70430b;
  --filter-ink: #070908;
  --filter-surface: #111411;
  --filter-line: rgba(213, 161, 60, 0.68);
}

/* Drawer shell and groups: remove the remaining cool-blue glow and tint. */
:is(#collectionPanel, #shopPanel) .filter-drawer {
  border: 1px solid rgba(213, 161, 60, 0.64) !important;
  border-left: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(224, 174, 70, 0.13), transparent 34%),
    repeating-linear-gradient(115deg, rgba(255, 235, 187, 0.014) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(19, 20, 17, 0.99), rgba(5, 8, 8, 0.99)) !important;
  box-shadow:
    14px 0 38px rgba(0, 0, 0, 0.58),
    inset 0 0 0 3px rgba(0, 0, 0, 0.34),
    inset -1px 0 rgba(255, 224, 146, 0.07) !important;
}

:is(#collectionPanel, #shopPanel) .filter-drawer-overlay {
  background: rgba(2, 3, 3, 0.68) !important;
}

:is(#collectionPanel, #shopPanel) .filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px !important;
  border-bottom: 1px solid rgba(213, 161, 60, 0.34);
  background: rgba(5, 7, 7, 0.42);
}

:is(#collectionPanel, #shopPanel) .filter-drawer-header h3,
.collection-filters h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--filter-gold-bright) !important;
  font-family: "Cinzel", Georgia, serif;
  text-shadow: 0 2px 2px #000, 0 0 13px rgba(218, 161, 49, 0.2) !important;
}

:is(#collectionPanel, #shopPanel) .filter-drawer-close-btn {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(218, 171, 76, 0.58) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(57, 50, 36, 0.98), rgba(14, 16, 14, 0.98)) !important;
  color: #f7e2b2 !important;
  box-shadow: inset 0 1px rgba(255, 239, 190, 0.09), 0 5px 13px rgba(0, 0, 0, 0.32) !important;
}

:is(#collectionPanel, #shopPanel) .filter-drawer-close-btn:hover,
:is(#collectionPanel, #shopPanel) .filter-drawer-close-btn:focus-visible {
  border-color: #f3d581 !important;
  background: linear-gradient(180deg, #815c1d, #382305) !important;
  outline: none;
}

:is(#collectionPanel, #shopPanel) .filter-drawer-body {
  display: grid;
  gap: 10px;
  padding: 12px !important;
  overflow-y: auto;
}

:is(#collectionPanel, #shopPanel) .filter-control-group {
  padding: 10px !important;
  border: 1px solid rgba(190, 143, 53, 0.28) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(135deg, rgba(214, 162, 61, 0.045), transparent 42%),
    rgba(7, 10, 9, 0.8) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 170, 0.025);
}

:is(
  .filter-control-group > label,
  .filter-control-group > span,
  .shop-filter-toolbar label,
  .deck-editor-filter-controls label,
  #deckBuilderPanel .deck-editor-filter-group label
) {
  color: #dfc37c !important;
  font-family: "Cinzel", Georgia, serif;
  text-shadow: 0 1px 2px #000;
}

/* Closed controls and search fields. The id-scoped selectors beat the old
   global !important mana-blue border rules without affecting game mechanics. */
:is(#collectionPanel, #shopPanel, #deckBuilderPanel) :is(
  .filter-select,
  .custom-filter-select-btn,
  .card-search-input,
  .deck-editor-filter-group input,
  .deck-editor-filter-group select,
  .shop-filter-toolbar input,
  .shop-filter-toolbar select
) {
  border: 1px solid var(--filter-line) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(22, 24, 20, 0.98), rgba(6, 9, 9, 0.99)) !important;
  color: #f8eccd !important;
  -webkit-text-fill-color: #f8eccd !important;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.3),
    inset 0 1px rgba(255, 229, 160, 0.055) !important;
  color-scheme: dark;
  accent-color: var(--filter-gold);
}

/* Generic fallback for the same components when reused outside the catalogues. */
:is(.filter-select, .custom-filter-select-btn, .card-search-input) {
  border-color: var(--filter-line) !important;
}

.card-search-input::placeholder,
#deckBuilderPanel .deck-editor-filter-group input::placeholder {
  color: rgba(231, 216, 181, 0.46) !important;
  -webkit-text-fill-color: rgba(231, 216, 181, 0.46) !important;
}

:is(#collectionPanel, #shopPanel, #deckBuilderPanel) :is(
  .filter-select:focus,
  .card-search-input:focus,
  .deck-editor-filter-group input:focus,
  .deck-editor-filter-group select:focus,
  .custom-filter-select.open .custom-filter-select-btn
) {
  border-color: var(--filter-gold-bright) !important;
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(216, 163, 56, 0.17),
    0 0 17px rgba(216, 158, 42, 0.15),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28) !important;
}

:is(.filter-select:focus, .card-search-input:focus, .custom-filter-select.open .custom-filter-select-btn) {
  border-color: var(--filter-gold-bright) !important;
  box-shadow: 0 0 0 2px rgba(216, 163, 56, 0.17), 0 0 17px rgba(216, 158, 42, 0.15) !important;
}

.custom-filter-select-btn::after {
  border-right-color: var(--filter-gold-pale) !important;
  border-bottom-color: var(--filter-gold-pale) !important;
}

/* Custom listbox used by Collection and Shop. */
.custom-filter-select-menu {
  overflow: hidden auto;
  border: 1px solid rgba(221, 174, 77, 0.72) !important;
  border-radius: 0 0 4px 4px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 235, 187, 0.012) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, #171914, #090c0b) !important;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.62),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28) !important;
}

.custom-filter-select-option {
  border: 0 !important;
  border-bottom: 1px solid rgba(211, 161, 62, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f3e7c8 !important;
  -webkit-text-fill-color: #f3e7c8 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px #000;
}

.custom-filter-select-option:hover,
.custom-filter-select-option:focus-visible,
.custom-filter-select-option[aria-selected="true"] {
  border-bottom-color: rgba(255, 226, 147, 0.3) !important;
  background:
    linear-gradient(90deg, #72460d, #d59d37 45%, #f0c865 72%, #9a6519) !important;
  color: #1a1003 !important;
  -webkit-text-fill-color: #1a1003 !important;
  box-shadow:
    inset 0 1px rgba(255, 245, 201, 0.34),
    inset 0 -1px rgba(74, 40, 2, 0.42) !important;
  text-shadow: 0 1px rgba(255, 241, 191, 0.32) !important;
  transform: none !important;
}

.custom-filter-select-option:focus-visible {
  outline: 1px solid #ffe49b !important;
  outline-offset: -2px;
}

/* Native select fallback, including the operating-system dropdown where
   Chromium allows option colours. */
.filter-select option {
  background: #151814 !important;
  color: #f5e9cb !important;
  -webkit-text-fill-color: #f5e9cb !important;
}

.filter-select option:checked,
.filter-select option:hover,
.filter-select option:focus {
  background: #c99131 !important;
  box-shadow: inset 0 0 0 9999px #c99131 !important;
  color: #1a1003 !important;
  -webkit-text-fill-color: #1a1003 !important;
}

/* Sorting controls belong to the filter language as well. */
:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn {
  border: 1px solid rgba(200, 149, 54, 0.56) !important;
  background:
    linear-gradient(180deg, rgba(43, 41, 32, 0.98), rgba(11, 14, 13, 0.98)) !important;
  color: #ead8ad !important;
  -webkit-text-fill-color: #ead8ad !important;
  box-shadow: inset 0 1px rgba(255, 233, 176, 0.07) !important;
}

:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn span {
  color: var(--filter-gold-bright) !important;
  -webkit-text-fill-color: var(--filter-gold-bright) !important;
  text-shadow: 0 0 9px rgba(219, 164, 53, 0.3) !important;
}

:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn:hover,
:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn:focus-visible {
  border-color: #f2d27c !important;
  background: linear-gradient(180deg, #604718, #251805) !important;
  outline: none;
}

:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn.active {
  border-color: #f4d77f !important;
  background:
    linear-gradient(180deg, #d6a23f, #9b671b 55%, #5b3507) !important;
  color: #fff0be !important;
  -webkit-text-fill-color: #fff0be !important;
  box-shadow:
    inset 0 1px rgba(255, 245, 201, 0.38),
    0 0 14px rgba(218, 161, 48, 0.2) !important;
}

:is(#collectionPanel, #shopPanel, #deckBuilderPanel) .sort-direction-btn.active :is(span, strong) {
  color: #fff2c4 !important;
  -webkit-text-fill-color: #fff2c4 !important;
  text-shadow: 0 1px 2px rgba(55, 29, 1, 0.8) !important;
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  :is(#collectionPanel, #shopPanel) .filter-drawer-header {
    padding: 8px 9px !important;
  }

  :is(#collectionPanel, #shopPanel) .filter-drawer-body {
    gap: 6px;
    padding: 8px !important;
  }

  :is(#collectionPanel, #shopPanel) .filter-control-group {
    padding: 6px !important;
  }

  :is(#collectionPanel, #shopPanel) .filter-drawer-close-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }

  .custom-filter-select-option {
    min-height: 23px;
    padding-block: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-filter-select-option,
  .sort-direction-btn {
    transition: none !important;
  }
}