/* Fenix Diet - Test kwalifikacyjny Fenix */
/* Kolory marki: #e74c3c (czerwień), #59ce8f (zielony) */

:root {
  --fd-red: #e74c3c;
  --fd-green: #59ce8f;
  --fd-red-dark: #d43d2e;
  --fd-green-light: rgba(89, 206, 143, 0.2);
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Custom Radio - checked state */
.fd-radio input:checked + .fd-radio-custom {
  border-color: var(--fd-green);
  border-width: 2px;
  background: var(--fd-green);
  box-shadow: inset 0 0 0 3px white;
}

.fd-radio input:focus-visible + .fd-radio-custom {
  outline: 2px solid var(--fd-green);
  outline-offset: 2px;
}

.fd-radio:has(input:checked) {
  border-color: var(--fd-green) !important;
  background: var(--fd-green-light);
}

/* Scale option - checked state */
.fd-scale-option input:checked + .fd-radio-custom {
  border-color: var(--fd-green);
  background: var(--fd-green);
  color: white !important;
  box-shadow: 0 4px 14px rgba(89, 206, 143, 0.4);
}

.fd-scale-option:has(input:checked) .fd-radio-custom {
  border-color: var(--fd-green);
  background: var(--fd-green);
  color: white !important;
}

/* Custom Checkbox - checked state */
.fd-checkbox input:checked + .fd-checkbox-custom {
  border-color: var(--fd-green);
  background: var(--fd-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.fd-checkbox input:focus-visible + .fd-checkbox-custom {
  outline: 2px solid var(--fd-green);
  outline-offset: 2px;
}

.fd-checkbox:has(input:checked) {
  border-color: var(--fd-green) !important;
  background: var(--fd-green-light);
}

/* Input error state */
.fd-input.error,
.fd-input:invalid:not(:placeholder-shown) {
  border-color: var(--fd-red) !important;
  box-shadow: 0 0 0 1px var(--fd-red);
}

.fd-input.error + .fd-error,
.fd-input:invalid:not(:placeholder-shown) + .fd-error {
  display: block !important;
}

/* Question error state */
.fd-question.error .fd-question-error {
  display: block !important;
}

.fd-question.error .fd-radio,
.fd-question.error .fd-checkbox,
.fd-question.error .fd-scale-option {
  animation: fd-shake 0.4s ease;
}

@keyframes fd-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Inne - show text input when selected */
.fd-radio-inne:has(#q9_inne:checked) .fd-input-inne {
  display: block !important;
}

.fd-radio-inne:has(#q9_inne:checked) {
  border-color: var(--fd-green);
  background: var(--fd-green-light);
}

/* Submit button loading state */
.fd-submit.loading {
  pointer-events: none;
  position: relative;
}

.fd-submit.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: fd-spin 0.8s linear infinite;
}

.fd-submit.loading span {
  visibility: hidden;
}

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

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--fd-green);
  outline-offset: 2px;
}

button:focus-visible {
  outline: 2px solid var(--fd-green);
  outline-offset: 3px;
}