/* Final responsive safety layer - CSS only. No logic, IDs, Firebase, WhatsApp or payment code changed. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --screen-pad:clamp(14px,4vw,26px);
}

html,
body{
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden!important;
}

body{
  min-height:100vh;
  min-height:100dvh;
}

.app{
  width:100%;
  max-width:100vw;
  height:100vh;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden!important;
}

.home{
  min-height:100dvh!important;
  height:100dvh!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:
    calc(var(--safe-top) + clamp(12px,3.4vh,26px))
    calc(var(--safe-right) + var(--screen-pad))
    calc(var(--safe-bottom) + clamp(18px,4vh,34px))
    calc(var(--safe-left) + var(--screen-pad))!important;
  overflow:hidden!important;
}

.logo-top{
  top:calc(var(--safe-top) + clamp(10px,2.6vh,20px))!important;
  width:100%!important;
  padding-inline:calc(var(--safe-left) + 14px) calc(var(--safe-right) + 14px)!important;
  pointer-events:none!important;
}

.logo-top img{
  width:130px!important;
  max-width:100%!important;
  height:auto!important;
}

.home-inner{
  width:min(92vw,560px)!important;
  max-width:100%!important;
  margin-top:clamp(300px,39dvh,380px)!important;
}

.plate-wrap{
  width:min(92vw,560px)!important;
  max-width:100%!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(7px,2.4vw,12px)!important;
  padding-inline:0!important;
  overflow:visible!important;
}

.plate-wrap:after{
  flex:0 0 clamp(42px,14vw,58px)!important;
  width:clamp(42px,14vw,58px)!important;
  height:clamp(46px,15vw,58px)!important;
  border-radius:clamp(13px,4vw,18px)!important;
  font-size:clamp(14px,4.8vw,20px)!important;
}

.plate-input,
#plateInput.plate-input{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  flex:1 1 auto!important;
  width:clamp(228px,calc(100vw - 98px),330px)!important;
  max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 92px)!important;
  min-width:0!important;
  height:clamp(58px,17vw,74px)!important;
  line-height:clamp(58px,17vw,74px)!important;
  border-radius:clamp(18px,5.5vw,24px)!important;
  font-size:clamp(28px,10vw,42px)!important;
  letter-spacing:clamp(-1px,.7vw,1px)!important;
  padding:0 clamp(6px,2vw,10px)!important;
}

.plate-input::placeholder,
#plateInput.plate-input::placeholder{
  font-size:clamp(18px,6vw,27px)!important;
  transform:none!important;
}

.cta{
  width:clamp(150px,50%,230px)!important;
  max-width:92%!important;
  height:clamp(54px,14vw,64px)!important;
  font-size:clamp(16px,4.8vw,19px)!important;
}

.home-icons{
  width:min(100vw,700px)!important;
  max-width:100vw!important;
  bottom:calc(var(--safe-bottom) - clamp(76px,16vw,52px))!important;
  overflow:hidden!important;
}

.home-icons img{
  width:min(100vw,700px)!important;
  max-width:100vw!important;
}

.modal-shell,
.service-alert-shell,
.order-block-shell{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  padding:
    calc(var(--safe-top) + 12px)
    calc(var(--safe-right) + 14px)
    calc(var(--safe-bottom) + 12px)
    calc(var(--safe-left) + 14px)!important;
  overflow:hidden!important;
}

.modal,
.service-alert-box,
.order-block-box{
  width:min(100%,406px)!important;
  max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 28px)!important;
  max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

#modalContent{
  max-width:100%!important;
  overflow-x:hidden!important;
}

.fields,
.actions,
.approval-actions,
.time-tags,
.slots,
.payments{
  max-width:100%!important;
}

.field,
.btn,
.approval-choice,
.service-alert-btn,
.order-block-btn,
.time-tag,
.slot,
.pay{
  max-width:100%!important;
  min-width:0!important;
}

.info-row,
.summary-clean .summary-row,
.summary-clean .summary-total{
  min-width:0!important;
}

.info-row b,
.summary-clean .summary-value,
.summary-clean .summary-label{
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

.summary-clean .summary-price,
.summary-clean .summary-total b{
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.week,
.days{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:clamp(4px,1.8vw,7px)!important;
}

.day{
  width:clamp(35px,11vw,44px)!important;
  height:clamp(35px,11vw,44px)!important;
  font-size:clamp(13px,3.8vw,16px)!important;
}

.mini-plate,
.vehicle-model-line,
.vehicle-main-line,
.vehicle-make-year-line,
.vehicle-license-line{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

@media (max-width:390px){
  .home{
    align-items:flex-start!important;
  }
  .home-inner{
    margin-top:clamp(286px,38dvh,330px)!important;
  }
  .plate-wrap{
    width:min(96vw,360px)!important;
    max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 14px)!important;
    height:auto!important;
    gap:7px!important;
  }
  .plate-wrap:after{
    flex-basis:44px!important;
    width:44px!important;
    height:48px!important;
    border-radius:14px!important;
    font-size:14px!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 78px)!important;
    max-width:286px!important;
    height:60px!important;
    line-height:60px!important;
    font-size:clamp(28px,9.4vw,36px)!important;
    letter-spacing:-.4px!important;
  }
  .plate-input::placeholder,
  #plateInput.plate-input::placeholder{
    font-size:clamp(17px,5.5vw,22px)!important;
  }
  .modal-shell,
  .service-alert-shell,
  .order-block-shell{
    padding:
      calc(var(--safe-top) + 8px)
      calc(var(--safe-right) + 10px)
      calc(var(--safe-bottom) + 8px)
      calc(var(--safe-left) + 10px)!important;
  }
  .modal,
  .service-alert-box,
  .order-block-box{
    max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 20px)!important;
    border-radius:22px!important;
  }
  #modalContent{
    padding:22px 16px 16px!important;
  }
  .summary-clean .summary-title{font-size:22px!important;}
  .summary-clean .summary-total b{font-size:34px!important;}
}

@media (max-width:340px){
  .logo-top img{
    width:clamp(172px,66vw,220px)!important;
  }
  .home-inner{
    margin-top:clamp(260px,36dvh,300px)!important;
  }
  h1{font-size:clamp(28px,8.8vw,35px)!important;}
  .subtitle{font-size:14px!important;margin-bottom:20px!important;}
  .plate-wrap:after{
    flex-basis:38px!important;
    width:38px!important;
    height:44px!important;
    font-size:12px!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 68px)!important;
    height:54px!important;
    line-height:54px!important;
    font-size:clamp(24px,8.8vw,31px)!important;
    border-radius:17px!important;
  }
  .cta{
    width:clamp(138px,55%,190px)!important;
    height:52px!important;
    font-size:15px!important;
  }
  .time-tags,
  .slots,
  .payments{
    grid-template-columns:1fr!important;
  }
  .day{
    width:33px!important;
    height:33px!important;
  }
}

@media (min-width:700px){
  .modal{
    max-height:min(760px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 40px))!important;
  }
}

/* Corrected home license plate bottom placement */
.home{
  justify-content:flex-start!important;
}
.home-inner{
  position:absolute!important;
  left:50%!important;
  bottom:calc(var(--safe-bottom) + 18px)!important;
  transform:translateX(-50%)!important;
  margin-top:0!important;
  width:min(92vw,560px)!important;
  max-width:100%!important;
  z-index:12!important;
}
.home-inner .plate-wrap{
  position:relative!important;
  z-index:13!important;
  margin:0 auto!important;
}
.home-inner .cta{
  position:relative!important;
  z-index:13!important;
  margin:16px auto 0!important;
}
.home-icons{
  bottom:calc(var(--safe-bottom) - 80px)!important;
}
@media (max-width:390px){
  .home-inner{
    bottom:calc(var(--safe-bottom) + 14px)!important;
    margin-top:0!important;
  }
  .home-inner .cta{
    margin-top:14px!important;
  }
}
@media (max-width:340px){
  .home-inner{
    bottom:calc(var(--safe-bottom) + 12px)!important;
    margin-top:0!important;
  }
}



/* Requested update: home logo stays static + slightly narrower home license plate */
.logo-top{
  filter:drop-shadow(0 20px 18px rgba(30,65,90,.16))!important;
  animation:none!important;
  transform-origin:center center!important;
}

.plate-wrap{
  width:min(88vw,520px)!important;
}
.plate-input,
#plateInput.plate-input{
  width:clamp(222px,calc(100vw - 112px),310px)!important;
  max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 104px)!important;
  font-size:clamp(27px,9.4vw,39px)!important;
  letter-spacing:clamp(-1px,.45vw,.5px)!important;
}
.plate-input::placeholder,
#plateInput.plate-input::placeholder{
  font-size:clamp(17px,5.5vw,25px)!important;
}

@media (max-width:390px){
  .plate-wrap{
    width:min(92vw,344px)!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 88px)!important;
    max-width:268px!important;
    font-size:clamp(26px,8.8vw,34px)!important;
  }
}

@media (max-width:340px){
  .plate-wrap{
    width:min(92vw,316px)!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 78px)!important;
    max-width:244px!important;
    font-size:clamp(23px,8.1vw,29px)!important;
  }
}

/* Final plate width fix: reduce the input plate itself, keep text sizing unchanged */
.plate-wrap{
  width:min(84vw,490px)!important;
}
.plate-input,
#plateInput.plate-input{
  width:clamp(222px,calc(100vw - 128px),286px)!important;
  max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 122px)!important;
}
.plate-input::placeholder,
#plateInput.plate-input::placeholder{
  font-size:clamp(18px,6vw,27px)!important;
}
@media (max-width:390px){
  .plate-wrap{
    width:min(88vw,326px)!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 104px)!important;
    max-width:252px!important;
  }
}
@media (max-width:340px){
  .plate-wrap{
    width:min(88vw,304px)!important;
  }
  .plate-input,
  #plateInput.plate-input{
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 96px)!important;
    max-width:232px!important;
  }
}

/* Match yellow license input height to the blue IL block without changing the IL */
.plate-input,
#plateInput.plate-input{
  height:clamp(46px,15vw,58px)!important;
  line-height:clamp(46px,15vw,58px)!important;
}
@media (max-width:390px){
  .plate-input,
  #plateInput.plate-input{
    height:48px!important;
    line-height:48px!important;
  }
}
@media (max-width:340px){
  .plate-input,
  #plateInput.plate-input{
    height:44px!important;
    line-height:44px!important;
  }
}

/* Animated license plate placeholder */
.plate-typing-placeholder{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:rgba(0,0,0,.88);
  font-size:clamp(18px,6vw,27px);
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  direction:rtl;
  text-align:center;
  white-space:nowrap;
  font-family:'Noto Serif Hebrew',serif;
}

.plate-input::placeholder,
#plateInput.plate-input::placeholder{
  font-family:'Noto Serif Hebrew',serif !important;
  font-weight:700 !important;
}
.plate-typing-placeholder.hidden{
  display:none;
}
.plate-typing-placeholder .typing-cursor{
  display:inline-block;
  width:1px;
  margin-inline-start:2px;
  color:rgba(0,0,0,.86);
  animation:plateTypingCursorBlink .85s steps(1,end) infinite;
}
@keyframes plateTypingCursorBlink{
  0%,48%{opacity:1;}
  49%,100%{opacity:0;}
}


/* Floating Whisper under logo - added */
.hero-floating-whisper{
  position:absolute;
  top:calc(var(--safe-top) + clamp(170px,23dvh,232px));
  left:50%;
  z-index:49;
  width:min(86vw,380px);
  height:54px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
  transform:translateX(-50%);
}
.hero-floating-word{
  position:absolute;
  color:rgba(16,32,51,.66);
  font-size:clamp(14px,3.7vw,17px);
  font-weight:750;
  line-height:1.45;
  letter-spacing:-.01em;
  text-shadow:0 8px 24px rgba(255,255,255,.72);
  animation:heroFloatingWhisper 3.4s cubic-bezier(.2,.8,.2,1) infinite;
  will-change:opacity,transform;
}
@keyframes heroFloatingWhisper{
  0%{opacity:0;transform:translateY(16px) scale(.98);}
  20%,70%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(-18px) scale(1.02);}
}

/* 2026-08-23 — Customer time-range picker: vertical layout */
.time-tags{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
  max-width:360px !important;
  margin:0 auto 18px !important;
  direction:ltr !important;
}

.time-tag{
  width:100% !important;
  min-width:0 !important;
  height:50px !important;
  border-radius:16px !important;
  border:1px solid rgba(16,32,51,.10) !important;
  background:rgba(255,255,255,.92) !important;
  color:#102033 !important;
  font-size:15px !important;
  font-weight:850 !important;
  box-shadow:0 8px 22px rgba(30,65,90,.06) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
}

.time-tag.active{
  background:rgba(75,163,255,.12) !important;
  color:#257ec7 !important;
  border-color:rgba(75,163,255,.34) !important;
  box-shadow:0 9px 24px rgba(75,163,255,.13) !important;
}

.time-tag.occupied,
.time-tag:disabled{
  background:#f6f8f9 !important;
  color:rgba(16,32,51,.32) !important;
  border-color:rgba(16,32,51,.08) !important;
  box-shadow:none !important;
}

.time-tag small{
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  direction:rtl !important;
}

/* 2026-08-23 — Customer time-range picker: larger text, more compact buttons */
.time-tags{
  gap:8px !important;
}

.time-tag{
  height:44px !important;
  font-size:18px !important;
}


/* 2026-08-23 — Compact customer time-range buttons */
.time-tags{
  width:fit-content !important;
  max-width:100% !important;
  margin:0 auto 18px !important;
  justify-items:center !important;
}

.time-tag{
  width:210px !important;
  max-width:calc(100vw - 48px) !important;
  height:44px !important;
  padding:0 22px !important;
  font-size:18px !important;
}

@media (max-width:390px){
  .time-tag{
    width:190px !important;
  }
}


/* 2026-08-23 — Clean compact old-vehicle / brake approval popup */
.approval-alert-card--clean{
  width:min(100%,420px) !important;
  margin:0 auto !important;
  text-align:center !important;
}
.approval-alert-card--clean .approval-badge{
  width:50px !important;
  height:50px !important;
  border-radius:16px !important;
  margin:0 auto 14px !important;
  background:#f7f4ea !important;
  border:1px solid #ebe2cf !important;
  color:#866f3c !important;
  font-size:23px !important;
  font-weight:700 !important;
  display:grid !important;
  place-items:center !important;
}
.approval-alert-card--clean .approval-title{
  margin:0 0 7px !important;
  color:#17283a !important;
  font-size:22px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}
.approval-alert-card--clean .approval-text{
  margin:0 0 18px !important;
  color:#7b858e !important;
  font-size:15px !important;
  line-height:1.5 !important;
  font-weight:600 !important;
}
.approval-alert-card--clean .approval-actions{
  display:grid !important;
  gap:9px !important;
}
.approval-alert-card--clean .approval-choice--clean{
  width:100% !important;
  height:auto !important;
  min-height:58px !important;
  padding:10px 14px !important;
  border:1px solid #d8e5ed !important;
  border-radius:17px !important;
  background:#f9fbfc !important;
  color:#17283a !important;
  box-shadow:none !important;
  text-align:center !important;
}
.approval-alert-card--clean .approval-choice--clean strong{
  display:block !important;
  margin-bottom:3px !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
}
.approval-alert-card--clean .approval-choice--clean span{
  display:block !important;
  color:#7d8790 !important;
  font-size:13.5px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
}
.approval-alert-card--clean .approval-choice--clean span b{
  display:inline !important;
  color:#425667 !important;
  font-weight:800 !important;
}


/* Old-car popup: choose first, continue second */
.approval-alert-card--clean .approval-choice--clean.selected{
  border-color:#55adeb !important;
  background:#eef8ff !important;
  box-shadow:0 0 0 2px rgba(85,173,235,.10) !important;
}

/* Continue uses the app's standard .btn.primary styling */
#oldCarApprovalContinue[hidden]{
  display:none !important;
}

/* Old-car popup: spacing between the last choice and the standard Continue button */
.approval-alert-card--clean .approval-actions + .actions{
  margin-top:14px !important;
}


/* Optional owner-managed opening message */
.home-welcome-message{
  position:absolute!important;
  top:calc(var(--safe-top) + clamp(148px,19vh,178px))!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:45!important;
  width:min(88vw,520px)!important;
  margin:0!important;
  padding:0 10px!important;
  text-align:center!important;
  direction:rtl!important;
  color:#183246!important;
  font-size:clamp(16px,4.4vw,21px)!important;
  line-height:1.55!important;
  font-weight:700!important;
  white-space:pre-line!important;
  overflow-wrap:anywhere!important;
  pointer-events:none!important;
  opacity:0!important;
  transition:opacity .18s ease!important;
}
.home-welcome-message.show{opacity:1!important;}
.home-welcome-message[hidden]{display:none!important;}
@media (max-height:700px){
  .home-welcome-message{
    top:calc(var(--safe-top) + 132px)!important;
    font-size:16px!important;
    line-height:1.4!important;
  }
}


/* Owner-managed opening message popup */
.welcome-message-shell{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(18,34,48,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.welcome-message-shell.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.welcome-message-card{
  width:min(88vw,420px);
  background:rgba(255,255,255,.97);
  border-radius:24px;
  padding:24px 22px 20px;
  text-align:center;
  direction:rtl;
  box-shadow:0 18px 55px rgba(22,38,54,.18);
  transform:translateY(8px) scale(.985);
  transition:transform .18s ease;
}
.welcome-message-shell.active .welcome-message-card{
  transform:translateY(0) scale(1);
}
.welcome-message-title{
  margin:0 0 10px;
  color:#172f45;
  font-size:20px;
  line-height:1.3;
  font-weight:700;
}
.welcome-message-text{
  color:#263d50;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.welcome-message-btn{
  display:block;
  width:100%;
  min-height:48px;
  margin-top:20px;
  border:0;
  border-radius:15px;
  background:#dff1ff;
  color:#173a55;
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.welcome-message-btn:active{transform:scale(.99);}


/* Home entrance service sign */
.home-service-sign{
  position:absolute!important;
  top:clamp(170px,calc(22dvh + 55px),260px)!important;
  left:50%!important;
  width:min(86vw,520px)!important;
  max-height:30dvh!important;
  height:auto!important;
  object-fit:contain!important;
  transform:translateX(-50%)!important;
  z-index:11!important;
  pointer-events:none!important;
}
@media (max-width:390px){
  .home-service-sign{
    top:clamp(132px,21dvh,180px)!important;
    width:min(88vw,360px)!important;
    max-height:27dvh!important;
  }
}
@media (max-height:700px){
  .home-service-sign{
    top:clamp(120px,19dvh,150px)!important;
    width:min(78vw,400px)!important;
    max-height:25dvh!important;
  }
}