.elementor-2122 .elementor-element.elementor-element-2317f02{--display:flex;border-style:none;--border-style:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2122 .elementor-element.elementor-element-457082c{padding:0px 0px 0px 0px;}#elementor-popup-modal-2122 .dialog-widget-content{background-color:#222222;border-style:solid;border-width:10px 10px 10px 10px;border-color:#222222;border-radius:12px 12px 12px 12px;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-2122{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-2122 .dialog-message{width:1100px;height:auto;}/* Start custom CSS for container, class: .elementor-element-2317f02 *//* ================================
   MTX – Lesson Popup Layout
   ================================ */

/* Wrapper del contenuto caricato dallo shortcode */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: block;
}

/* Video player – formato 16:9, grande e centrato */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid #F9FAFB;
  display: block;
}

/* Pulsanti DONE / NEXT – posizionamento generale */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done {
  position: absolute;
  right: 20px;
  z-index: 999;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px !important;

  font-family: Roboto, Sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;

  border-radius: 999px;
  padding: 8px 14px !important;
  height: 44px !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* DONE in alto a destra */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done {
  top: 20px;
}

/* NEXT in basso a destra */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson {
  bottom: 80px;
}

/* Icone nei bottoni */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn_icon {
  width: 15px;
  margin-left: 6px;
  transition: transform 0.15s ease, filter 0.25s ease;
}

/* Rimuove focus rosso/blu */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson:focus,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson:active,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done:focus,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ================================
   X di chiusura popup Elementor
   ================================ */

/* Rimuove completamente qualsiasi sfondo, bordo o highlight dalla X */
.elementor-popup-modal .dialog-close-button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rimuove anche il cerchio blu del focus */
.elementor-popup-modal .dialog-close-button:focus,
.elementor-popup-modal .dialog-close-button:active,
.elementor-popup-modal .dialog-close-button:hover {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Icona X pulita */
.elementor-popup-modal .dialog-close-button i {
  color: #ffffff !important;
  font-size: 22px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Rimuove cerchio/blocco che Elementor a volte aggiunge come pseudo-elemento */
.elementor-popup-modal .dialog-close-button::before,
.elementor-popup-modal .dialog-close-button::after {
  display: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ================================
   MTX – Stile bottoni DONE / NEXT
   ================================ */

/* ---------- DONE ---------- */

/* DONE base: lezione NON completata */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done {
  background: #181818 !important;
  color: #ffffff !important;
}

/* DONE spento = non deve sembrare cliccabile */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"] {
  cursor: default !important;
}

/* DONE spento: niente hover attivo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"]:hover,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"]:focus,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"]:active {
  background: #181818 !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* DONE completo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done.is-complete,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="1"] {
  background: #00ffc8 !important;
  color: #050608 !important;
  cursor: pointer !important;
  box-shadow:
    0 0 0 1px rgba(0,255,200,0.7),
    0 0 18px rgba(0,255,200,0.35);
}

/* Hover DONE completo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done.is-complete:hover,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="1"]:hover {
  background: #00e3b2 !important;
  transform: scale(1.07);
}

/* Icona DONE non completo → bianca */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done:not(.is-complete) .mtx-btn_icon,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"] .mtx-btn_icon {
  filter: brightness(200%) saturate(0%) invert(1);
}

/* DONE spento: niente cambio icona in hover */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="0"]:hover .mtx-btn_icon {
  filter: brightness(200%) saturate(0%) invert(1);
  transform: none !important;
}

/* Icona DONE completo → scura */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done.is-complete .mtx-btn_icon,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="1"] .mtx-btn_icon {
  filter: none;
}

/* Hover icona DONE completo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done.is-complete:hover .mtx-btn_icon,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[data-completed="1"]:hover .mtx-btn_icon {
  transform: scale(1.15);
}

/* ---------- NEXT ---------- */

/* NEXT nascosto di default */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson {
  display: none !important;
  background: #181818 !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* NEXT visibile solo quando PHP/JS aggiungono .is-visible */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson.is-visible {
  display: inline-flex !important;
}

/* Icona NEXT sempre bianca */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson .mtx-btn_icon {
  filter: invert(1) brightness(200%) saturate(0%) !important;
}

/* Hover NEXT */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson:hover {
  transform: scale(1.07);
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson:hover .mtx-btn_icon {
  transform: scale(1.15);
}

/* Disabled safety */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-next-lesson[disabled],
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-done[disabled] {
  opacity: 0.6;
  cursor: default !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ================================
   UNLOCK BOX (CENTER, MATTTEXP GREEN)
   ================================ */

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-box {
  display: none !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translateY(-8px) !important;

  width: min(520px, calc(100% - 28px)) !important;
  padding: 16px 16px 14px !important;

  border-radius: 16px !important;
  background: rgba(10,10,12,.92) !important;
  border: 1px solid rgba(0,255,205,.55) !important;

  box-shadow:
    0 0 0 1px rgba(0,255,205,.18),
    0 18px 40px rgba(0,0,0,.55),
    0 0 26px rgba(0,255,205,.18) !important;

  z-index: 9999 !important;
  pointer-events: auto !important;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-box.is-visible {
  display: block !important;
}

/* Titolo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-title {
  font-family: Roboto, Sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #00FFCD !important;
  margin-bottom: 6px !important;
}

/* Testo */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-text {
  font-family: Roboto, Sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.85) !important;
  margin-bottom: 12px !important;
}

/* CTA */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;

  background: #00FFCD !important;
  color: #050608 !important;
  text-decoration: none !important;

  font-family: Roboto, Sans-serif !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background-color .2s ease !important;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-cta:hover {
  transform: scale(1.04) !important;
  background: #00e3b2 !important;
  box-shadow:
    0 0 0 1px rgba(0,255,205,.9),
    0 0 22px rgba(0,255,205,.45) !important;
}

/* Close: solo X bianca */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  margin: 0 !important;

  width: auto !important;
  height: auto !important;

  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;

  transition: transform .15s ease, opacity .2s ease !important;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-close:hover {
  transform: scale(1.12) !important;
  opacity: .9 !important;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-close:focus,
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-close:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ================================
   MTX – UNLOCK BACKDROP
   ================================ */

/* Backdrop nascosto di default */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-backdrop {
  display: none !important;

  position: absolute !important;
  inset: 0 !important;

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);

  z-index: 9000 !important;
  pointer-events: none !important;
}

/* Box sopra il backdrop */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-box {
  z-index: 9001 !important;
}

/* Mostra il backdrop solo quando la box è visibile */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-lesson-popup-wrap .mtx-unlock-box.is-visible + .mtx-unlock-backdrop {
  display: block !important;
}

/* ================================
   LOG SESSION
   ================================ */

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session {
  position: absolute;
  left: 20px;
  top: 20px;

  height: 44px;
  padding: 0 16px;
  border-radius: 999px;

  background: rgba(0,255,205,.10);
  border: 1px solid rgba(0,255,205,.55);
  color: #00FFCD;

  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 800;
  font-size: 12px;

  box-shadow: none !important;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session:hover {
  background: rgba(0,255,205,1);
  color: #050608;
}

.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session.is-loading {
  pointer-events: none;
  opacity: .75;
  color: rgba(0,0,0,.65) !important;
  background: rgba(0,255,205,.45) !important;
  border-color: #00FFCD !important;
}

/* Spinner minimal */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  margin-top: -7px;

  border: 2px solid rgba(0,0,0,.25);
  border-top-color: #000;
  border-radius: 50%;

  animation: mtx-spin .7s linear infinite;
}

/* OK STATE */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session.is-ok {
  opacity: 1;
  color: #000 !important;
  background: #00FFCD !important;
  border-color: #00FFCD !important;
  box-shadow:
    0 0 0 2px rgba(0,255,205,.35),
    0 6px 18px rgba(0,255,205,.35);
  animation: mtx-ok-pulse .6s ease-out;
}

/* Se il bottone è disabled ma vogliamo mantenerlo "ok" */
.elementor-2122 .elementor-element.elementor-element-2317f02 .mtx-btn-log-session.is-ok[disabled] {
  opacity: 1 !important;
  cursor: default !important;
}

/* =========================
   ANIMATIONS
   ========================= */

@keyframes mtx-spin {
  to { transform: rotate(360deg); }
}

@keyframes mtx-ok-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}/* End custom CSS */