/* CF7 boxed teal (scoped) */
.cf7-wrap{
  position: relative !important;
  margin: 0 auto !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  box-shadow: 0 20px 60px rgba(2, 8, 23, .10) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

.cf7-wrap::before{
  content:"" !important;
  position:absolute !important;
  inset:-40% -30% auto -30% !important;
  height: 260px !important;
  background: radial-gradient(circle at 30% 30%, rgba(20,184,166,.30), transparent 65%) !important;
  pointer-events:none !important;
}

.cf7-wrap.cf7-boxed--sm{ max-width: 520px !important; }
.cf7-wrap.cf7-boxed--md{ max-width: 680px !important; }
.cf7-wrap.cf7-boxed--lg{ max-width: 820px !important; }

/* form spacing */
.cf7-wrap .wpcf7,
.cf7-wrap .wpcf7 form{ margin: 0 !important; }

.cf7-wrap .wpcf7 form p{ margin: 0 0 14px 0 !important; }
.cf7-wrap .wpcf7 form p:last-child{ margin-bottom: 0 !important; }

.cf7-wrap .wpcf7 form label{
  display:block !important;
  color:#64748b !important;
  font-size:13px !important;
  line-height:1.3 !important;
  margin:0 0 6px !important;
}

.cf7-wrap .wpcf7 form input[type="text"],
.cf7-wrap .wpcf7 form input[type="email"],
.cf7-wrap .wpcf7 form input[type="tel"],
.cf7-wrap .wpcf7 form input[type="url"],
.cf7-wrap .wpcf7 form input[type="number"],
.cf7-wrap .wpcf7 form select,
.cf7-wrap .wpcf7 form textarea{
  width:100% !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  border:1px solid rgba(15, 23, 42, .12) !important;
  padding:12px 14px !important;
  background: rgba(255,255,255,.88) !important;
  color:#0f172a !important;
  outline:none !important;
}

.cf7-wrap .wpcf7 form input:focus,
.cf7-wrap .wpcf7 form select:focus,
.cf7-wrap .wpcf7 form textarea:focus{
  border-color: rgba(20,184,166,.60) !important;
  box-shadow: 0 0 0 4px rgba(20,184,166,.16) !important;
}

.cf7-wrap .wpcf7 form textarea{
  min-height:120px !important;
  resize: vertical !important;
}

.cf7-wrap .wpcf7 form .wpcf7-submit{
  width:100% !important;
  border:0 !important;
  border-radius:14px !important;
  padding:12px 16px !important;
  color:#fff !important;
  font-weight:600 !important;
  background: linear-gradient(135deg, #14b8a6, #0ea5a4) !important;
  box-shadow: 0 12px 30px rgba(20,184,166,.25) !important;
  cursor:pointer !important;
}

.cf7-wrap .wpcf7-response-output{
  margin: 14px 0 0 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  background: rgba(255,255,255,.75) !important;
  color:#0f172a !important;
}

@media (max-width: 640px){
  .cf7-wrap{
    padding:16px !important;
    border-radius:16px !important;
  }
}
/* ==============================
   Align right image with form (desktop)
   Add to bottom of cf7-fix.css
   ============================== */

@media (min-width: 992px){

  /* make the two columns equal height */
  section.book .row{
    display: flex !important;
    align-items: stretch !important;
  }

  /* keep Bootstrap columns behaving inside flex row */
  section.book .row > [class*="col-"]{
    display: flex !important;
    flex-direction: column !important;
  }

  /* right column: make the card fill the column height */
  section.book .col-sm-5 .query-card{
    height: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* let the image take all remaining space */
  section.book .col-sm-5 .query-card img{
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* keep title at the bottom (if present) */
  section.book .col-sm-5 .query-card h3{
    flex: 0 0 auto !important;
  }

}