/* ============================================
   CONTACT SECTION WRAPPER (Elementor Container)
   Cream background for the entire section
   ============================================ */

.contact-section-wrapper {
  background: #F5EFE7 !important;
  padding: 3rem 0 !important;
}

/* ============================================
   CONTACT FORM 7 WRAPPER STYLING
   White form card inside the cream section
   ============================================ */

.contact-form-wrapper {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Inner form container with white background */
.contact-form-wrapper form {
  background: #FFFFFF !important;
  padding: 3rem !important;
  border-radius: 12px !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  display: block !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Form groups styling */
.contact-form-wrapper .contact-form-group {
  margin-bottom: 2rem !important;
}

/* Form rows - 2 column grid layout */
.contact-form-wrapper .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Single column form-col */
.contact-form-wrapper .form-col {
  display: flex !important;
  flex-direction: column !important;
}

.contact-form-wrapper .wpcf7-form-control-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

/* ============================================
   FORM STRUCTURE
   ============================================ */

/* Form rows with only one field - make them single column for better field width */
.contact-form-wrapper .form-row:has(.wpcf7-form-control-wrap[data-name="tour-attendees"]),
.contact-form-wrapper .form-row:has(.wpcf7-form-control-wrap[data-name="guests"]) {
  grid-template-columns: 1fr !important;
}

/* Fallback for browsers without :has() support - target by structure */
.contact-form-wrapper .form-row .form-col:only-child {
  grid-column: 1 / -1 !important;
}

/* ============================================
   LABELS
   ============================================ */

.contact-form-wrapper label {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #3C3C3A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
  margin-top: 0 !important;
}

.contact-form-wrapper .wpcf7-form-control-wrap label {
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
}

/* ============================================
   TEXT INPUTS - OVERRIDE THEME
   ============================================ */

.contact-form-wrapper input[type=text],
.contact-form-wrapper input[type=email],
.contact-form-wrapper input[type=tel],
.contact-form-wrapper input[type=number],
.contact-form-wrapper input[type=date],
.contact-form-wrapper input[type=time],
.contact-form-wrapper input[type=url] {
  width: 100% !important;
  padding: 0.875rem 1.25rem !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  color: #3C3C3A !important;
  background: #FDFDFB !important;
  border: 2px solid #E8E8E6 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Focus States */
.contact-form-wrapper input[type=text]:focus,
.contact-form-wrapper input[type=email]:focus,
.contact-form-wrapper input[type=tel]:focus,
.contact-form-wrapper input[type=number]:focus,
.contact-form-wrapper input[type=date]:focus,
.contact-form-wrapper input[type=time]:focus,
.contact-form-wrapper input[type=url]:focus {
  outline: none !important;
  border-color: #7A8B7D !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(122, 139, 125, 0.1) !important;
}

/* ============================================
   SELECT DROPDOWNS - OVERRIDE THEME
   ============================================ */

.contact-form-wrapper select {
  width: 100% !important;
  padding: 0.875rem 1.25rem !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  color: #3C3C3A !important;
  background-color: #FDFDFB !important;
  border: 2px solid #E8E8E6 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath fill=%237A8B7D d=M1 4l5 4 5-4/%3E%3C/svg%3E) !important;
  background-repeat: no-repeat !important;
  background-position: right 1.25rem center !important;
  padding-right: 2.5rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.contact-form-wrapper select:focus {
  outline: none !important;
  border-color: #7A8B7D !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(122, 139, 125, 0.1) !important;
}

.contact-form-wrapper select option {
  padding: 0.5rem !important;
  color: #3C3C3A !important;
  background-color: #FFFFFF !important;
}

/* ============================================
   TEXTAREA - OVERRIDE THEME
   ============================================ */

.contact-form-wrapper textarea {
  width: 100% !important;
  padding: 0.875rem 1.25rem !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  color: #3C3C3A !important;
  background-color: #FDFDFB !important;
  border: 2px solid #E8E8E6 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  min-height: 150px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.contact-form-wrapper textarea:focus {
  outline: none !important;
  border-color: #7A8B7D !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(122, 139, 125, 0.1) !important;
}

/* ============================================
   RADIO BUTTONS
   ============================================ */

.contact-form-wrapper .wpcf7-radio {
  display: flex !important;
  gap: 2rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 2rem !important;
}

.contact-form-wrapper .wpcf7-radio label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  color: #5A5A58 !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

.contact-form-wrapper input[type=radio] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #7A8B7D !important;
  flex-shrink: 0 !important;
}

/* ============================================
   CHECKBOXES
   ============================================ */

.contact-form-wrapper .wpcf7-checkbox {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 2rem !important;
}

.contact-form-wrapper .wpcf7-checkbox label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: 0.9375rem !important;
  color: #3C3C3A !important;
}

.contact-form-wrapper input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
  cursor: pointer !important;
  accent-color: #7A8B7D !important;
  flex-shrink: 0 !important;
}

/* ============================================
   RECAPTCHA
   ============================================ */

.contact-form-wrapper .wpcf7-recaptcha {
  grid-column: 1 / -1 !important;
  margin-bottom: 2rem !important;
}

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

.contact-form-wrapper .wpcf7-submit,
.contact-form-wrapper input[type="submit"] {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 2rem auto 0 auto !important;
  padding: 1.125rem 3rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #FFFFFF !important;
  background: #748173 !important;
  border: none !important;
  outline: none !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
}

.contact-form-wrapper .wpcf7-submit:hover,
.contact-form-wrapper input[type="submit"]:hover {
  background: #B8941F !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(116, 129, 115, 0.3) !important;
}

.contact-form-wrapper .wpcf7-submit:active,
.contact-form-wrapper input[type="submit"]:active {
  transform: translateY(0) !important;
}

.contact-form-wrapper .wpcf7-submit:focus,
.contact-form-wrapper input[type="submit"]:focus {
  outline: none !important;
  border: none !important;
}

/* ============================================
   ERROR STATES
   ============================================ */

.contact-form-wrapper .wpcf7-not-valid {
  border-color: #C85A54 !important;
}

.contact-form-wrapper .wpcf7-not-valid-tip {
  color: #C85A54 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  margin-top: 0.4rem !important;
  display: block !important;
}

/* ============================================
   STATUS MESSAGES
   ============================================ */

.contact-form-wrapper .wpcf7-mail-sent-ok {
  color: #2F855A !important;
  background-color: rgba(107, 155, 110, 0.08) !important;
  border: 2px solid #6B9B6E !important;
  border-left: 4px solid #6B9B6E !important;
  padding: 1rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
  grid-column: 1 / -1 !important;
}

.contact-form-wrapper .wpcf7-mail-sent-ng {
  color: #C85A54 !important;
  background-color: rgba(200, 90, 84, 0.08) !important;
  border: 2px solid #C85A54 !important;
  border-left: 4px solid #C85A54 !important;
  padding: 1rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
  grid-column: 1 / -1 !important;
}

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

@media (max-width: 768px) {
  .contact-section-wrapper {
    padding: 1.5rem 0 !important;
  }

  .contact-form-wrapper form {
    padding: 1.5rem !important;
  }

  /* Make all form rows single column on mobile */
  .contact-form-wrapper .form-row {
    grid-template-columns: 1fr !important;
  }

  .contact-form-wrapper input[type=text],
  .contact-form-wrapper input[type=email],
  .contact-form-wrapper input[type=tel],
  .contact-form-wrapper input[type=number],
  .contact-form-wrapper input[type=date],
  .contact-form-wrapper input[type=time],
  .contact-form-wrapper select,
  .contact-form-wrapper textarea {
    font-size: 16px !important;
  }

  .contact-form-wrapper .wpcf7-radio {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ============================================
   FIX: Target the actual button inside wrapper
   ============================================ */

.contact-form-wrapper .wpcf7-submit button,
.contact-form-wrapper .wpcf7-submit button.butn-dark {
  background: #748173 !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 1.125rem 3rem !important;
  border-radius: 30px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.contact-form-wrapper .wpcf7-submit button:hover,
.contact-form-wrapper .wpcf7-submit button.butn-dark:hover {
  background: #B8941F !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(116, 129, 115, 0.3) !important;
}

.contact-form-wrapper .wpcf7-submit button:active,
.contact-form-wrapper .wpcf7-submit button.butn-dark:active {
  transform: translateY(0) !important;
}

.contact-form-wrapper .wpcf7-submit button a,
.contact-form-wrapper .wpcf7-submit button a span {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ============================================
   MAP CONTAINER - Location & Hours Section
   ============================================ */

.map-container {
  width: 100% !important;
  height: 600px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  margin: 3rem 0 !important;
}

.map-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .map-container {
    height: 400px !important;
  }
}

/* ============================================
   FIX: Number inputs appearing too small
   ============================================ */

.contact-form-wrapper input[type=number] {
  width: 100% !important;
  -moz-appearance: textfield !important;
}

/* Remove spinner arrows on number inputs */
.contact-form-wrapper input[type=number]::-webkit-outer-spin-button,
.contact-form-wrapper input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}