/* Plate search additions on top of storefront.css (loaded only where plate search is switched on). */

/* Keyboard focus on the plate field as clear as on the size search's own fields; the whole frame takes the tap. */
/* The frame line is drawn inside (inset shadow, not a border), so the text box fills the full 36/44 px height. */
.rt-plate-field { cursor:text; border:0; box-shadow:inset 0 0 0 1px #cdd3d9; }
.rt-plate-field:focus-within { box-shadow:inset 0 0 0 1px #4b5259; outline:2px solid #1f2429; outline-offset:2px; }

/* Busy: the button stays focusable (aria-disabled), it only looks and acts unavailable. */
.rt-plate .rt-plate-submit[aria-disabled=true] { opacity:.7; cursor:progress; }

/* Announcements for screen readers only ("Otsin…", then the answer's first line). */
.rt-plate-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* The way on to the size search, and the answer box as a focus target after it changes. */
.rt-plate-to-size { color:#1f2429; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.rt-plate-to-size:hover { color:#e8821a; }
.rt-plate-to-size:focus-visible { outline:2px solid #1f2429; outline-offset:2px; }
.rt-plate-alt { margin:12px 0 0; font:400 14px/1.4 var(--wd-text-font); }
.rt-plate-res:focus,.rt-plate-err:focus { outline:none; }
.rt-plate-res:focus-visible,.rt-plate-err:focus-visible { outline:2px solid #1f2429; outline-offset:4px; }
.rt-plate-res .rt-plate-msg { margin:0 0 6px; color:#5f656c; font-size:13px; }
.rt-plate-out[aria-busy=true] { opacity:.6; }

/* Touch screens wider than a phone (tablets) get the same 44px targets as phones. */
@media (pointer:coarse) {
  .rt-search-tabs [role=tab] { min-height:44px; }
  .rt-plate-field { height:44px; }
  .rt-plate .rt-plate-submit { height:44px; }
  .rt-plate-size { min-height:44px; }
  .rt-plate-to-size { display:inline-flex; align-items:center; min-height:44px; }
}