/* ================================================================
   ppf.css  —  PPF-page-only overrides and unique components
   shared.css :root defaults already match PPF, so minimal overrides.
   ================================================================ */

/* ── Dot pulse (white/gray) ── */
.dot{
  width:7px; height:7px; border-radius:99px; flex-shrink:0;
  background:rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
  animation: dotPulse 4.5s ease-in-out infinite;
  margin-left:4px;
}
@keyframes dotPulse{
  0%,100%{ background:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(255,255,255,.05); }
  50%{     background:rgba(255,255,255,.72); box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 8px rgba(255,255,255,.12); }
}

/* ── Brand sub (gray) ── */
.brandSub{ color:rgba(242,242,242,.42); }

/* ── Topbar phone/call ── */
.topPhoneDesktop{ color:rgba(242,242,242,.65); }
.topCallMobile{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(242,242,242,.82);
}

/* ── Hero images & gradient overlays ── */
.heroMedia{
  background: url('../img/hero-desktop-ppf.webp') 60% 50% / cover no-repeat;
}
.heroCard::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.32) 52%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.78) 100%);
}
@media (max-width:820px){
  .heroMedia{
    background: url('../img/hero-mobile-ppf.webp') center 55% / cover no-repeat;
  }
  .heroCard::before{
    background:
      radial-gradient(900px 560px at 50% 10%, rgba(14,17,22,.35) 0%, rgba(14,17,22,.16) 42%, rgba(0,0,0,0) 72%),
      linear-gradient(180deg, rgba(11,15,20,.78) 0%, rgba(11,15,20,.48) 34%, rgba(11,15,20,.16) 62%, rgba(11,15,20,.00) 84%);
  }
}

/* ── Hide hero CTA on mobile (shown via heroBottom) ── */
@media (max-width:820px){
  .heroInner > .heroBtns,
  .heroInner > .trustLine,
  .heroInner > .note { display: none; }
}

/* ── Process List (timeline) ── */
.processList{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0; position:relative;
}
.processList::before{
  content:""; position:absolute; left:15px; top:28px; bottom:28px; width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 12%, rgba(255,255,255,.15) 88%, rgba(255,255,255,0) 100%);
}
.processList li{
  display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto;
  column-gap:16px; row-gap:2px; padding:10px 4px 10px 0; position:relative;
}
.processList li::before{
  content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:#07090c; border:1.5px solid rgba(255,255,255,.25); z-index:1;
}
.processList li:first-child::before{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); }
.processList .stepNum{ grid-column:1; grid-row:1 / span 2; display:none; }
.processList .stepLabel{
  grid-column:2; grid-row:1; font-weight:700; font-size:15px; line-height:1.25;
  color:rgba(242,242,242,.92); padding-left:12px;
}
.processList .stepDesc{ grid-column:2; grid-row:2; color:var(--muted); font-size:13px; line-height:1.35; padding-left:12px; }
.processList .stepLabel::before{
  content:attr(data-step); display:inline-block;
  width:18px; height:18px; border-radius:5px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  font-size:11px; font-weight:800; color:rgba(255,255,255,.45);
  text-align:center; line-height:17px; margin-right:8px;
  vertical-align:middle; position:relative; top:-1px;
}

/* ── Warranty Grid ── */
.warrantyGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.warrantyItem{
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:14px 16px;
}
.warrantyItem .wLabel{ font-size:11px; font-weight:700; letter-spacing:.6px; color:rgba(242,242,242,.38); text-transform:uppercase; margin-bottom:6px; }
.warrantyItem .wNum{ font-size:26px; font-weight:900; letter-spacing:-.03em; line-height:1; margin-bottom:4px; }
.warrantyItem .wDesc{ font-size:12px; color:rgba(242,242,242,.50); line-height:1.4; }

/* ── Vinyl cross-link ── */
.vinylXlink{
  margin-top:6px;
  font-size:12.5px; color:rgba(242,242,242,.32);
  line-height:1.4;
}
.vinylXlink a{
  color:rgba(242,242,242,.38); text-decoration:none;
  border-bottom:1px solid rgba(242,242,242,.15);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.vinylXlink a:hover{ color:rgba(242,242,242,.62); border-bottom-color:rgba(242,242,242,.35); }

/* ── Price row animation (glow on reveal) ── */
.priceRow.row-hidden{ opacity:0; transform:translateY(8px); }
.priceRow.row-visible{ opacity:1; transform:translateY(0); }
@keyframes rowReveal{
  0%{ background:rgba(201,165,77,.0); border-color:rgba(255,255,255,.09); }
  25%{ background:rgba(201,165,77,.07); border-color:rgba(201,165,77,.28); }
  100%{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.09); }
}
.priceRow.did-glow{ animation:rowReveal 1.4s cubic-bezier(.22,1,.36,1) forwards; }

/* ── Section Label (PPF version) ── */
.sectionLabel{
  font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(242,242,242,.28); margin:0 0 20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ── Reviews ── */
.reviews{ display:grid; gap:10px; }
.rev{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px 16px; }
.rev b{ color:rgba(251,191,36,.85); font-size:13px; letter-spacing:1px; }
.revTxt{ margin:6px 0 0; color:rgba(242,242,242,.72); font-size:14px; line-height:1.55; }
.revMeta{ margin-top:8px; font-size:12px; color:rgba(242,242,242,.38); font-style:normal; }
.review .moreBtn, .review a.moreBtn{
  -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center;
  padding:4px 0; border:none; background:none;
  color:rgba(255,255,255,.28); text-decoration:none; font-weight:400; font-size:12px;
  cursor:pointer; transition:color var(--dur-fast); font-family:inherit;
}
.review .moreBtn:hover{ color:rgba(255,255,255,.55); }

/* ── Compare __line (thicker, with glow) ── */
.compare__line{
  width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.75) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.75) 70%,rgba(255,255,255,.15) 100%);
  box-shadow:0 0 8px rgba(255,255,255,.35), 0 0 20px rgba(255,255,255,.12);
}

/* ── Vehicle dropdown (PPF combobox) ── */
.vehicleDropdown{
  display:none; position:absolute; left:0; right:0;
  top:calc(100% + 6px); bottom:auto;
  z-index:9999; margin:0; padding:6px; list-style:none;
  background:#1a1c22; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.65);
  overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:200px;
}
.vehicleDropdown.is-open{ display:block; }
.vehicleDropdown.opens-up{ top:auto; bottom:calc(100% + 6px); }

/* ── Loading animation on submit button ── */
.sheetSubmit.is-loading{ color:transparent !important; pointer-events:none; position:relative; background:rgba(220,220,220,.85) !important; border-color:transparent !important; box-shadow:none !important; }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
.sheetSubmit.is-loading::after{ content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid rgba(0,0,0,.15); border-top-color:rgba(0,0,0,.55); border-radius:50%; animation:btnSpin .65s linear infinite; }

/* ── Shake animation ── */
@keyframes btnShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.sheetSubmit.shake{ animation:btnShake .45s var(--ease-io); }

/* ── lsRow landscape form layout ── */
.lsRow{ display:block; }
.lsRow > .field{ margin-bottom:10px; }
.lsRow + .hint, .lsRow + p.hint{ margin-top:6px; }
@media (orientation:landscape) and (max-height:500px){
  .sheetBody form > .field:not(.vehicleField):not(.notesField){ flex:1; }
  .sheetBody .lsRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:0; }
  .sheetBody .lsRow .field{ margin-bottom:0; }
}

/* ── Map iframe ── */
.mapWrap{ border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); margin-top:14px; }
.mapWrap iframe{ width:100%; height:100%; min-height:260px; border:0; display:block; }
@media (max-width:720px){ .mapWrap iframe{ min-height:200px; } }