/* ==============================
   ORDER PAGE & FORM STYLING
   ============================== */

/* Container for the order form page*/
.order-wrapper {
  display: grid;
  grid-template-areas:
    "title"
    "form"
    "submit";
  grid-template-columns: 1fr;
  padding: 10px 120px;
  background-color: white;
  justify-items: center;
  align-items: center;
  max-width: 100%;
}

.order-title {
  grid-area: title;
  text-align: center;
  color: black;
}

/* ===========================
   FORM STYLES - for both forms (order and inquiries which is located in contact us page)
   =========================== */

/* 
   Text inputs, email fields, number inputs, and dropdown styling 
   Learned from:
   - MDN Forms Guide: https://developer.mozilla.org/en-US/docs/Learn/Forms 
   - CSS-Tricks article on styling form controls: https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
*/

.form-text input[type="text"],
.form-text input[type="email"],
.form-text input[type="number"],
.form-text select {
  width: 100%;
  padding: 12px 16px;          
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  border: 2px solid #ccc;      /* Default border color */
  border-radius: 6px;          /* Rounded corners */
  background-color: #ffe5a7;  
  color: black;
  box-sizing: border-box;      
  transition: background-color 0.2s ease, border-color 0.2s ease; 
}

/* Change dropdown background on hover 
   Inspiration from W3Schools hover effect: https://www.w3schools.com/css/css_hover.asp */
.form-text select:hover {
  background-color: white;
}

/* Keep number inputs matching other fields */
.form-text input[type="number"] {
  background-color: #ffe5a7;
}

.form-text input:focus,
.form-text select:focus {
  outline: none;
  border-color: #E69D00;       
}

.form-text input[type="number"]::-webkit-inner-spin-button,
.form-text input[type="number"]::-webkit-outer-spin-button {
  transform: scale(1.5);
  margin-right: 4px;           
}

/* ===========================
   SUBMIT BUTTON 
   =========================== */

/* Submit button styling */
button {
  grid-area: submit;
  padding: 20px;
  width: 100%;
  background-color: #E69D00;
  border: 2px solid #333;
  border-radius: 6px;
  color: black;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Hover effect on submit button */
button:hover {
  background-color: #ffae00;
  color: white;
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .order-wrapper {
    padding: 20px 20px;
  }
}