/**
 * Forminator Custom Styling for Zsobi Theme
 * Matches theme design with dark aesthetic and blue accents
 * Uses !important to override Forminator's default styles
 */

/* Use theme color variables */
:root {
  --form-accent: #60a5fa;
  --form-accent-light: #93c5fd;
  --form-bg: rgba(255, 255, 255, 0.05);
  --form-border: rgba(255, 255, 255, 0.1);
  --form-text: rgba(255, 255, 255, 0.9);
  --form-text-muted: rgba(255, 255, 255, 0.7);
  --input-bg: rgba(255, 255, 255, 0.95);
  --input-text: #0b1220;
  --input-border: transparent;
  --input-focus-border: var(--form-accent);
  --input-focus-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* Form Container - HIGH SPECIFICITY */
.quote-form-container .forminator-form,
#blokkok .forminator-form,
.section-innova .forminator-form {
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  margin: 0 !important;
}

/* Labels */
.quote-form-container .forminator-label,
#blokkok .forminator-label {
  color: var(--form-text) !important;
  font-weight: 600 !important;
}

/* Required Field Indicator */
.quote-form-container .forminator-required,
#blokkok .forminator-required {
  color: #ef4444 !important;
}

/* Input Fields - HIGH SPECIFICITY */
.quote-form-container .forminator-field input[type="text"],
.quote-form-container .forminator-field input[type="email"],
.quote-form-container .forminator-field input[type="tel"],
.quote-form-container .forminator-field input[type="number"],
.quote-form-container .forminator-field select,
.quote-form-container .forminator-field textarea,
#blokkok .forminator-field input[type="text"],
#blokkok .forminator-field input[type="email"],
#blokkok .forminator-field input[type="tel"],
#blokkok .forminator-field input[type="number"],
#blokkok .forminator-field select,
#blokkok .forminator-field textarea {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  background: var(--input-bg) !important;
  border: 2px solid var(--input-border) !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  color: var(--input-text) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.quote-form-container .forminator-field input[type="text"]:focus,
.quote-form-container .forminator-field input[type="email"]:focus,
.quote-form-container .forminator-field input[type="tel"]:focus,
.quote-form-container .forminator-field input[type="number"]:focus,
.quote-form-container .forminator-field select:focus,
.quote-form-container .forminator-field textarea:focus,
#blokkok .forminator-field input[type="text"]:focus,
#blokkok .forminator-field input[type="email"]:focus,
#blokkok .forminator-field input[type="tel"]:focus,
#blokkok .forminator-field input[type="number"]:focus,
#blokkok .forminator-field select:focus,
#blokkok .forminator-field textarea:focus {
  outline: none !important;
  border-color: var(--input-focus-border) !important;
  background: #ffffff !important;
  box-shadow: var(--input-focus-shadow) !important;
}

.quote-form-container .forminator-field input::placeholder,
.quote-form-container .forminator-field textarea::placeholder,
#blokkok .forminator-field input::placeholder,
#blokkok .forminator-field textarea::placeholder {
  color: rgba(11, 18, 32, 0.5) !important;
}

.quote-form-container .forminator-field textarea,
#blokkok .forminator-field textarea {
  resize: vertical !important;
  min-height: 100px !important;
}

/* Submit Button - HIGH SPECIFICITY */
.quote-form-container .forminator-button,
.quote-form-container input.forminator-button,
.quote-form-container button.forminator-button,
#blokkok .forminator-button,
#blokkok input.forminator-button,
#blokkok button.forminator-button {
  width: 100% !important;
  padding: 1rem !important;
  background: var(--form-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.quote-form-container .forminator-button:hover:not(:disabled),
.quote-form-container input.forminator-button:hover:not(:disabled),
.quote-form-container button.forminator-button:hover:not(:disabled),
#blokkok .forminator-button:hover:not(:disabled),
#blokkok input.forminator-button:hover:not(:disabled),
#blokkok button.forminator-button:hover:not(:disabled) {
  background: var(--form-accent-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3) !important;
}

.quote-form-container .forminator-button:disabled,
.quote-form-container input.forminator-button:disabled,
.quote-form-container button.forminator-button:disabled,
#blokkok .forminator-button:disabled,
#blokkok input.forminator-button:disabled,
#blokkok button.forminator-button:disabled {
  background: rgba(96, 165, 250, 0.3) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Consent Checkbox */
.quote-form-container .forminator-field-consent,
.quote-form-container .forminator-checkbox,
#blokkok .forminator-field-consent,
#blokkok .forminator-checkbox {
  margin: 1.5rem 0 !important;
}

.quote-form-container .forminator-checkbox input[type="checkbox"],
#blokkok .forminator-checkbox input[type="checkbox"] {
  accent-color: var(--form-accent) !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
}

.quote-form-container .forminator-checkbox-label,
.quote-form-container .consent-text,
#blokkok .forminator-checkbox-label,
#blokkok .consent-text {
  color: var(--form-text) !important;
  font-size: 0.9rem !important;
}

.quote-form-container .forminator-checkbox a,
.quote-form-container .consent-text a,
#blokkok .forminator-checkbox a,
#blokkok .consent-text a {
  color: var(--form-accent) !important;
  text-decoration: underline !important;
}

/* Messages */
.quote-form-container .forminator-message,
#blokkok .forminator-message {
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}

.quote-form-container .forminator-message.forminator-success,
#blokkok .forminator-message.forminator-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

.quote-form-container .forminator-message.forminator-error,
#blokkok .forminator-message.forminator-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .quote-form-container .forminator-form,
  #blokkok .forminator-form,
  .section-innova .forminator-form {
    padding: 1.25rem !important;
  }
  
  .quote-form-container .forminator-field input,
  .quote-form-container .forminator-field textarea,
  #blokkok .forminator-field input,
  #blokkok .forminator-field textarea,
  .section-innova .forminator-field input,
  .section-innova .forminator-field textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  
  /* Stack columns on mobile */
  .quote-form-container .forminator-col,
  #blokkok .forminator-col,
  .section-innova .forminator-col {
    flex: 1 1 100% !important;
    margin-right: 0 !important;
  }
}

/* Reset Forminator defaults */
.quote-form-container .forminator-row,
#blokkok .forminator-row,
.section-innova .forminator-row {
  margin: 0 !important;
  gap: 0.75rem !important; /* Space between columns */
  display: flex !important;
  flex-wrap: wrap !important;
}

.quote-form-container .forminator-col,
#blokkok .forminator-col,
.section-innova .forminator-col {
  padding: 0 !important;
  margin-right: 0.75rem !important; /* Space between columns */
}

/* Remove right margin from last column */
.quote-form-container .forminator-col:last-child,
#blokkok .forminator-col:last-child,
.section-innova .forminator-col:last-child {
  margin-right: 0 !important;
}

/* Space between field wraps */
.quote-form-container .forminator-field-wrap,
#blokkok .forminator-field-wrap,
.section-innova .forminator-field-wrap {
  margin-bottom: 1rem !important; /* Space between rows */
}

/* For fields with multiple columns in a row */
.quote-form-container .forminator-row .forminator-col .forminator-field-wrap,
#blokkok .forminator-row .forminator-col .forminator-field-wrap,
.section-innova .forminator-row .forminator-col .forminator-field-wrap {
  margin-bottom: 0 !important; /* Remove vertical spacing in same row */
  margin-right: 0 !important;
}

/* Re-add margin to last field in row */
.quote-form-container .forminator-row .forminator-col .forminator-field-wrap:last-child,
#blokkok .forminator-row .forminator-col .forminator-field-wrap:last-child,
.section-innova .forminator-row .forminator-col .forminator-field-wrap:last-child {
  margin-bottom: 1rem !important;
}