/**
 * Reservation Form V2 Styles
 * 
 * @package Hoiquannamchau_Plugin
 */

/* —— Layout —— */
.reservation-form-v2 { 
  max-width: 820px; 
  margin: 0 auto; 
  padding: 0 16px;
}

/* Mobile container adjustments */
@media (max-width: 767px) {
  .reservation-form-v2 {
    padding: 0 4px;
  }
}

.reservation-form-v2 .v2-grid { 
  display: grid; 
  gap: 10px; 
  width: 100%;
  min-width: 0;
}

/* Mobile first approach */
.reservation-form-v2 .row-1,
.reservation-form-v2 .row-3,
.reservation-form-v2 .row-5 { 
  grid-template-columns: 1fr; 
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.reservation-form-v2 .row-2,
.reservation-form-v2 .row-4 { 
  grid-template-columns: 1fr; 
  gap: 10px;
  width: 100%;
  min-width: 0;
}

/* Remove all gaps on mobile */
@media (max-width: 767px) {
  .reservation-form-v2 .row-1,
  .reservation-form-v2 .row-2,
  .reservation-form-v2 .row-3,
  .reservation-form-v2 .row-4,
  .reservation-form-v2 .row-5 {
    gap: 0;
  }
}

/* Tablet and desktop: email/phone same row; date/time same row */
@media (min-width: 768px) {
  .reservation-form-v2 .row-2,
  .reservation-form-v2 .row-4 { 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
  }
}

/* —— Field Styles —— */
.reservation-form-v2 .v2-field,
.reservation-form-v2 .v2-select,
.reservation-form-v2 textarea.v2-field {
  width: 100%;
  height: 52px;
  padding: 6px 8px;
  border: 1px solid #1E1E1E;
  border-radius: 5px;
  background: #fff;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1rem;
  color: #0a0a0a;
  outline: none;
  box-sizing: border-box;
}

.reservation-form-v2 textarea.v2-field { 
  height: 110px; 
  resize: vertical; 
}

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

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

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

.reservation-form-v2 .v2-label {
  position: absolute;
  top: 35%;
  left: 8px;
  transform: translateY(-50%);
  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;
}

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

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

/* —— Responsive for mobile —— */
@media (max-width: 767px) {
  .reservation-form-v2 .v2-field,
  .reservation-form-v2 .v2-select,
  .reservation-form-v2 textarea.v2-field {
    width: 100%;
    font-size: 16px;
    min-height: 56px;
  }
  
  .reservation-form-v2 .v2-grid {
    gap: 0;
  }
  
  /* Prevent horizontal scroll on mobile */
  .reservation-form-v2 {
    overflow-x: hidden;
  }
  
  /* Force date/time fields to be mobile-friendly */
  .reservation-form-v2 .v2-field[type="date"],
  .reservation-form-v2 .v2-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-form-v2 .v2-field[type="date"]::-webkit-calendar-picker-indicator,
  .reservation-form-v2 .v2-field[type="time"]::-webkit-calendar-picker-indicator {
    width: 20px;
    height: 20px;
  }
  
  /* Make fields wider on mobile */
  .reservation-form-v2 .v2-field-wrapper {
    width: 100%;
  }
  
  /* Ensure all form elements take full width on mobile */
  .reservation-form-v2 form {
    width: 100%;
  }
  
  /* Make textarea taller on mobile */
  .reservation-form-v2 textarea.v2-field {
    min-height: 120px;
  }
  
  /* Increase container width on mobile */
  .reservation-form-v2 {
    max-width: 95vw;
    margin: 0 auto;
  }
}

/* —— Placeholder Styles —— */
.reservation-form-v2 .v2-field::placeholder {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #444444;
  opacity: 1;
}

.reservation-form-v2 .v2-field::-webkit-input-placeholder { 
  font-family: Montserrat, sans-serif; 
  font-weight: 500; 
  font-size: 1rem; 
  color: #444; 
}

.reservation-form-v2 .v2-field::-ms-input-placeholder { 
  font-family: Montserrat, sans-serif; 
  font-weight: 500; 
  font-size: 1rem; 
  color: #444; 
}

/* —— Button Styles —— */
.reservation-form-v2 .v2-actions { 
  display: flex; 
  justify-content: center; 
  margin-top: 18px; 
}

.reservation-form-v2 .v2-btn {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  background: #8C021C; 
  color: #FFFCEF; 
  border: 1px solid #8C021C;
  padding: 12px 26px; 
  border-radius: 20px 5px 20px 50px;
  font-family: Montserrat, sans-serif; 
  font-weight: 600; 
  font-size: 1rem;
  cursor: pointer; 
  transition: all .25s ease;
  width: 100%;
  justify-content: center;
}

/* Desktop button width */
@media (min-width: 768px) {
  .reservation-form-v2 .v2-btn {
    width: auto;
  }
}

.reservation-form-v2 .v2-btn:hover { 
  background: #fff; 
  color: #8C021C; 
}

/* Button Icon Styles */
.reservation-form-v2 .v2-btn .icon-hover { 
  display: none; 
}

.reservation-form-v2 .v2-btn:hover .icon-default { 
  display: none; 
}

.reservation-form-v2 .v2-btn:hover .icon-hover { 
  display: inline-block; 
}

.reservation-form-v2 .v2-btn-icon {
  width: 16px;
  height: 16px;
}

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

.reservation-form-v2 .v2-msg.success { 
  color: #15803d; 
}

.reservation-form-v2 .v2-msg.error { 
  color: #b91c1c; 
}

/* Field spacing */
.reservation-form-v2 .v2-field,
.reservation-form-v2 .v2-select,
.reservation-form-v2 textarea.v2-field {
  margin-bottom: 20px;
}