/* --- Akshara Forms General Styling --- */
.custom-cta-form {
  max-width: 360px; /* Default width for newsletter/contact */
  min-height: 56px;
  margin: 0 auto;
}

/* Give the booking form more space */
.booking-form {
  max-width: 600px;
}

.custom-cta-form .form-field {
  margin-bottom: 8px; /* This is the default space *between* fields */
}

.custom-cta-form input[type="text"],
.custom-cta-form input[type="email"],
.custom-cta-form input[type="tel"],
.custom-cta-form input[type="date"],
.custom-cta-form textarea {
  width: 100%;
  background-color: transparent !important;
  border: 1px solid #f2f2f2 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  color: #f2f2f2 !important;
  font-size: 14px !important;
  font-weight: 300;
  box-sizing: border-box;
}

.custom-cta-form input[type="date"] {
  line-height: 1;
}

.custom-cta-form textarea {
  height: 96px;
  resize: vertical;
}

.custom-cta-form input::placeholder,
.custom-cta-form textarea::placeholder {
  color: rgba(242, 242, 242, 0.5) !important;
}

/* Fix for date field placeholder */
.custom-cta-form input[type="date"]::before {
  content: attr(placeholder) !important;
  color: rgba(242, 242, 242, 0.5) !important;
  margin-right: 0.5em;
}
.custom-cta-form input[type="date"]:focus::before,
.custom-cta-form input[type="date"]:valid::before {
  content: "";
  display: none;
}

/* --- NEW: File Upload Field Styling --- */
.custom-cta-form input[type="file"] {
  width: 100%;
  background-color: transparent;
  border: 1px dashed rgba(242, 242, 242, 0.5) !important; /* Dashed border for dropzone */
  border-radius: 8px;
  padding: 12px 18px;
  color: rgba(242, 242, 242, 0.7); /* Lighter text for "no file chosen" */
  font-size: 14px;
  font-weight: 300;
  box-sizing: border-box;
}

/* Style the "Choose File" button */
.custom-cta-form input[type="file"]::file-selector-button {
  background-color: #f2f2f2;
  color: #1e1e1e;
  border: none;
  border-radius: 4px; /* Smaller radius for the inner button */
  padding: 8px 12px;
  font-weight: 400;
  cursor: pointer;
  margin-right: 16px;
  font-size: 14px;
}
/* --- End File Styling --- */

.custom-cta-form .custom-submit-button {
  width: 100%;
  background-color: #f2f2f2 !important;
  color: #1e1e1e !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Form Structural Styles (for Booking Form) --- */

/* UPDATED: Section Heading Styles */
.custom-cta-form .form-heading {
  color: #f2f2f2;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  margin-top: 40px; 
  margin-bottom: 20px;
  border-bottom: none;
}

/* Add a bit of space before the very first heading */
.custom-cta-form .form-heading:first-of-type {
  margin-top: 24px;
}

/* UPDATED: Two-Column Row Spacing */
.custom-cta-form .form-row {
  display: flex;
  flex-wrap: wrap; 
  column-gap: 16px; 
  padding: 0;
}

/* This targets fields *inside* a row */
.custom-cta-form .form-row .form-field {
  margin: 0; /* REMOVES the double margin */
  padding: 0;
}

.custom-cta-form .form-col-half {
  flex: 1;
  min-width: calc(50% - 8px); /* 50% width minus half the gap */
}

/* Responsive: Stacks the columns on mobile */
@media (max-width: 600px) {
  .custom-cta-form .form-col-half {
    min-width: 100%;
  }
}


/* --- Akshara Forms General Styling --- */
.wpcf7-form {
  max-width: 360px; /* Default width for newsletter/contact */
  min-height: 56px;
  margin: 0 auto;
}

/* Give the booking form more space (you MUST add this class manually in the CF7 editor) */
.wpcf7-form.booking-form {
  max-width: 600px;
}

/* This is the default space *between* fields (CF7 wraps fields in <p>) */
.wpcf7-form p {
  margin-bottom: 8px; 
}

/* Default styling for all CF7 input fields */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  background-color: transparent !important;
  border: 1px solid #f2f2f2 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  color: #f2f2f2 !important;
  font-size: 14px !important;
  font-weight: 300;
  box-sizing: border-box;
}

.wpcf7-form .wpcf7-date {
  line-height: 1;
}

.wpcf7-form .wpcf7-textarea {
  height: 96px;
  resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: rgba(242, 242, 242, 0.5) !important;
}

/* Fix for date field placeholder */
.wpcf7-form .wpcf7-date::before {
  content: attr(placeholder) !important;
  color: rgba(242, 242, 242, 0.5) !important;
  margin-right: 0.5em;
}
.wpcf7-form .wpcf7-date:focus::before,
.wpcf7-form .wpcf7-date:valid::before {
  content: "";
  display: none;
}

/* --- File Upload Field Styling --- */
.wpcf7-form .wpcf7-file {
  width: 100%;
  background-color: transparent;
  border: 1px dashed rgba(242, 242, 242, 0.5) !important; /* Dashed border for dropzone */
  border-radius: 8px;
  padding: 12px 18px;
  color: rgba(242, 242, 242, 0.7); /* Lighter text for "no file chosen" */
  font-size: 14px;
  font-weight: 300;
  box-sizing: border-box;
}

/* Style the "Choose File" button */
.wpcf7-form .wpcf7-file::file-selector-button {
  background-color: #f2f2f2;
  color: #1e1e1e;
  border: none;
  border-radius: 4px; /* Smaller radius for the inner button */
  padding: 8px 12px;
  font-weight: 400;
  cursor: pointer;
  margin-right: 16px;
  font-size: 14px;
}

/* --- Submit Button Styling --- */
.wpcf7-form .wpcf7-submit {
  width: 100%;
  background-color: #f2f2f2 !important;
  color: #1e1e1e !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Form Structural Styles (Must be added manually in CF7 editor) --- */

/* e.g. <h3 class="form-heading">...</h3> */
.wpcf7-form .form-heading {
  color: #f2f2f2;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  margin-top: 40px; 
  margin-bottom: 20px;
  border-bottom: none;
}

/* Add a bit of space before the very first heading */
.wpcf7-form .form-heading:first-of-type {
  margin-top: 24px;
}

/* e.g. <div class="form-row">...</div> */
.wpcf7-form .form-row {
  display: flex;
  flex-wrap: wrap; 
  column-gap: 16px; 
  padding: 0;
}

/* This targets <p> tags *inside* a row */
.wpcf7-form .form-row p {
  margin: 0; /* REMOVES the double margin */
  padding: 0;
}

/* e.g. <p class="form-col-half">[text* your-name]</p> */
.wpcf7-form .form-col-half {
  flex: 1;
  min-width: calc(50% - 8px); /* 50% width minus half the gap */
}

/* Responsive: Stacks the columns on mobile */
@media (max-width: 600px) {
  .wpcf7-form .form-col-half {
    min-width: 100%;
  }
}