/**
 * Globonex Executive Brand Theme - Modular Form Design System
 *
 * Upgrades styling, color formatting, layout, and feedback states for:
 * 1. Get a Quote Form & Modal (Service cards, questionnaires, inputs, WhatsApp routing)
 * 2. Contact Form & Shortcode Widget (Cards, floating/inset inputs, math captcha, states)
 * 3. Form Plugins Integration (Contact Form 7, WPForms, Gravity Forms, Fluent Forms)
 *
 * Inherits dynamic theme preset colors matching theme-tables.css.
 */

:root {
  /* ==========================================================================
     Default Form CSS Custom Properties (Inherited dynamically from active theme preset)
     ========================================================================== */
  --form-primary-color: var(--primary-color, #0564d2);
  --form-primary-hover: var(--primary-hover, #044ea5);
  --form-accent-color: var(--primary-color, #0564d2);
  --form-bg-card: var(--bg-card, #ffffff);
  --form-card-border: var(--bg-card-border, #e2e8f0);
  --form-input-bg: #ffffff;
  --form-input-border: #cbd5e1;
  --form-input-focus-border: var(--primary-color, #0564d2);
  --form-input-focus-shadow: rgba(5, 100, 210, 0.18);
  --form-input-text: var(--text-main, #1e293b);
  --form-input-placeholder: #94a3b8;
  --form-label-color: var(--headings-color, #0f172a);
  --form-text-muted: var(--text-muted, #64748b);
  --form-btn-bg: var(--btn-primary-bg, var(--primary-color, #0564d2));
  --form-btn-hover: var(--primary-hover, #044ea5);
  --form-btn-text: var(--btn-primary-text, #ffffff);
  --form-btn-radius: 12px;
  --form-radius-card: 16px;
  --form-radius-input: 10px;
  --form-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --form-success-bg: rgba(16, 185, 129, 0.12);
  --form-success-border: #10b981;
  --form-success-text: #065f46;
  --form-error-bg: rgba(239, 68, 68, 0.12);
  --form-error-border: #ef4444;
  --form-error-text: #991b1b;
  --form-warning-border: #f59e0b;
}

/* ==========================================================================
   1. Universal Form Grid & Form Group Styling
   ========================================================================== */
.globonex-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
}

.globonex-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.globonex-form-group.full-width {
  grid-column: 1 / -1;
}

.globonex-form-group label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--form-label-color);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}

.globonex-form-group label .required-asterisk,
.globonex-form-group label span.required {
  color: #ef4444;
  font-weight: 800;
  margin-left: 2px;
}

/* Base Input, Select, Textarea controls */
.globonex-form-control,
.globonex-contact-card input[type="text"],
.globonex-contact-card input[type="email"],
.globonex-contact-card input[type="tel"],
.globonex-contact-card select,
.globonex-contact-card textarea,
.globonex-modal-dialog input[type="text"],
.globonex-modal-dialog input[type="email"],
.globonex-modal-dialog input[type="tel"],
.globonex-modal-dialog select,
.globonex-modal-dialog textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.94rem;
  font-family: inherit;
  border-radius: var(--form-radius-input);
  border: 1.5px solid var(--form-input-border);
  background-color: var(--form-input-bg);
  color: var(--form-input-text);
  outline: none;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) inset;
}

.globonex-form-control::placeholder,
.globonex-contact-card input::placeholder,
.globonex-contact-card textarea::placeholder,
.globonex-modal-dialog input::placeholder,
.globonex-modal-dialog textarea::placeholder {
  color: var(--form-input-placeholder);
  opacity: 0.85;
}

/* Input Focus States */
.globonex-form-control:focus,
.globonex-contact-card input[type="text"]:focus,
.globonex-contact-card input[type="email"]:focus,
.globonex-contact-card input[type="tel"]:focus,
.globonex-contact-card select:focus,
.globonex-contact-card textarea:focus,
.globonex-modal-dialog input[type="text"]:focus,
.globonex-modal-dialog input[type="email"]:focus,
.globonex-modal-dialog input[type="tel"]:focus,
.globonex-modal-dialog select:focus,
.globonex-modal-dialog textarea:focus {
  border-color: var(--form-input-focus-border);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px var(--form-input-focus-shadow);
  transform: translateY(-1px);
}

/* Custom Select Dropdowns */
.globonex-form-control select,
select.globonex-form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Textarea resizing */
textarea.globonex-form-control,
.globonex-contact-card textarea,
.globonex-modal-dialog textarea {
  resize: vertical;
  min-height: 115px;
  line-height: 1.55;
}

/* ==========================================================================
   2. Contact Form Card Container & Visual Hierarchy
   ========================================================================== */
.globonex-contact-card {
  background: var(--form-bg-card);
  border: 1px solid var(--form-card-border);
  border-radius: var(--form-radius-card);
  padding: 2.75rem 2.5rem;
  box-shadow: var(--form-shadow-card);
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(12px);
}

.globonex-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--form-primary-color) 0%, var(--form-primary-hover) 100%);
  border-radius: var(--form-radius-card) var(--form-radius-card) 0 0;
}

.globonex-contact-card:hover {
  box-shadow: 0 16px 40px rgba(5, 100, 210, 0.08);
}

.globonex-contact-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--form-card-border);
  padding-bottom: 1.25rem;
}

.globonex-contact-header h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  color: var(--form-label-color);
  letter-spacing: -0.02em;
}

.globonex-contact-header p {
  color: var(--form-text-muted);
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}

/* Math Captcha Verification Row */
.globonex-captcha-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(5, 100, 210, 0.04);
  padding: 0.9rem 1.2rem;
  border-radius: var(--form-radius-input);
  border: 1.5px solid var(--form-card-border);
  flex-wrap: wrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.globonex-captcha-row:hover {
  border-color: var(--form-primary-color);
  background: rgba(5, 100, 210, 0.06);
}

.globonex-captcha-badge {
  font-weight: 800;
  font-size: 1.12rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--form-primary-color);
  letter-spacing: 0.12em;
  background: rgba(5, 100, 210, 0.12);
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  user-select: none;
  box-shadow: 0 2px 6px rgba(5, 100, 210, 0.15);
}

.globonex-captcha-row input[name="captcha_answer"] {
  max-width: 140px;
  font-weight: 700;
  text-align: center;
  font-size: 1.05rem;
}

/* Primary Form Submit Buttons (Matching Pricing Table CTA Buttons) */
.globonex-contact-form button[type="submit"],
.globonex-form-submit-btn,
.wpforms-submit,
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--form-btn-bg);
  color: var(--form-btn-text);
  border: none;
  padding: 0.95rem 2.4rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--form-btn-radius);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(5, 100, 210, 0.35);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
}

.globonex-contact-form button[type="submit"]:hover,
.globonex-form-submit-btn:hover,
.wpforms-submit:hover,
.wpcf7-submit:hover {
  background: var(--form-btn-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(5, 100, 210, 0.45);
}

.globonex-contact-form button[type="submit"]:active,
.globonex-form-submit-btn:active {
  transform: translateY(0);
}

.globonex-contact-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   3. Get a Quote Modal & Interactive Selection Cards
   ========================================================================== */
.globonex-modal-dialog {
  background: var(--form-bg-card);
  border: 1px solid var(--form-card-border);
  border-radius: var(--form-radius-card);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.globonex-modal-header {
  border-bottom: 1px solid var(--form-card-border);
  background: linear-gradient(135deg, rgba(5, 100, 210, 0.08) 0%, transparent 100%);
  padding: 1.5rem 1.85rem;
}

.globonex-modal-header h3 {
  color: var(--form-label-color);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

/* Service Cards Grid */
.globonex-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.globonex-service-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  border: 2px solid var(--form-card-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-sizing: border-box;
}

.globonex-service-card:hover {
  border-color: var(--form-primary-color);
  background: rgba(5, 100, 210, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(5, 100, 210, 0.12);
}

.globonex-service-card.selected {
  border-color: var(--form-primary-color) !important;
  background: rgba(5, 100, 210, 0.09) !important;
  box-shadow: 0 6px 18px rgba(5, 100, 210, 0.2) !important;
  transform: translateY(-2px);
}

.globonex-service-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--form-primary-color);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(5, 100, 210, 0.4);
}

.globonex-service-icon {
  font-size: 1.45rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.globonex-service-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--form-label-color);
  line-height: 1.3;
}

/* Service Questionnaire Panels */
.globonex-service-questions-panel {
  display: none;
  background: rgba(5, 100, 210, 0.03);
  border: 1px solid var(--form-card-border);
  border-left: 4px solid var(--form-primary-color);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.75rem;
  animation: globonexFormFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.globonex-service-questions-panel.active {
  display: block;
}

.globonex-service-panel-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--form-primary-color);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* WhatsApp Submit Action Button */
.globonex-btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.95rem 1.85rem;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  border-radius: var(--form-btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  box-sizing: border-box;
}

.globonex-btn-whatsapp:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

.globonex-btn-whatsapp:active {
  transform: translateY(0);
}

/* Standalone / Shortcode "Get a Quote" Trigger Buttons */
.globonex-btn-quote {
  background: var(--form-primary-color, var(--primary-color, #0564d2)) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--form-btn-radius, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 100, 210, 0.28);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  line-height: 1.4;
  box-sizing: border-box;
}

.globonex-btn-quote:hover {
  background: var(--form-primary-hover, var(--secondary-color, #0284c7)) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(5, 100, 210, 0.4);
  color: #ffffff !important;
}

.globonex-btn-quote:active {
  transform: translateY(0);
}

/* ==========================================================================
   4. Validation Feedback & State Banners
   ========================================================================== */
.globonex-alert {
  padding: 0.95rem 1.35rem;
  border-radius: var(--form-radius-input);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  display: none;
  animation: globonexFormFadeIn 0.3s ease;
}

.globonex-alert.success {
  background: var(--form-success-bg);
  border: 1.5px solid var(--form-success-border);
  color: var(--form-success-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.globonex-alert.error {
  background: var(--form-error-bg);
  border: 1.5px solid var(--form-error-border);
  color: var(--form-error-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Field Warning / Error Highlighting */
.globonex-form-control.is-invalid,
.globonex-form-control:invalid:focus {
  border-color: var(--form-error-border) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.globonex-field-error-msg {
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 600;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Form Submission Spinner */
.globonex-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: globonexSpin 0.75s linear infinite;
}

@keyframes globonexSpin {
  to {
    transform: rotate(360deg);
  }
}

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

/* ==========================================================================
   5. Support for Popular Form Plugins (CF7, WPForms, Gravity, Fluent)
   ========================================================================== */
.wpcf7 form,
.wpforms-container form,
.gform_wrapper form,
.fluentform {
  background: var(--form-bg-card);
  border: 1px solid var(--form-card-border);
  border-radius: var(--form-radius-card);
  padding: 2.25rem 2rem;
  box-shadow: var(--form-shadow-card);
  margin-bottom: 2rem;
  box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper textarea,
.gform_wrapper select,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform textarea,
.fluentform select {
  width: 100% !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.94rem !important;
  font-family: inherit !important;
  border-radius: var(--form-radius-input) !important;
  border: 1.5px solid var(--form-input-border) !important;
  background-color: var(--form-input-bg) !important;
  color: var(--form-input-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.fluentform input:focus,
.fluentform textarea:focus {
  border-color: var(--form-input-focus-border) !important;
  box-shadow: 0 0 0 4px var(--form-input-focus-shadow) !important;
}

/* ==========================================================================
   6. Dark Mode Overrides
   ========================================================================== */
html[data-theme="dark"] {
  --form-bg-card: rgba(15, 23, 42, 0.7);
  --form-card-border: rgba(255, 255, 255, 0.1);
  --form-input-bg: rgba(15, 23, 42, 0.85);
  --form-input-border: rgba(255, 255, 255, 0.15);
  --form-input-text: #f8fafc;
  --form-input-placeholder: #64748b;
  --form-label-color: #f1f5f9;
  --form-text-muted: #94a3b8;
  --form-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .globonex-captcha-row {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .globonex-service-card {
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .globonex-service-card.selected {
  background: rgba(5, 100, 210, 0.2) !important;
}

html[data-theme="dark"] .globonex-service-questions-panel {
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .globonex-alert.success {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

html[data-theme="dark"] .globonex-alert.error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* ==========================================================================
   7. Mobile Responsiveness (<= 860px and <= 576px)
   ========================================================================== */
@media (max-width: 860px) {
  .globonex-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .globonex-contact-card {
    padding: 2rem 1.5rem;
  }

  .globonex-service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .globonex-contact-card {
    padding: 1.5rem 1.15rem;
  }

  .globonex-captcha-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .globonex-captcha-row input[name="captcha_answer"] {
    max-width: 100%;
  }

  .globonex-contact-form button[type="submit"],
  .globonex-form-submit-btn,
  .globonex-btn-whatsapp {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.25rem;
  }
}