/* =========================================================================
   Bexon-témájú SweetAlert (ÚJRAHASZNOSÍTHATÓ) — a `.swal-bexon` customClass-szal.
   Használat: töltsd be ezt + a `bexon-swal.js`-t (2026-11-05 óta a _Layout minden oldalon
   betölti mindkettőt), majd:
     BexonSwal.loginGate();                 // „belépett előfizetőnek" kapu
     BexonSwal.upgradeGate({ text:'…' });   // „csak előfizetőnek" kapu egy gombbal
     BexonSwal.fire({ title:'…', text:'…' });// általános bexon-stílusú Swal
   A `buttonsStyling:false` miatt a gombokat TELJESEN ezek az osztályok stílusozzák
   (a globális ~/css/sweetalert.css-t felülírva). Színek a téma tj-* változóiból.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) GLOBÁLIS ALAP (2026-11-05): minden SweetAlert2-ablak – a BexonSwal nélkül
   nyitottak is – bexon-külsőt kap. A .swal-bexon szabályai (lent) ugyanezek,
   és mivel később jönnek, a BexonSwal-ablakokra azok érvényesek.
   - Alapértelmezett gombok (buttonsStyling: true, .swal2-styled): a beégetett
     confirmButtonColor / cancelButtonColor inline színét is felülírja.
   - Régi minta: <button class="sweetalertcustombutton"><a class="vs-btn …">…</a></button>
     – a gomb csak keret, a benne lévő link kapja a gombstílust.
   ------------------------------------------------------------------------- */
.swal2-popup {
  border-radius: 18px;
  padding: 14px 12px 26px;
  font-family: inherit;
}
.swal2-popup .swal2-title { color: var(--tj-color-heading-primary); font-size: 22px; font-weight: 700; }
.swal2-popup .swal2-html-container { color: var(--tj-color-text-body); font-size: 15.5px; line-height: 1.6; }
.swal2-popup .swal2-actions { gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }
.swal2-popup .swal2-close { color: #8aa0ad; font-size: 30px; box-shadow: none !important; }
.swal2-popup .swal2-close:hover { color: var(--tj-color-heading-primary); }
.swal2-popup .swal2-icon.swal2-info { border-color: #9cc9ef; color: #0b7ea3; }

.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-deny,
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .sweetalertcustombutton > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0; padding: 13px 30px; border-radius: 50px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; box-shadow: none; transition: .2s ease-in-out;
}
.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-confirm.sweetalertcustombutton > a {
  background-color: var(--tj-color-theme-primary) !important;
  border: 1px solid var(--tj-color-theme-primary);
  color: var(--tj-color-common-white) !important;
}
.swal2-popup .swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-confirm.sweetalertcustombutton > a:hover {
  background-color: #3e6b40 !important;
  background-color: color-mix(in srgb, var(--tj-color-theme-primary) 82%, #000) !important;
  border-color: #3e6b40;
  border-color: color-mix(in srgb, var(--tj-color-theme-primary) 82%, #000);
  box-shadow: 0 10px 24px rgba(27, 42, 30, .20);
}
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-deny,
.swal2-popup .swal2-cancel.sweetalertcustombutton > a,
.swal2-popup .swal2-deny.sweetalertcustombutton > a {
  background-color: var(--tj-color-common-white) !important;
  border: 1px solid var(--tj-color-border-1);
  color: var(--tj-color-heading-primary) !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover,
.swal2-popup .swal2-styled.swal2-deny:hover,
.swal2-popup .swal2-cancel.sweetalertcustombutton > a:hover,
.swal2-popup .swal2-deny.sweetalertcustombutton > a:hover {
  background-color: var(--tj-color-theme-bg-2) !important;
  border-color: var(--tj-color-theme-primary);
}
.swal2-popup .swal2-styled:focus-visible,
.swal2-popup .sweetalertcustombutton:focus-visible > a { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; }
/* a SweetAlert2 alap (lila) fókuszgyűrűje helyett csak billentyűzetnél látszó körvonal */
.swal2-popup .swal2-styled:focus { box-shadow: none; }
/* a régi mintában a <button> csak keret: háttér, keret és belső margó nélkül */
.swal2-popup .sweetalertcustombutton {
  background: none; border: 0; padding: 0; margin: 0; box-shadow: none; cursor: pointer;
}
.swal2-popup .sweetalertcustombutton:focus { box-shadow: none; outline: none; }

/* -------------------------------------------------------------------------
   2) BexonSwal-ablakok (.swal-bexon)
   ------------------------------------------------------------------------- */
.swal2-popup.swal-bexon {
  border-radius: 18px;
  padding: 14px 12px 26px;
  font-family: inherit;
}
.swal-bexon .swal2-title { color: var(--tj-color-heading-primary); font-size: 22px; font-weight: 700; }
.swal-bexon .swal2-html-container,
.swal-bexon .swal2-content { color: var(--tj-color-text-body); font-size: 15.5px; line-height: 1.6; }
.swal-bexon .swal2-actions { gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }
.swal-bexon .swal2-close { color: #8aa0ad; font-size: 30px; box-shadow: none !important; }
.swal-bexon .swal2-close:hover { color: var(--tj-color-heading-primary); }
.swal-bexon .swal2-icon.swal2-info { border-color: #9cc9ef; color: #0b7ea3; }

/* bexon „tj-primary-btn" hangulat: témaszínű pill (szimmetrikus, ikon-kör nélkül).
   A SweetAlert megnyitáskor fókuszt ad a gombnak: a sötétebb árnyalat ezért csak :hover, a fókuszt
   (billentyűzetnél, és ha a kiváltó elem nem fókuszálható) körvonal jelzi. */
.swal-bexon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background-color: var(--tj-color-theme-primary); color: #fff !important; border: 1px solid var(--tj-color-theme-primary);
  border-radius: 50px; padding: 13px 30px; font-size: 15.5px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: .2s ease-in-out; box-shadow: none; margin: 0; font-family: inherit;
}
.swal-bexon-btn:hover {
  background-color: #3e6b40; border-color: #3e6b40;
  background-color: color-mix(in srgb, var(--tj-color-theme-primary) 82%, #000);
  border-color: color-mix(in srgb, var(--tj-color-theme-primary) 82%, #000);
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(27, 42, 30, .20); outline: none;
}
.swal-bexon-btn:focus { outline: none; }
.swal-bexon-btn:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; }
.swal-bexon-btn--ghost {
  background-color: #fff; color: var(--tj-color-heading-primary) !important; border-color: var(--tj-color-border-1);
}
.swal-bexon-btn--ghost:hover {
  background-color: var(--tj-color-theme-bg-2); border-color: var(--tj-color-theme-primary); color: var(--tj-color-heading-primary) !important; box-shadow: none;
}