/*
 * Diva Road — old-browser fallbacks (D-111). Loaded after the main stylesheet by both layouts; it is a plain static
 * file on purpose: the build's CSS optimiser targets current browsers and would drop these duplicates.
 * Every rule sits behind @supports, so current browsers ignore the whole file.
 * Targets (docs/BROWSERS.md): Safari/iOS 14+, Chrome/Edge 88+, Firefox 90+, Samsung Internet 15+.
 * The block for logical properties is generated from src/app/globals.css — regenerate it when those rules change
 * (scripts/compat-css.py).
 */

/* 1. inset / inset-inline / padding-inline / margin-block … (Safari < 14.1, Chrome < 87, Samsung Internet < 14) */
@supports not (inset:0){
  /* >>> generated by scripts/compat-css.py */
  .wrap{margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
  html:not([dir="rtl"]) .skip{left:12px}
  [dir="rtl"] .skip{right:12px}
  .tbtn{padding-left:10px;padding-right:10px}
  .tbtn .badge{padding-left:5px;padding-right:5px}
  html:not([dir="rtl"]) .tbtn .badge{right:-6px}
  [dir="rtl"] .tbtn .badge{left:-6px}
  .sel{padding-left:10px;padding-right:10px}
  .drawer{top:0;right:0;bottom:0;left:0}
  .drawer-bg{top:0;right:0;bottom:0;left:0}
  .sec{padding-top:56px;padding-bottom:56px}
  .sec-sm{padding-top:36px;padding-bottom:36px}
  .btn{padding-left:22px;padding-right:22px}
  .hero{padding-top:48px;padding-bottom:40px}
  .rate-row{padding-top:6px;padding-bottom:6px}
  .input{padding-left:12px;padding-right:12px}
  textarea.input{padding-top:10px;padding-bottom:10px}
  .steps::before{left:8%;right:8%}
  .page-head{padding-top:44px;padding-bottom:8px}
  .prose{padding-top:24px;padding-bottom:64px}
  .faq{padding-top:24px;padding-bottom:64px}
  .contact-grid{padding-top:24px;padding-bottom:64px}
  html:not([dir="rtl"]) .hp{left:0}
  [dir="rtl"] .hp{right:0}
  .copy{padding-left:10px;padding-right:10px}
  .ftr-grid{padding-top:44px;padding-bottom:28px}
  .ftr-bottom{padding-top:18px;padding-bottom:18px}
  .fab{padding-left:16px;padding-right:16px}
  html:not([dir="rtl"]) .fab{left:16px}
  [dir="rtl"] .fab{right:16px}
  .sp{top:0;right:0;bottom:0;left:0}
  .btn-sm{padding-left:14px;padding-right:14px}
  .notice-s{margin-top:4px;margin-bottom:16px}
  .card-t a::after{top:0;right:0;bottom:0;left:0}
  html:not([dir="rtl"]) .fav{right:10px}
  [dir="rtl"] .fav{left:10px}
  .sheet-bg{top:0;right:0;bottom:0;left:0}
  html:not([dir="rtl"]) .g-count{right:10px}
  [dir="rtl"] .g-count{left:10px}
  .det-secs{padding-top:44px;padding-bottom:24px}
  .gal{top:0;right:0;bottom:0;left:0}
  .fs legend{padding-left:4px;padding-right:4px}
  html:not([dir="rtl"]) .switch input::after{left:3px}
  [dir="rtl"] .switch input::after{right:3px}
  html:not([dir="rtl"]) .switch input:checked::after{left:23px}
  [dir="rtl"] .switch input:checked::after{right:23px}
  .hm-act .btn-sm{padding-left:10px;padding-right:10px}
  .psearch{margin-top:8px;margin-bottom:14px}
  .cart{padding-top:12px;padding-bottom:64px}
  .totals .paid{padding-left:10px;padding-right:10px}
  html:not([dir="rtl"]) .ccbrand{right:12px}
  [dir="rtl"] .ccbrand{left:12px}
  .auth{padding-top:12px;padding-bottom:64px}
  .acc{padding-top:12px;padding-bottom:64px}
  html:not([dir="rtl"]) .stages li::before{left:10px}
  [dir="rtl"] .stages li::before{right:10px}
  .odet{padding-top:8px;padding-bottom:64px}
  .pw-t{top:4px;bottom:4px}
  html:not([dir="rtl"]) .adm-bellb .badge{right:-4px}
  [dir="rtl"] .adm-bellb .badge{left:-4px}
  .adm-sp.sp{top:auto;right:auto;bottom:auto;left:auto}
  .consent{left:16px;right:16px;margin-left:auto;margin-right:auto}
  .nav-chev{margin-left:4px;margin-right:4px}
  .btn-soft{padding-left:14px;padding-right:14px}
  .mk-empty{padding-left:6px;padding-right:6px}
  html:not([dir="rtl"]) .mk-pop{left:0}
  [dir="rtl"] .mk-pop{right:0}
  .tr-in{margin-top:8px;margin-bottom:8px}
  .tr-file input{top:0;right:0;bottom:0;left:0}
  .tr-help summary{margin-top:6px;margin-bottom:6px}
  .cur-ms{margin-top:8px;margin-bottom:8px}
  .msg-bar{margin-top:8px;margin-bottom:8px}
  .thread{margin-top:8px;margin-bottom:8px}
  .mp-q{padding-left:6px;padding-right:6px}
  .blk-pages{margin-top:10px;margin-bottom:10px}
  .close-big{padding-left:26px;padding-right:26px}
  .social a.soc-name,.social a.soc-both{padding-left:12px;padding-right:12px}
  .pay-logo{padding-left:6px;padding-right:6px}
  .msg-h>.chip,.msg-h>.msg-chip{padding-left:6px;padding-right:6px}
  @media (max-width:900px){
    html:not([dir="rtl"]) .steps::before{left:21px;right:auto}
    [dir="rtl"] .steps::before{right:21px;left:auto}
    .filters{top:auto;right:0;bottom:0;left:0}
    .acc-nav{left:0;right:0}
    .acc.nav-open .acc-scrim{top:0;right:0;bottom:0;left:0}
  }
  @media (max-width:560px){
    .wrap{padding-left:16px;padding-right:16px}
    .fab{padding-left:12px;padding-right:12px}
  }
  @media (max-width:960px){
    .adm-side{top:0;bottom:0}
    html:not([dir="rtl"]) .adm-side{left:0}
    [dir="rtl"] .adm-side{right:0}
    .adm.nav-open .adm-scrim{top:0;right:0;bottom:0;left:0}
  }
  @media (max-width:1080px){
    .hdr-dash{padding-left:10px;padding-right:10px}
  }
  @media (min-width:961px){
    html:not([dir="rtl"]).adm-nav-mini .adm-side .adm-n{right:9px}
    html[dir="rtl"].adm-nav-mini .adm-side .adm-n{left:9px}
  }
  @media (min-width:901px){
    html:not([dir="rtl"]).acc-nav-mini .acc-nav .adm-n{right:8px}
    html[dir="rtl"].acc-nav-mini .acc-nav .adm-n{left:8px}
  }
  /* <<< generated */
}

/* 2. color-mix() (Safari < 16.2, Chrome < 111, Firefox < 113): without it the header was see-through and the
      placeholder car/part pictures lost their colours */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .hdr{background:var(--surface)}
  .fav,.stamp{background:var(--surface)}
  .ph,.ph-f,.car-fallback{background:var(--surface-2)}
  .car-sym .cs-body,.car-fallback .cs-body,.part-sym .ps-ring,.part-sym .ps-teeth rect{fill:var(--primary-soft)}
}

/* 3. aspect-ratio (Safari < 15): photo frames collapsed to zero height, so car photos looked missing */
@supports not (aspect-ratio:1/1){
  .card-media::before,.g-main::before,.cl-img::before,.thumb::before{content:"";float:left;padding-top:75%}
  .card-media::after,.g-main::after,.cl-img::after,.thumb::after{content:"";display:block;clear:both}
  .part-photo{height:auto}
}

/* 4. appearance without prefix (Safari < 15.4): the on/off switches showed as plain checkboxes */
@supports not (appearance:none){
  .switch input{-webkit-appearance:none}
}

/* 5. :has() (Firefox < 121, Safari < 15.4): focus ring of the chosen payment option */
@supports not selector(:has(a)){
  .pm:focus-within{outline:3px solid var(--focus);outline-offset:2px}
}

/* 6. sticky table headers need the prefix before Safari 13 */
@supports not (position:sticky){
  .adm-tbl thead th,.adm-top,.hdr{position:-webkit-sticky}
}