/* Style hoá Contact Form 7 theo đúng thẩm mỹ Luviart — thay cho 2 form tự viết trước đây
   (trang Liên hệ + "Nhận tin" footer), theo chính sách form mới: mọi form dùng CF7 rồi đẩy
   Brevo (xem inc/class-cf7-brevo.php). Dùng token màu (var(--lv-*)) để tự đổi đúng dark/light,
   khác bản CSS tham khảo gốc (Website/cf7-newsletter-style.css) vốn hardcode hex tĩnh. */

/* ---- Form Liên hệ (.luviart-contact-form) — khung như .lv-comment-form cũ ---- */
.luviart-contact-form {
  background: var(--lv-card);
  border: 1px solid var(--lv-border);
  padding: 20px;
}
.luviart-contact-form label {
  display: block;
  font-family: var(--lv-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lv-text);
  opacity: .7;
  margin-bottom: 6px;
}
.luviart-contact-form .wpcf7-form-control-wrap { display: block; margin-bottom: 14px; }
.luviart-contact-form .wpcf7-form-control.wpcf7-text,
.luviart-contact-form .wpcf7-form-control.wpcf7-email,
.luviart-contact-form .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  background: var(--lv-bg);
  border: 1px solid var(--lv-border);
  color: var(--lv-text);
  font-family: var(--lv-font-body);
  font-size: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
}
.luviart-contact-form .wpcf7-form-control.wpcf7-textarea { resize: vertical; }
.luviart-contact-form .wpcf7-form-control:focus { outline: none; border-color: var(--lv-primary); }
.luviart-contact-form .wpcf7-form-control-wrap.lv-submit-tip { margin-top: 6px; margin-bottom: 0; }
.luviart-contact-form .wpcf7-form-control.wpcf7-submit {
  background: var(--lv-primary);
  color: var(--lv-bg);
  border: none;
  font-family: var(--lv-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--lv-radius);
  cursor: pointer;
}
.luviart-contact-form .wpcf7-form-control.wpcf7-submit:hover { background: var(--lv-primary-hover); }
.luviart-contact-form .wpcf7-response-output {
  margin: 14px 0 0;
  border: 1px solid var(--lv-border);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--lv-text);
}
.luviart-contact-form form.sent .wpcf7-response-output { border-color: var(--lv-primary); color: var(--lv-primary); }
.luviart-contact-form form.failed .wpcf7-response-output,
.luviart-contact-form form.aborted .wpcf7-response-output,
.luviart-contact-form form.invalid .wpcf7-response-output { border-color: var(--lv-brass); }
.luviart-contact-form .wpcf7-not-valid-tip { color: var(--lv-text-secondary); font-size: 12px; margin-top: 4px; display: block; }

/* ---- Form "Nhận tin" footer (.luviart-newsletter-form) — 1 hàng ngang gọn ---- */
.luviart-newsletter-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  container-type: inline-size;
}
/* wpcf7_autop bọc mỗi field trong 1 thẻ <p> riêng (do form definition có dòng trống giữa các
   field, kể cả trước khi bỏ checkbox acceptance) — <p> mới là flex item THẬT của
   .luviart-newsletter-form, không phải span .wpcf7-form-control-wrap bên trong (order/flex đặt
   trên span không có tác dụng gì vì span không phải con trực tiếp của flex container). Lỗi này
   có từ trước (đã xác nhận qua test lại content gốc còn checkbox), chỉ lộ rõ layout lệch hơn sau
   khi bỏ checkbox (bug 0024) — sửa bằng display:contents để <p> "biến mất" khỏi cây box, đẩy
   chính các span trở thành flex item thật, để order/flex/width đã khai đúng ý đồ ban đầu. */
.luviart-newsletter-form p { display: contents; }
.luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-email"] { order: 1 !important; flex: 1 1 100%; min-width: 0; width: 100%; }
.luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-submit"] { order: 3 !important; flex: 1 1 100%; width: 100%; }
.luviart-newsletter-form .wpcf7-form-control.wpcf7-email {
  font-family: var(--lv-font-body);
  font-size: 13px;
  color: var(--lv-text);
  background: var(--lv-bg);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-radius);
  padding: 10px 12px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}
.luviart-newsletter-form .wpcf7-form-control.wpcf7-email:focus { border-color: var(--lv-primary); outline: none; }
.luviart-newsletter-form .wpcf7-form-control.wpcf7-submit {
  font-family: var(--lv-font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  background: var(--lv-primary) !important;
  color: var(--lv-bg) !important;
  border: none !important;
  border-radius: var(--lv-radius) !important;
  padding: 0 16px !important;
  height: 40px;
  cursor: pointer;
  margin: 0 !important;
  white-space: nowrap;
  width: 100%;
}
.luviart-newsletter-form .wpcf7-form-control.wpcf7-submit:hover { background: var(--lv-primary-hover) !important; }
.luviart-newsletter-form .wpcf7-response-output { width: 100%; order: 4; margin: 6px 0 0; font-size: 12px; color: var(--lv-text-secondary); border: none; padding: 0; }

@container (min-width: 320px) {
  .luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-email"] {
    flex: 1 1 210px;
    min-width: 210px;
    width: auto;
  }
  .luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-submit"] {
    flex: 0 0 auto;
    width: auto;
  }
  .luviart-newsletter-form .wpcf7-form-control.wpcf7-submit { width: auto; }
}

@media (max-width: 640px) {
  .luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-email"],
  .luviart-newsletter-form .wpcf7-form-control-wrap[data-name="your-submit"] {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .luviart-newsletter-form .wpcf7-form-control.wpcf7-submit { width: 100%; }
}

/* ---- Tooltip "đồng ý chính sách bảo mật" khi hover/focus nút submit (bug 0024) — thay cho
   checkbox acceptance CF7 đã gỡ khỏi định nghĩa cả 2 form qua wp-admin (post 6548/6524).
   Dùng cặp token cố định --lv-overlay-strong/--lv-text-on-dark (không đảo theo dark mode,
   xem LUVIART-DEV-REFERENCE.md mục 31) vì đây là lớp phủ nổi trên trang, không phải nền trang.
   :focus-within (không chỉ :hover) để hoạt động khi bấm/chạm nút trên di động — hầu hết trình
   duyệt di động focus vào <input type=submit> khi chạm, không có :hover thật trên touch. ---- */
.lv-submit-tip { position: relative; display: inline-block; }
.lv-submit-tip::after,
.lv-submit-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  transition: opacity .15s ease, visibility .15s ease;
}
.lv-submit-tip::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 220px;
  background: var(--lv-overlay-strong);
  color: var(--lv-text-on-dark);
  font-family: var(--lv-font-body);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: var(--lv-radius);
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.lv-submit-tip::before {
  bottom: calc(100% + 5px);
  border: 5px solid transparent;
  border-top-color: var(--lv-overlay-strong);
}
.lv-submit-tip:hover::after,
.lv-submit-tip:hover::before,
.lv-submit-tip:focus-within::after,
.lv-submit-tip:focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* Thông báo gửi form (thành công/lỗi) giờ hiện qua lightbox giữa màn hình (assets/js/cf7-modal.js)
   thay vì dòng chữ nhỏ dưới form — ẩn hẳn ô .wpcf7-response-output mặc định của CF7 để tránh
   hiện trùng lặp 2 thông báo cùng lúc. */
.wpcf7-response-output { display: none !important; }

/* ---- Lightbox thông báo gửi form CF7 ---- */
.lv-cf7-modal {
  position: fixed; inset: 0; z-index: 95; background: var(--lv-overlay-strong);
  display: none; align-items: center; justify-content: center; cursor: pointer; padding: 24px;
}
.lv-cf7-modal.lv-cf7-modal-open { display: flex; }
.lv-cf7-modal-box {
  background: var(--lv-card); border: 1px solid var(--lv-border); border-radius: var(--lv-radius);
  padding: 28px 32px; max-width: 420px; text-align: center; cursor: default;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.lv-cf7-modal-text {
  margin: 0; font-family: var(--lv-font-body); font-size: 15px; line-height: 1.6; color: var(--lv-text);
}
.lv-cf7-modal.lv-cf7-modal-error .lv-cf7-modal-box { border-color: var(--lv-brass); }
.lv-cf7-modal.lv-cf7-modal-error .lv-cf7-modal-text { color: var(--lv-text-secondary); }