/*
============================================
Contact Form 7 - Modern Multi-Step Wizard
Designed for SANGO Theme

Usage: Add html_class="cf7-modern" to your CF7 shortcode
Example: [contact-form-7 id="123" html_class="cf7-modern"]
============================================
*/

/* ========================================
   1. Base Form Container & Layout
   ======================================== */

.wpcf7-form.cf7-modern {
  max-width: 700px;
  margin: 1em auto;
  --cf7-main: var(--wp--preset--color--sango-main, #4285f4);
  --cf7-accent: var(--wp--preset--color--sango-accent, #1a73e8);
  --cf7-success: #46b450;
  --cf7-danger: #dc3232;
  --cf7-warning: #ffb900;
  --cf7-info: #00a0d2;
}

.wpcf7-form.cf7-modern p {
  margin-bottom: 1.1em;
  padding-left: 0.75em;
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease;
  line-height: 1.6;
}

/* Active field indicator - highlights current field group */
.wpcf7-form.cf7-modern p:focus-within,
.wpcf7-form.cf7-modern p.cf7-p-active {
  border-left-color: var(--cf7-main);
}

/* Consistent label/input spacing */
.wpcf7-form.cf7-modern .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.35em;
}

/* ========================================
   2. Input Field Styling
   ======================================== */

/* Modern Input Fields */
.wpcf7-form.cf7-modern input[type="text"],
.wpcf7-form.cf7-modern input[type="email"],
.wpcf7-form.cf7-modern input[type="url"],
.wpcf7-form.cf7-modern input[type="tel"],
.wpcf7-form.cf7-modern input[type="number"],
.wpcf7-form.cf7-modern input[type="date"],
.wpcf7-form.cf7-modern textarea,
.wpcf7-form.cf7-modern select {
  display: block;
  width: 100%;
  padding: 0.5em 0.75em;
  margin-bottom: 0.3em;

  /* Visual Style */
  background-color: #f4f6f9;
  border: 1.5px solid #e1e4ea;
  border-radius: var(--wp--custom--rounded--small, 6px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Typography */
  color: rgba(0, 0, 0, 0.7);
  font-size: 1em;
  line-height: 1.5;
  font-family: inherit;

  /* Interaction */
  transition: all var(--wp--custom--transition--default, 0.3s ease-in-out);
  outline: none;
}

/* Focus State - Enhanced UX */
.wpcf7-form.cf7-modern input[type="text"]:focus,
.wpcf7-form.cf7-modern input[type="email"]:focus,
.wpcf7-form.cf7-modern input[type="url"]:focus,
.wpcf7-form.cf7-modern input[type="tel"]:focus,
.wpcf7-form.cf7-modern input[type="number"]:focus,
.wpcf7-form.cf7-modern input[type="date"]:focus,
.wpcf7-form.cf7-modern textarea:focus,
.wpcf7-form.cf7-modern select:focus {
  background-color: #fff;
  border-color: var(--cf7-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
              0 0 0 3px rgba(66, 133, 244, 0.1);
}

/* Placeholder Styling */
.wpcf7-form.cf7-modern input::placeholder,
.wpcf7-form.cf7-modern textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* Textarea Specific */
.wpcf7-form.cf7-modern textarea {
  min-height: 120px;
  max-width: 100%;
  resize: vertical;
  padding: 0.5em 0.75em;
}

/* Select Dropdown */
.wpcf7-form.cf7-modern select {
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="%23252525" d="M0 0l6 8 6-8z"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 1em) center;
  padding-right: 2.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ========================================
   3. Submit Button Styling
   ======================================== */

/* Modern Submit Button */
.wpcf7-form.cf7-modern input[type="submit"],
.wpcf7-form.cf7-modern .wpcf7-submit {
  /* Layout */
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 2em;
  margin-top: 0.5em;

  /* Visual Style */
  background-color: var(--cf7-main);
  border: none;
  border-radius: var(--wp--custom--rounded--medium, 12px);
  box-shadow: var(--wp--custom--shadow--medium, 0 6px 13px -3px rgba(0, 12, 66, 0.1), 0 0px 1px rgba(0, 30, 100, 0.1));

  /* Typography */
  color: #fff;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;

  /* Interaction */
  cursor: pointer;
  transition: all var(--wp--custom--transition--default, 0.3s ease-in-out);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Button Hover State */
.wpcf7-form.cf7-modern input[type="submit"]:hover,
.wpcf7-form.cf7-modern .wpcf7-submit:hover {
  background-color: var(--cf7-accent);
  box-shadow: var(--wp--custom--shadow--medium-hover, 0 12px 45px -9px rgb(0 0 0 / 23%));
  transform: translateY(-2px);
}

/* Button Active/Pressed State */
.wpcf7-form.cf7-modern input[type="submit"]:active,
.wpcf7-form.cf7-modern .wpcf7-submit:active {
  transform: translateY(0);
  box-shadow: var(--wp--custom--shadow--solid, 0 1px 2px 0 rgba(24, 44, 84, 0.1), 0 1px 3px 1px rgba(24, 44, 84, 0.1));
}

/* Button Disabled State */
.wpcf7-form.cf7-modern input[type="submit"]:disabled,
.wpcf7-form.cf7-modern .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Button Focus State */
.wpcf7-form.cf7-modern input[type="submit"]:focus,
.wpcf7-form.cf7-modern .wpcf7-submit:focus {
  outline: 3px solid rgba(66, 133, 244, 0.3);
  outline-offset: 2px;
}

/* ========================================
   4. Validation & Response Messages
   ======================================== */

/* Hide CF7's default validation tips - wizard JS generates its own */
.wpcf7-form.cf7-modern .wpcf7-not-valid-tip:not(.cf7-step-error) {
  display: none;
}

/* Wizard validation error tips - with slide-in animation */
.wpcf7-form.cf7-modern .wpcf7-not-valid-tip.cf7-step-error {
  display: block;
  margin-top: 0.3em;
  color: var(--cf7-danger);
  font-size: 0.9em;
  font-weight: 500;
  animation: cf7SlideIn 0.3s ease-out;
}

/* Invalid Input Border - with shake animation */
.wpcf7-form.cf7-modern .wpcf7-not-valid {
  border-color: var(--cf7-danger) !important;
  background-color: rgba(220, 50, 50, 0.05);
  animation: cf7Shake 0.4s ease-in-out;
}

/* Response Messages Base - with fade-in animation */
.wpcf7-form.cf7-modern ~ .wpcf7-response-output {
  margin: 1em 0 0.3em;
  padding: 0.75em 1em;
  border: none;
  border-left: 4px solid var(--cf7-info);
  border-radius: var(--wp--custom--rounded--small, 6px);
  background-color: rgba(0, 160, 210, 0.08);
  font-size: 0.95em;
  line-height: 1.6;
  animation: cf7FadeInUp 0.4s ease-out;
}

/* Success State */
.wpcf7.sent .wpcf7-form.cf7-modern ~ .wpcf7-response-output {
  border-left-color: var(--cf7-success);
  background-color: rgba(70, 180, 80, 0.08);
  color: #1e6b23;
}

/* Error States */
.wpcf7.failed .wpcf7-form.cf7-modern ~ .wpcf7-response-output,
.wpcf7.aborted .wpcf7-form.cf7-modern ~ .wpcf7-response-output {
  border-left-color: var(--cf7-danger);
  background-color: rgba(220, 50, 50, 0.08);
  color: #8b1e1e;
}

/* Invalid/Unaccepted States */
.wpcf7.invalid .wpcf7-form.cf7-modern ~ .wpcf7-response-output,
.wpcf7.unaccepted .wpcf7-form.cf7-modern ~ .wpcf7-response-output {
  border-left-color: var(--cf7-warning);
  background-color: rgba(255, 185, 0, 0.08);
  color: #8b6500;
}

/* Spam State */
.wpcf7.spam .wpcf7-form.cf7-modern ~ .wpcf7-response-output {
  border-left-color: #f56e28;
  background-color: rgba(245, 110, 40, 0.08);
  color: #8b3e15;
}

/* ========================================
   5. Special Form Elements
   ======================================== */

/* Card-style Radio & Checkbox Items */
.wpcf7-form.cf7-modern .wpcf7-list-item {
  display: block;
  margin: 0.4em 0;
  padding: 0.6em 0.8em;
  border: 1.5px solid #e1e4ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form.cf7-modern .wpcf7-list-item:hover {
  border-color: var(--cf7-main);
  background: rgba(66, 133, 244, 0.03);
}

/* Card highlight when radio/checkbox inside is checked (JS-managed class) */
.wpcf7-form.cf7-modern .wpcf7-list-item.cf7-item--checked {
  border-color: var(--cf7-main);
  border-left-width: 4px;
  background: rgba(66, 133, 244, 0.06);
  box-shadow: 0 0 0 1px var(--cf7-main);
}

/* Modern Radio Button - styled directly on the input */
.wpcf7-form.cf7-modern input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  border: 1.5px solid #d5dae1;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 0.4em 0 0;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.wpcf7-form.cf7-modern input[type="radio"]:hover {
  border-color: var(--cf7-main);
}

.wpcf7-form.cf7-modern input[type="radio"]:checked {
  border-color: var(--cf7-main);
  border-width: 5px;
}

.wpcf7-form.cf7-modern input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.wpcf7-form.cf7-modern .wpcf7-list-item-label {
  cursor: pointer;
  vertical-align: middle;
}

/* Modern Checkbox - styled directly on the input */
.wpcf7-form.cf7-modern input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  border: 1.5px solid #d5dae1;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 0.4em 0 0;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.wpcf7-form.cf7-modern input[type="checkbox"]:hover {
  border-color: var(--cf7-main);
}

.wpcf7-form.cf7-modern input[type="checkbox"]:checked {
  background-color: var(--cf7-main);
  border-color: var(--cf7-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5L6.5 11.5L12.5 4.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.wpcf7-form.cf7-modern input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

/* File Upload */
.wpcf7-form.cf7-modern input[type="file"] {
  padding: 0.5em;
  border: 2px dashed #e0e3e8;
  border-radius: var(--wp--custom--rounded--small, 6px);
  background-color: #f9fafb;
  cursor: pointer;
  transition: all var(--wp--custom--transition--default, 0.3s ease-in-out);
}

.wpcf7-form.cf7-modern input[type="file"]:hover {
  border-color: var(--cf7-main);
  background-color: rgba(66, 133, 244, 0.03);
}

/* Loading Spinner */
.wpcf7-form.cf7-modern ~ .wpcf7-spinner {
  margin: 0 0 0 1em;
  vertical-align: middle;
}

/* ========================================
   6. Step Wizard Layout
   ======================================== */

/* Step containers - hidden by default */
.wpcf7-form.cf7-modern .cf7-step {
  display: none;
}

.wpcf7-form.cf7-modern .cf7-step.cf7-step--active {
  display: block;
}

/* Directional entrance animations */
.wpcf7-form.cf7-modern .cf7-step.cf7-step--from-right {
  animation: cf7StepSlideFromRight 0.3s ease-out;
}

.wpcf7-form.cf7-modern .cf7-step.cf7-step--from-left {
  animation: cf7StepSlideFromLeft 0.3s ease-out;
}

/* ========================================
   7. Step Indicator
   ======================================== */

.cf7-step-indicator {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 0.8em;
  padding: 1.2em 1em 0;
  user-select: none;
}

.cf7-step-indicator-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  min-width: 60px;
  transition: opacity 0.3s ease;
}

/* Circle (number / checkmark) */
.cf7-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95em;
  border: 2.5px solid #d0d5dd;
  background: #fff;
  color: #999;
  transition: all 0.3s ease;
  position: relative;
}

/* Current step circle */
.cf7-step--current .cf7-step-circle {
  background: var(--cf7-main);
  border-color: var(--cf7-main);
  color: #fff;
  box-shadow: 0 3px 12px rgba(66, 133, 244, 0.35);
  transform: scale(1.08);
}

/* Completed step circle */
.cf7-step--completed .cf7-step-circle {
  background: var(--cf7-success);
  border-color: var(--cf7-success);
  color: #fff;
}

/* Number visible by default, checkmark hidden */
.cf7-step-check {
  display: none;
  font-size: 1.1em;
  line-height: 1;
}

.cf7-step--completed .cf7-step-number {
  display: none;
}

.cf7-step--completed .cf7-step-check {
  display: inline;
}

/* Clickable completed steps */
.cf7-step--completed {
  cursor: pointer;
}

.cf7-step--completed:hover .cf7-step-circle {
  box-shadow: 0 3px 12px rgba(70, 180, 80, 0.4);
  transform: scale(1.05);
}

/* Step label */
.cf7-step-label {
  margin-top: 0.55em;
  font-size: 0.75em;
  color: #999;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Optional step pill */
.cf7-step-optional-pill {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.08em 0.5em;
  font-size: 0.72em;
  font-weight: 600;
  color: #6b7280;
  background: #eef1f5;
  border-radius: 999px;
  vertical-align: middle;
}

.cf7-step--current .cf7-step-optional-pill {
  color: #3b5c88;
  background: #eaf2ff;
}

.cf7-step--current .cf7-step-label {
  color: var(--cf7-main);
  font-weight: 700;
}

.cf7-step--completed .cf7-step-label {
  color: var(--cf7-success);
  font-weight: 600;
}

/* Connector lines between steps */
.cf7-step-connector {
  flex: 1;
  height: 2.5px;
  background: #e0e3e8;
  margin-top: 19px; /* vertically center with circle */
  min-width: 30px;
  transition: background 0.4s ease;
  border-radius: 2px;
}

.cf7-step-connector--active {
  background: var(--cf7-success);
}


/* Compact progress bar below indicator */
.cf7-step-progress {
  height: 6px;
  background: #e6e9ef;
  border-radius: 999px;
  margin: 0.6em auto 1.4em;
  max-width: 520px;
  overflow: hidden;
}

.cf7-step-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cf7-success), var(--cf7-main));
  border-radius: 999px;
  transition: width 0.35s ease;
}

/* ========================================
   8. Navigation Buttons
   ======================================== */

.cf7-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5em;
  padding-top: 1.2em;
  border-top: 1px solid #e8eaed;
  gap: 1em;
}

/* Back button */
.cf7-step-back {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1.4em;
  background: transparent;
  border: 2px solid #d0d5dd;
  border-radius: var(--wp--custom--rounded--medium, 12px);
  color: #555;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}

.cf7-step-back:hover {
  border-color: #999;
  color: #333;
  background: #f5f6f8;
}

.cf7-step-back:active {
  transform: translateY(1px);
}

/* Next button */
.cf7-step-next {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 2em;
  background: var(--cf7-main);
  border: none;
  border-radius: var(--wp--custom--rounded--medium, 12px);
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
  font-family: inherit;
  margin-left: auto;
}

.cf7-step-next:hover {
  background: var(--cf7-accent);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.35);
  transform: translateY(-1px);
}

.cf7-step-next:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
}

.cf7-step-next--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
}

.cf7-step-next--disabled:hover {
  background: var(--cf7-main);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
  transform: none;
}

/* Pulse animation when all required fields are filled */
.cf7-step-next--ready {
  animation: cf7NextPulse 2s ease-in-out infinite;
}

.cf7-step-next--ready:hover {
  animation: none;
}

/* Hint under navigation when Next disabled */
.cf7-step-hint {
  margin-top: 0.6em;
  font-size: 0.85em;
  color: #888;
  text-align: center;
}


/* ※ Note paragraphs */
.wpcf7-form.cf7-modern .cf7-note {
  font-size: 0.82em;
  color: #8a8f98;
  font-weight: 400;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  border-top: none;
  padding-top: 0;
  line-height: 1.6;
}

/* Inline examples under inputs */
.wpcf7-form.cf7-modern .cf7-inline-example {
  font-size: 0.78em;
  color: #9aa0a6;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

/* Submit trust microcopy */
.cf7-submit-trust {
  text-align: center;
  font-size: 0.78em;
  color: #888;
  margin-top: 0.7em;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Skip link inside optional callout */
.cf7-skip-link {
  display: inline-block;
  margin-top: 0.6em;
  padding: 0.4em 1em;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--cf7-main);
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: 6px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cf7-skip-link:hover {
  background: rgba(66, 133, 244, 0.1);
  border-color: var(--cf7-main);
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.12);
}


/* ========================================
   10. Section Dividers & Visual Grouping
   ======================================== */

/* Text-only paragraphs (no form controls) act as section headers */
.wpcf7-form.cf7-modern .cf7-step p:not(:has(.wpcf7-form-control-wrap)) {
  font-weight: 600;
  color: #333;
  font-size: 0.98em;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  padding-top: 0.8em;
  padding-left: 0;
  border-top: 1px solid #e0e3e8;
  border-left: none;
  line-height: 1.6;
}

/* First paragraph in a step - no top border */
.wpcf7-form.cf7-modern .cf7-step p:first-child:not(:has(.wpcf7-form-control-wrap)) {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Sub-notes within section headers */
.wpcf7-form.cf7-modern .cf7-step p:not(:has(.wpcf7-form-control-wrap)) br ~ * {
  font-weight: 400;
  font-size: 0.88em;
  color: #7a8088;
  line-height: 1.6;
}

/* Soften highlighted guidance text */
.wpcf7-form.cf7-modern mark,
.wpcf7-form.cf7-modern span[style*="background"] {
  background-color: #fff4da !important;
  color: #6b5a2a !important;
  padding: 0.05em 0.2em;
  border-radius: 3px;
}

/* ========================================
   12. Field Validation Feedback
   ======================================== */

/* Green checkmark on valid required fields */
.cf7-field-valid {
  position: relative;
}

.cf7-field-valid::after {
  content: '\2713';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf7-success);
  font-size: 1.1em;
  font-weight: 700;
  pointer-events: none;
  animation: cf7CheckPop 0.3s ease-out;
}

/* Adjust check position for inputs (not radio/checkbox groups) */
.cf7-field-valid:has(input[type="text"]),
.cf7-field-valid:has(input[type="email"]),
.cf7-field-valid:has(input[type="tel"]),
.cf7-field-valid:has(select) {
  display: inline-block;
  width: 100%;
}

/* Don't show checkmark on radio/checkbox groups - they have card highlight */
.cf7-field-valid:has(.wpcf7-radio)::after,
.cf7-field-valid:has(.wpcf7-checkbox)::after {
  display: none;
}

/* Invalid field wrapper */
.cf7-field-invalid {
  position: relative;
}

/* ========================================
   13. Required / Optional Badges
   ======================================== */

/* Required field badge */
.cf7-required-badge {
  display: inline-block;
  background: var(--cf7-danger);
  color: #fff;
  font-size: 0.65em;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.4em;
  letter-spacing: 0.08em;
  line-height: 1.4;
  position: relative;
  top: -1px;
}

/* Optional callout info box (replaces ★必須項目はここまでです) */
.cf7-optional-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  background: #eef6ff;
  border: 1px solid #b3d4fc;
  border-radius: var(--wp--custom--rounded--medium, 10px);
  padding: 1em 1.2em;
  margin-bottom: 1.2em;
}

.cf7-optional-callout-icon {
  font-size: 1.4em;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.05em;
}

.cf7-optional-callout-text {
  font-size: 0.88em;
  line-height: 1.6;
  color: #334;
}

.cf7-optional-callout-text strong {
  color: #1a6edd;
  font-size: 1.05em;
}

/* ========================================
   14. Animations
   ======================================== */

@keyframes cf7Shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes cf7SlideIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cf7FadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Step transition animations */
@keyframes cf7StepSlideFromRight {
  from { opacity: 0.4; transform: translateX(15px); }
  to   { opacity: 1;   transform: translateX(0); }
}

@keyframes cf7StepSlideFromLeft {
  from { opacity: 0.4; transform: translateX(-15px); }
  to   { opacity: 1;   transform: translateX(0); }
}

/* Check mark pop animation */
@keyframes cf7CheckPop {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.5); }
  60%  { opacity: 1; transform: translateY(-50%) scale(1.2); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Next button pulse when ready */
@keyframes cf7NextPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25); }
  50%      { box-shadow: 0 4px 20px rgba(66, 133, 244, 0.5), 0 0 0 4px rgba(66, 133, 244, 0.1); }
}

/* ========================================
   15. Responsive Design
   ======================================== */

/* Mobile Optimizations */
@media only screen and (max-width: 480px) {
  .wpcf7-form.cf7-modern {
    margin-top: 0.3em;
    padding: 0 var(--wp--custom--wrap--mobile--padding, 8px);
  }

  .wpcf7-form.cf7-modern p {
    margin-bottom: 0.6em;
  }

  .wpcf7-form.cf7-modern input[type="text"],
  .wpcf7-form.cf7-modern input[type="email"],
  .wpcf7-form.cf7-modern input[type="url"],
  .wpcf7-form.cf7-modern input[type="tel"],
  .wpcf7-form.cf7-modern input[type="number"],
  .wpcf7-form.cf7-modern textarea,
  .wpcf7-form.cf7-modern select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.4em 0.5em;
    margin-bottom: 0.15em;
    min-height: 44px;
  }

  /* Step indicator: compact on mobile */
  .cf7-step-indicator {
    padding: 0.3em 0 0;
    margin-bottom: 0.2em;
  }

  .cf7-step-circle {
    width: 28px;
    height: 28px;
    font-size: 0.78em;
    border-width: 2px;
  }

  .cf7-step--current .cf7-step-circle {
    transform: scale(1.05);
  }

  .cf7-step-connector {
    margin-top: 14px;
    min-width: 12px;
  }

  .cf7-step-indicator-item {
    min-width: 40px;
  }

  .cf7-step-label {
    font-size: 0.6em;
    margin-top: 0.25em;
  }

  .cf7-step-optional-pill {
    font-size: 0.68em;
    margin-left: 0.3em;
    padding: 0.06em 0.45em;
  }

  /* Hide labels for non-current steps on very small screens */
  .cf7-step--upcoming .cf7-step-label,
  .cf7-step--completed .cf7-step-label {
    display: none;
  }

  .cf7-step--current .cf7-step-label {
    display: block;
    font-size: 0.65em;
  }

  /* Progress bar: tighter on mobile */
  .cf7-step-progress {
    height: 4px;
    margin: 0.2em auto 0.4em;
  }

  /* Navigation buttons: full width */
  .cf7-step-nav {
    flex-direction: column-reverse;
    gap: 0.5em;
    margin-top: 0.8em;
    padding-top: 0.7em;
  }

  .cf7-step-next {
    width: 100%;
    justify-content: center;
    padding: 0.75em;
    font-size: 1.05em;
  }

  .cf7-step-back {
    width: 100%;
    justify-content: center;
    padding: 0.5em;
    font-size: 0.9em;
  }

  /* Submit button on mobile */
  .wpcf7-form.cf7-modern input[type="submit"],
  .wpcf7-form.cf7-modern .wpcf7-submit {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    padding: 0.75em 1.2em;
    font-size: 1.05em;
  }

  .wpcf7-form.cf7-modern ~ .wpcf7-response-output {
    padding: 0.5em 0.8em;
    font-size: 0.9em;
  }

  /* Optional callout: tighter on mobile */
  .cf7-optional-callout {
    padding: 0.6em 0.8em;
    gap: 0.4em;
    margin-bottom: 0.7em;
  }

  .cf7-optional-callout-icon {
    font-size: 1.1em;
  }

  .cf7-optional-callout-text {
    font-size: 0.8em;
    line-height: 1.5;
  }

  /* Inline examples */
  .wpcf7-form.cf7-modern .cf7-inline-example {
    font-size: 0.74em;
    margin-bottom: 0.4em;
  }

  .cf7-step-hint {
    font-size: 0.8em;
    margin-top: 0.5em;
  }

  /* Skip link: full width on mobile */
  .cf7-skip-link {
    display: block;
    text-align: center;
    padding: 0.4em;
    font-size: 0.88em;
  }

  /* Card items: compact but touch-friendly */
  .wpcf7-form.cf7-modern .wpcf7-list-item {
    padding: 0.5em 0.7em;
    margin: 0.3em 0;
    min-height: 44px;
  }

  /* Trust microcopy */
  .cf7-submit-trust {
    font-size: 0.7em;
    margin-top: 0.4em;
  }

  /* Section headers: tighter spacing */
  .wpcf7-form.cf7-modern .cf7-step p:not(:has(.wpcf7-form-control-wrap)) {
    font-size: 0.9em;
    margin-top: 0.7em;
    margin-bottom: 0.3em;
    padding-top: 0.5em;
  }
}

/* Tablet Adjustments */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .wpcf7-form.cf7-modern {
    max-width: 600px;
  }

  .cf7-step-circle {
    width: 36px;
    height: 36px;
  }

  .cf7-step-label {
    font-size: 0.68em;
  }
}

/* Desktop Enhancements */
@media only screen and (min-width: 769px) {
  .wpcf7-form.cf7-modern {
    max-width: 700px;
  }
}

/* ========================================
   16. RTL Language Support
   ======================================== */

/* RTL Layout Adjustments */
[dir="rtl"] .wpcf7-form.cf7-modern input[type="checkbox"] {
  margin: 0 0 0 0.4em;
}

[dir="rtl"] .wpcf7-form.cf7-modern input[type="radio"] {
  margin: 0 0 0 0.4em;
}

[dir="rtl"] .wpcf7-form.cf7-modern select {
  background-position: calc(0% + 1em) center;
  padding-right: 1em;
  padding-left: 2.5em;
}

[dir="rtl"] .wpcf7-form.cf7-modern ~ .wpcf7-spinner {
  margin: 0 1em 0 0;
}

[dir="rtl"] .cf7-field-valid::after {
  right: auto;
  left: 8px;
}

[dir="rtl"] .cf7-step-next {
  margin-left: 0;
  margin-right: auto;
}