/* Önálló tartószerkezet-tervező oldal (/tartoszerkezet-konfigurator/): 1. lépés a panelméret (három mező), alatta mindig nyitva a termékoldali tervező */
.sfmc-page {
  --sfmc-panel: #191b1f;
  --sfmc-panel-2: #202329;
  --sfmc-line: #343942;
  --sfmc-text: #f5f5f5;
  --sfmc-muted: #aeb4bf;
  --sfmc-yellow: #ffc400;
  --sfmc-yellow-soft: rgba(255, 196, 0, .12);
  width: min(1240px, calc(100% - 32px));
  margin: 32px auto 64px;
  color: var(--sfmc-text);
  font-size: 15px;
  line-height: 1.45;
}
.sfmc-page, .sfmc-page * { box-sizing: border-box; }
.sfmc-page__intro { margin-bottom: 24px; }
.sfmc-page__intro h1 { margin: 0; color: #fff; font-size: 34px; line-height: 1.15; }
.sfmc-page__intro p { max-width: 760px; margin: 10px 0 0; color: var(--sfmc-muted); font-size: 16px; }

.sfmc-step { margin-bottom: 20px; padding: 22px 24px; border: 1px solid var(--sfmc-line); border-radius: 8px; background: var(--sfmc-panel); }
.sfmc-step h2, .sfmc--standalone .sfmc__header h2 { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--sfmc-yellow); font-size: 22px; line-height: 1.2; }
.sfmc-step__number { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sfmc-yellow); color: #111; font-size: 16px; font-weight: 800; }
.sfmc-step__hint { max-width: 720px; margin: 8px 0 0; color: var(--sfmc-muted); }
.sfmc-sizes__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 12px; margin-top: 16px; }
.sfmc-sizes__fields label { display: grid; gap: 6px; color: var(--sfmc-muted); font-size: 13px; font-weight: 600; }
.sfmc-page .sfmc__field { width: 100%; height: 42px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--sfmc-line); border-radius: 7px; background: #14161a; }
.sfmc-page .sfmc__field:focus-within { border-color: var(--sfmc-yellow); box-shadow: 0 0 0 2px rgba(255,196,0,.14); }
.sfmc-page .sfmc-sizes__fields input, .sfmc-page .sfmc-sizes__fields select { width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0 12px; border: 0 !important; outline: 0; background: transparent !important; color: #fff !important; box-shadow: none !important; font: inherit; font-weight: 650; }
.sfmc-page .sfmc-sizes__fields select option { background: #14161a; color: #fff; }
.sfmc-page .sfmc-sizes__fields .sfmc__field > span { align-self: stretch; display: grid; place-items: center; min-width: 42px; padding: 0 10px; border-left: 1px solid var(--sfmc-line); color: var(--sfmc-muted); font-size: 12px; }
.sfmc-sizes__error { margin: 12px 0 0; color: #ff8a7a; font-weight: 600; }
.sfmc-sizes__submit { min-height: 46px; margin-top: 16px; padding: 0 22px; border: 0; border-radius: 7px; background: var(--sfmc-yellow); color: #111; font-size: 15px; font-weight: 800; cursor: pointer; }
.sfmc-sizes__submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* With JavaScript the planner follows the fields at once, so the reload button is not needed. */
.sfmc-sizes.is-live .sfmc-sizes__submit { display: none; }
.sfmc-page .sfmc__field:has(input[aria-invalid="true"]) { border-color: #ff8a7a; }

/* A termékoldali tervező a lépések alatt, az oldal szélességében */
.sfmc-page .sfmc--standalone { width: 100%; margin: 0; }
.sfmc--standalone .sfmc__header p { margin-left: 44px; }

@media (max-width: 767px) {
  .sfmc-page { margin-top: 20px; }
  .sfmc-page__intro h1 { font-size: 27px; }
  .sfmc-step { padding: 18px 16px; }
  .sfmc-step h2, .sfmc--standalone .sfmc__header h2 { font-size: 19px; }
  .sfmc--standalone .sfmc__header p { margin-left: 0; }
  .sfmc-sizes__fields { grid-template-columns: 1fr 1fr; }
  .sfmc-sizes__fields label:last-child { grid-column: 1 / -1; }
  .sfmc-sizes__submit { width: 100%; }
}

/* Telefonon a tervező saját lépései a külső számozást folytatják: 1 méret, 2 tető, 3 panelek, 4 anyagok */
.sfmc--standalone .sfmc__flow-step .sfmc__flow-number { font-size: 0; }
.sfmc--standalone .sfmc__flow-step[data-sfmc-step="1"] .sfmc__flow-number::after { content: "2"; font-size: 16px; }
.sfmc--standalone .sfmc__flow-step[data-sfmc-step="2"] .sfmc__flow-number::after { content: "3"; font-size: 16px; }
.sfmc--standalone .sfmc__flow-step[data-sfmc-step="3"] .sfmc__flow-number::after { content: "4"; font-size: 16px; }
.sfmc--standalone:has(.sfmc__flow-step) .sfmc__header .sfmc-step__number { display: none; }

/* Az 1. lépés ugyanúgy néz ki, mint alatta a tervező: sárga felső szegély, sötét fejléc, világos kártyán a mezők */
.sfmc-page .sfmc-step { padding: 0; overflow: hidden; border: 1px solid #3d3d3d; border-top: 3px solid var(--sfmc-yellow); background: #242424; }
.sfmc-page .sfmc-step h2 { padding: 22px 24px 0; }
.sfmc-page .sfmc-step__hint { margin: 7px 24px 0 68px; font-size: 15px; }
.sfmc-page .sfmc-sizes {
  --sfmc-text: #202329;
  --sfmc-muted: #4a5361;
  --sfmc-line: #c8ced7;
  margin: 18px 16px 16px;
  padding: 24px 24px 22px;
  border-radius: 8px;
  background: #f4f5f7;
  color: var(--sfmc-text);
  color-scheme: light;
}
.sfmc-page .sfmc-sizes__fields { margin-top: 0; }
.sfmc-page .sfmc-sizes__fields label { gap: 8px; color: var(--sfmc-text); font-size: 13px; font-weight: 800; }
.sfmc-page .sfmc-sizes .sfmc__field { height: 46px; border-color: var(--sfmc-line); background: #fff; }
.sfmc-page .sfmc-sizes .sfmc__field:focus-within { border-color: #8a6500; box-shadow: 0 0 0 2px rgba(138,101,0,.18); }
.sfmc-page .sfmc-sizes__fields input, .sfmc-page .sfmc-sizes__fields select { color: var(--sfmc-text) !important; -webkit-text-fill-color: var(--sfmc-text); font-size: 15px; }
.sfmc-page .sfmc-sizes__fields select option { background: #fff; color: var(--sfmc-text); }
.sfmc-page .sfmc-sizes__fields .sfmc__field > span { border-left-color: var(--sfmc-line); color: var(--sfmc-muted); font-size: 13px; }
.sfmc-page .sfmc-sizes__error { color: #b42318; }
.sfmc-page .sfmc__field:has(input[aria-invalid="true"]) { border-color: #b42318; }
/* A két blokk egyforma széles: a tervező asztali elrendezése különben 40 px-szel keskenyebb */
.sfmc-page #sfmc.sfmc--standalone { width: 100%; max-width: none; margin: 0; }

@media (max-width: 767px) {
  .sfmc-page .sfmc-step { padding: 0; }
  .sfmc-page .sfmc-step h2 { padding: 18px 16px 0; }
  .sfmc-page .sfmc-step__hint { margin: 7px 16px 0; font-size: 14px; }
  .sfmc-page .sfmc-sizes { margin: 14px 8px 8px; padding: 16px 12px; }
  .sfmc-page .sfmc-sizes__fields input, .sfmc-page .sfmc-sizes__fields select { font-size: 16px; }
}