/**
 * Reservation Form (Inline Layout) Styles
 * 
 * @package Hoiquannamchau_Plugin
 */

/* ==== Layout gọn, không khung ===== */
.reservation-inline-form { 
  max-width: 1024px; 
  margin: 0 auto; 
  padding: 0 16px;
}

/* Mobile container adjustments */
@media (max-width: 767px) {
  .reservation-inline-form {
    padding: 0 12px;
  }
  
  /* Prevent horizontal scroll on mobile */
  .reservation-inline-form {
    overflow-x: hidden;
  }
  
  /* Ensure fields don't overflow */
  .reservation-inline-form .resv-field,
  .reservation-inline-form .resv-select {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Force date/time fields to be mobile-friendly */
  .reservation-inline-form .resv-field[type="date"],
  .reservation-inline-form .resv-field[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Override browser defaults for date/time inputs */
  .reservation-inline-form .resv-field[type="date"]::-webkit-calendar-picker-indicator,
  .reservation-inline-form .resv-field[type="time"]::-webkit-calendar-picker-indicator {
    width: 20px;
    height: 20px;
  }
}

.reservation-inline-form .resv-grid {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0; /* Allow grid to shrink */
}

/* Mobile first approach */
.reservation-inline-form .row-1 { 
  grid-template-columns: 1fr; 
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.reservation-inline-form .row-2 { 
  gap: 16px;
  padding: 0;
  width: 100%;
  min-width: 0;
}



/* Tablet and desktop */
@media (max-width: 1023px) {
	.reservation-inline-form .row-1 {grid-template-columns: 1fr;}
  .reservation-inline-form .row-2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .reservation-inline-form .row-2 { grid-template-columns: 1fr 1fr 1fr 1fr; padding: 1rem 10rem; }
	.reservation-inline-form .row-1 {grid-template-columns: 1fr 1fr 1fr;}
}

@media (max-width: 767px){
	.reservation-inline-form .row-2{
		grid-template-columns: 1fr; 
	}
}


/* ==== Field & Select ==== */
.reservation-inline-form .resv-field,
.reservation-inline-form .resv-select {
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  border: 1px solid #0D597D;
  border-radius: 5px;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1rem;
  color: #0a0a0a;
  outline: none;
  background-color: transparent;
  box-sizing: border-box; /* Ensure consistent sizing */
}

/* Ensure date and time fields have same width as other fields */
.reservation-inline-form .resv-field[type="date"],
.reservation-inline-form .resv-field[type="time"] {
  width: 100% !important;
  min-width: 0 !important; /* Prevent overflow on mobile */
  max-width: 100% !important;
  flex-shrink: 1;
  overflow: hidden;
}

/* Force date/time fields to respect container width */
.reservation-inline-form .resv-field[type="date"]::-webkit-datetime-edit,
.reservation-inline-form .resv-field[type="time"]::-webkit-datetime-edit {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Field wrapper and label styling */
.reservation-inline-form .resv-field-wrapper {
  position: relative;
  width: 100%;
}

.reservation-inline-form .resv-label {
  position: absolute;
  top: 35%;
  left: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 1;
  text-align: left;
  width: auto;
  display: none; /* Hide by default */
}

/* Show labels only on mobile */
@media (max-width: 767px) {
  .reservation-inline-form .resv-label {
    display: block;
  }
}

/* Hide label when field has value or is focused */
.reservation-inline-form .resv-field:not(:placeholder-shown) + .resv-label,
.reservation-inline-form .resv-field:focus + .resv-label {
  opacity: 0;
  transform: translateY(-50%) translateX(-10px);
}

/* Placeholder: Montserrat / Medium / 1rem / #444 */
.reservation-inline-form .resv-field::placeholder {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #444444;
  opacity: 1;
}
.reservation-inline-form .resv-field::-webkit-input-placeholder {
  font-family: Montserrat, sans-serif; 
  font-weight: 500; 
  font-size: 1rem; 
  color: #444444;
}
.reservation-inline-form .resv-field::-ms-input-placeholder {
  font-family: Montserrat, sans-serif; 
  font-weight: 500; 
  font-size: 1rem; 
  color: #444444;
}

/* ==== Button ==== */
.reservation-inline-form .actions {
  display: flex; 
  justify-content: center; 
  margin-top: 18px;
}
.reservation-inline-form .resv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #8C021C;
  color: #FFFCEF;
  border: 0;
  padding: 12px 26px;
  border-radius: 20px 5px 20px 50px; /* TL TR BR BL */
  font-family: Montserrat, sans-serif;
  font-weight: 600; /* semibold */
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%; /* Full width on mobile */
  justify-content: center;
}

/* Desktop button width */
@media (min-width: 768px) {
  .reservation-inline-form .resv-btn {
    width: auto;
  }
}
.reservation-inline-form .resv-btn:hover {
  background: #ffffff; 
  color: #8C021C;
  border: 1px solid #8C021C;
}
.reservation-inline-form .resv-btn-icon {
  width: 16px; 
  height: 16px; 
  display: inline-block;
}

/* ==== Message ==== */
.reservation-inline-form .resv-msg {
  text-align: center;
  margin-top: 12px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1rem;
}

.reservation-inline-form .resv-msg.success { 
  color: #15803d; 
}
.reservation-inline-form .resv-msg.error { 
  color: #b91c1c; 
}

.reservation-inline-form .resv-btn .icon-hover { 
  display: none; 
}

.reservation-inline-form .resv-btn:hover .icon-default { 
  display: none; 
}
.reservation-inline-form .resv-btn:hover .icon-hover { 
  display: inline-block; 
}

.reservation-inline-form .resv-btn-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}