/* Day mode only override */
    :root{
      --bg:#eef8fb;
      --text:#102033;
      --muted:rgba(16,32,51,.68);
      --soft:rgba(16,32,51,.08);
      --glass:rgba(255,255,255,.72);
      --glass2:rgba(255,255,255,.9);
      --line:rgba(16,32,51,.13);
      --accent:#21c7b1;
      --accent2:#69aef7;
      --gold:#c7a14f;
      --danger:#d94e4e;
      --ok:#19a96c;
      --shadow:0 24px 70px rgba(30,65,90,.18);
    }
    html,body{background:#eef8fb;color:var(--text);}
    .app{
      background:
        radial-gradient(circle at 18% 0%, rgba(33,199,177,.22), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(105,174,247,.20), transparent 32%),
        linear-gradient(180deg,#f7fcff 0%,#eaf7f9 100%) !important;
      color:var(--text) !important;
    }
    .video-bg{background:url('background.jpg') center center/cover no-repeat !important;filter:none !important;opacity:1 !important;}
    .video-bg:after{display:none !important;}
    .brand-pill{
      background:rgba(255,255,255,.74) !important;
      border-color:rgba(16,32,51,.14) !important;
      color:rgba(16,32,51,.76) !important;
      box-shadow:0 12px 34px rgba(30,65,90,.10);
    }
    h1{color:#102033 !important;text-shadow:0 8px 28px rgba(255,255,255,.78),0 10px 34px rgba(30,65,90,.10) !important;}
    .subtitle{color:rgba(16,32,51,.68) !important;}
    .btn.primary,.day.selected{
      background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
      color:#ffffff !important;
      box-shadow:0 18px 44px rgba(33,199,177,.22) !important;
    }
    .cta{
      background:linear-gradient(135deg,#22c7b6 0%,#35c0c1 48%,#64aef5 100%) !important;
      color:#ffffff !important;
      box-shadow:
        0 22px 42px rgba(33,199,177,.24),
        0 12px 30px rgba(105,174,247,.18),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
    }
    .modal-shell{background:rgba(238,248,251,.52) !important;backdrop-filter:blur(14px) !important;}
    .modal{
      background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(244,251,253,.90)) !important;
      border:1px solid rgba(16,32,51,.12) !important;
      color:#102033 !important;
      box-shadow:0 28px 80px rgba(30,65,90,.22) !important;
    }
    .progress{background:rgba(16,32,51,.08) !important;}
    .hint{color:rgba(16,32,51,.62) !important;}
    .vehicle-card,.summary-card,.option,.field,.slot,.pay,.upload,.btn{
      background:rgba(255,255,255,.78) !important;
      border-color:rgba(16,32,51,.12) !important;
      color:#102033 !important;
      box-shadow:0 10px 28px rgba(30,65,90,.08);
    }
    .vehicle-card.premium-vehicle{
      background:
        radial-gradient(circle at 88% 12%, rgba(33,199,177,.12), transparent 34%),
        linear-gradient(150deg, rgba(255,255,255,.95), rgba(244,251,253,.88)) !important;
      border-color:rgba(16,32,51,.12) !important;
      box-shadow:0 20px 58px rgba(30,65,90,.14), inset 0 1px 0 rgba(255,255,255,.72) !important;
    }
    .vehicle-main-line{color:#102033 !important;}
    .vehicle-license-line,.info-row span,.option small,.upload small{color:rgba(16,32,51,.62) !important;}
    .info-row{border-bottom-color:rgba(16,32,51,.08) !important;}
    .field::placeholder,textarea::placeholder{color:rgba(16,32,51,.42) !important;}
    .option i,.upload .uicon,.car-icon{background:rgba(33,199,177,.10) !important;color:#102033 !important;}
    .week{color:rgba(16,32,51,.48) !important;}
    .day{background:rgba(255,255,255,.82) !important;color:#102033 !important;border:1px solid rgba(16,32,51,.08);}
    .day.selected{color:#fff !important;}
    .slot.active,.pay.active,.btn.active{background:rgba(33,199,177,.14) !important;border-color:rgba(33,199,177,.55) !important;}
    .btn.danger{background:rgba(217,78,78,.10) !important;border-color:rgba(217,78,78,.24) !important;color:#b73535 !important;}
    .upload.done{border-color:rgba(25,169,108,.52) !important;background:rgba(25,169,108,.10) !important;}
    .success-screen{
      background:radial-gradient(circle at 50% 18%,rgba(25,169,108,.17),transparent 35%),linear-gradient(180deg,#f7fcff,#eaf7f9) !important;
      color:#102033 !important;
    }
    .success-screen p{color:rgba(16,32,51,.64) !important;}
    .check{background:rgba(25,169,108,.12) !important;border-color:rgba(25,169,108,.35) !important;color:var(--ok) !important;}

    .pac-container{z-index:99999 !important;direction:rtl;text-align:right;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
    .pac-item{text-align:right;padding:9px 12px;}


.logo-top{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  justify-content:center;
}
.logo-top img{
  max-width:100px;
  width:100%;
  height:auto;
  display:block;
}
.logo-spacer{
  display:flex;
  justify-content:center;
  margin:0 auto 18px;
  visibility:hidden;
  pointer-events:none;
}
.logo-spacer img{
  max-width:180px;
  width:100%;
  height:auto;
  display:block;
}


    .inline-address-search{display:none;width:100%;margin-top:8px;border:0;background:transparent;color:#102033;outline:0;font-weight:700;font-size:15px;text-align:right;padding:0;}
    .inline-address-search::placeholder{color:rgba(16,32,51,.42);}
    .address-search-option.searching .inline-address-search{display:block;}
    .address-search-option.searching strong{display:none;}

    /* Compact time tag picker */
    .time-date-label{
      margin:-8px 0 22px;
      text-align:center;
      color:rgba(16,32,51,.62);
      font-size:16px;
      font-weight:800;
      line-height:1.3;
    }
    .time-tags{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:12px;
      margin:0 auto 24px;
      max-width:360px;
      direction:ltr;
    }
    .time-tag{
      min-width:108px;
      height:52px;
      border-radius:999px;
      border:1px solid rgba(16,32,51,.12);
      background:rgba(255,255,255,.86);
      color:#102033;
      font-size:21px;
      font-weight:950;
      direction:ltr;
      box-shadow:0 10px 26px rgba(30,65,90,.08);
      cursor:pointer;
      transition:.18s ease;
    }
    .time-tag:active{transform:scale(.96);}
    .time-tag.active{
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 16px 38px rgba(33,199,177,.24);
    }
    .time-tag.occupied,
    .time-tag:disabled{
      background:rgba(16,32,51,.07) !important;
      color:rgba(16,32,51,.34) !important;
      border-color:rgba(16,32,51,.08) !important;
      box-shadow:none !important;
      cursor:not-allowed;
      opacity:.78;
    }
    .time-tag.occupied:active,
    .time-tag:disabled:active{transform:none;}
    .time-pick-note{
      margin:0 0 24px;
      text-align:center;
      color:rgba(16,32,51,.58);
      font-size:16px;
      font-weight:800;
    }
    .time-continue-wrap{
      margin-top:6px;
      display:none;
    }
    .time-continue-wrap.show{
      display:grid;
    }


.back-link-btn{
display:block;
width:100%;
background:transparent!important;
border:none!important;
box-shadow:none!important;
outline:none!important;
appearance:none!important;
-webkit-appearance:none!important;
color:#7b8794!important;
font-weight:800;
font-size:16px;
margin-top:2px;
padding:8px 0;
}

/* Home plate position is controlled in the responsive layout block below */

/* Service area restriction popup */
.service-alert-shell{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(238,248,251,.58);
  backdrop-filter:blur(16px);
}
.service-alert-shell.active{display:flex;}
.service-alert-box{
  width:min(100%,360px);
  border-radius:28px;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,251,253,.94));
  border:1px solid rgba(16,32,51,.12);
  box-shadow:0 28px 80px rgba(30,65,90,.22);
  padding:24px 18px 18px;
  text-align:center;
  color:#102033;
  animation:servicePop .24s ease both;
}
.service-alert-title{
  font-size:21px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.035em;
  margin:0 0 18px;
}
.service-alert-btn{
  width:100%;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#22c7b6 0%,#35c0c1 48%,#64aef5 100%);
  color:#fff;
  font-weight:900;
  font-size:17px;
  box-shadow:0 18px 38px rgba(33,199,177,.22);
}
@keyframes servicePop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}


/* Active order / eligibility popup */
.order-block-shell{
  position:fixed;
  inset:0;
  z-index:999998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(238,248,251,.58);
  backdrop-filter:blur(16px);
}
.order-block-shell.active{display:flex;}
.order-block-box{
  width:min(100%,380px);
  border-radius:28px;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(244,251,253,.94));
  border:1px solid rgba(16,32,51,.12);
  box-shadow:0 28px 80px rgba(30,65,90,.22);
  padding:24px 18px 18px;
  text-align:center;
  color:#102033;
  animation:servicePop .24s ease both;
}
.order-block-title{
  font-size:21px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.035em;
  margin:0 0 8px;
}
.order-block-text{
  font-size:15px;
  line-height:1.55;
  font-weight:700;
  color:rgba(16,32,51,.66);
  margin:0 0 18px;
}
.order-block-btn{
  width:100%;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#22c7b6 0%,#35c0c1 48%,#64aef5 100%);
  color:#fff;
  font-weight:900;
  font-size:17px;
  box-shadow:0 18px 38px rgba(33,199,177,.22);
}


/* Old vehicle / brake approval popup */
.approval-alert-card{
  text-align:center;
  padding:2px 0 0;
}
.approval-badge{
  width:58px;
  height:58px;
  border-radius:22px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  background:rgba(217,161,79,.13);
  border:1px solid rgba(199,161,79,.24);
  font-size:28px;
}
.approval-title{
  margin:0 0 8px;
  color:#102033;
  font-size:23px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.035em;
}
.approval-text{
  margin:0 0 16px;
  color:rgba(16,32,51,.64);
  font-size:15px;
  font-weight:700;
  line-height:1.55;
}
.approval-actions{
  display:grid;
  gap:10px;
}
.approval-choice{
  min-height:58px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,32,51,.12);
  color:#102033;
  font-weight:900;
  font-size:16px;
  box-shadow:0 10px 28px rgba(30,65,90,.08);
}
.approval-choice.primary{
  background:linear-gradient(135deg,#22c7b6 0%,#35c0c1 48%,#64aef5 100%);
  color:#fff;
  border-color:transparent;
}
.approval-choice.service{
  background:rgba(199,161,79,.12);
  border-color:rgba(199,161,79,.26);
}
.approval-doc-note{
  margin:0 0 10px;
  padding:11px 12px;
  border-radius:17px;
  background:rgba(199,161,79,.10);
  border:1px solid rgba(199,161,79,.20);
  color:#735c27;
  font-size:14px;
  font-weight:850;
  line-height:1.35;
  text-align:center;
}


/* Upload documents spacing fix - keep approved rows separated */
#modalContent .upload{
  margin:0 0 7px 0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
#modalContent .upload + .upload{
  margin-top:7px !important;
}
#modalContent .upload:last-of-type{
  margin-bottom:0 !important;
}
#modalContent .upload.done{
  border:1px solid rgba(25,169,108,.18) !important;
}


/* Uploaded document rows - no plus icon after upload */
.upload.done:after{
  content:"✓" !important;
  margin-inline-start:auto !important;
  color:#15966f !important;
  font-weight:950 !important;
}
.upload.done .uicon{
  display:none !important;
}


/* Center supplemental upload and success popups */
.supplement-upload-home{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
}
.supplement-upload-home .supplement-upload-card,
#supplementUploadCard{
  margin:0 auto !important;
  transform:none !important;
}
#supplementUploadCard.success{
  margin:0 auto !important;
  transform:none !important;
}
@supports (height:100dvh){
  .supplement-upload-home{
    min-height:100dvh !important;
    height:100dvh !important;
  }
}


.float-wrap{position:relative;height:60px;margin-top:46px;display:flex;justify-content:center;align-items:center}
.float-word{position:absolute;font-size:17px;color:rgba(16,32,51,.65);font-weight:700;animation:floatWord 3s infinite}
@keyframes floatWord{0%{opacity:0;transform:translateY(14px)}20%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-16px)}}