/* WOK control polish. Preserve base.css/shop.css/dashboard.css artwork and geometry.
   This layer changes interaction states and hit areas, not the site's visual language. */
body:is(.shop-page,.panel-body) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])),select,textarea,.select-trigger){min-height:44px}
body:is(.shop-page,.panel-body) :is(input,select,textarea,button,a.btn):focus-visible{
  outline:2px solid var(--red-hi);outline-offset:3px;
}
body:is(.shop-page,.panel-body) :is(input,select,textarea,.select-trigger):is([aria-invalid="true"],:user-invalid,.is-invalid){
  border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,113,94,.12);
}
body:is(.shop-page,.panel-body) :is(input,textarea)[readonly]{color:var(--text-2);cursor:text}
body:is(.shop-page,.panel-body) :is(input,select,textarea,.select-trigger):disabled{opacity:.6;cursor:not-allowed}
body:is(.shop-page,.panel-body) :is(input,select,textarea,.select-trigger)[aria-busy="true"]{border-style:dashed;cursor:progress}
body:is(.shop-page,.panel-body) .auth-input-shell input{min-height:52px;padding-right:76px}
body:is(.shop-page,.panel-body) .auth-password-toggle{top:4px;bottom:4px;right:4px;min-height:44px;min-width:60px}
body:is(.shop-page,.panel-body) :is(.btn,.auth-password-toggle):disabled{cursor:not-allowed;transform:none}
body:is(.shop-page,.panel-body) :is(.btn,.auth-password-toggle)[aria-busy="true"],
body:is(.shop-page,.panel-body) .btn.is-loading{cursor:progress}

/* Native controls use the existing WOK red/gold palette and asymmetric corners.
   Consent keeps its real input; only the duplicate decorative checkbox is removed. */
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]){
  -webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;position:relative;
  width:20px;height:20px;min-width:20px;min-height:20px;max-width:20px;max-height:20px;
  flex:0 0 20px;margin:0;padding:0;opacity:1;pointer-events:auto;clip:auto;overflow:visible;
  border:1.5px solid var(--text-3);border-radius:6px 6px 2px 6px;
  background:var(--bg);color:#170806;vertical-align:middle;cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
:is(.shop-page,.panel-body) input[type="checkbox"]::before{
  content:"";display:block;width:9px;height:5px;margin-top:-2px;border:0;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:0;
}
:is(.shop-page,.panel-body) input[type="radio"]{border-radius:50%}
:is(.shop-page,.panel-body) input[type="radio"]::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):checked,
:is(.shop-page,.panel-body) input[type="checkbox"]:indeterminate{
  border-color:var(--red-hi);background:linear-gradient(135deg,var(--red-hi),var(--red));
  box-shadow:inset 0 1px rgba(255,255,255,.18);
}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):hover:not(:disabled){border-color:var(--gold)}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):checked::before{opacity:1}
:is(.shop-page,.panel-body) input[type="checkbox"]:indeterminate::before{
  opacity:1;width:10px;height:0;margin:0;border:0;border-top:2px solid currentColor;transform:none;
}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):disabled{
  opacity:.6;border-color:var(--text-3);background:var(--surface);color:var(--text-2);cursor:not-allowed;
}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):checked:disabled{
  opacity:.8;border-color:#77716a;color:var(--gold);
  background:linear-gradient(135deg,rgba(233,192,121,.1),rgba(216,80,58,.08));
}
:is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):is([aria-invalid="true"],:user-invalid){border-color:var(--danger)}
:is(.shop-page,.panel-body) :is(.email-check,.legal-consent){min-height:44px}
:is(.shop-page,.panel-body) .legal-consent input[type="checkbox"]{
  position:relative!important;width:20px!important;height:20px!important;min-height:20px!important;opacity:1!important;
}
:is(.shop-page,.panel-body) .legal-consent-box{display:none}

/* Keep the original card radios: icon, checked seal, backgrounds and grid are
   already stateful through :has(input:checked). The label is their hit target. */
.panel-body :is(.key-mode-card,.key-term-group) input[type="radio"]{
  position:absolute;width:1px;height:1px;min-width:0;min-height:0;max-width:1px;max-height:1px;
  margin:0;padding:0;opacity:0;pointer-events:none;
}
.panel-body :is(.key-mode-card,.key-term-group label){min-height:44px}
.panel-body :is(.key-mode-card,.key-term-group label):has(input:focus-visible){outline:2px solid var(--red-hi);outline-offset:3px}
.panel-body :is(.key-mode-card,.key-term-group label) input:focus-visible{outline:none}
.panel-body :is(.key-mode-card,.key-term-group label):has(input:disabled){opacity:.6;cursor:not-allowed}
.panel-body :is(.key-mode-card,.key-term-group label):has(input[aria-invalid="true"]){border-color:var(--danger)}
.panel-body .lane-switch{min-height:44px;height:auto}
.panel-body .lane-switch:disabled{opacity:.6;cursor:not-allowed}
.panel-body .lane-switch[aria-invalid="true"]{border-color:var(--danger)}

/* Enlarge only the real range hit area. Keep the original track, warm thumb,
   glow and progress treatment, with browser-specific thumb alignment. */
:is(.shop-page,.panel-body) .slider-shell{height:44px;min-height:44px}
:is(.shop-page,.panel-body) input[type="range"]{height:44px!important;min-height:44px!important}
:is(.shop-page,.panel-body) input[type="range"]::-webkit-slider-runnable-track{height:6px}
:is(.shop-page,.panel-body) input[type="range"]::-webkit-slider-thumb{margin-top:-11px}
:is(.shop-page,.panel-body) input[type="range"]::-moz-range-track{height:6px}
:is(.shop-page,.panel-body) input[type="range"]::-moz-range-progress{height:6px}
:is(.shop-page,.panel-body) input[type="range"]::-moz-range-thumb{cursor:grab}
:is(.shop-page,.panel-body) input[type="range"]:disabled{opacity:.6;cursor:not-allowed}
:is(.shop-page,.panel-body) input[type="range"]:disabled::-webkit-slider-thumb{cursor:not-allowed}
:is(.shop-page,.panel-body) input[type="range"]:disabled::-moz-range-thumb{cursor:not-allowed}

/* Keep chassis, asymmetric radii, menu surfaces and selected-state seals.
   Reserve the arrow's real width instead of moving its artwork over the text. */
:is(.shop-page,.panel-body) .select-trigger,:is(.shop-page,.panel-body) .select-option{min-height:44px}
:is(.shop-page,.panel-body) .select-trigger{grid-template-columns:minmax(0,1fr) 38px;column-gap:10px;padding-inline:12px 6px}
:is(.shop-page,.panel-body) .select-value{min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.shop-page,.panel-body) .select-arrow{right:auto;justify-self:end;align-self:center}
/* Keep each existing surface's RGB colors; only remove its alpha so fields
   behind the portal cannot show through between options. */
.shop-page .select-popover{background:#101014}
.panel-body .select-popover{background:linear-gradient(145deg,#131418,#0a0b0e)}
:is(.shop-page,.panel-body) .select-popover .select-option{padding:10px 12px;gap:10px;border-color:transparent;background:transparent;font-size:14px;line-height:1.4}
:is(.shop-page,.panel-body) .select-popover .select-option:hover:not(:disabled){color:var(--text)}
:is(.shop-page,.panel-body) .select-popover .select-option[aria-selected="true"]{
  border-color:rgba(216,80,58,.25);background:linear-gradient(90deg,rgba(216,80,58,.18),rgba(216,80,58,.04));color:var(--red-hi);
}
:is(.shop-page,.panel-body) .select-option:focus-visible{outline:2px solid var(--red-hi);outline-offset:-2px}
:is(.shop-page,.panel-body) .select-option:disabled{opacity:.6;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}

@media(pointer:coarse){
  body:is(.shop-page,.panel-body) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),select,textarea){font-size:16px}
  body:is(.shop-page,.panel-body) :is(.btn,.btn.small,.auth-password-toggle,.auth-text-button,.login-text-button){min-height:44px;min-width:44px}
}
@media(prefers-reduced-motion:reduce){
  :is(.shop-page,.panel-body) :is(input,select,textarea,button,.select-arrow .ti,.select-popover){transition:none!important;animation:none!important}
}
@media(forced-colors:active){
  body:is(.shop-page,.panel-body) :is(input,select,textarea,button,a.btn):focus-visible{outline-color:Highlight}
  :is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]){forced-color-adjust:none;background:Canvas;border-color:ButtonText;color:HighlightText}
  :is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):checked,
  :is(.shop-page,.panel-body) input[type="checkbox"]:indeterminate{background:Highlight;border-color:Highlight}
  :is(.shop-page,.panel-body) input:is([type="checkbox"],[type="radio"]):disabled{border-color:GrayText;color:GrayText}
  :is(.shop-page,.panel-body) :is(.select-trigger,.select-popover,.select-option){border-color:ButtonText;background:Canvas;color:CanvasText}
  :is(.shop-page,.panel-body) .select-arrow{background:none;color:ButtonText}
  :is(.shop-page,.panel-body) .select-option[aria-selected="true"]{outline:1px solid Highlight;outline-offset:-2px;color:Highlight}
  :is(.shop-page,.panel-body) .select-check{background:none;color:Highlight}
  :is(.shop-page,.panel-body) .select-check .ti{display:block}
  .panel-body .key-mode-card>i{background:none;border:1px solid ButtonText;color:transparent}
  .panel-body .key-mode-card:has(input:checked)>i{background:Highlight;color:HighlightText}
  .panel-body .key-mode-card>i .ti{display:block}
  :is(.shop-page,.panel-body) input[type="range"]::-webkit-slider-runnable-track{forced-color-adjust:none;background:ButtonText}
  :is(.shop-page,.panel-body) input[type="range"]::-webkit-slider-thumb{forced-color-adjust:none;background:Highlight;border-color:ButtonText}
  :is(.shop-page,.panel-body) input[type="range"]::-moz-range-track{forced-color-adjust:none;background:ButtonText}
  :is(.shop-page,.panel-body) input[type="range"]::-moz-range-progress{forced-color-adjust:none;background:Highlight}
  :is(.shop-page,.panel-body) input[type="range"]::-moz-range-thumb{forced-color-adjust:none;background:Highlight;border-color:ButtonText}
  .panel-body .lane-switch span{background:Canvas;border:1px solid ButtonText}
  .panel-body .lane-switch[aria-checked="true"] span{background:Highlight;border-color:Highlight}
}