/* Orin Form Styles */

.orf-required {
  color: #e74c3c;
}

.orf-field {
  width: 100%;
}

.orf-field-label {
  padding-bottom: 8px;
}

.orf-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='0' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
}

.orf-radio-group,
.orf-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.orf-radio-label,
.orf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}

.orf-radio,
.orf-checkbox {
  width: auto;
  margin: 0;
}

/* .orf-form-footer {
  margin-top: 24px;
} */

.orf-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.orf-loading-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orf-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff40;
  border-left-color: #ffffff;
  border-radius: 50%;
  animation: orf-spin 1s linear infinite;
}

@keyframes orf-spin {
  to {
    transform: rotate(360deg);
  }
}

.orf-form-messages {
  margin-top: 24px;
}

.orf-success-message {
  padding: 15px;
  background: #dcfae6;
  color: #079455;
  border-radius: 6px;
  margin-bottom: 24px;
}

.orf-error-message {
  padding: 15px;
  background: #fee4e2;
  color: #d92d20;
  border-radius: 6px;
  margin-bottom: 24px;
}

/* Submit Button with SVG */
.orf-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* gap: 8px; */
  position: relative;
  overflow: hidden;
}

.orf-submit-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* gap: 12px; */
  transition: transform 0.3s ease;
}

.orf-submit-svg {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.orf-submit-svg svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
}

/* Ensure SVG displays properly */
/* In public/css/orf-public.css add: */
.orf-submit-svg {
  display: inline-flex;
  align-items: center;
}

.orf-submit-svg svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
}

/* Fix for forms with custom max-width */
.orf-form[style*="max-width"] {
  width: 100%;
  box-sizing: border-box;
}

/* SVG Animations */
.orf-form[data-svg-animation="1"]
  .orf-submit-btn.orf-submitting
  .orf-submit-svg {
  animation: orf-svg-pulse 0.6s ease-in-out infinite;
}

.orf-form[data-svg-animation="1"][data-svg-animation-type="horizontal"]
  .orf-submit-btn.orf-submitting
  .orf-submit-svg {
  animation: orf-svg-move-horizontal 1s ease-in-out infinite;
}

.orf-form[data-svg-animation="1"][data-svg-animation-type="vertical"]
  .orf-submit-btn.orf-submitting
  .orf-submit-svg {
  animation: orf-svg-move-vertical 1s ease-in-out infinite;
}

@keyframes orf-svg-move-horizontal {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

@keyframes orf-svg-move-vertical {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes orf-svg-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Loading state adjustments */
.orf-submit-btn.orf-submitting .orf-submit-content {
  opacity: 0.7;
}

.orf-submit-btn:disabled .orf-submit-content {
  opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .orf-form {
    padding: 15px;
    margin: 10px;
  }

  .orf-field {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .orf-submit-content {
    gap: 6px;
  }

  .orf-submit-svg svg {
    width: 0.9em;
    height: 0.9em;
  }
}

/* Elementor Integration */
.elementor-widget-container .orf-form {
  box-shadow: none;
  padding: 0;
}