/* ============================
   Escape – CF7 minimal flat style (final version)
   ============================ */

.wpcf7 form p { 
  margin: 0 0 15px; 
}

/* Inputs and textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  transition: border-color .2s ease, background-color .2s ease;
  box-sizing: border-box;          /* ← add this here */
}


/* Row layout for multiple fields */
.wpcf7 form .row {
  display: flex;
  gap: 15px;
}
.wpcf7 form .row > * {
  flex: 1;
  margin-bottom: 0;
}

/* Make date fields exactly match other input widths */
.wpcf7 input[type="date"] {
  width: 100% !important;
  box-sizing: border-box;
  color: #999;
}

/* Gap between the labels (Check-in / Check-out) and the input field */
.wpcf7 label {
  display: block;
  margin-bottom: 6px!important;
  color: #333;
}

/* Textarea */
.wpcf7 textarea { 
  min-height: 140px; 
  resize: vertical; 
}

/* Placeholder */
.wpcf7 ::placeholder { 
  color: #999; 
}

/* Focus */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #20a99d;
  outline: none;
}

/* ============================
   Submit button – full width + custom colors
   ============================ */
.wpcf7 .wpcf7-submit{
  display: block;
  width: 100%;
  background: #20a99d;    /* teal / turquoise */
  /* background: #d57b66; */
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s ease;
}
.wpcf7 .wpcf7-submit:hover{ 
  background:#1c8a81;     /* darker teal */ 
  /* background:#ce5216; */
}
.wpcf7 p:has(.wpcf7-submit){ 
  margin-top: 10px; 
}

/* ============================
   Error handling – inline only
   ============================ */

/* Hide screen-reader summary visually (keep accessible for SRs) */
.wpcf7 .screen-reader-response{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important; 
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Inline error inside the field (right side) */
.wpcf7 .wpcf7-form-control-wrap{ 
  position: relative; 
}

.wpcf7 input[aria-invalid="true"],
.wpcf7 textarea[aria-invalid="true"],
.wpcf7 select[aria-invalid="true"]{
  border-color:#e11d48 !important;
  background:#fff7f9 !important;
  padding-right: 44px; /* room for inline tip */
}

.wpcf7 .wpcf7-not-valid-tip{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color:#e11d48;
  pointer-events: none;
  background: transparent;
  line-height: 1.1;
}

/* For textarea, anchor tip bottom-right */
.wpcf7 textarea + .wpcf7-not-valid-tip{
  top: auto;
  bottom: 10px;
  transform: none;
}

/* Placeholder turns red on error */
.wpcf7 input[aria-invalid="true"]::placeholder,
.wpcf7 textarea[aria-invalid="true"]::placeholder{ 
  color:#e11d48; 
}

/* ============================
   Bottom notifications (error + success)
   ============================ */
.wpcf7 .wpcf7-response-output{
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
}

/* Error states */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
  display: block !important;
  background: #f43f5e;   /* red */
  color: #fff;
}

/* Success state */
.wpcf7 form.sent .wpcf7-response-output{
  display: block !important;
  background: #22c55e;   /* green */
  color: #fff;
}

/* While submitting, keep hidden */
.wpcf7 form.submitting .wpcf7-response-output{ 
  display: none !important; 
}