/* Pelisflix selection controls. Native fields remain the progressive fallback. */
:root{--pf-select-ready:1;--pf-control-bg:#151d25;--pf-control-border:#303b45;--pf-control-text:#eef2f5;--pf-control-muted:#a2aebb;--pf-control-accent:var(--lime,#c6f567)}
.pf-select,.pf-select-trigger,.pf-select-menu,.pf-select-option{box-sizing:border-box}
.pf-select{position:relative;display:inline-block;min-width:170px;max-width:100%;vertical-align:middle}
.pf-select-native{display:none!important}
.pf-select-trigger[type=button][role=combobox]{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:48px;margin:0;padding:12px 14px;border:1px solid var(--pf-control-border);border-radius:11px;background:linear-gradient(180deg,#1b242d,var(--pf-control-bg));color:var(--pf-control-text);font:600 14px/1.35 'DM Sans',Arial,sans-serif;letter-spacing:normal;text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff05;touch-action:manipulation;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.pf-select-trigger[type=button][role=combobox]:not(:disabled):hover{border-color:#697e4d;background:linear-gradient(180deg,#202c35,#182129)}
.pf-select-trigger[type=button][role=combobox]:focus-visible{outline:2px solid var(--pf-control-accent);outline-offset:3px;box-shadow:0 0 0 5px #c6f5670b}
.pf-select-trigger[type=button][role=combobox][aria-expanded=true]{border-color:#a4cb5b;box-shadow:0 0 0 3px #c6f56712;background:linear-gradient(180deg,#202c31,#172127)}
.pf-select-trigger[type=button][role=combobox]:disabled,.pf-select-trigger[type=button][role=combobox][aria-disabled=true]{opacity:.5;cursor:not-allowed;border-color:#29323a;box-shadow:none}
.pf-select-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;color:#a6b6c5;line-height:0}
.pf-select-icon svg{display:block;width:18px;height:18px}
.pf-select-value{display:block;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pf-select-chevron{display:block;flex:0 0 15px;width:15px;height:15px;color:#a6b6c5;transition:transform .16s ease,color .16s ease}
.pf-select-chevron svg,.pf-select-check svg{display:block;width:100%;height:100%}
.pf-select-trigger[aria-expanded=true] .pf-select-chevron{transform:rotate(180deg);color:var(--pf-control-accent)}
.pf-select-trigger[aria-expanded=true] .pf-select-icon{color:var(--pf-control-accent)}
.pf-select-label{display:block;color:var(--pf-control-muted);font-size:12px;font-weight:600;line-height:1.4}

/* The popup is portalled to the body so rails, forms and heroes cannot clip it. */
.pf-select-menu{position:fixed;z-index:1200;display:flex;flex-direction:column;min-width:0;max-width:calc(100vw - 24px);max-height:360px;max-height:min(360px,calc(100dvh - 24px));overflow:hidden;padding:6px;border:1px solid #35424c;border-radius:14px;background:linear-gradient(150deg,#1b252d,#111920 65%);color:var(--pf-control-text);box-shadow:0 20px 60px #0009,0 4px 14px #0005,inset 0 1px 0 #ffffff05;transform-origin:50% 0;animation:pf-select-in .14s ease-out}
.pf-select-menu[hidden]{display:none!important}
.pf-select-menu[data-side=top],.pf-select-menu[data-placement^=top]{transform-origin:50% 100%}
.pf-select-menu-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 10px 10px;margin:0 3px 3px;border-bottom:1px solid #ffffff0a;color:#a9b5bf;font:700 10px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}
.pf-select-menu-header>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.pf-select-count{flex:0 0 auto;padding:3px 7px;border:1px solid #ffffff0a;border-radius:20px;background:#ffffff06;color:#a9b5bf;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}
.pf-select-options{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;margin:0;padding:2px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#566747 transparent}
.pf-select-options::-webkit-scrollbar{width:5px}
.pf-select-options::-webkit-scrollbar-track{background:transparent}
.pf-select-options::-webkit-scrollbar-thumb{border-radius:6px;background:#566747}
.pf-select-option[role=option]{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:2px 0;padding:10px 11px;border:1px solid transparent;border-radius:9px;background:transparent;color:#d8e0e7;font:500 14px/1.4 'DM Sans',Arial,sans-serif;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer;user-select:none;transition:background .12s ease,border-color .12s ease,color .12s ease}
.pf-select-option[role=option][data-active=true],.pf-select-option[role=option]:not([aria-disabled=true]):hover{border-color:#ffffff0c;background:#ffffff09;color:#fff}
.pf-select-option[role=option][aria-selected=true]{border-color:#c6f56726;background:#c6f56711;color:var(--pf-control-accent);font-weight:600}
.pf-select-option[role=option][aria-selected=true][data-active=true],.pf-select-option[role=option][aria-selected=true]:hover{border-color:#c6f56747;background:#c6f5671b;color:var(--pf-control-accent)}
.pf-select-option[role=option]:focus-visible{outline:2px solid var(--pf-control-accent);outline-offset:-2px}
.pf-select-option[role=option][aria-disabled=true]{opacity:.4;color:#9eabb5;cursor:not-allowed;border-color:transparent;background:transparent}
.pf-select-check{display:block;flex:0 0 17px;width:17px;height:17px;margin-left:auto;color:var(--pf-control-accent);opacity:0;visibility:hidden}
.pf-select-option[aria-selected=true] .pf-select-check{opacity:1;visibility:visible}
.pf-select-group{margin:10px 11px 5px;color:#8f9daa;font:700 10px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase}
.pf-select-empty{padding:20px 12px;color:var(--pf-control-muted);font-size:13px;line-height:1.5;text-align:center}
@keyframes pf-select-in{from{opacity:0;transform:translateY(-3px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Keep all contexts aligned without changing the site's shared content gutters. */
.player-selectors{width:min(100%,520px);max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;border-color:#303c46;border-radius:14px;background:linear-gradient(135deg,#1b252e,#131c23);box-shadow:inset 0 1px 0 #ffffff04}
.player-select-field{gap:8px;min-width:0}
.player-select-field .pf-select{display:block;width:100%;min-width:0}
.player-select-field>.pf-select-label,.player-select-field>span{font-size:12px;font-weight:600;color:#b0bdc9;letter-spacing:.1px}
.player-selectors .pf-select-trigger[type=button][role=combobox]{background:#0d151c;border-color:#34414b}
.player-selectors .pf-select-trigger[type=button][role=combobox]:not(:disabled):hover{background:#121e26;border-color:#748c51}
.player-selectors .pf-select-trigger[type=button][role=combobox][aria-expanded=true]{background:#132027;border-color:#a4cb5b}
.filters{align-items:center;gap:12px}
.filters>.pf-select{width:190px;min-width:160px}
.filters form{display:flex;align-items:stretch;gap:10px;min-width:0;max-width:100%}
.filters form .pf-select{flex:1 1 auto;min-width:170px}
.filters .chip{align-self:stretch;min-height:48px;padding:10px 18px;border-color:#c6f5672e;border-radius:11px;background:#c6f5670b;color:#d3ed9d;font-weight:700}
.filters .chip:hover{border-color:#c6f56765;background:#c6f56717;color:var(--pf-control-accent)}
.actions>.pf-select,#tab-episodes>.pf-select{width:220px;min-width:180px;max-width:100%}
#tab-episodes>.pf-select{margin-bottom:20px}
.search-box .field{border-color:#303b45;border-radius:11px;background:#151d25;transition:border-color .16s ease,box-shadow .16s ease}
.search-box .field:hover{border-color:#4b5b68}
.search-box .field:focus-visible{border-color:#a4cb5b;outline:2px solid var(--pf-control-accent);outline-offset:2px;box-shadow:0 0 0 5px #c6f5670b}
select:not(.pf-select-native){appearance:none;padding-right:42px;border-color:#303b45;border-radius:11px;background-color:#151d25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a6b6c5' stroke-width='1.8'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px 15px;color:#eef2f5}

@media(max-width:640px){
  .filters{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px}
  .filters>.pf-select{width:100%;min-width:0}
  .filters form{width:100%;gap:9px}
  .filters form .pf-select{min-width:0}
  .filters .chip{flex:0 0 auto;padding-inline:15px}
  .player-selectors{gap:10px;padding:12px;border-radius:12px}
  .player-selectors .pf-select-icon{display:none}
  .player-selectors .pf-select-trigger[type=button][role=combobox]{gap:6px;min-height:46px;padding:10px;font-size:13px}
  .player-selectors .pf-select-chevron{flex-basis:12px;width:12px;height:12px}
  .pf-select-option[role=option]{min-height:46px;padding:11px 10px}
  .actions>.pf-select,#tab-episodes>.pf-select{min-width:0;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.pf-select-trigger[type=button][role=combobox],.pf-select-chevron,.pf-select-option[role=option],.search-box .field{transition:none}.pf-select-menu{animation:none}}
@media(forced-colors:active){
  .pf-select-trigger[type=button][role=combobox],.player-selectors .pf-select-trigger[type=button][role=combobox],.pf-select-menu{border-color:ButtonText;background:Canvas;color:CanvasText;box-shadow:none}
  .pf-select-trigger[type=button][role=combobox]:focus-visible{outline-color:Highlight}
  .pf-select-option[role=option]{color:CanvasText}
  .pf-select-option[role=option][data-active=true]{border-color:Highlight;background:Canvas}
  .pf-select-option[role=option][aria-selected=true]{border-color:Highlight;background:Highlight;color:HighlightText}
  .pf-select-option[role=option][aria-disabled=true],.pf-select-trigger[type=button][role=combobox]:disabled{color:GrayText;opacity:1}
  .pf-select-check,.pf-select-icon,.pf-select-chevron,.pf-select-menu-header,.pf-select-count{color:inherit}
}
