/*
 * GL Academy — WPForms Custom Styles
 * Drop this file path into: Appearance → Customize → Additional CSS
 * OR enqueue it in functions.php via wp_enqueue_style()
 *
 * Targets WPForms 1.8+ output (Pro).
 * Uses the same design tokens as main.css.
 */

/* ── Tokens (mirrored from main.css) ──────────────────── */
.wpforms-container {
  --gla-navy-900:  #021C49;
  --gla-navy-800:  #052868;
  --gla-navy-700:  #0B3A8C;
  --gla-royal-600: #1556B5;
  --gla-azure-500: #2178E0;
  --gla-sky-300:   #8FB6E8;
  --gla-sky-100:   #DCE7F5;
  --gla-gold-700:  #8C6A1F;
  --gla-gold-600:  #B08832;
  --gla-gold-500:  #C9A961;
  --gla-gold-300:  #E4CC8A;
  --gla-gold-100:  #F5ECD3;
  --gla-ink:       #0F172A;
  --gla-ink-2:     #3D4757;
  --gla-ink-3:     #6B7385;
  --gla-line:      #E4E7EE;
  --gla-line-soft: #EFF1F5;
  --gla-paper:     #FFFFFF;
  --gla-paper-2:   #F6F7FA;
  --gla-paper-3:   #FAFBFC;
  --shadow-xs: 0 1px 2px rgba(5,40,104,.05);
  --shadow-sm: 0 1px 3px rgba(5,40,104,.06), 0 1px 2px rgba(5,40,104,.04);
  --shadow-md: 0 6px 16px -4px rgba(5,40,104,.08), 0 2px 4px rgba(5,40,104,.04);
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius-input: 10px;
  --radius-btn:   10px;
}

/* ── Container & Form Reset ───────────────────────────── */
.wpforms-container {
  font-family: var(--font-sans);
  color: var(--gla-ink);
  max-width: 100%;
}

.wpforms-form * {
  box-sizing: border-box;
}

/* ── Labels ───────────────────────────────────────────── */
.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field-label-inline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gla-ink-2);
  letter-spacing: .01em;
  margin-bottom: 6px;
  display: block;
}

.wpforms-form .wpforms-field-label .wpforms-required-label {
  color: var(--gla-royal-600);
  margin-left: 2px;
}

/* Sub-labels (e.g. First / Last name) */
.wpforms-form .wpforms-field-sublabel {
  font-size: 11px;
  color: var(--gla-ink-3);
  margin-top: 4px;
  font-weight: 500;
}

/* ── All Input-like Elements ──────────────────────────── */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="url"],
.wpforms-form input[type="password"],
.wpforms-form input[type="date"],
.wpforms-form input[type="time"],
.wpforms-form input[type="search"],
.wpforms-form select,
.wpforms-form textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--gla-ink);
  background: var(--gla-paper);
  border: 1.5px solid var(--gla-line);
  border-radius: var(--radius-input);
  padding: 11px 14px;
  width: 100%;
  line-height: 1.5;
  transition: border-color .18s, box-shadow .18s, background .18s;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--shadow-xs);
  outline: none;
}

.wpforms-form input[type="text"]::placeholder,
.wpforms-form input[type="email"]::placeholder,
.wpforms-form input[type="tel"]::placeholder,
.wpforms-form input[type="number"]::placeholder,
.wpforms-form input[type="url"]::placeholder,
.wpforms-form input[type="password"]::placeholder,
.wpforms-form textarea::placeholder {
  color: var(--gla-ink-3);
  font-weight: 400;
}

/* Focus */
.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form input[type="tel"]:focus,
.wpforms-form input[type="number"]:focus,
.wpforms-form input[type="url"]:focus,
.wpforms-form input[type="password"]:focus,
.wpforms-form input[type="date"]:focus,
.wpforms-form input[type="time"]:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
  border-color: var(--gla-royal-600);
  box-shadow: 0 0 0 3px rgba(21,86,181,.12);
  background: var(--gla-paper);
}

/* Hover */
.wpforms-form input[type="text"]:hover:not(:focus),
.wpforms-form input[type="email"]:hover:not(:focus),
.wpforms-form input[type="tel"]:hover:not(:focus),
.wpforms-form input[type="number"]:hover:not(:focus),
.wpforms-form select:hover:not(:focus),
.wpforms-form textarea:hover:not(:focus) {
  border-color: var(--gla-sky-300);
}

/* ── Select Custom Arrow ──────────────────────────────── */
.wpforms-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

.wpforms-form select option {
  color: var(--gla-ink);
  font-weight: 500;
}

/* ── Textarea ─────────────────────────────────────────── */
.wpforms-form textarea {
  resize: vertical;
  min-height: 110px;
}

/* ── Field Spacing ────────────────────────────────────── */
.wpforms-form .wpforms-field {
  padding: 0 0 18px;
}

/* ── Section Divider / Heading ────────────────────────── */
.wpforms-form .wpforms-section-divider {
  border: none;
  border-top: 1.5px solid var(--gla-line-soft);
  margin: 8px 0 20px;
}

.wpforms-form .wpforms-section-divider h3,
.wpforms-form .wpforms-field-html h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gla-royal-600);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--gla-line-soft);
}

/* ── Multi-Column Rows (WPForms Pro) ──────────────────── */
.wpforms-form .wpforms-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
}

.wpforms-form .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 0;
  min-width: 200px;
  padding: 0;
}

@media (max-width: 600px) {
  .wpforms-form .wpforms-field-row .wpforms-field-row-block {
    flex: 1 1 100%;
  }
}

/* ── Name Field (First / Last side-by-side) ───────────── */
.wpforms-form .wpforms-field-name .wpforms-field-row {
  gap: 12px;
}

/* ── Checkbox & Radio ─────────────────────────────────── */
.wpforms-form .wpforms-field-checkbox ul,
.wpforms-form .wpforms-field-radio ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpforms-form .wpforms-field-checkbox li label,
.wpforms-form .wpforms-field-radio li label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gla-ink-2);
  cursor: pointer;
}

.wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.wpforms-form .wpforms-field-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--gla-line);
  border-radius: 4px;
  background: var(--gla-paper);
  accent-color: var(--gla-royal-600);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.wpforms-form .wpforms-field-radio input[type="radio"] {
  border-radius: 50%;
}

/* Single-field checkbox (Terms & Conditions style) */
.wpforms-form .wpforms-field-checkbox.wpforms-one-choice li label,
.wpforms-form .wpforms-field-gdpr-checkbox li label {
  font-size: 13px;
  color: var(--gla-ink-3);
  line-height: 1.5;
}

.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--gla-royal-600);
  flex-shrink: 0;
  padding: 0;
}

/* ── Phone Field ──────────────────────────────────────── */
.wpforms-form .wpforms-field-phone input[type="tel"] {
  letter-spacing: .01em;
}

/* ── Date / Time Field ────────────────────────────────── */
.wpforms-form .wpforms-field-date-time .wpforms-date,
.wpforms-form .wpforms-field-date-time .wpforms-time {
  display: inline-block;
  width: 100%;
}

/* WPForms renders a Flatpickr-based date — keep consistent */
.wpforms-form .wpforms-field-date-time input.flatpickr-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* ── Likert / Rating Field ────────────────────────────── */
.wpforms-form .wpforms-field-rating .wpforms-field-rating-item input:checked + label,
.wpforms-form .wpforms-field-rating .wpforms-field-rating-item label:hover {
  color: var(--gla-gold-500);
}

/* ── Submit Button ────────────────────────────────────── */
.wpforms-form .wpforms-submit-container {
  padding-top: 8px;
}

.wpforms-form .wpforms-submit {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--gla-navy-800) 0%, var(--gla-royal-600) 100%);
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .18s, box-shadow .18s, transform .15s;
  box-shadow: 0 4px 14px -4px rgba(5,40,104,.35);
  min-width: 200px;
  justify-content: center;
}

.wpforms-form .wpforms-submit:hover {
  opacity: .92;
  box-shadow: 0 8px 20px -6px rgba(5,40,104,.40);
  transform: translateY(-1px);
}

.wpforms-form .wpforms-submit:active {
  transform: translateY(0);
  opacity: 1;
}

.wpforms-form .wpforms-submit:disabled,
.wpforms-form .wpforms-submit[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ── Validation Errors ────────────────────────────────── */
.wpforms-form .wpforms-error-container,
.wpforms-form .wpforms-error-container-alt {
  background: #FFF5F5;
  border: 1.5px solid #FECACA;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #B91C1C;
}

.wpforms-form label.wpforms-error {
  font-size: 12px;
  font-weight: 600;
  color: #DC2626;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wpforms-form input.wpforms-error,
.wpforms-form select.wpforms-error,
.wpforms-form textarea.wpforms-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* ── Confirmation / Success Message ───────────────────── */
.wpforms-confirmation-container-full,
.wpforms-container.wpforms-confirmation-container {
  background: var(--gla-sky-100);
  border: 1.5px solid var(--gla-sky-300);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  font-size: 15px;
  color: var(--gla-navy-800);
  font-weight: 500;
  line-height: 1.6;
}

.wpforms-confirmation-container-full p:first-child {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ── Multi-Page Form Progress Bar ─────────────────────── */
.wpforms-page-indicator {
  margin-bottom: 28px;
}

.wpforms-page-indicator.circles .wpforms-page-indicator-page {
  background: var(--gla-line-soft);
  border: 2px solid var(--gla-line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gla-ink-3);
  transition: background .2s, border-color .2s, color .2s;
}

.wpforms-page-indicator.circles .wpforms-page-indicator-page.active {
  background: var(--gla-royal-600);
  border-color: var(--gla-royal-600);
  color: #fff;
}

.wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
  background: var(--gla-line-soft);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
  background: linear-gradient(90deg, var(--gla-royal-600), var(--gla-azure-500));
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

/* ── Previous / Next Page Buttons ─────────────────────── */
.wpforms-form .wpforms-page-button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 11px 28px;
  cursor: pointer;
  transition: opacity .18s, box-shadow .18s;
  border: none;
}

.wpforms-form .wpforms-page-next {
  color: #fff;
  background: linear-gradient(135deg, var(--gla-navy-800) 0%, var(--gla-royal-600) 100%);
  box-shadow: 0 4px 14px -4px rgba(5,40,104,.35);
}

.wpforms-form .wpforms-page-next:hover { opacity: .9; }

.wpforms-form .wpforms-page-previous {
  color: var(--gla-ink-2);
  background: var(--gla-paper-2);
  border: 1.5px solid var(--gla-line);
}

.wpforms-form .wpforms-page-previous:hover {
  background: var(--gla-line-soft);
}

/* ── File Upload Field ────────────────────────────────── */
.wpforms-form .wpforms-field-file-upload input[type="file"] {
  border: 2px dashed var(--gla-line);
  border-radius: var(--radius-input);
  padding: 20px;
  background: var(--gla-paper-3);
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  color: var(--gla-ink-3);
  transition: border-color .18s, background .18s;
}

.wpforms-form .wpforms-field-file-upload input[type="file"]:hover,
.wpforms-form .wpforms-field-file-upload input[type="file"]:focus {
  border-color: var(--gla-royal-600);
  background: var(--gla-sky-100);
  outline: none;
}

/* ── CAPTCHA / reCAPTCHA ──────────────────────────────── */
.wpforms-form .wpforms-field-captcha,
.wpforms-form .wpforms-field-recaptcha {
  display: flex;
  justify-content: flex-start;
}

/* ── HTML / Content Fields ────────────────────────────── */
.wpforms-form .wpforms-field-html {
  color: var(--gla-ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.wpforms-form .wpforms-field-html a {
  color: var(--gla-royal-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wpforms-form .wpforms-field-html a:hover {
  color: var(--gla-navy-800);
}

/* ── Description / Help Text ──────────────────────────── */
.wpforms-form .wpforms-field-description {
  font-size: 12px;
  color: var(--gla-ink-3);
  margin-top: 5px;
  line-height: 1.5;
}

/* ── Divider Line ─────────────────────────────────────── */
.wpforms-form hr {
  border: none;
  border-top: 1.5px solid var(--gla-line-soft);
  margin: 4px 0 20px;
}

/* ── Smart Phone / Country Code Layout ───────────────────
   WPForms renders the phone country dial code as a separate
   select; target both elements in that wrapper.           */
.wpforms-form .wpforms-smart-phone-field {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wpforms-form .wpforms-smart-phone-field .wpforms-smart-phone-field-flag-wrap {
  flex: 0 0 90px;
}

.wpforms-form .wpforms-smart-phone-field .wpforms-smart-phone-field-flag-wrap select {
  padding-right: 8px;
  background-position: right 6px center;
}

.wpforms-form .wpforms-smart-phone-field input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Repeater Fields (WPForms Pro) ────────────────────── */
.wpforms-field-repeater .wpforms-field-repeater-add-row,
.wpforms-field-repeater .wpforms-field-repeater-remove-row {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  border: none;
  transition: background .15s;
}

.wpforms-field-repeater .wpforms-field-repeater-add-row {
  color: var(--gla-royal-600);
  background: var(--gla-sky-100);
}

.wpforms-field-repeater .wpforms-field-repeater-add-row:hover {
  background: var(--gla-sky-300);
  color: var(--gla-navy-800);
}

.wpforms-field-repeater .wpforms-field-repeater-remove-row {
  color: #B91C1C;
  background: #FEF2F2;
}

.wpforms-field-repeater .wpforms-field-repeater-remove-row:hover {
  background: #FECACA;
}

/* ── Signature Field ──────────────────────────────────── */
.wpforms-form .wpforms-field-signature canvas {
  border: 1.5px solid var(--gla-line);
  border-radius: var(--radius-input);
  background: var(--gla-paper);
}

/* ── Responsive Tweaks ────────────────────────────────── */
@media (max-width: 600px) {
  .wpforms-form .wpforms-submit {
    width: 100%;
  }

  .wpforms-form .wpforms-field-row {
    flex-direction: column;
    gap: 0;
  }
}