/* Cozy Bloom — Schedule a Tour Page Styles */

/* ════════════════════════════════════════════════════════════
   Schedule a Tour — .cb-tour-section
   ════════════════════════════════════════════════════════════ */

/* ── Section wrapper: full-bleed two-column grid ── */
.cb-tour-section {
  display: block;
  overflow: hidden;
}

.cb-tour-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 780px;
}

/* ── Left: image column ── */
.cb-tour-image-col {
  position: relative;
  overflow: hidden;
}

.cb-tour-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Dark-to-transparent gradient overlay from bottom */
.cb-tour-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 40, 30, .55) 0%,
    rgba(27, 40, 30, .15) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* Small floating badge in bottom-left of image */
.cb-tour-img-badge {
  position: absolute;
  bottom: 2.2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50px;
  padding: .55rem 1.1rem;
  color: #fff;
  font-family: Poppins, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.cb-tour-img-badge-icon {
  color: #f0c4bc;
  font-size: .65rem;
}

/* Decorative corner accent circles */
.cb-tour-img-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cb-tour-img-deco--a {
  width: 200px;
  height: 200px;
  top: -60px;
  right: -60px;
  background: rgba(214, 154, 145, .18);
}

.cb-tour-img-deco--b {
  width: 120px;
  height: 120px;
  top: 80px;
  right: 20px;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .12);
}

/* ── Right: form panel ── */
.cb-tour-form-col {
  background: var(--cb-cream, #faf7f2);
  display: flex;
  align-items: stretch;
}

.cb-tour-form-panel {
  width: 100%;
  padding: 4.5rem 4rem 4.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cb-tour-form-header {
  margin-bottom: 2rem;
}

.cb-tour-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 700;
  color: var(--cb-sage-deep, #2d4a32);
  line-height: 1.22;
  margin: .5rem 0 .8rem;
}

.cb-tour-subtext {
  color: var(--cb-muted, #6b7c73);
  font-size: .97rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── CF7 form styling inside the tour section ── */
.cb-tour-form-body .wpcf7 {
  margin: 0;
}

/* CF7 inline span fix — make inputs fill their label width */
.cb-tour-form-body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Two-column rows — CF7 injects <p><label/><br/><label/></p>
   display:contents makes <p> invisible to layout so both labels
   become direct grid children, each taking one column. */
.cb-tour-form-body .cf7-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cb-tour-form-body .cf7-two > p {
  display: contents;
}

.cb-tour-form-body .cf7-two > p br {
  display: none;
}

.cb-tour-form-body .cf7-row {
  margin-bottom: 1.1rem;
}

.cb-tour-form-body label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: Poppins, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--cb-sage-deep, #2d4a32);
  letter-spacing: .02em;
}

/* All inputs / textarea / select */
.cb-tour-form-body input[type="text"],
.cb-tour-form-body input[type="email"],
.cb-tour-form-body input[type="tel"],
.cb-tour-form-body input[type="date"],
.cb-tour-form-body select,
.cb-tour-form-body textarea {
  width: 100%;
  padding: .72rem 1rem;
  background: #fff;
  border: 1.5px solid #dde4d8;
  border-radius: 10px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: .9rem;
  color: #3a4a3e;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.cb-tour-form-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a7a5f' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.cb-tour-form-body input[type="date"] {
  cursor: pointer;
  color-scheme: light;
}

.cb-tour-form-body textarea {
  resize: vertical;
  min-height: 100px;
}

.cb-tour-form-body input:focus,
.cb-tour-form-body select:focus,
.cb-tour-form-body textarea:focus {
  border-color: var(--cb-sage, #5a7a5f);
  box-shadow: 0 0 0 3px rgba(90, 122, 95, .12);
}

.cb-tour-form-body input::placeholder,
.cb-tour-form-body textarea::placeholder {
  color: #a8b8ac;
}

/* Validation error */
.cb-tour-form-body .wpcf7-not-valid {
  border-color: #c97a6f !important;
  box-shadow: 0 0 0 3px rgba(201, 122, 111, .12) !important;
}

.cb-tour-form-body .wpcf7-not-valid-tip {
  font-size: .76rem;
  color: #c97a6f;
  margin-top: .25rem;
  display: block;
}

/* Submit button */
.cb-tour-form-body .cf7-submit {
  margin-top: .5rem;
  margin-bottom: 0;
}

.cb-tour-form-body input[type="submit"],
.cb-tour-form-body .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .88rem 2.4rem;
  background: var(--cb-sage-deep, #2d4a32);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .22s, transform .18s, box-shadow .22s;
  box-shadow: 0 4px 18px rgba(45, 74, 50, .28);
  width: auto;
}

.cb-tour-form-body input[type="submit"]:hover,
.cb-tour-form-body .wpcf7-submit:hover {
  background: #1e3422;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(45, 74, 50, .35);
}

/* CF7 response messages — override CF7's own state-based display rules */

/* Hidden during init / reset / submitting (match CF7's own rules at higher specificity) */
.cb-tour-form-body .wpcf7 form.init .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.resetting .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.submitting .wpcf7-response-output {
  display: none !important;
}

/* Visible for all result states */
.cb-tour-form-body .wpcf7 form.sent .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.failed .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.aborted .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.spam .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.invalid .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.unaccepted .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.payment-required .wpcf7-response-output {
  display: block !important;
}

/* Base styling applied to all states */
.cb-tour-form-body .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: .75rem 1.1rem;
  border-radius: 10px;
  font-size: .88rem;
  font-family: Poppins, system-ui, sans-serif;
  border: none !important;
  line-height: 1.5;
}

/* Success */
.cb-tour-form-body .wpcf7 form.sent .wpcf7-response-output {
  background: #eef6ee;
  color: #2d6a2d;
}

/* Validation / spam / failure */
.cb-tour-form-body .wpcf7 form.invalid .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.unaccepted .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.payment-required .wpcf7-response-output {
  background: #fff8e6;
  color: #7a5c00;
}

.cb-tour-form-body .wpcf7 form.failed .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.aborted .wpcf7-response-output,
.cb-tour-form-body .wpcf7 form.spam .wpcf7-response-output {
  background: #fdf0ee;
  color: #a04030;
}

/* ── Responsive: tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .cb-tour-grid {
    grid-template-columns: 42fr 58fr;
    min-height: 680px;
  }
  .cb-tour-form-panel {
    padding: 3.5rem 2.8rem 3.5rem 3rem;
  }
}

/* ── Responsive: mobile (≤ 767px) ── */
@media (max-width: 767.98px) {
  .cb-tour-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cb-tour-image-col {
    min-height: 280px;
    position: relative;
  }
  .cb-tour-image {
    position: absolute;
  }
  .cb-tour-form-panel {
    padding: 2.5rem 1.5rem;
  }
  .cb-tour-form-body .cf7-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cb-tour-heading {
    font-size: 1.65rem;
  }
}

/* ── Small mobile (≤ 479px) ── */
@media (max-width: 479.98px) {
  .cb-tour-image-col {
    min-height: 220px;
  }
  .cb-tour-form-panel {
    padding: 2rem 1.2rem;
  }
}