/*
 * Standalone styles for the tyre search box.
 * The Mobile 2026 theme already carries these rules, so on that theme
 * this file simply re-states them; on any other theme it makes the box
 * look right on its own. Variables fall back when the theme has none.
 */
.m26-search{--m26-red:#dc1c29;--m26-dark:#181c1d;--m26-light:#f5f5f5;--m26-line:#e6e6e6;--m26-text-soft:#6a6d70}
.m26-search{width:100%;max-width:620px;background:#fff;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 50px rgba(0,0,0,.14);color:var(--m26-dark);font-family:inherit;box-sizing:border-box}
.m26-search *,.m26-search *::before,.m26-search *::after{box-sizing:border-box}
/* The widget emits .screen-reader-text five times and never defined it,
   relying on the active theme to. In a theme that does not, the labels render
   as visible text — and inside .m26-search__selects, which is a three-column
   grid, each label also takes a grid cell, so three selects became six items
   over two rows and the panel stood twice as tall as it should. A plugin that
   ships its own markup has to ship the CSS that markup needs. Scoped to the
   widget so it cannot collide with a theme's own copy. */
.m26-search .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Frosted glass on the search card.
   Theme Settings → Colours & type sets --m26-search-alpha / --m26-search-blur;
   the fallbacks here are what the plugin uses on its own, so the widget looks
   the same with or without the theme.

   Only the CARD goes translucent. The reg field, the selects and the buttons
   stay solid: they carry the text somebody is reading and typing into, and a
   hero photograph behind them is the one thing guaranteed to make that
   unreadable.

   backdrop-filter is not universal. Where it is missing the blur silently does
   nothing, and a 72% card over a busy photo without it is a mess — so the
   @supports block below puts the card back to nearly solid instead. */
.m26-search{
  background:rgba(255,255,255,var(--m26-search-alpha,1));
  border:1px solid var(--m26-search-edge,transparent);
  -webkit-backdrop-filter:blur(var(--m26-search-blur,0)) saturate(140%);
  backdrop-filter:blur(var(--m26-search-blur,0)) saturate(140%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .m26-search{background:rgba(255,255,255,.94)}
}
.m26-search--inline{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
.m26-search__tabs{display:flex;gap:6px;padding:2px 2px 0}
.m26-search__tab{flex:1;border:0;background:transparent;color:var(--m26-search-ink-soft,var(--m26-text-soft));border-radius:999px;padding:9px 10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit;line-height:1.3}
.m26-search__tab.is-active{background:var(--m26-red);color:#fff}
/* Both panels sit in the same grid cell, so the card is always as tall as the
   taller of the two and switching tabs does not resize it. The size tab carries
   an extra row; with display:none the card jumped and the hero moved with it. */
.m26-search__panels{display:grid;grid-template-columns:1fr;align-items:center}
/* Both panels share one grid cell, so the card is a constant height and the
   hero behind it does not resize when you switch tabs — measured at 58px of
   jump when the inactive panel was taken out of flow.
   The cell is as tall as the taller panel, so align-items:center puts the
   shorter one in the middle of that space rather than pinned to the top with
   the whole difference showing underneath it as a hole. The two panels are
   only 58px apart now that the selects share a row with their button, so that
   is ~29px of even breathing room, not a gap. */
.m26-search__panel{grid-area:1/1;display:flex;flex-direction:column;gap:8px;margin:0;transition:opacity .12s ease}
.m26-search__panel:not(.is-active){visibility:hidden;opacity:0;pointer-events:none}
.m26-search__panel.is-active{visibility:visible;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.m26-search__panel{transition:none}}
.m26-search__row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.m26-search__field{flex:1 1 100%;display:flex;align-items:stretch;border:1.5px solid var(--m26-line);border-radius:12px;overflow:hidden;background:#fff;min-width:0}
.m26-search__field.is-reg{background:#ffd60a;border-color:#e8c200}
.m26-search__plate{background:#003fa3;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:800;flex:0 0 auto}
.m26-search__input{flex:1;border:0;background:transparent;padding:0 14px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m26-dark);height:50px;outline:none;min-width:0}
.m26-search__input::placeholder{color:rgba(24,28,29,.45);font-weight:600;letter-spacing:.02em}
.m26-search__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--m26-red);color:#fff;border:0;border-radius:12px;padding:0 22px;height:50px;font-size:13px;font-weight:700;letter-spacing:.07em;cursor:pointer;font-family:inherit;flex:1 1 100%;text-transform:uppercase}
.m26-search__btn:hover{filter:brightness(.9)}
.m26-search__btn[disabled]{opacity:.6;cursor:progress}
.m26-search__selects{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1 1 100%}
.m26-search__selects select{height:50px;border:1.5px solid var(--m26-line);border-radius:12px;padding:0 12px;font-size:15px;font-weight:700;font-family:inherit;color:var(--m26-dark);background:#fff;min-width:0}
.m26-search__note{font-size:11.5px;color:var(--m26-search-ink-soft,var(--m26-text-soft));padding:0 4px 4px;line-height:1.5;margin:0}
.m26-search__result{border-top:1px solid var(--m26-line);margin-top:2px;padding:14px 6px 6px;font-size:14px;line-height:1.7;display:none}
.m26-search__result.is-visible{display:block}
.m26-search__result h4{margin:0 0 8px;font-size:17px;color:var(--m26-dark)}
.m26-search__result p{margin:0 0 6px}
.m26-spec{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.m26-spec li{display:flex;gap:10px;align-items:baseline;background:var(--m26-light);border-radius:8px;padding:9px 12px;margin:0;font-size:13.5px}
.m26-spec b{color:var(--m26-dark);min-width:64px;flex:0 0 auto}
.m26-search__error{color:var(--m26-red);font-weight:700;font-size:13.5px;margin:0}
.m26-search--inline{box-shadow:none;border:1px solid var(--m26-line);max-width:100%}
@media (min-width:640px){
  /* flex:1 1 100% made the three selects claim a whole row, pushing the button
     onto a second line — which is what made the size panel 166px tall while the
     reg panel was 50px. On a 620px card they fit beside the button comfortably,
     and both tabs then have the same one-row shape. */
  .m26-search__selects{flex:1 1 auto}
  .m26-search__row{flex-wrap:nowrap}
  .m26-search__field{flex:1 1 auto}
  .m26-search__btn{flex:0 0 auto}
  .m26-spec{grid-template-columns:1fr 1fr}
}

/* Staggered fitment: the two ends side by side. */
.m26ts-axles{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:14px 0 2px}
.m26ts-axle{background:var(--m26-light,#f5f5f5);border-radius:10px;padding:12px 14px}
.m26ts-axle span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6a6d70;margin-bottom:2px}
.m26ts-axle b{display:block;font-size:19px;font-weight:800;color:var(--m26-red,#dc1c29);line-height:1.2}
@media (max-width:420px){.m26ts-axles{grid-template-columns:1fr}}

/* Wheel-size options the customer picks between. */
.m26ts-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.m26ts-option{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:#fff;border:1px solid var(--m26-line,#e6e6e6);border-radius:12px;padding:10px 16px;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,box-shadow .15s}
.m26ts-option:hover{border-color:var(--m26-red,#dc1c29)}
.m26ts-option.is-active{border-color:var(--m26-red,#dc1c29);box-shadow:inset 0 0 0 1px var(--m26-red,#dc1c29)}
.m26ts-option b{font-size:15px;font-weight:800;color:var(--m26-dark,#181c1d)}
.m26ts-option.is-active b{color:var(--m26-red,#dc1c29)}
.m26ts-option em{font-style:normal;font-size:12px;font-weight:600;color:#55585a}
.m26ts-option span{font-size:11px;color:#6a6d70;text-transform:uppercase;letter-spacing:.04em}

/* Elementor's kit styles every <button> on the page, not only its own button
   widget — .elementor-kit-N button at 0,1,1 beats a single class. The tabs and
   the submit button were coming out as red pills with 16px 32px of padding.
   Doubled to 0,2,0. See the same block in the theme's stylesheet. */
.m26-search__tab.m26-search__tab{background:transparent;padding:9px 10px;border-radius:999px;color:var(--m26-search-ink-soft,var(--m26-text-soft))}
.m26-search__tab.m26-search__tab.is-active{background:var(--m26-red);color:#fff}
.m26-search__btn.m26-search__btn{background:var(--m26-red);padding:0 22px;border-radius:12px;color:#fff}
.m26-search__btn.m26-search__btn:hover{filter:brightness(.9)}
/* The wheel-size options are <button> as well, so the same kit rule that was
   repainting the tabs was repainting these: red pills, the kit's 999px corner
   and its 16px 32px padding. The title of the CHOSEN size is red, so it landed
   red on red — measured 1.00:1. The size the customer is being asked to
   confirm was invisible, and the rear size beside it read 1.45:1.
   Doubled to 0,2,0, the same fix as the tabs and the submit button above.
   Colour is stated here too: a kit that sets `button{color:#fff}` would
   otherwise put white on the white tile. */
.m26ts-option.m26ts-option{background:#fff;color:var(--m26-dark,#181c1d);border:1px solid var(--m26-line,#e6e6e6);border-radius:12px;padding:10px 16px;font:inherit;text-transform:none;letter-spacing:normal}
/* Hover fills the tile red and turns every word in it white — the title, the
   rear size and the note, which are otherwise dark grey and would be lost on
   red. White on #dc1c29 measures 4.96:1, so the note stays readable rather
   than just visible. */
.m26ts-option.m26ts-option:hover{background:var(--m26-red,#dc1c29);border-color:var(--m26-red,#dc1c29);color:#fff}
.m26ts-option.m26ts-option:hover b,.m26ts-option.m26ts-option:hover em,.m26ts-option.m26ts-option:hover span{color:#fff}
.m26ts-option.m26ts-option.is-active{border-color:var(--m26-red,#dc1c29);box-shadow:inset 0 0 0 1px var(--m26-red,#dc1c29)}
/* Text that sits directly on the glass rather than on one of the solid tiles,
   so it follows the same ink as the note and the inactive tab. It used to be a
   hardcoded #6a6d70 inline on the markup, which measured 2.75:1 once the card
   went translucent over the hero. Grey on grey. */
.m26ts-muted{color:var(--m26-search-ink-soft,var(--m26-text-soft))}
/* The hero photograph behind this card.

   A hero is drawn with cover, so the photo is sized by the section, and the
   section is as tall as its content — this card included. Opening a result
   redrew it 51.7% larger on a desktop and 93% larger on a phone. The JS
   measures the section while the result is closed and writes --m26-bg-h; the
   photo is then painted into a box of that height and the section grows
   underneath it.

   The theme carries its own copy of these rules for its <img>-based hero.
   This copy handles an Elementor section, so the widget behaves the same on
   any theme. */
.m26-bg-pinned{overflow:hidden}
/* background-image:none, not background-size:0 0. A zero-sized background
   layer stops Chromium painting the whole background box — the COLOUR goes
   with it, and the hero turned white the moment a result opened. Measured at
   rgb(255,255,255) where rgb(5,5,5) was expected. The image is handed to the
   pseudo-element through --m26-bg-img instead, which the script reads off the
   section before it takes over, so whichever image Elementor picked for this
   breakpoint is the one that gets painted. */
.m26-bg-pinned:not(.m26-hero){background-image:none}
.m26-bg-pinned:not(.m26-hero)::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--m26-bg-h,100%);background-image:var(--m26-bg-img);background-position:inherit;background-repeat:no-repeat;background-size:cover;z-index:0;pointer-events:none}
/* Where the photograph ends and the section carries on, blended — but only
   once the section has outgrown it. An inset shadow on the photo's own layer,
   not a fade of its own: a positioned fade needs a z-index to sit above the
   photo, and that z-index also puts it above Elementor's container, which cut
   a dark band through the search results. */
.m26-bg-grown:not(.m26-hero)::before{box-shadow:inset 0 -110px 80px -40px #050505}