/* =========================================================
   4models: custom.css motywu LimeSurvey (vanilla)
   Ankiety osadzane w ramce na 4models.eu.
   Wygląd przeniesiony z artykułów (motyw WordPress fourmodels 0.11.21,
   assets/css/base.css i article.css: .fm-agency-article, .fm-article-bridge).
   Fonty z serwera 4models.eu, bez Google Fonts.
   ========================================================= */

/* ---------- Fonty z motywu WordPress (ta sama domena) ---------- */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/wp-content/themes/fourmodels/assets/fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/wp-content/themes/fourmodels/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/wp-content/themes/fourmodels/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/wp-content/themes/fourmodels/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Zmienne jak w base.css ---------- */
:root {
  --fm-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fm-black: #171717;
  --fm-text: #2d2c30;
  --fm-muted: #655e59;
  --fm-pink: #b4566b;
  --fm-pink-hover: #8f3f52;
  --fm-pink-bright: #f9598a;
  --fm-gold: #b5924d;
  --fm-cream: #fbf8f3;
  --fm-cream-2: #f8efea;
  --fm-paper: #fffdfa;
  --fm-line: rgba(181, 146, 77, .30);
  --fm-line-soft: rgba(23, 23, 23, .10);
}

/* =========================================================
   1. Strona: przezroczysta, bez paska, bez odstępów
   ========================================================= */
html, body { background: transparent !important; }

body {
  margin: 0 !important;
  padding: 0 0 8px 0 !important;            /* nadpisuje padding-top z theme.js */
  color: var(--fm-text) !important;
  font-family: var(--fm-font-body) !important;
  font-size: 18px !important;               /* jak tekst w artykule */
  line-height: 1.78 !important;
  font-feature-settings: "cv05" 1, "cv08" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 767px) { body { font-size: 17px !important; } }

body :is(p, li, label, span, div, button, input, textarea, select) { font-family: var(--fm-font-body); }
body ::selection { background: rgba(249, 89, 138, .18); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--fm-font-display) !important;
  font-optical-sizing: auto;
  font-weight: 560 !important;
  color: var(--fm-black) !important;
  letter-spacing: -.015em;
}
h2, .h2 { font-size: clamp(28px, 3.6vw, 42px) !important; line-height: 1.14 !important; }
h3, .h3 { font-size: clamp(22px, 2.5vw, 28px) !important; line-height: 1.22 !important; }

strong, b { color: var(--fm-black); font-weight: 700; }

/* Linki jak w treści artykułu */
a:not(.btn) {
  color: var(--fm-pink);
  text-decoration-line: underline;
  text-decoration-color: rgba(180, 86, 107, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:not(.btn):hover { color: var(--fm-pink-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--fm-gold) !important; outline-offset: 3px; border-radius: 4px; }

/* Kontener na pełną szerokość ramki */
#outerframeContainer, .outerframe, .container, .container-fluid {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}
.row { margin-left: 0 !important; margin-right: 0 !important; }
.space-col { padding-left: 0 !important; padding-right: 0 !important; }

/* Rzeczy, których w ramce nie pokazujemy */
#survey-nav, .navbar, footer, .survey-name, .survey-description,
.group-title-container, .group-title, .group-description,
.asterisk, .ls-question-mandatory-initial, .questioncount,
.question-number, .question-code {
  display: none !important;
}

/* =========================================================
   2. Pasek postępu: cienka linia jak akcent na stronie
   ========================================================= */
.top-container { padding: 0 !important; }
.top-container .top-content { padding: 0 !important; margin: 0 0 30px 0 !important; }
.top-container .progress, .progress {
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--fm-cream-2) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.progress .progress-bar {
  background: linear-gradient(90deg, var(--fm-pink), var(--fm-pink-bright)) !important;
  color: transparent !important;
  font-size: 0 !important;
  min-width: 0 !important;
  border-radius: 999px;
}

/* =========================================================
   3. Tekst powitalny i opisy: jak akapity artykułu
   ========================================================= */
.fm-welcome, .survey-welcome {
  color: var(--fm-text) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  margin-bottom: 8px;
}
.fm-welcome p, .survey-welcome p { margin: 0 0 20px; line-height: 1.78; }
.fm-welcome p:last-child { margin-bottom: 0; }

/* Listy jak w artykule: kropka różowo-złota, numery w kółkach */
.fm-welcome ul, .fm-welcome ol, .completed-text ul, .completed-text ol, .question-text ul {
  margin: 18px 0 24px; padding-left: 0; list-style: none;
}
.fm-welcome li, .completed-text li, .question-text li {
  position: relative; margin: 0 0 12px; padding-left: 30px; font-size: 17px; line-height: 1.68;
}
.fm-welcome ul li::before, .completed-text ul li::before, .question-text ul li::before {
  content: ""; position: absolute; left: 2px; top: .76em; width: 9px; height: 9px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .72), transparent 42%),
              linear-gradient(135deg, var(--fm-pink), var(--fm-gold));
  box-shadow: 0 0 0 4px rgba(181, 146, 77, .10);
}

/* =========================================================
   4. Pytanie: treść jak nagłówek h3 w artykule
   ========================================================= */
.question-container {
  margin: 0 0 40px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.question-title-container { padding: 0 !important; margin-bottom: 16px !important; }
.question-text, .ls-label-question, .question-text p {
  font-family: var(--fm-font-display) !important;
  font-optical-sizing: auto;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 560 !important;
  line-height: 1.22 !important;
  letter-spacing: -.015em;
  color: var(--fm-black) !important;
}
.answer-container { padding: 0 !important; }
.question-help-container, .ls-questionhelp { color: var(--fm-muted) !important; font-size: 15px !important; }

/* =========================================================
   5. Odpowiedzi: kafelki jak .fm-article-bridge__link
   ========================================================= */
.answers-list, ul.answers-list, .list-unstyled.answers-list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.answer-item.radio-item, .answer-item.checkbox-item {
  position: relative;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--fm-line-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.answer-item.radio-item::before, .answer-item.checkbox-item::before { display: none !important; }
.answer-item.radio-item:hover, .answer-item.checkbox-item:hover {
  transform: translateY(-1px);
  border-color: rgba(181, 146, 77, .45);
  box-shadow: 0 14px 34px rgba(23, 23, 23, .08);
  background: rgba(255, 255, 255, .88);
}
/* Zaznaczona odpowiedź jak wyróżniony kafelek (--highlight) */
.answer-item.radio-item:has(input:checked), .answer-item.checkbox-item:has(input:checked) {
  border-color: var(--fm-pink);
  background: radial-gradient(circle at 90% 8%, rgba(249, 89, 138, .12), transparent 12rem), rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px var(--fm-pink) inset;
}
.answer-item input[type="radio"], .answer-item input[type="checkbox"] {
  position: absolute !important;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  width: 20px; height: 20px;
  accent-color: var(--fm-pink);
}
.answer-item label, .answer-item .control-label, .answer-item .form-check-label {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 16px 20px 16px 52px !important;
  cursor: pointer;
  color: var(--fm-text) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: left !important;
}
.answer-item label::before, .answer-item label::after { display: none !important; } /* ozdobne radio z awesome-bootstrap-checkbox */
.form-check { padding-left: 0 !important; }

/* =========================================================
   6. Komunikaty: jak blockquote w artykule
   ========================================================= */
.alert, .ls-question-message.ls-em-error, .questions-list .alert {
  margin: 0 0 24px !important;
  padding: 18px 22px !important;
  border: 1px solid var(--fm-line) !important;
  border-left: 5px solid rgba(197, 116, 132, .72) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(251, 248, 243, .94), rgba(255, 255, 255, .78)) !important;
  color: var(--fm-text) !important;
  font-size: 16px !important;
}
.ls-em-error, .text-danger, .has-error .ls-question-message, .input-error .ls-question-message {
  color: #a7354a !important;
  font-size: 15px !important;
}
.input-error { border: 0 !important; }

/* =========================================================
   7. Przyciski jak .fm-btn
   ========================================================= */
.navigator { margin: 8px 0 0 0 !important; padding: 0 !important; }
.navigator .col-6 { padding: 0 !important; }
.btn {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  min-height: 48px;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font: 600 15px/1.2 var(--fm-font-body) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .15s ease;
}
.btn-primary, #ls-button-submit {
  background: var(--fm-black) !important;
  border: 1px solid var(--fm-black) !important;
  color: #fff !important;
}
.btn-primary:hover, #ls-button-submit:hover { transform: translateY(-1px); color: #fff !important; }
.btn-outline-secondary, #ls-button-previous {
  background: transparent !important;
  border: 1px solid var(--fm-black) !important;
  color: var(--fm-black) !important;
}

/* =========================================================
   8. Strona końcowa: tekst końcowy w boksie jak .fm-article-bridge
   ========================================================= */
.completed-wrapper, .completed-text { text-align: left !important; }
.completed-text {
  padding: clamp(24px, 4vw, 38px) !important;
  border: 1px solid rgba(181, 146, 77, .34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(249, 89, 138, .10), transparent 16rem),
    linear-gradient(135deg, rgba(251, 248, 243, .94), rgba(248, 239, 234, .72));
  box-shadow: 0 18px 48px rgba(23, 23, 23, .06);
}
.completed-text p { margin: 0 0 20px; }

/* Klasy do użycia w tekście końcowym ankiety */
.fm-eyebrow {
  margin: 0 0 12px; color: var(--fm-pink); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
a.fm-btn, .fm-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 24px; border: 1px solid var(--fm-black); border-radius: 999px;
  background: var(--fm-black); color: #fff !important; font: 600 15px/1.2 var(--fm-font-body);
  text-decoration: none !important; cursor: pointer; transition: transform .15s ease;
}
a.fm-btn:hover { transform: translateY(-1px); color: #fff !important; }

/* =========================================================
   9. Telefon
   ========================================================= */
@media (max-width: 575px) {
  .answer-item label, .answer-item .form-check-label { font-size: 16px !important; padding: 14px 16px 14px 48px !important; }
  .answer-item input[type="radio"], .answer-item input[type="checkbox"] { left: 16px; }
  .btn { width: 100%; }
  .navigator .col-6 { flex: 0 0 100%; max-width: 100%; }
  .navigator .text-end { order: 1; }
  .navigator .text-start { order: 2; margin-top: 10px; }
}