@charset "UTF-8";

/*
 * PL: Przykładowy motyw dla widgetu ankiet Halo24.
 * EN: Example theme for the Halo24 survey widget.
 *
 * PL: Widget NIE ładuje żadnego CSS samodzielnie — generuje czysty HTML
 *     z poniższymi klasami. Ten plik jest tylko punktem startowym: dołącz go
 *     przez zwykły <link rel="stylesheet"> na swojej stronie (patrz panel
 *     "Widget" w ankiecie) albo skopiuj z niego to, czego potrzebujesz,
 *     i usuń resztę — pełna dowolność.
 * EN: The widget does NOT load any CSS of its own — it renders plain HTML
 *     with the classes below. This file is only a starting point: link it
 *     via a plain <link rel="stylesheet"> on your own page (see the
 *     "Widget" panel on the survey), or copy the parts you need and drop
 *     the rest — full freedom either way.
 */

.halo24-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 480px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1f2937;
}

.halo24-question {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.halo24-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.halo24-required-marker {
  color: #dc2626;
}

.halo24-help-text {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}

.halo24-error {
  font-size: 0.8125rem;
  color: #dc2626;
  margin: 0;
}

.halo24-input,
.halo24-textarea,
.halo24-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.halo24-textarea {
  min-height: 5rem;
  resize: vertical;
}

.halo24-input:focus,
.halo24-textarea:focus,
.halo24-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* PL: Pole telefonu — kod kraju + numer w jednym rzędzie.
   EN: Phone field — country code + number in a single row. */
.halo24-phone-wrapper {
  display: flex;
  align-items: stretch;
}

.halo24-phone-country-select {
  flex-shrink: 0;
  max-width: 7rem;
  padding: 0.5rem 0.5rem;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  background: #f9fafb;
  cursor: pointer;
  font-size: 0.875rem;
  color: inherit;
}

.halo24-phone-number-input {
  border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* PL: Radio / checkbox.
   EN: Radio / checkbox. */
.halo24-radio-group,
.halo24-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.halo24-radio-option,
.halo24-checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.halo24-radio-input,
.halo24-checkbox-input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #6366f1;
  cursor: pointer;
}

/*
 * PL: Toggle / zgody (np. RODO) — działa na atrybucie data-state ustawianym
 *     przez sam widget, niezależnie od jego wewnętrznej biblioteki UI.
 * EN: Toggle / consents (e.g. GDPR) — styled off the data-state attribute
 *     the widget itself sets, regardless of its internal UI library.
 */
.halo24-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.halo24-toggle-input {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.halo24-toggle-input[data-state='checked'] {
  background: #6366f1;
}

.halo24-toggle-input span {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.halo24-toggle-input[data-state='checked'] span {
  transform: translateX(1rem);
}

.halo24-toggle-label {
  font-size: 0.875rem;
  color: #374151;
}

/* PL: Wysyłka.
   EN: Submit. */
.halo24-submit-button {
  align-self: flex-start;
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: #6366f1;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.halo24-submit-button:hover:not(:disabled) {
  background: #4f46e5;
}

.halo24-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* PL: Komunikaty (ładowanie / sukces / błąd).
   EN: Messages (loading / success / error). */
.survey-widget-message {
  font-size: 0.9375rem;
  padding: 1rem 0;
}

.survey-widget-message--error {
  color: #dc2626;
}

.survey-widget-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1rem;
}