/*
 Theme Name:     Divi Child
 Theme URI:      https://destinovotravel.tkwebdesign.co.uk
 Description:    Child theme for Divi
 Author:         TK Web Design
 Template:       Divi
 Version:        1.0.2
*/

/* === Destinovo Travel - Contact Form 7 Styling === */

/* FORM WRAPPER */
.wpcf7 form {
  font-family: 'Poppins', sans-serif;
  background: rgba(255, 255, 255, 0.4); /* lighter transparency */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border for frosted look */
}


/* FIELDS */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.3s ease;
  color:#fff;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #fc8f7d; /* coral tone */
  outline: none;
  color:#fff;
}

/* PLACEHOLDER TEXT */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
}

/* CHECKBOXES & RADIOS */
/* Ensure each checkbox item is displayed on a new line with consistent spacing */
.wpcf7-form .wpcf7-list-item {
  display: block;
  margin-bottom: 10px; /* Adjust spacing between checkbox items */
  color:#fff;
}

/* Style the checkbox labels to match other form elements */
.wpcf7-form .wpcf7-list-item-label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  padding-left: 8px; /* Space between checkbox and label text */
  cursor: pointer;

}

/* Align checkboxes vertically with their labels */
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  vertical-align: middle;
}

/* SUBMIT BUTTON */
.wpcf7 input[type="submit"] {
  background: #fff;
  color: #000;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #000;
  color:#fff;
}

/* FORM FEEDBACK MESSAGES */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 15px 20px;
  border: 2px solid #fc8f7d;
  border-radius: 10px;
  background: #fff4f1;
  color: #333;
}
/* Add space below field headings like 'Preferred Method of Contact' */
.wpcf7-form-control {
  margin-top: 10px; /* adjust as needed */
  display: block;
}