/*
 * TE v4 – űrlapok: RSForm! Pro, Timeslot Field, Form Expiry Field
 * author: Laszlo BLAHO – www.blaho.hu
 *
 * Az RSForm! Pro „Responsive” űrlapelrendezésére készült (formContainer / formRow /
 * formSpanN / rsform-block / formControlLabel / formControls / formBody). A mezők, a
 * csoportok és a gombok elemszelektorral is működnek, így a Bootstrap 5 elrendezésű
 * űrlapok is a v4 megjelenését kapják (a rácsukat a Bootstrap adja).
 *
 * Hatókör: #content :is(.formResponsive, form:has(.rsform-block)). Az #content miatt a
 * szabályok erősebbek a komponens és a bővítmények (réteg nélküli) CSS-énél, akárhol
 * töltődnek be, és a legacy-content.css „#content .container article p / ul / select”
 * szabályainál is, ha az űrlap cikkbe ágyazva jelenik meg ({rsform N}).
 *
 * Az űrlap méret-konténer (te-form): a keskeny elrendezés a saját szélességét követi, így
 * az oldalsávba tett űrlap (mod_rsform) is egy oszlopban jelenik meg.
 *
 * A body-hoz fűzött elemek (Form Expiry felugró ablak, jQuery dátumválasztó) a
 * „body .x” szelektorral kapják a v4 megjelenését.
 *
 * Rétegen KÍVÜL.
 */

/* ==========================================================================
   Tokenek és űrlap-konténer
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {
   --te-f-h: 48px;
   --te-f-radius: var(--radius);
   --te-f-border: hsla(var(--blue), .28);
   --te-f-border-hover: hsla(var(--blue), .55);
   --te-f-bg: hsla(var(--lightBlue), .1);        /* minden mező, jelölőnégyzet, rádió, fájlfeltöltő egységesen */
   --te-f-bg-hover: hsla(var(--lightBlue), .18);
   --te-f-ink: hsl(var(--darkBlue));
   --te-f-muted: hsl(var(--midGray));
   --te-f-error: hsl(348, 72%, 44%);      /* a --strawberry sötétebb árnyalata (fehéren 4.5:1 fölött) */
   --te-f-gold-ink: hsl(43, 100%, 31%);   /* a hírblokk sötétarany színe */

   /* Timeslot Field: a bővítmény --ts-* változói a v4 színeire kötve.
      A plugin „Megjelenés” fülén megadott színek (:root) a v4 alatt nem érvényesek. */
   --ts-accent: hsl(var(--blue));
   --ts-accent-bg: hsla(var(--lightBlue), .22);
   --ts-hover-bg: hsla(var(--lightBlue), .1);
   --ts-text: hsl(var(--darkBlue));
   --ts-bg: hsl(var(--white));
   --ts-border: hsla(var(--blue), .22);
   --ts-radius: var(--radius);
   --ts-free: hsl(var(--green));
   --ts-free-bg: hsla(var(--green), .1);
   --ts-full: var(--te-f-error);
   --ts-full-bg: hsla(var(--strawberry), .1);
   --ts-waitlist: var(--te-f-gold-ink);
   --ts-waitlist-bg: hsla(var(--gold), .15);
   --ts-closed: hsl(var(--midGray));
   --ts-closed-bg: hsla(var(--midGray), .1);
   --ts-disabled-bg: hsla(var(--blue), .03);
   --ts-disabled-text: hsla(var(--midGray), .7);

   container: te-form / inline-size;
   margin: 0 0 var(--space-6);
   font-family: var(--font-base);
   font-size: 16px;
   line-height: 1.5;
   color: var(--te-f-ink);

   fieldset {
      min-width: 0;
      padding: 0;
      margin: 0;
      border: 0;
   }

   /* a cikk „p { margin-bottom: 20px }” szabálya helyett */
   p {
      margin: 0;
   }

   > h2:first-child {
      margin-bottom: var(--space-5);
      color: hsl(var(--blue));
      font-weight: 700;
   }
}

/* ==========================================================================
   Rács: formRow / formSpanN (12 oszlop) – a Responsive elrendezés float-jai helyett
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   .formRow {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap);
      width: 100%;

      &::before,
      &::after {
         content: none;
      }

      > [class*="formSpan"] {
         float: none;
         grid-column: span 12;
         width: auto;
         min-width: 0;
         margin-left: 0;
      }
   }

   @container te-form (width >= 560px) {
      .formRow {
         > .formSpan1  { grid-column: span 1; }
         > .formSpan2  { grid-column: span 2; }
         > .formSpan3  { grid-column: span 3; }
         > .formSpan4  { grid-column: span 4; }
         > .formSpan5  { grid-column: span 5; }
         > .formSpan6  { grid-column: span 6; }
         > .formSpan7  { grid-column: span 7; }
         > .formSpan8  { grid-column: span 8; }
         > .formSpan9  { grid-column: span 9; }
         > .formSpan10 { grid-column: span 10; }
         > .formSpan11 { grid-column: span 11; }
      }
   }

   .rsform-block {
      margin: 0 0 var(--space-5);

      &::before,
      &::after {
         content: none;
      }
   }

   /* rejtett, üres blokkok (feltételes megjelenítés) ne hagyjanak térközt */
   .rsform-block:empty {
      display: none;
   }

   .formBody {
      float: none;
   }

   /* vízszintes elrendezés: címke balra, mező jobbra */
   .formHorizontal {
      .formControlLabel {
         float: none;
         width: auto;
         padding-top: 0;
         text-align: left;
      }

      .formControls {
         margin-left: 0;
      }
   }

   @container te-form (width >= 640px) {
      .formHorizontal .rsform-block:not(.rsform-type-freetext) {
         display: grid;
         grid-template-columns: minmax(160px, 28%) minmax(0, 1fr);
         column-gap: var(--gap);
         align-items: start;

         > .formControlLabel {
            margin: 0;
            padding-top: calc((var(--te-f-h) - 24px) / 2);
         }

         /* csoportoknál (jelölőnégyzet, rádió) az első sor magasságához */
         &:is(.rsform-type-checkboxgroup, .rsform-type-radiogroup, [class*="rsform-type-timeslot"]) > .formControlLabel {
            padding-top: 2px;
         }

         > .formControls {
            grid-column: 2;
         }
      }
   }
}

/* ==========================================================================
   Címke, kötelező jelölés, leírás, hibaüzenet
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   .formControlLabel,
   .form-label,
   .col-form-label {
      display: block;
      margin: 0 0 6px;
      color: var(--te-f-ink);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
   }

   strong.formRequired {
      margin-left: 3px;
      color: var(--te-f-error);
      font-weight: 700;
   }

   p.formDescription {
      margin: 6px 0 0;
      color: var(--te-f-muted);
      font-size: var(--fs-sm);
      line-height: 1.45;

      &:empty {
         display: none;
      }
   }

   .formValidation:empty {
      display: none;
   }

   .formNoError {
      display: none;
   }

   .formError,
   .invalid-feedback {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      height: auto;
      margin: 6px 0 0;
      padding: 0;
      color: var(--te-f-error);
      font-size: var(--fs-sm);
      font-weight: 500;
      line-height: 1.4;

      &::before {
         content: '';
         flex: 0 0 16px;
         height: 16px;
         margin-top: 1px;
         background-color: currentColor;
         -webkit-mask: var(--te-f-icon-alert) center / contain no-repeat;
         mask: var(--te-f-icon-alert) center / contain no-repeat;
      }
   }

   .rsform-block:has(.formError) > .formControlLabel {
      color: var(--te-f-error);
   }

   /* az űrlap egészére vonatkozó hibaüzenet ({error}) */
   :is(.rsform-error-message, .formRed) {
      position: relative;
      margin: 0 0 var(--space-5);
      padding: 14px 18px 14px 50px;
      border: 0;
      border-radius: var(--radius-lg);
      background-color: hsla(var(--strawberry), .1);
      box-shadow: inset 4px 0 0 hsl(var(--strawberry));
      color: var(--te-f-ink);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;

      &::before {
         content: '';
         position: absolute;
         top: 15px;
         left: 18px;
         width: 22px;
         height: 22px;
         background-color: var(--te-f-error);
         -webkit-mask: var(--te-f-icon-alert) center / contain no-repeat;
         mask: var(--te-f-icon-alert) center / contain no-repeat;
      }
   }

   .rsform-error-message-count {
      padding: 1px 8px;
      border-radius: 999px;
      background-color: var(--te-f-error);
      color: hsl(var(--white));
      font-size: 13px;
      font-weight: 700;
      vertical-align: 1px;
   }
}

/* ==========================================================================
   Szöveges mezők, legördülő lista, szövegdoboz
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   :is(
      input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="search"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
      textarea:not([hidden]),
      select:not([hidden])
   ) {
      display: block;
      width: 100%;
      max-width: 100%;
      height: var(--te-f-h);
      margin: 0;
      padding: 0 14px;
      border: 1px solid var(--te-f-border);
      border-radius: var(--te-f-radius);
      background: var(--te-f-bg);
      box-shadow: inset 0 1px 2px hsla(var(--darkBlue), .05);
      box-sizing: border-box;
      font: inherit;
      font-size: 16px;   /* 16 px alatt az iOS ráközelít a mezőre */
      line-height: 1.5;
      color: var(--te-f-ink);
      transition: border-color .2s, box-shadow .2s, background-color .2s;

      &::placeholder {
         color: hsla(var(--midGray), .65);
         opacity: 1;
      }

      &:hover {
         border-color: var(--te-f-border-hover);
      }

      &:focus {
         border-color: hsl(var(--gold));
         outline: none;
         box-shadow: 0 0 0 3px hsla(var(--gold), .28);
      }

      /* a dátumválasztó mezője readonly (csak a naptárból tölthető), ezért az nem szürke */
      &:is(:disabled, [readonly]:not(.rsform-calendar-box, .txtCal)) {
         background-color: hsla(var(--midGray), .1);
         color: var(--te-f-muted);
      }

      &[readonly]:is(.rsform-calendar-box, .txtCal) {
         cursor: pointer;
      }

      &:disabled {
         cursor: not-allowed;
      }

      /* hibás mező: Responsive (rsform-error) és Bootstrap 5 (is-invalid) */
      &:is(.rsform-error, .is-invalid, [aria-invalid="true"]) {
         border-color: var(--te-f-error);
         background-color: hsla(var(--strawberry), .04);
         color: var(--te-f-ink);

         &:focus {
            box-shadow: 0 0 0 3px hsla(var(--strawberry), .22);
         }
      }
   }

   /* a :not([hidden]) a közös mezőszabály specificitásához kell (a :is() a legerősebb tagét
      veszi át, az input[type=…]-ét), különben az felülírná a háttér-nyilat és a térközöket */
   textarea:not([hidden]) {
      height: auto;
      min-height: 140px;
      padding: 12px 14px;
      resize: vertical;
   }

   select:not([hidden]) {
      padding-right: 46px;
      background: var(--te-f-bg) var(--te-f-icon-chevron) right 14px center / 18px 18px no-repeat;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;

      &:is(.rsform-error, .is-invalid, [aria-invalid="true"]) {
         background: hsla(var(--strawberry), .04) var(--te-f-icon-chevron) right 14px center / 18px 18px no-repeat;
      }

      &:is([multiple], [size]:not([size="1"])) {
         height: auto;
         padding: 6px;
         background-image: none;

         option {
            padding: 6px 8px;
            border-radius: var(--radius-sm);
         }
      }

      &.rsform-select-box-small {
         display: inline-block;
         width: auto;
         min-width: 96px;
      }
   }

   /* születésnap mező: több kis lista egymás mellett */
   .formBody:has(> select.rsform-select-box-small) {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);

      > :is(.formValidation, .formDescription) {
         flex-basis: 100%;
      }
   }

   /* dátum: mező + naptár gomb egy sorban */
   .formBody:has(> .rsform-calendar-button) {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);

      > .rsform-calendar-box {
         flex: 1 1 200px;
         width: auto;
      }

      > :is(.formValidation, .formDescription) {
         flex-basis: 100%;
      }
   }

   /* telefonszám mező országválasztóval (intl-tel-input) */
   .iti {
      display: block;
      width: 100%;

      input {
         padding-left: 52px;
      }
   }
}

/* ==========================================================================
   Jelölőnégyzet, rádiógomb
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   input:is([type="checkbox"], [type="radio"]) {
      flex: 0 0 auto;
      display: inline-grid;
      place-content: center;
      width: 20px;
      height: 20px;
      margin: 2px 0 0;
      padding: 0;
      border: 1.5px solid hsla(var(--blue), .5);
      border-radius: var(--radius-sm);
      background-color: var(--te-f-bg);
      vertical-align: -4px;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      transition: background-color .15s, border-color .15s, box-shadow .15s;

      &::before {
         content: '';
         width: 12px;
         height: 12px;
         background-color: hsl(var(--white));
         -webkit-mask: var(--te-f-icon-check) center / contain no-repeat;
         mask: var(--te-f-icon-check) center / contain no-repeat;
         transform: scale(0);
         transition: transform .15s;
      }

      &:hover {
         border-color: hsl(var(--blue));
      }

      &:checked {
         border-color: hsl(var(--blue));
         background-color: hsl(var(--blue));

         &::before {
            transform: scale(1);
         }
      }

      &:focus {
         outline: none;
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 2px;
      }

      &:disabled {
         opacity: .45;
         cursor: not-allowed;
      }

      &:is(.rsform-error, .is-invalid) {
         border-color: var(--te-f-error);
      }
   }

   input[type="radio"] {
      border-radius: 50%;

      &::before {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         -webkit-mask: none;
         mask: none;
      }
   }

   /* Responsive: <label><input>szöveg</label> */
   /* nem flex: a címkében lehet link is (pl. adatkezelési tájékoztató), a szöveg folyó marad */
   .formControls label:has(> input:is([type="checkbox"], [type="radio"])) {
      position: relative;
      display: inline-block;
      min-height: 24px;
      margin: 4px 24px 4px 0;
      padding: 0 0 0 30px;
      color: var(--te-f-ink);
      font-weight: 400;
      line-height: 1.5;
      cursor: pointer;

      > input:is([type="checkbox"], [type="radio"]) {
         position: absolute;
         top: 2px;
         left: 0;
         margin: 0;
      }
   }

   .form-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-height: 0;
      margin: 4px 0;
      padding: 0;
      color: var(--te-f-ink);
      line-height: 1.5;

      .form-check-input {
         float: none;
         margin: 2px 0 0;
      }

      .form-check-label {
         cursor: pointer;
      }
   }

   .form-check-inline {
      margin-right: 24px;
   }

   /* függőleges csoport: soronként egy elem */
   p.rsformVerticalClear {
      overflow: visible;
      margin: 0;

      label {
         display: block;
         margin-right: 0;
      }
   }

   /* több oszlopos csoport (rsformgridN): egyenlő oszlopok, keskenyen egymás alatt */
   .rsfp-fieldset:has(> [class^="rsformgrid"]) {
      display: flex;
      column-gap: var(--gap);

      > [class^="rsformgrid"] {
         flex: 1 1 0;
         float: none;
         width: auto;
         min-width: 0;
      }
   }

   @container te-form (width < 560px) {
      .rsfp-fieldset:has(> [class^="rsformgrid"]) {
         flex-direction: column;
      }
   }
}

/* ==========================================================================
   Gombok
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   :is(button, input:is([type="submit"], [type="button"], [type="reset"])):not(.formexpiry-notification-close, .iti__selected-country, .xdsoft_datetimepicker *) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      width: auto;
      min-height: var(--te-f-h);
      height: auto;
      margin: 0;
      padding: 0 22px;
      border: 1px solid hsl(var(--blue));
      border-radius: var(--te-f-radius);
      background: transparent;
      box-shadow: none;
      color: hsl(var(--blue));
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.2;
      text-align: center;
      text-shadow: none;
      vertical-align: middle;
      cursor: pointer;
      transition: background-color var(--transition-time), border-color var(--transition-time), color var(--transition-time);

      &:hover {
         background: hsla(var(--blue), .08);
         color: hsl(var(--blue));
      }

      &:active {
         box-shadow: none;
      }

      &:focus {
         outline: none;
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 2px;
      }

      &:is(:disabled, .disabled, [aria-disabled="true"]) {
         opacity: .5;
         cursor: not-allowed;

         &:hover {
            background: transparent;
         }
      }
   }

   /* elsődleges: beküldés, következő oldal, köszönőoldal gombja */
   :is(
      .rsform-submit-button,
      .rsform-button-next,
      .rsform-thankyou-button,
      button[type="submit"],
      input[type="submit"],
      .btn-primary
   ):not(.rsform-button-prev) {
      padding-inline: 28px;
      border-color: hsl(var(--blue));
      background: hsl(var(--blue));
      color: hsl(var(--white));

      &:hover {
         border-color: hsl(var(--darkBlue));
         background: hsl(var(--darkBlue));
         color: hsl(var(--white));
      }

      &:is(:disabled, .disabled, [aria-disabled="true"]):hover {
         border-color: hsl(var(--blue));
         background: hsl(var(--blue));
      }
   }

   /* törlés: halvány, szürke keret */
   :is(.rsform-reset-button, button[type="reset"], input[type="reset"]) {
      border-color: hsla(var(--midGray), .35);
      color: var(--te-f-muted);

      &:hover {
         border-color: hsla(var(--midGray), .6);
         background: hsla(var(--midGray), .06);
         color: var(--te-f-ink);
      }
   }

   /* naptár gomb: négyzetes ikon-gomb */
   .rsform-calendar-button {
      flex: 0 0 auto;
      min-width: var(--te-f-h);
      padding: 0 12px;
   }

   /* lapváltó és beküldő gombok egy sorban */
   .formBody:has(> :is(.rsform-button-prev, .rsform-button-next, .rsform-submit-button, .rsform-reset-button)) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-3);

      > :is(.formValidation, .formDescription) {
         flex-basis: 100%;
      }
   }
}

/* ==========================================================================
   Fájlfeltöltés
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   input[type="file"] {
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 10px;
      border: 1px dashed hsla(var(--blue), .4);
      border-radius: var(--te-f-radius);
      background-color: var(--te-f-bg);
      font: inherit;
      font-size: var(--fs-sm);
      line-height: 1.5;
      color: var(--te-f-muted);
      cursor: pointer;
      transition: border-color .2s, background-color .2s;

      &:hover {
         border-color: hsl(var(--blue));
         background-color: var(--te-f-bg-hover);
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 2px;
      }

      &.rsform-error {
         border-color: var(--te-f-error);
         background-color: hsla(var(--strawberry), .04);
      }

      &::file-selector-button {
         margin-right: 14px;
         padding: 8px 16px;
         border: 1px solid hsl(var(--blue));
         border-radius: var(--radius-sm);
         background: hsl(var(--white));
         color: hsl(var(--blue));
         font: inherit;
         font-weight: 500;
         cursor: pointer;
         transition: background-color var(--transition-time);
      }

      &:hover::file-selector-button {
         background: hsla(var(--blue), .08);
      }
   }

   .rsfp-field-multiple-plus + .rsfp-field-multiple-plus {
      margin-top: var(--space-2);
   }

   .rsfp-field-multiple-plus-button {
      margin-top: var(--space-2);
   }
}

/* ==========================================================================
   Többoldalas űrlap: folyamatjelző
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   .rsformProgress {
      margin: 0 0 var(--space-5);
      font-size: 13px;
   }

   .rsformProgressContainer {
      height: 28px;
      margin: 0 !important;
      overflow: hidden;
      border: 0;
      border-radius: 999px;
      background: hsla(var(--blue), .08);
      box-shadow: none;
   }

   .rsformProgressBar {
      min-width: max-content;
      height: 28px;
      margin: 0 !important;
      padding: 0 14px;
      border-radius: 999px;
      background: hsl(var(--blue));
      box-shadow: none;
      font-size: 13px;
      line-height: 28px;
      color: hsl(var(--white));
      text-align: right;
      text-shadow: none;
      white-space: nowrap;

      em {
         font-style: normal;
         font-weight: 500;
      }

      strong {
         font-weight: 700;
      }
   }

   /* a lapozás közben elrejtett oldalak ne foglaljanak helyet */
   .formHidden {
      display: none;
   }
}

/* ==========================================================================
   Táblázatos kérdőív (Survey Table), szabad szöveg
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   .rsfp-surveytable-table {
      width: 100%;
      border-collapse: collapse;

      :is(th, td) {
         padding: 10px 12px;
         border-bottom: 1px solid hsla(var(--blue), .12);
         text-align: left;
      }

      thead th {
         color: hsl(var(--blue));
         font-weight: 500;
         font-size: var(--fs-sm);
      }

      tbody > tr:nth-child(odd) > :is(td, th) {
         background-color: hsla(var(--lightBlue), .08);
      }
   }

   .rsform-type-freetext {
      p {
         margin: 0 0 var(--space-3);
      }

      > :last-child,
      > :last-child > :last-child {
         margin-bottom: 0;
      }
   }
}

/* ==========================================================================
   Timeslot Field (plg_system_timeslotfield)
   A színek a fenti --ts-* változókból; itt csak a v4-es kártyaforma és az állapotok.
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   /* kártya téma (alapértelmezés) – a „compact” és a „template” téma érintetlen */
   .timeslot-fieldset:not(.timeslot-theme-compact, .timeslot-theme-template) :is(.timeslot-radio, .timeslot-checkbox) {
      gap: 12px;
      min-height: 52px;
      margin-bottom: var(--space-2);
      padding: 12px 16px;
      transition: border-color .2s, background-color .2s, box-shadow .2s;

      &:has(input:checked) {
         box-shadow: inset 4px 0 0 var(--ts-accent);
      }

      &:has(input:focus-visible) {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 2px;
      }

      &.timeslot-horizontal {
         margin-right: var(--space-2);
      }
   }

   .timeslot-label {
      flex: 1 1 auto;
      margin: 0;
      font-weight: 500;
      line-height: 1.4;
   }

   /* állapotcímkék: kerek „pirula” */
   :is(.timeslot-availability, .timeslot-full, .timeslot-closed, .timeslot-waitlist) {
      flex: 0 0 auto;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.4;
      white-space: nowrap;
   }

   /* betelt / lezárt idősáv */
   :is(.timeslot-radio, .timeslot-checkbox):has(input:disabled) {
      opacity: 1;

      .timeslot-label {
         text-decoration: line-through;
         text-decoration-color: hsla(var(--midGray), .5);
      }

      input {
         opacity: .45;
      }
   }

   /* hibás mező: piros keret minden idősávon */
   .rsform-block:has(.formError) :is(.timeslot-radio, .timeslot-checkbox) {
      border-color: hsla(var(--strawberry), .55);
      background-color: hsl(var(--white));
   }

   /* több oszlop: a bővítmény inline float-os oszlopai helyett egyenlő oszlopok */
   .timeslot-fieldset:has(> div[style*="float"]) {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--space-3);

      > div[style*="float"] {
         flex: 1 1 0;
         float: none !important;
         width: auto !important;
         min-width: 0;
      }

      /* figyelmeztetés, szkript: teljes sor az oszlopok fölött */
      > :not(div[style*="float"]) {
         flex: 0 0 100%;
      }
   }

   @container te-form (width < 560px) {
      .timeslot-fieldset:has(> div[style*="float"]) > div[style*="float"] {
         flex-basis: 100%;
      }

      :is(.timeslot-radio, .timeslot-checkbox) {
         flex-wrap: wrap;
      }
   }

   /* figyelmeztetés (pl. kevesebb szabad hely, mint a minimum). A szöveg elején a bővítmény
      saját ikonja (emoji) áll, ezért itt nincs külön ikon. A szigorú változatnál a szkript
      inline színt ír az elemre – ezt az !important írja felül, a színt a stílusból felismerve. */
   .timeslot-warning {
      margin: 0 0 var(--space-3);
      padding: 12px 16px 12px 20px;
      border: 0 !important;
      border-radius: var(--radius-lg);
      background-color: hsla(var(--gold), .14) !important;
      box-shadow: inset 4px 0 0 hsl(var(--gold));
      color: var(--te-f-ink) !important;
      font-size: 15px;
      line-height: 1.5;

      strong {
         margin-right: 4px;
         font-size: inherit;
         font-weight: 700;
         color: inherit !important;
      }

      &:is(.timeslot-warning-strict, [style*="248, 215, 218"], [style*="f8d7da"]) {
         background-color: hsla(var(--strawberry), .1) !important;
         box-shadow: inset 4px 0 0 hsl(var(--strawberry));

         strong:last-child {
            color: var(--te-f-error) !important;
         }
      }
   }
}

/* ==========================================================================
   Form Expiry Field (plg_system_formexpiry)
   ========================================================================== */

#content :is(.formResponsive, form:has(.rsform-block)) {

   .formexpiry-field-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      margin: 0;
   }

   /* „hamarosan lejár” és „lejárt” üzenet – a te-callout--soft mintájára */
   :is(.formexpiry-warning-message, .formexpiry-expired-message) {
      position: relative;
      display: block;
      align-self: stretch;
      margin: 0;
      padding: 14px 18px 14px 52px;
      border: 0;
      border-radius: var(--radius-lg);
      color: var(--te-f-ink);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;

      &::before {
         content: '';
         position: absolute;
         top: 15px;
         left: 18px;
         width: 22px;
         height: 22px;
         margin: 0;
         font-size: 0;
         -webkit-mask: var(--te-f-expiry-icon) center / contain no-repeat;
         mask: var(--te-f-expiry-icon) center / contain no-repeat;
      }
   }

   .formexpiry-warning-message {
      --te-f-expiry-icon: var(--te-f-icon-clock);
      background-color: hsla(var(--gold), .14);
      box-shadow: inset 4px 0 0 hsl(var(--gold));

      &::before {
         background-color: var(--te-f-gold-ink);
      }
   }

   .formexpiry-expired-message {
      --te-f-expiry-icon: var(--te-f-icon-blocked);
      background-color: hsla(var(--strawberry), .1);
      box-shadow: inset 4px 0 0 hsl(var(--strawberry));

      &::before {
         background-color: var(--te-f-error);
      }
   }

   /* visszaszámláló (élő és statikus) */
   :is(.formexpiry-live-countdown, .formexpiry-static-countdown) {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 10px;
      margin: 0;
      padding: 12px 18px;
      border: 1px solid hsla(var(--blue), .14);
      border-radius: var(--radius-lg);
      background: hsla(var(--lightBlue), .14);
      color: var(--te-f-ink);
      font-size: 15px;
      line-height: 1.4;

      .countdown-prefix {
         margin: 0;
         font-weight: 500;
      }

      .countdown-suffix {
         margin: 0;
         color: var(--te-f-muted);
         font-weight: 400;
      }

      .countdown-time {
         display: inline-flex;
         flex-wrap: wrap;
         align-items: baseline;
         gap: 4px 12px;
         color: hsl(var(--blue));
         font-weight: 700;
      }
   }

   .formexpiry-live-countdown {
      .countdown-unit {
         display: inline-flex;
         align-items: baseline;
         gap: 4px;
         margin: 0;
      }

      .countdown-value {
         min-width: 1.4ch;
         color: hsl(var(--blue));
         font-size: 22px;
         font-weight: 700;
         font-variant-numeric: tabular-nums;
         text-align: right;
      }

      .countdown-label {
         color: var(--te-f-muted);
         font-size: 13px;
         font-weight: 400;
      }
   }

   /* szabad helyek száma */
   .formexpiry-capacity-counter {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 6px 14px 6px 12px;
      border: 0;
      border-radius: 999px;
      background: hsla(var(--blue), .08);
      color: hsl(var(--blue));
      font-size: var(--fs-sm);
      font-weight: 500;

      &::before {
         content: '';
         flex: 0 0 18px;
         height: 18px;
         background-color: currentColor;
         -webkit-mask: var(--te-f-icon-people) center / contain no-repeat;
         mask: var(--te-f-icon-people) center / contain no-repeat;
      }
   }

   /* lejárt űrlap: halvány sraffozás a mezők fölött */
   .formexpiry-form-overlay {
      border-radius: var(--radius-lg);
      background: repeating-linear-gradient(-45deg, hsla(var(--darkBlue), .045) 0 8px, transparent 8px 16px);
      backdrop-filter: grayscale(.6);

      &:hover {
         background: repeating-linear-gradient(-45deg, hsla(var(--darkBlue), .06) 0 8px, transparent 8px 16px);
      }
   }
}

/* Felugró ablak: a <body>-hoz fűzve, a #content-en kívül */
body {
   .formexpiry-notification-overlay {
      background: hsla(var(--darkBlue), .55);
   }

   .formexpiry-notification {
      max-width: 480px;
      border-radius: var(--radius-lg);
      background: hsl(var(--white));
      box-shadow: 0 2px 6px hsla(var(--darkBlue), .12), 0 24px 64px hsla(var(--darkBlue), .3);
      font-family: var(--font-base);
      color: hsl(var(--darkBlue));
   }

   .formexpiry-notification-content {
      padding: 36px 32px 32px;
   }

   /* az emoji helyett vonalikon arany körben */
   .formexpiry-notification-icon {
      position: relative;
      width: 64px;
      height: 64px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: hsla(var(--gold), .16);
      font-size: 0;
      line-height: 0;

      &::before {
         content: '';
         position: absolute;
         inset: 0;
         margin: auto;
         width: 30px;
         height: 30px;
         background-color: hsl(43, 100%, 31%);
         -webkit-mask: var(--te-f-icon-clock) center / contain no-repeat;
         mask: var(--te-f-icon-clock) center / contain no-repeat;
      }
   }

   .formexpiry-notification p {
      color: hsl(var(--darkBlue));
      font-size: 17px;
      font-weight: 500;
      line-height: 1.5;
   }

   .formexpiry-notification-close {
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: hsl(var(--blue));
      font-family: var(--font-base);
      font-size: 28px;

      &:hover {
         background: hsla(var(--blue), .08);
         color: hsl(var(--darkBlue));
      }

      &:focus-visible {
         outline: 2px solid hsl(var(--gold));
         outline-offset: 2px;
      }
   }

   .formexpiry-notification-dev {
      border-radius: var(--radius-sm);
      background: hsla(var(--gold), .14);
      color: hsl(var(--darkBlue));
   }
}

/* ==========================================================================
   RSForm jQuery dátumválasztó (xdsoft datetimepicker) – a <body>-hoz fűzve
   ========================================================================== */

body .xdsoft_datetimepicker {
   padding: 8px 8px 8px 0;
   border: 1px solid hsla(var(--blue), .15);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
   font-family: var(--font-base);
   color: hsl(var(--darkBlue));

   .xdsoft_label {
      background: transparent;
      color: hsl(var(--blue));
      font-weight: 500;
   }

   .xdsoft_calendar {
      th {
         border-color: transparent;
         background: transparent;
         color: hsl(var(--midGray));
         font-weight: 500;
      }

      td {
         border-color: transparent;
         border-radius: var(--radius-sm);
         background: transparent;
         color: hsl(var(--darkBlue));

         > div {
            padding-right: 0;
            text-align: center;
         }

         &.xdsoft_today {
            box-shadow: inset 0 0 0 1.5px hsl(var(--gold));
            color: hsl(var(--blue));
            font-weight: 700;
         }

         &:is(.xdsoft_default, .xdsoft_current) {
            background: hsl(var(--blue));
            box-shadow: none;
            color: hsl(var(--white));
         }

         &:hover {
            background: hsla(var(--lightBlue), .45) !important;
            color: hsl(var(--darkBlue)) !important;
         }
      }
   }

   .xdsoft_timepicker .xdsoft_time_box {
      border-color: hsla(var(--blue), .15);
      border-radius: var(--radius-sm);

      > div > div {
         border-color: hsla(var(--blue), .08);
         background: transparent;
         color: hsl(var(--darkBlue));

         &.xdsoft_current {
            background: hsl(var(--blue));
            box-shadow: none;
            color: hsl(var(--white));
         }

         &:hover {
            background: hsla(var(--lightBlue), .45) !important;
            color: hsl(var(--darkBlue)) !important;
         }
      }
   }

   .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
      &.xdsoft_current {
         background: hsl(var(--blue));
         box-shadow: none;
      }

      &:hover {
         background: hsla(var(--lightBlue), .45);
         color: hsl(var(--darkBlue));
      }
   }
}

/* ==========================================================================
   Ikonok (maszkként; a színt a background-color adja)
   ========================================================================== */

:root {
   --te-f-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 5.75 5 5 5-5' fill='none' stroke='%23163f93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --te-f-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --te-f-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4'/%3E%3C/svg%3E");
   --te-f-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 2.5 24.5 23h-23z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13 10v6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='19.4' r='1.5'/%3E%3C/svg%3E");
   --te-f-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 8.5V13l3 2M9.5 2.5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --te-f-icon-blocked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m5.5 5.5 13 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
   --te-f-icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M2.5 20c.5-3.6 3.2-5.5 6.5-5.5s6 1.9 6.5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15.5 4.8a3.5 3.5 0 0 1 0 6.4M17.5 14.8c2.2.6 3.6 2.4 4 5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}