/* FormMonster — frontend styles */
/* CSS variables are set inline by the module template via PHP */

.fm-form-wrap {
  --fm-btn-bg:              #0d6efd;
  --fm-btn-bg-hover:        #0b5ed7;
  --fm-btn-bg-active:       #0a58ca;
  --fm-btn-color:           #ffffff;
  --fm-input-bg:            #ffffff;
  --fm-input-bg-hover:      #f8f9fa;
  --fm-input-bg-focus:      #ffffff;
  --fm-input-border:        #ced4da;
  --fm-input-border-hover:  #86b7fe;
  --fm-input-border-focus:  #86b7fe;
  --fm-input-color:         #212529;
  --fm-input-placeholder:   #6c757d;
  --fm-radio-color:         #0d6efd;
  --fm-radio-color-hover:   #0b5ed7;
  --fm-radio-color-focus:   #0a58ca;
  --fm-radio-border:        #ced4da;
  --fm-radio-border-hover:  #86b7fe;
  --fm-radio-border-focus:  #86b7fe;
  --fm-radius:              4px;
  --fm-success-bg:          #d1e7dd;
  --fm-success-color:       #0f5132;
  --fm-error-bg:            #f8d7da;
  --fm-error-color:         #842029;
}

/* Inputs & textarea */
.fm-form-wrap input[type="text"],
.fm-form-wrap input[type="email"],
.fm-form-wrap input[type="tel"],
.fm-form-wrap input[type="number"],
.fm-form-wrap input[type="date"],
.fm-form-wrap input[type="time"],
.fm-form-wrap textarea,
.fm-form-wrap select {
  background-color: var(--fm-input-bg);
  border: 1px solid var(--fm-input-border);
  border-radius: var(--fm-radius);
  color: var(--fm-input-color);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.fm-form-wrap input[type="text"]:hover,
.fm-form-wrap input[type="email"]:hover,
.fm-form-wrap input[type="tel"]:hover,
.fm-form-wrap input[type="number"]:hover,
.fm-form-wrap input[type="date"]:hover,
.fm-form-wrap input[type="time"]:hover,
.fm-form-wrap textarea:hover,
.fm-form-wrap select:hover {
  background-color: var(--fm-input-bg-hover);
  border-color: var(--fm-input-border-hover);
}

.fm-form-wrap input:focus,
.fm-form-wrap textarea:focus,
.fm-form-wrap select:focus {
  background-color: var(--fm-input-bg-focus);
  border-color: var(--fm-input-border-focus);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
  outline: none;
}

.fm-form-wrap input::placeholder,
.fm-form-wrap textarea::placeholder {
  color: var(--fm-input-placeholder);
  opacity: 1;
}

/* Radios & checkboxes
   Use the native control (appearance:auto) so the browser paints the
   check/dot itself. We only tint it via accent-color. We must NOT set a
   custom border/background on the control, otherwise Bootstrap's
   .form-check-input background-image is suppressed and the checkmark
   stays invisible until a repaint. */
.fm-form-wrap input[type="radio"],
.fm-form-wrap input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--fm-radio-color);
  background-image: none;
  border: 0;
  box-shadow: none;
  transition: accent-color .15s ease;
}

.fm-form-wrap input[type="radio"]:hover,
.fm-form-wrap input[type="checkbox"]:hover {
  accent-color: var(--fm-radio-color-hover);
}

.fm-form-wrap input[type="radio"]:focus,
.fm-form-wrap input[type="checkbox"]:focus {
  accent-color: var(--fm-radio-color-focus);
  box-shadow: none;
  outline: none;
}

/* Keep Bootstrap from overriding the native rendering */
.fm-form-wrap input.form-check-input[type="radio"],
.fm-form-wrap input.form-check-input[type="checkbox"] {
  background-color: initial;
  background-image: none;
  border: 0;
}
.fm-form-wrap input.form-check-input:checked {
  background-color: initial;
  background-image: none;
}

/* Submit button */
.fm-form-wrap .fm-submit-btn {
  background-color: var(--fm-btn-bg);
  color: var(--fm-btn-color);
  border: none;
  border-radius: var(--fm-radius);
  padding: .5rem 1.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color .15s ease;
}

.fm-form-wrap .fm-submit-btn:hover:not(:disabled) {
  background-color: var(--fm-btn-bg-hover);
}

.fm-form-wrap .fm-submit-btn:active:not(:disabled) {
  background-color: var(--fm-btn-bg-active);
}

.fm-form-wrap .fm-submit-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Messages */
.fm-msg {
  padding: 1rem;
  border-radius: var(--fm-radius);
  margin-top: 1rem;
  display: none;
}

.fm-msg.fm-msg-success {
  background-color: var(--fm-success-bg);
  color: var(--fm-success-color);
}

.fm-msg.fm-msg-error {
  background-color: var(--fm-error-bg);
  color: var(--fm-error-color);
}

/* Label positions */
.fm-form-wrap.fm-labels-left .fm-field-wrap {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.fm-form-wrap.fm-labels-left .fm-field-wrap label {
  min-width: 140px;
  padding-top: .375rem;
  font-weight: 500;
}

/* Spinner on submit */
.fm-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fm-spin .65s linear infinite;
  vertical-align: middle;
  margin-right: .4rem;
}

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

/* Required asterisk */
.fm-required {
  color: #dc3545;
  margin-left: 2px;
}

/* File input */
.fm-form-wrap input[type="file"] {
  border-radius: var(--fm-radius);
  border: 1px solid var(--fm-input-border);
  background-color: var(--fm-input-bg);
}

/* Flatpickr override */
.flatpickr-calendar {
  border-radius: var(--fm-radius, 4px);
}