/**
 * Custom Gravity Forms Validation Styling for Reno Energy
 * Overrides default Gravity Forms validation styles
 */

/* Reset default Gravity Forms validation styles */
.gform_wrapper .validation_error,
.gform_wrapper .gfield_error {
  border: none !important;
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Complete override of Gravity Forms default validation container */
.gform_wrapper .validation_error,
.gform_wrapper div.validation_error,
.gform_wrapper .gfield_error,
.gform_wrapper div.gfield_error,
.gform_wrapper .gform_validation_errors,
.gform_wrapper div.gform_validation_errors {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Force remove any blue borders from Gravity Forms defaults */
.gform_wrapper .validation_error::before,
.gform_wrapper .validation_error::after,
.gform_wrapper .gfield_error::before,
.gform_wrapper .gfield_error::after {
  display: none !important;
}

/* Override any inherited border styles */
.gform_wrapper .validation_error *,
.gform_wrapper .gfield_error * {
  border-color: transparent !important;
}

/* Specifically target the main validation error message */
.gform_wrapper .gform_validation_errors {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-color: transparent !important;
}

/* Main validation error container */
.reno-validation-error {
  background: #ffffff;
  border: 2px solid #ef4444;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  animation: slideInFromTop 0.3s ease-out;
}

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

/* Error icon */
.reno-validation-error__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.reno-validation-error__icon svg {
  width: 20px;
  height: 20px;
}

/* Error content */
.reno-validation-error__content {
  flex: 1;
}

.reno-validation-error__title {
  color: #dc2626;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.reno-validation-error__description {
  color: #7f1d1d;
  font-size: 14px;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* Error list */
.reno-validation-error__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reno-validation-error__item {
  background: #fef2f2;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #7f1d1d;
  border-left: 3px solid #ef4444;
}

.reno-validation-error__item:last-child {
  margin-bottom: 0;
}

.reno-validation-error__item strong {
  color: #dc2626;
}

/* Individual field errors */
.validation_message {
  display: inline-block;
  background: #fee2e2;
  color: #dc2626;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 5px;
  border: 1px solid #fca5a5;
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

/* Field highlighting for errors */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #ef4444 !important;
  background-color: #ffffff !important;
}

.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus {
  border-color: #dc2626 !important;
  outline: none !important;
}

/* Error state for custom Reno fields */
.gform_wrapper .gfield_error .reno-input,
.gform_wrapper .gfield_error .reno-select,
.gform_wrapper .gfield_error .reno-textarea {
  border-color: #ef4444 !important;
  background-color: #ffffff !important;
}

/* Error state for custom select dropdown */
.gform_wrapper .gfield_error .custom-select-button {
  border-color: #ef4444 !important;
  background-color: #ffffff !important;
}

.gform_wrapper .gfield_error .custom-select-button:focus {
  border-color: #dc2626 !important;
  outline: none !important;
}

/* Success state (for when errors are fixed) */
.gform_wrapper .gfield.gfield_validation_success input,
.gform_wrapper .gfield.gfield_validation_success textarea,
.gform_wrapper .gfield.gfield_validation_success select {
  border-color: #22c55e !important;
  background-color: #ffffff !important;
}

/* Success state for custom select dropdown */
.gform_wrapper .gfield.gfield_validation_success .custom-select-button {
  border-color: #22c55e !important;
  background-color: #ffffff !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .reno-validation-error {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .reno-validation-error__icon {
    align-self: flex-start;
  }

  .reno-validation-error__title {
    font-size: 16px;
  }

  .reno-validation-error__item {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .reno-validation-error {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    border-color: #dc2626;
    color: #fecaca;
  }

  .reno-validation-error__title {
    color: #fecaca;
  }

  .reno-validation-error__description {
    color: #fee2e2;
  }

  .reno-validation-error__item {
    background: rgba(0, 0, 0, 0.3);
    color: #fee2e2;
    border-left-color: #fca5a5;
  }

  .reno-validation-error__item strong {
    color: #fecaca;
  }

  .reno-field-error {
    background: #7f1d1d;
    color: #fecaca;
    border-color: #991b1b;
  }
}

/* Print styles */
@media print {
  .reno-validation-error {
    background: #f9f9f9 !important;
    border: 2px solid #666 !important;
    box-shadow: none !important;
  }

  .reno-validation-error__icon {
    background: #666 !important;
  }
}

/* WorkTypes checkbox indicator styles */
.fake-checkboxes .checkbox-indicator {
  background-color: #beb9e440;
}

.fake-checkboxes .checkmark {
  opacity: 0;
}

.fake-checkboxes.active .checkbox-indicator {
  background-color: var(--green-flash);
  border-color: var(--green-flash);
}

.fake-checkboxes.active .checkmark {
  opacity: 1;
}

/* ============================
   CUSTOM SUBMIT BUTTON STYLES
   ============================ */

/* Force remove all borders and outlines from submit and next buttons */
.gform_wrapper button[type="submit"],
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="button"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-width: 0 !important;
  border-style: none !important;
  margin-top: 24px !important;
}

.gform_wrapper button[type="submit"]:focus,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper button[type="button"]:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.gform_wrapper button[type="submit"]:active,
.gform_wrapper input[type="submit"]:active,
.gform_wrapper button[type="button"]:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Footer layout for multiple buttons - More specific targeting */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer,
.gform-page-footer,
.gform-page-footer.gform_page_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: unset !important;
  width: 100% !important;
}

/* Target specific button types */
.gform_wrapper .gform_footer button[type="button"],
.gform_wrapper .gform_page_footer button[type="button"],
.gform-page-footer button[type="button"] {
  margin-right: auto !important;
  flex-shrink: 0 !important;
}

.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer button[type="submit"],
.gform-page-footer button[type="submit"] {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Smart positioning based on button count */
.gform-page-footer.gform_page_footer:has(button:only-child),
.gform_wrapper .gform_footer:has(button:only-child) {
  justify-content: flex-end !important;
}

.gform-page-footer.gform_page_footer:has(button:only-child) button,
.gform_wrapper .gform_footer:has(button:only-child) button {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* When there are exactly 2 buttons, position them correctly */
.gform-page-footer.gform_page_footer:has(button:first-child):has(
    button:last-child
  ):not(:has(button:nth-child(3))),
.gform_wrapper
  .gform_footer:has(button:first-child):has(button:last-child):not(
    :has(button:nth-child(3))
  ) {
  justify-content: space-between !important;
}

/* Force override any inline styles */
.gform-page-footer.gform_page_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: unset !important;
}

/* When there's only one submit button, align it to the right */
.gform-page-footer.gform_page_footer:has(button[type="submit"]:only-child),
.gform-page-footer.gform_page_footer:has(button[type="submit"]:only-of-type),
.gform_wrapper .gform_footer:has(button[type="submit"]:only-child),
.gform_wrapper .gform_footer:has(button[type="submit"]:only-of-type) {
  justify-content: flex-end !important;
}

/* Alternative approach for browsers that don't support :has() */
.gform-page-footer.gform_page_footer button[type="submit"]:only-child,
.gform-page-footer.gform_page_footer button[type="submit"]:only-of-type,
.gform_wrapper .gform_footer button[type="submit"]:only-child,
.gform_wrapper .gform_footer button[type="submit"]:only-of-type,
.gform-page-footer.gform_page_footer button:only-child,
.gform_wrapper .gform_footer button:only-child {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ============================
   FIX FOR AJAX SPINNER LAYOUT SHIFT
   ============================ */

/* Prevent layout shift when AJAX spinner is added */
.gform_wrapper [data-js-spinner-id],
.gform_wrapper .gform_ajax_spinner,
#gform-ajax-spinner,
[data-js-spinner-id="gform-ajax-spinner"] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure the form footer maintains its layout when spinner appears */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer,
.gform-page-footer.gform_page_footer {
  position: relative !important;
}

/* Hide any spinner that might appear next to buttons */
.gform_wrapper .gform_footer [data-js-spinner-id],
.gform_wrapper .gform_page_footer [data-js-spinner-id],
.gform-page-footer [data-js-spinner-id] {
  display: none !important;
}

/* Alternative: If we want to show the spinner, make it overlay */
.gform_wrapper.gform_ajax_spinner_active::after {
  content: "";
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.8) !important;
  z-index: 9998 !important;
  pointer-events: none !important;
}

/* Prevent any dynamically added elements from affecting button layout */
.gform_wrapper .gform_footer > *:not(button),
.gform_wrapper .gform_page_footer > *:not(button),
.gform-page-footer > *:not(button) {
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Responsive design for footer buttons */
@media (max-width: 768px) {
  .gform_wrapper .gform_footer,
  .gform_wrapper .gform_page_footer,
  .gform-page-footer,
  .gform-page-footer.gform_page_footer {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .gform_wrapper .gform_footer button,
  .gform_wrapper .gform_page_footer button,
  .gform-page-footer button {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}