/* MOBILE FIX - loaded AFTER style.css for max specificity */

/* ═══════════════════════════════════════════════════════════
   FINAL MOBILE FIX — überschreibt ALLES davor mit !important
   Behebt: Service-Cards-Layout, Live-Bar, Date-Picker,
   Zimmeranzahl, Checkboxen, Radios, Füllstand-Cards
═══════════════════════════════════════════════════════════ */

/* ── 1. Native Inputs in Custom-Components GLOBAL versteckt ── */
.cb-label > input[type="checkbox"],
.area-opt > input[type="radio"],
.half-room-toggle > input[type="checkbox"],
.stb-real-cb{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  z-index:-1 !important;
}

/* ── 2. cb-box (Custom-Checkbox) sichtbar mit Häkchen ── */
.cb-label{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  cursor:pointer !important;
  padding:8px 0 !important;
  font-size:14px !important;
  color:rgba(255,255,255,0.88) !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  user-select:none !important;
}
.cb-box{
  display:inline-block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border-radius:6px !important;
  border:1.5px solid rgba(255,255,255,0.3) !important;
  background:rgba(255,255,255,0.06) !important;
  position:relative !important;
  flex-shrink:0 !important;
  margin-top:1px !important;
  transition:.15s !important;
}
.cb-label input[type="checkbox"]:checked + .cb-box{
  background:#1E5EFF !important;
  border-color:#1E5EFF !important;
}
.cb-label input[type="checkbox"]:checked + .cb-box::after{
  content:'' !important;
  position:absolute !important;
  left:6px !important;
  top:2px !important;
  width:7px !important;
  height:12px !important;
  border:solid #fff !important;
  border-width:0 2.5px 2.5px 0 !important;
  transform:rotate(45deg) !important;
  display:block !important;
}

/* ── 3. Service-Cards: Mobile 1-spaltig (alle 3 untereinander) ── */
@media (max-width:700px){
  #step1 .service-choice-grid,
  .service-choice-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #step1 .service-choice-grid .service-choice-card:last-child,
  .service-choice-grid .service-choice-card:last-child{
    grid-column:auto !important;
  }
  .service-choice-card{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    text-align:left !important;
    padding:14px 16px !important;
    gap:14px !important;
    background:rgba(255,255,255,0.04) !important;
    border:1.5px solid rgba(255,255,255,0.1) !important;
    border-radius:14px !important;
    color:#fff !important;
    width:100% !important;
    box-sizing:border-box !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    font-family:inherit !important;
  }
  .service-choice-card.active{
    background:rgba(30,94,255,0.15) !important;
    border-color:#1E5EFF !important;
  }
  .service-choice-card .sc-icon{
    font-size:28px !important;
    flex-shrink:0 !important;
    line-height:1 !important;
  }
  .service-choice-card .sc-title{
    font-size:15px !important;
    font-weight:800 !important;
    color:#fff !important;
    margin:0 0 2px !important;
  }
  .service-choice-card .sc-desc{
    font-size:12px !important;
    color:rgba(255,255,255,0.55) !important;
    line-height:1.35 !important;
  }
  .service-choice-card .sc-check{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
  }
}

/* ── 4. Live-Price-Bar: Mobile darf wrappen damit Beides-Badge nicht ausbricht ── */
@media (max-width:700px){
  .live-price-bar{
    flex-wrap:wrap !important;
    gap:8px 12px !important;
    padding:12px 14px !important;
  }
  .live-price-bar > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .lpb-badge{
    font-size:11px !important;
    padding:5px 10px !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    line-height:1.2 !important;
  }
  .lpb-scope{
    flex:1 1 100% !important;
    text-align:left !important;
    font-size:10.5px !important;
  }
}

/* ── 5. Date-Picker: gesamtes Feld klickbar ── */
.date-wrap{
  position:relative !important;
  width:100% !important;
}
.date-wrap input[type="date"]{
  width:100% !important;
  min-height:52px !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:13px !important;
  color:#fff !important;
  font-size:15px !important;
  font-family:inherit !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:1 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.date-wrap input[type="date"]:not(.has-value){
  color:transparent !important;
}
.date-wrap input[type="date"].has-value{
  color:#fff !important;
}
.date-wrap input[type="date"]::-webkit-date-and-time-value{
  text-align:left !important;
}
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:pointer !important;
}
.date-floating-label{
  position:absolute !important;
  top:50% !important;
  left:18px !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  color:rgba(255,255,255,0.45) !important;
  font-size:15px !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  background:transparent !important;
  padding:0 !important;
}
.date-wrap input[type="date"].has-value + .date-floating-label,
.date-wrap input[type="date"]:focus + .date-floating-label{
  display:none !important;
}

/* ── 6. Zimmeranzahl-Picker kompakt ── */
.rooms-picker{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.rooms-picker-label{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.5) !important;
  margin-bottom:2px !important;
}
.rooms-picker-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;
}
.rooms-btns{
  display:flex !important;
  gap:5px !important;
  flex:1 !important;
}
.room-btn{
  flex:1 !important;
  min-width:0 !important;
  height:42px !important;
  padding:0 !important;
  border-radius:10px !important;
  border:1.5px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.05) !important;
  color:rgba(255,255,255,0.78) !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  font-family:inherit !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.room-btn.active{
  background:#1E5EFF !important;
  border-color:#1E5EFF !important;
  color:#fff !important;
}
.rooms-display{
  font-size:13px !important;
  color:rgba(255,255,255,0.72) !important;
  font-weight:600 !important;
  padding-left:2px !important;
}
.half-room-toggle{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  cursor:pointer !important;
  padding-left:8px !important;
  height:42px !important;
  flex-shrink:0 !important;
  border-left:1px solid rgba(255,255,255,0.1) !important;
}
.half-room-box{
  width:18px !important;
  height:18px !important;
  border-radius:5px !important;
  border:1.5px solid rgba(255,255,255,0.3) !important;
  background:rgba(255,255,255,0.06) !important;
  position:relative !important;
  display:inline-block !important;
}
.half-room-toggle input[type="checkbox"]:checked + .half-room-box{
  background:#1E5EFF !important;
  border-color:#1E5EFF !important;
}
.half-room-toggle input[type="checkbox"]:checked + .half-room-box::after{
  content:'' !important;
  position:absolute !important;
  left:4px !important;
  top:1px !important;
  width:5px !important;
  height:9px !important;
  border:solid #fff !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}
.half-room-text{
  font-size:13px !important;
  color:rgba(255,255,255,0.78) !important;
  font-weight:700 !important;
}

/* ── 7. Area-Opt Radio Pills (Zugang) ── */
.area-fuell-group{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
}
.area-fuell-label{
  font-size:13px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.78) !important;
  margin-bottom:10px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
.area-fuell-opts{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:6px !important;
}
@media (max-width:700px){
  .area-fuell-opts{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
.area-fuell-opts.area-fuell-opts-wide,
.area-fuell-opts[style*="flex-direction:column"]{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.area-opt{
  position:relative !important;
  cursor:pointer !important;
  user-select:none !important;
  display:block !important;
  margin:0 !important;
}
.area-opt span{
  display:block !important;
  padding:10px 12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1.5px solid rgba(255,255,255,0.12) !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.8) !important;
  text-align:center !important;
  line-height:1.35 !important;
  transition:.15s !important;
}
.area-opt-wide span{
  text-align:left !important;
  padding:11px 14px !important;
  font-size:13px !important;
}
.area-opt input[type="radio"]:checked + span{
  background:rgba(30,94,255,0.18) !important;
  border-color:#1E5EFF !important;
  color:#fff !important;
  font-weight:700 !important;
}

/* ── 8. Füllstand-Cards (dunkel, mit Klick-Feedback) ── */
.fuellstand-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}
.fuellstand-card{
  position:relative !important;
  text-align:left !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1.5px solid rgba(255,255,255,0.12) !important;
  border-radius:13px !important;
  cursor:pointer !important;
  color:#fff !important;
  font-family:inherit !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  transition:.15s !important;
}
.fuellstand-card.active,
.fuellstand-card.active-green,
.fuellstand-card.active-yellow,
.fuellstand-card.active-orange,
.fuellstand-card.active-red{
  background:rgba(30,94,255,0.16) !important;
  border-color:#1E5EFF !important;
}
.fuellstand-card .fs-dot{
  display:inline-block !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  margin-right:7px !important;
  vertical-align:middle !important;
}
.fuellstand-card .fs-title{
  font-size:14px !important;
  font-weight:800 !important;
  color:#fff !important;
  margin-bottom:3px !important;
  display:inline-block !important;
}
.fuellstand-card .fs-desc{
  font-size:12px !important;
  color:rgba(255,255,255,0.55) !important;
  line-height:1.4 !important;
}

/* ── 9. Service-Toggle (Verpackung / Entsorgung): Layout fix ── */
.service-toggle-item{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  transition:.2s !important;
}
.service-toggle-item.is-checked,
.service-toggle-item.expanded{
  background:rgba(30,94,255,0.06) !important;
  border-color:rgba(30,94,255,0.3) !important;
}
.stb-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:14px 16px !important;
  cursor:pointer !important;
  gap:12px !important;
  user-select:none !important;
}
.stb-left{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 !important;
  min-width:0 !important;
}
.stb-left label{
  font-size:14.5px !important;
  font-weight:700 !important;
  color:#fff !important;
  cursor:pointer !important;
  line-height:1.3 !important;
  flex:1 !important;
}
.stb-cb{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  border-radius:6px !important;
  border:1.5px solid rgba(255,255,255,0.3) !important;
  background:rgba(255,255,255,0.06) !important;
  position:relative !important;
  flex-shrink:0 !important;
  display:inline-block !important;
}
.stb-cb.checked{
  background:#1E5EFF !important;
  border-color:#1E5EFF !important;
}
.stb-cb.checked::after{
  content:'' !important;
  position:absolute !important;
  left:6px !important;
  top:2px !important;
  width:7px !important;
  height:12px !important;
  border:solid #fff !important;
  border-width:0 2.5px 2.5px 0 !important;
  transform:rotate(45deg) !important;
  display:block !important;
}
.stb-arrow{
  flex-shrink:0 !important;
  color:rgba(255,255,255,0.4) !important;
  font-size:12px !important;
  transition:.25s !important;
}
.service-toggle-item.expanded .stb-arrow,
.service-toggle-item.is-checked .stb-arrow{
  transform:rotate(180deg) !important;
}
.stb-detail{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .35s ease !important;
  padding:0 16px !important;
}
.stb-detail.open{
  padding:0 16px 16px !important;
  max-height:9999px !important;
}
.stb-detail .checkboxes{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:12px !important;
  padding:14px !important;
  margin-top:4px !important;
}