/* ===============================
   RF Booking Form Styles
   =============================== */

#rf-booking-form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

/* Form field wrapper */
#rf-booking-form .rf-field {
  position: relative;
  margin-bottom: 15px;
}

/* Inputs & Select dropdowns */
#rf-booking-form input,
#rf-booking-form select {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Icon inside field */
#rf-booking-form .rf-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
}

/* Submit button */
#rf-booking-form button {
  width: 100%;
  padding: 12px;
  background: var(--rf-btn-color, #a00);
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#rf-booking-form button:hover {
  background: #800;
}

/* Popup Thank You Message */
#rf-success {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  padding: 20px;
  border-radius: 10px;
  z-index: 9999;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}


/* Ensure placeholders visible on mobile */
input::placeholder, textarea::placeholder, select::placeholder {
  color: #666 !important;
  opacity: 1 !important;
}

/* Overlay placeholder for inputs that lose native placeholder (like time/date on some mobiles) */
.rf-placeholder-wrap{position:relative;}
.rf-placeholder-wrap .rf-placeholder-overlay{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:#8a8a8a;
  font-size:14px;
  transition:opacity .15s;
}
.rf-placeholder-wrap input:not(:focus):placeholder-shown + .rf-placeholder-overlay,
.rf-placeholder-wrap input[value=""] + .rf-placeholder-overlay{
  opacity:1;
}
.rf-placeholder-wrap input:focus + .rf-placeholder-overlay,
.rf-placeholder-wrap input:not(:placeholder-shown) + .rf-placeholder-overlay{
  opacity:0;
}

/* Select on map button */
.rf-select-map-btn{
  display:inline-block;
  margin-left:8px;
  padding:6px 8px;
  border-radius:6px;
  background:#f1f1f1;
  border:1px solid #ddd;
  cursor:pointer;
  font-size:13px;
}

/* Modal styles */
#rf-map-modal{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999;display:none;}
#rf-map-modal .rf-map-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.rf-map-modal-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;max-width:720px;width:95%;padding:10px;box-shadow:0 6px 30px rgba(0,0,0,0.3);z-index:100000;}
.rf-map-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.rf-map-actions button{padding:8px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer;}
@media (max-width:600px){
  .rf-map-modal-content{height:80vh;padding:0;display:flex;flex-direction:column;}
  #rf-map{flex:1;height:100%;}
}

.rf-pickup-btn{background:#007bff !important;color:#fff !important;}

.rf-drop-btn{background:#28a745 !important;color:#fff !important;}

#rf-booking-form button[type="submit"]{background:#c82333 !important;color:#fff !important;}


/* --- Floating placeholder for datetime-local --- */
.rf-datetime-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.rf-datetime-wrapper input[type=datetime-local] {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  color: #000;
}
.rf-datetime-label {
  position: absolute;
  left: 14px;
  color: #888;
  font-size: 15px;
  pointer-events: none;
  transition: 0.2s ease all;
}
.rf-datetime-wrapper input:focus + .rf-datetime-label,
.rf-datetime-wrapper input:not(:placeholder-shown) + .rf-datetime-label,
.rf-datetime-wrapper input[type=datetime-local]:valid + .rf-datetime-label {
  top: -10px;
  left: 8px;
  font-size: 12px;
  color: #214755;
  background: #fff;
  padding: 0 4px;
}