/* ===============================
   CONTACT FORM 7 – NEXGEN STYLE
   File: assets/css/contact-form.css
   =============================== */

/* Wrap & layout */
.cf7-wrap{
  color: var(--color-text);
}
.cf7-wrap .field{ 
  padding:0px;
  margin: 0px; 
  font-size: 0.875rem;
  font-weight: bold;
}
.cf7-wrap .field a{
  color: var(--color-primary);
  text-decoration: none;
}
.cf7-wrap .field a:hover {
  color: var(--color-muted);
}
.cf7-wrap .field-grid.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px){
  .cf7-wrap .field-grid.two{ grid-template-columns: 1fr; }
}

/* Label */
.cf7-wrap label{
  display:block;
  font-size: 0.875rem;
  font-weight:400;
  margin: 0 0 8px;
  color: var(--color-text);
}

/* Inputs */
.cf7-wrap input[type="text"],
.cf7-wrap input[type="email"],
.cf7-wrap input[type="tel"],
.cf7-wrap textarea,
.cf7-wrap select{
  width:100%;
  appearance:none;
  background:none;
  border:1px solid var(--color-border);
  border-radius: 4px;
  height: 38px;
  padding:0 14px;
  font-size:0.875rem;
  line-height:1.4;
  outline:none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.cf7-wrap textarea{
  min-height:140px;
  resize: vertical;
  font-family: 'Inter', Arial, sans-serif;
  padding-top:8px;
}

/* Focus */
.cf7-wrap input:focus,
.cf7-wrap textarea:focus,
.cf7-wrap select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(10,91,211,.12);
}

/* Placeholder */
.cf7-wrap ::placeholder{ color:var(--color-muted); }

/* Select (dropdown arrow) */
.cf7-wrap select{
  width: 100%;
  height: 38px;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%236b7280" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.all-fields-note{
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 4px;
  text-align: right;
}
/* Checkbox consent */
.cf7-wrap .wpcf7-list-item{
  margin: 0; /* CF7 mặc định thêm margin */
}
.cf7-wrap input[type="checkbox"]{
  width:18px; height:18px; margin-right:8px;
  border-radius:4px; vertical-align:middle;
}
.cf7-wrap .consent-text{
  color: var(--color-text);
  font-size:0.75rem;
  font-weight: 200;
  line-height:1.5;
}

/* Submit button */
.cf7-wrap .submit .btn,
.cf7-wrap input[type="submit"].btn{
  display:block;
  width:100%;
  border:none;
  border-radius:4px;
  padding:14px 18px;
  font-weight:700;
  font-size:1rem;
  background: var(--color-primary);
  color:#fff;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .02s ease;
}
.cf7-wrap .submit .btn:hover{
  background: var(--color-primary-hover);
}
.cf7-wrap .submit .btn:active{ transform: translateY(1px); }

/* CF7 states & messages */
.wpcf7 form .wpcf7-response-output{
  margin:16px 0 0;
}
.wpcf7 form.init .wpcf7-response-output{ display:none; }

.wpcf7-not-valid-tip{ 
  position: absolute;
  margin-top:6px; 
  font-size:12px; 
  color:#B91C1C; 
}
.wpcf7 .wpcf7-not-valid{
  border-color:#FCA5A5 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* Hide default spinner or move it */
.wpcf7 .wpcf7-spinner{ margin-left:8px; }
/* Contact Form 7 styles */
/* Tạo khoảng cách giữa field và khung message chung 
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 16px;  /* có thể tăng lên 20–24px nếu muốn rộng hơn */
/* Đảm bảo khung message nằm hẳn phía dưới, không bị kéo lên chèn */
.wpcf7-response-output {
    position: static !important;
    margin-top: 8px;        /* hoặc 8–12px nếu muốn thêm khoảng cách */
}
/* Nếu cần, cho text lỗi từng field xuống một dòng rõ ràng */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
}

/* Khung thông báo chung (success + error) */
.wpcf7-response-output {
    border-radius: 4px;
    padding: 12px 18px;
    font-size: 14px;
    background: #f8f3d6;
    border: 0.5px solid #8c6d1f !important;
    color:#8c6d1f;
    margin-top: 12px;
}
.wpcf7 form.sent .wpcf7-response-output {
    background: #e9f0d3 ;
    border-color: #008341 !important;
    color: #008341 !important;
}
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
    background: #f9d6d3 ;
    border-color: #b20101 !important;
    color: #b20101 !important;
}