/* =====================================================
   BikeID
   File: callweb3.css
   Stili sezione supporto / prenotazione CallWeb3
   ===================================================== */

/* =====================================================
   RIEPILOGO E STATO
   ===================================================== */

.bookingPreview .previewTitle{
  margin-bottom:6px;
  font-weight:950;
}

.bookingPreview .previewBox{
  padding:10px;

  border:1px solid var(--line);
  border-radius:14px;

  background:rgba(255,255,255,.03);
  font-size:12px;
  line-height:1.35;
}

.booking-status.ok{
  color:rgba(52,211,153,.95);
  font-weight:900;
}

.booking-status.error{
  color:rgba(251,113,133,.95);
  font-weight:900;
}


/* =====================================================
   RIGA GIORNO E ORARIO
   ===================================================== */

#support .bookingRow3{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:18px;
  width:100%;
}

#support .form-block.compact{
  flex:0 0 auto;
  width:auto;
  min-width:0;
}

#support .form-block.compact label{
  display:block;
  margin-bottom:6px;
}

#support .compactRow{
  display:flex;
  align-items:center;
  gap:8px;
  width:auto;
}


/* =====================================================
   CAMPI DATA E ORA
   ===================================================== */

#support #booking-date,
#support #booking-time{
  display:block;
  box-sizing:border-box;

  flex:0 0 172px;
  width:172px;
  min-width:172px;
  max-width:172px;

  margin:0;
}


/* =====================================================
   PULSANTI CALENDARIO E OROLOGIO
   ===================================================== */

#support .pickBtn{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 42px;
  width:42px;
  min-width:42px;
  max-width:42px;
  height:42px;

  margin:0;
  padding:0;

  border:1px solid var(--line);
  border-radius:12px;

  background:rgba(255,255,255,.04);
  color:var(--txt);

  text-align:center;
  cursor:pointer;
  font-weight:700;
}

#support .pickBtn:active{
  transform:translateY(1px);
}


/* =====================================================
   REGOLE EVENTUALMENTE USATE DAL JAVASCRIPT
   ===================================================== */

.timeRow{
  display:flex;
  align-items:center;
  gap:12px;
}

#booking-time-range{
  flex:1;
}

.timePill{
  min-width:68px;
  padding:8px 10px;

  border:1px solid var(--line);
  border-radius:999px;

  background:rgba(255,255,255,.04);
  text-align:center;
  font-weight:900;
}

.hint2{
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width:720px){

  #support .bookingRow3{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  #support .form-block.compact{
    width:100%;
  }

  #support .compactRow{
    width:100%;
  }

  #support #booking-date,
  #support #booking-time{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:none;
  }

  #support .pickBtn{
    flex:0 0 44px;
    width:44px;
    min-width:44px;
    max-width:44px;
  }
}