/**
 * CF7 UX Pro — style.css
 * SaaS-level UI design cho Contact Form 7.
 * Pure CSS, không phụ thuộc framework, responsive, dark-mode ready.
 *
 * Design System:
 * - Font: "DM Sans" (Google Fonts fallback: system-ui)
 * - Palette: Slate/Indigo với accent Electric Blue
 * - Radius: Rounded-xl (12px)
 * - Shadow: Layered soft shadows
 * - Transitions: Cubic-bezier smooth
 */

/* =========================================================================
   0. GOOGLE FONT IMPORT
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* =========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================= */
:root {
  /* Colors */
  --cf7uxp-bg: #ffffff;
  --cf7uxp-surface: #f8fafc;
  --cf7uxp-border: #e2e8f0;
  --cf7uxp-border-focus: #6366f1;
  --cf7uxp-border-valid: #10b981;
  --cf7uxp-border-error: #ef4444;

  --cf7uxp-text: #0f172a;
  --cf7uxp-text-muted: #64748b;
  --cf7uxp-text-placeholder: #94a3b8;

  --cf7uxp-accent: #6366f1;
  /* Indigo */
  --cf7uxp-accent-hover: #4f46e5;
  --cf7uxp-accent-light: #eef2ff;

  --cf7uxp-success: #10b981;
  --cf7uxp-success-bg: #ecfdf5;
  --cf7uxp-error: #ef4444;
  --cf7uxp-error-bg: #fef2f2;
  --cf7uxp-warning: #f59e0b;

  /* Typography */
  --cf7uxp-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --cf7uxp-font-size: 0.9375rem;
  /* 15px */
  --cf7uxp-line-height: 1.6;

  /* Spacing */
  --cf7uxp-input-py: 0.75rem;
  --cf7uxp-input-px: 1rem;
  --cf7uxp-radius: 0.75rem;
  /* 12px */
  --cf7uxp-radius-sm: 0.5rem;

  /* Shadows */
  --cf7uxp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --cf7uxp-shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.18);
  --cf7uxp-shadow-valid: 0 0 0 3px rgb(16 185 129 / 0.16);
  --cf7uxp-shadow-error: 0 0 0 3px rgb(239 68 68 / 0.16);

  /* Transitions */
  --cf7uxp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cf7uxp-duration: 200ms;
}

/* Dark mode — auto detect */
@media (prefers-color-scheme: dark) {
  :root {
    --cf7uxp-bg: #0f172a;
    --cf7uxp-surface: #1e293b;
    --cf7uxp-border: #334155;
    --cf7uxp-text: #f1f5f9;
    --cf7uxp-text-muted: #94a3b8;
    --cf7uxp-text-placeholder: #475569;
    --cf7uxp-accent-light: #1e1b4b;
    --cf7uxp-success-bg: #064e3b;
    --cf7uxp-error-bg: #450a0a;
  }
}

/* =========================================================================
   2. FORM CONTAINER & FIELD WRAP — State management only
   ========================================================================= */
.cf7uxp-form,
.wpcf7-form {
  /* Removed layout-impacting resets to let theme style the form */
  transition: opacity 0.45s var(--cf7uxp-ease), transform 0.45s var(--cf7uxp-ease);
}

.cf7uxp-form.cf7uxp-fadeout,
.wpcf7-form.cf7uxp-fadeout {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.cf7uxp-field-wrap,
.wpcf7-form-control-wrap {
  position: relative;
  display: block;
  /* Removed fixed margin-bottom to respect theme layout */
}

/* Section 4. BASE STYLES REMOVED to avoid layout interference */
/*
.cf7uxp-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
...
*/

/* =========================================================================
   5. FOCUS STATE
   ========================================================================= */
/* Section 5. FOCUS STATE REMOVED to avoid layout interference */

/* =========================================================================
   6. VALID STATE ✅
   ========================================================================= */
/* Section 6. VALID STATE - Keep only checkmark if needed, but removing border colors */
.cf7uxp-field-wrap.cf7uxp-valid input,
.cf7uxp-field-wrap.cf7uxp-valid textarea,
.cf7uxp-field-wrap.cf7uxp-valid select,
.wpcf7-form-control-wrap.cf7uxp-valid [data-cf7uxp-field] {
  border-color: var(--cf7uxp-border-valid);
}

/* Valid checkmark icon sau input */
.cf7uxp-field-wrap.cf7uxp-valid::after,
.wpcf7-form-control-wrap.cf7uxp-valid::after {
  content: '✓';
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf7uxp-border-valid);
  font-size: 1rem;
  font-weight: 600;
  pointer-events: none;
  animation: cf7uxp-pop 0.25s var(--cf7uxp-ease) both;
}

/* Không hiện checkmark trên textarea (chiều cao thay đổi) */
.cf7uxp-field-wrap.cf7uxp-valid:has(textarea)::after,
.wpcf7-form-control-wrap.cf7uxp-valid:has(textarea)::after {
  display: none;
}

/* =========================================================================
   7. ERROR STATE ❌
   ========================================================================= */
.cf7uxp-field-wrap.cf7uxp-error input,
.cf7uxp-field-wrap.cf7uxp-error textarea,
.cf7uxp-field-wrap.cf7uxp-error select,
.wpcf7-form-control-wrap.cf7uxp-error [data-cf7uxp-field] {
  border-color: var(--cf7uxp-border-error) !important;
  /* Keep background subtle if needed, or remove */
}

/* Ẩn CF7 default error tip (ta thay bằng tooltip của riêng mình) */
.wpcf7-not-valid-tip {
  display: none !important;
}

/* =========================================================================
   8. ERROR TOOLTIP
   ========================================================================= */
.cf7uxp-tooltip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.375rem;
  padding: 0.35rem 0.65rem;
  font-size: var(--cf7uxp-font-size, 0.875rem);
  font-weight: 500;
  color: var(--cf7uxp-error);
  background: var(--cf7uxp-error-bg);
  border: 1px solid rgb(239 68 68 / 0.25);
  border-radius: var(--cf7uxp-radius-sm);
  animation: cf7uxp-slide-down 0.18s var(--cf7uxp-ease) both;
  line-height: 1.4;
}

.cf7uxp-tip-icon {
  flex-shrink: 0;
  font-size: 0.875rem;
}

/* =========================================================================
   9. SHAKE ANIMATION (khi error)
   ========================================================================= */
.cf7uxp-shake {
  animation: cf7uxp-shake 0.45s var(--cf7uxp-ease) both !important;
}

/* Sections 10-13 REMOVED to avoid layout interference */

/* =========================================================================
   14. SPINNER
   ========================================================================= */
.cf7uxp-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, currentColor);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
  animation: cf7uxp-spin 0.8s infinite linear;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Hide CF7 default spinner */
.wpcf7-spinner {
  display: none !important;
}

/* Selector cực mạnh để đè bẹp CSS của Theme nếu cần */
.cf7uxp-form input.wpcf7-submit.cf7uxp-btn-loading,
.wpcf7-form input.wpcf7-submit.cf7uxp-btn-loading,
input.cf7uxp-btn-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cstyle%3E.s%7Btransform-origin:center;animation:r .8s infinite linear%7D@keyframes r%7Bto%7Btransform:rotate(360deg)%7D%3C/style%3E%3Cpath class='s' d='M12,4a8,8,0,0,1,8,8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.75rem !important;
  color: transparent !important; /* Đảm bảo chữ biến mất */
}

.cf7uxp-btn-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  cursor: wait !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
}

/* =========================================================================
   15. SUCCESS BOX
   ========================================================================= */
.cf7uxp-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--cf7uxp-success-bg);
  border: 1.5px solid rgb(16 185 129 / 0.3);
  border-radius: calc(var(--cf7uxp-radius) * 1.5);
  opacity: 0;
  transform: scale(0.95) translateY(12px);
  transition: opacity 0.4s var(--cf7uxp-ease),
    transform 0.4s var(--cf7uxp-ease);
}

.cf7uxp-success-box.cf7uxp-success-show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.cf7uxp-success-icon {
  width: 64px;
  height: 64px;
  color: var(--cf7uxp-success);
  margin-bottom: 1.25rem;
}

/* SVG check animation */
.cf7uxp-check-circle {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: cf7uxp-draw 0.6s var(--cf7uxp-ease) 0.2s forwards;
}

.cf7uxp-check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: cf7uxp-draw 0.4s var(--cf7uxp-ease) 0.75s forwards;
}

.cf7uxp-success-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cf7uxp-text);
  margin: 0 0 0.5rem;
}

.cf7uxp-success-msg {
  font-size: 0.9375rem;
  color: var(--cf7uxp-text-muted);
  margin: 0 0 0.75rem;
}

.cf7uxp-redirect-msg {
  font-size: 0.8125rem;
  color: var(--cf7uxp-text-muted);
  font-style: italic;
  margin: 0;
  animation: cf7uxp-pulse 1.5s ease infinite;
}

/* =========================================================================
   16. TOAST NOTIFICATIONS
   ========================================================================= */
.cf7uxp-toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: none;
}

.cf7uxp-toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 260px;
  max-width: 380px;
  padding: 0.875rem 1rem;
  border-radius: var(--cf7uxp-radius);
  font-family: var(--cf7uxp-font);
  font-size: var(--cf7uxp-font-size, 0.875rem);
  font-weight: 500;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.12);
  opacity: 0;
  transform: translateX(110%);
  transition: opacity 0.3s var(--cf7uxp-ease), transform 0.35s var(--cf7uxp-ease);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.cf7uxp-toast-show {
  opacity: 1;
  transform: translateX(0);
}

.cf7uxp-toast-out {
  opacity: 0;
  transform: translateX(110%);
}

.cf7uxp-toast-success {
  background: var(--cf7uxp-success-bg);
  color: var(--cf7uxp-success);
  border: 1px solid var(--cf7uxp-success);
}

.cf7uxp-toast-error {
  background: var(--cf7uxp-error-bg);
  color: var(--cf7uxp-error);
  border: 1px solid var(--cf7uxp-error);
}

.cf7uxp-toast-info {
  background: #1e1b4b;
  color: #c7d2fe;
  border: 1px solid #312e81;
}

.cf7uxp-toast-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cf7uxp-toast-msg {
  flex: 1;
  line-height: 1.4;
}

.cf7uxp-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  color: inherit;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  transition: opacity var(--cf7uxp-duration);
}

.cf7uxp-toast-close:hover {
  opacity: 1;
}

/* =========================================================================
   17. CF7 DEFAULT MESSAGES — Override với Pro UI
   ========================================================================= */
.wpcf7-response-output {
  display: none !important;
  /* Ta dùng toast thay thế */
}

/* =========================================================================
   18. RESPONSIVE
   ========================================================================= */
@media (max-width: 480px) {
  .cf7uxp-toast-container {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .cf7uxp-toast {
    min-width: unset;
    max-width: 100%;
  }

  .cf7uxp-success-box {
    padding: 2rem 1.25rem;
  }
}

/* =========================================================================
   19. KEYFRAME ANIMATIONS
   ========================================================================= */

/* Shake khi lỗi */
@keyframes cf7uxp-shake {
  0% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-6px);
  }

  30% {
    transform: translateX(5px);
  }

  45% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-2px);
  }

  90% {
    transform: translateX(1px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Tooltip slide down */
@keyframes cf7uxp-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pop cho valid checkmark */
@keyframes cf7uxp-pop {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.6);
  }

  70% {
    transform: translateY(-50%) scale(1.15);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Spinner */
@keyframes cf7uxp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* SVG draw */
@keyframes cf7uxp-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Pulse cho redirect message */
@keyframes cf7uxp-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* =========================================================================
   20. PRINT — ẩn toast, success box không cần thiết
   ========================================================================= */
@media print {

  .cf7uxp-toast-container,
  .cf7uxp-success-box {
    display: none;
  }
}