/* HerCar staging patch v17 — consignment education videos */
.purpose-video-label{margin:18px 0 8px;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#ef1b24}
.purpose-video-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:610px;margin-bottom:16px}
.purpose-video-link{appearance:none;border:1px solid rgba(17,17,20,.12);background:rgba(255,255,255,.9);border-radius:16px;padding:11px 12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;box-shadow:0 10px 24px rgba(17,17,20,.06);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;color:#111114}
.purpose-video-link:hover{transform:translateY(-2px);border-color:rgba(239,27,36,.45);box-shadow:0 13px 28px rgba(17,17,20,.1)}
.purpose-video-link:focus-visible{outline:3px solid rgba(239,27,36,.28);outline-offset:2px}
.purpose-video-play{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#ef1b24;color:#fff;display:grid;place-items:center;font-size:.82rem;padding-left:2px}
.purpose-video-link strong{display:block;font-size:.83rem;line-height:1.18}
.purpose-video-link small{display:block;margin-top:4px;color:#666;font-size:.68rem;line-height:1.35}
.site-video-modal-card{
  width:min(100%,860px);
  max-width:860px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:22px;
  background:#0b0b0e;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.site-video-panel{
  display:block;
  border-top:0;
  padding:18px 20px 22px;
  background:#0b0b0e;
}
.site-video-frame-wrap{
  width:min(100%,760px);
  aspect-ratio:16/9;
  margin:auto;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.site-video-frame-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}
.site-video-panel.is-tiktok .site-video-frame-wrap,
.site-video-frame-wrap.is-tiktok{
  width:min(100%,340px);
  aspect-ratio:9/16;
  max-height:610px;
}
@media(max-width:760px){
  .purpose-video-links{grid-template-columns:1fr;max-width:100%}
  .purpose-video-link{padding:12px}
  .site-video-modal-card{
    width:100%;
    max-width:calc(100vw - 20px);
    border-radius:20px;
  }
  .site-video-panel{padding:16px 12px 18px}
  .site-video-frame-wrap{border-radius:12px}
  .site-video-panel.is-tiktok .site-video-frame-wrap,
  .site-video-frame-wrap.is-tiktok{max-height:68vh}
}


/* HerCar staging patch v19
   Refined mobile explainer-video proportions.
   Desktop presentation remains unchanged. */
@media (max-width:760px){
  #siteVideoModal{
    padding:12px!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  #siteVideoModal .site-video-modal-card{
    width:min(92vw,370px)!important;
    max-width:370px!important;
    max-height:calc(100dvh - 24px)!important;
    margin:auto!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }

  #siteVideoModal .site-video-panel{
    padding:14px 14px 16px!important;
  }

  #siteVideoModal .vehicle-video-head{
    align-items:flex-start!important;
    gap:10px!important;
    margin-bottom:10px!important;
  }

  #siteVideoModal .vehicle-video-head span{
    font-size:.56rem!important;
    letter-spacing:.12em!important;
  }

  #siteVideoModal .vehicle-video-head strong{
    margin-top:3px!important;
    font-size:.94rem!important;
    line-height:1.2!important;
  }

  #siteVideoModal .vehicle-video-head button{
    width:34px!important;
    height:34px!important;
    font-size:1.05rem!important;
  }

  /* Vertical TikTok videos use a deliberately narrower frame on phones.
     This reproduces the balanced black margins seen in the desktop player. */
  #siteVideoModal .site-video-panel.is-tiktok .site-video-frame-wrap,
  #siteVideoModal .site-video-frame-wrap.is-tiktok{
    width:min(72vw,290px)!important;
    max-width:290px!important;
    max-height:none!important;
    aspect-ratio:9/16!important;
    margin-inline:auto!important;
    border-radius:12px!important;
  }

  /* Landscape explainers remain wide but still stay inside the card. */
  #siteVideoModal .site-video-panel:not(.is-tiktok) .site-video-frame-wrap{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:16/9!important;
    border-radius:12px!important;
  }
}

@media (max-width:390px){
  #siteVideoModal .site-video-modal-card{
    width:min(94vw,340px)!important;
    max-width:340px!important;
  }

  #siteVideoModal .site-video-panel.is-tiktok .site-video-frame-wrap,
  #siteVideoModal .site-video-frame-wrap.is-tiktok{
    width:min(70vw,255px)!important;
    max-width:255px!important;
  }
}

@media (max-height:700px) and (max-width:760px){
  #siteVideoModal .site-video-panel.is-tiktok .site-video-frame-wrap,
  #siteVideoModal .site-video-frame-wrap.is-tiktok{
    width:min(62vw,235px)!important;
    max-width:235px!important;
  }
}


/* HerCar staging patch v20
   Mobile explainer videos now use the same near-full-screen footprint
   as vehicle presentation videos. Desktop remains unchanged. */
@media (max-width:760px){
  #siteVideoModal{
    padding:8px!important;
  }

  #siteVideoModal .site-video-modal-card{
    width:calc(100vw - 16px)!important;
    max-width:430px!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:20px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  #siteVideoModal .site-video-panel{
    padding:16px 14px 18px!important;
  }

  #siteVideoModal .vehicle-video-head{
    margin-bottom:12px!important;
  }

  #siteVideoModal .vehicle-video-head span{
    font-size:.62rem!important;
  }

  #siteVideoModal .vehicle-video-head strong{
    font-size:1.08rem!important;
    line-height:1.18!important;
  }

  #siteVideoModal .vehicle-video-head button{
    width:42px!important;
    height:42px!important;
    font-size:1.2rem!important;
  }

  /* Use almost the full internal card width, matching the vehicle video
     experience. This intentionally overrides v19's narrower 72vw frame. */
  #siteVideoModal .site-video-panel.is-tiktok .site-video-frame-wrap,
  #siteVideoModal .site-video-frame-wrap.is-tiktok{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:9/16!important;
    max-height:none!important;
    margin:0 auto!important;
    border-radius:16px!important;
  }

  #siteVideoModal .site-video-panel:not(.is-tiktok) .site-video-frame-wrap{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:16/9!important;
  }
}

/* On shorter phones, retain the large footprint but allow the black card
   itself to scroll vertically instead of shrinking the video excessively. */
@media (max-width:760px) and (max-height:740px){
  #siteVideoModal .site-video-modal-card{
    align-self:center!important;
  }
}