/*!
 * <smartpos-promo-modal> — tema claro, lightbox de video integrado.
 * Bloquea el login hasta que el usuario cierre.
 */
(function () {
  'use strict';

  var TEMPLATE = `
  <style>
    :host {
      position: fixed; inset: 0;
      z-index: 2147483647;
      display: block;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: #0b1220;
      animation: spm-fadein .35s ease-out both;
    }
    @keyframes spm-fadein { from { opacity: 0 } to { opacity: 1 } }
    .backdrop {
      position: absolute; inset: 0;
      background: linear-gradient(160deg, rgba(244,248,255,.92) 0%, rgba(232,240,255,.96) 100%);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .stage-wrap {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
      padding: 20px;
      box-sizing: border-box;
    }
    .stage {
      position: relative;
      width: min(1040px, 96vw);
      height: min(620px, 92vh);
      border-radius: 22px;
      overflow: hidden;
      pointer-events: auto;
      background: #ffffff;
      box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 0 0 1px rgba(10, 30, 80, .06),
        0 30px 60px rgba(10, 30, 80, .14),
        0 60px 120px rgba(124, 92, 255, .10);
      isolation: isolate;
    }
    canvas.bg {
      position: absolute; inset: 0;
      width: 100% !important; height: 100% !important;
      display: block; z-index: 1;
    }
    .scenes {
      position: absolute; inset: 0; z-index: 2;
      pointer-events: none;
    }
    .scene {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      will-change: opacity, transform;
      padding: 4% 5%;
      box-sizing: border-box;
      pointer-events: none;
    }
    .scene > * { pointer-events: auto; }

    .controls {
      position: absolute; z-index: 5;
      display: flex; gap: 10px;
      pointer-events: auto;
    }
    .controls.tr { top: 16px; right: 16px; }
    .ctrl-btn {
      appearance: none; border: 0; cursor: pointer;
      background: rgba(10,30,80,.05);
      color: #1a2a4a;
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: 13px; font-weight: 600;
      letter-spacing: .2px;
      transition: background .2s, transform .2s, box-shadow .2s;
      display: inline-flex; align-items: center; gap: 6px;
      border: 1px solid rgba(10,30,80,.08);
    }
    .ctrl-btn:hover { background: rgba(10,30,80,.09); transform: translateY(-1px); }
    .ctrl-btn.primary {
      color: #002636;
      background: linear-gradient(135deg, #00d4ff, #7c5cff);
      border: none;
      box-shadow: 0 8px 24px rgba(0,212,255,.32);
    }
    .ctrl-btn.primary:hover { color:#001827; box-shadow: 0 12px 32px rgba(0,212,255,.45); }
    .ctrl-btn.danger {
      background: linear-gradient(135deg, #00d4ff, #7c5cff);
      color: white; border: none;
      box-shadow: 0 8px 24px rgba(124,92,255,.30);
      font-weight: 700;
    }
    .ctrl-btn.danger:hover { box-shadow: 0 12px 32px rgba(124,92,255,.45); }
    .unmute-hero {
      position: absolute; top: 18px; left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      pointer-events: auto;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 20px;
      border-radius: 999px;
      border: 1px solid rgba(10,30,80,.08);
      background: rgba(255,255,255,.85);
      color: #0b1220; font-weight: 700; font-size: 13px;
      letter-spacing: .3px;
      cursor: pointer;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 24px rgba(10,30,80,.10);
      animation: spm-pulse 2.6s ease-in-out infinite;
    }
    .unmute-hero:hover { transform: translateX(-50%) scale(1.04); }
    .unmute-hero.muted-off { animation: none; opacity: .85; }
    @keyframes spm-pulse {
      0%,100% { box-shadow: 0 8px 24px rgba(10,30,80,.10), 0 0 0 0 rgba(0,212,255,.45); }
      50%     { box-shadow: 0 8px 24px rgba(10,30,80,.10), 0 0 0 14px rgba(0,212,255,0); }
    }
    .progress {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 3px; background: rgba(10,30,80,.06); z-index: 4;
    }
    .progress > i {
      display: block; height: 100%; width: 0%;
      background: linear-gradient(90deg, #00d4ff, #7c5cff, #ff4ecd);
      box-shadow: 0 0 14px rgba(0,212,255,.35);
      transition: width .15s linear;
    }
    .brand-watermark {
      position: absolute; left: 16px; bottom: 14px;
      z-index: 4; font-size: 10px; color: rgba(10,30,80,.5);
      letter-spacing: 1.6px; text-transform: uppercase;
      pointer-events: none; font-weight: 700;
    }
    .brand-watermark b {
      background: linear-gradient(135deg,#00d4ff,#7c5cff);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Tipografía */
    .title {
      font-size: clamp(26px, 4.6vw, 50px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -.025em;
      text-align: center;
      margin: 0;
      color: #0b1220;
    }
    .title.gradient {
      background: linear-gradient(120deg, #0b1220 0%, #1a2a4a 30%, #7c5cff 70%, #00d4ff 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .subtitle {
      font-size: clamp(13px, 1.6vw, 17px);
      font-weight: 500;
      color: rgba(20, 30, 60, .68);
      text-align: center;
      margin: 12px 0 0;
      letter-spacing: .1px;
      line-height: 1.45;
    }
    .kicker {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(124,92,255,.12));
      color: #5b3fd1;
      border: 1px solid rgba(124,92,255,.18);
    }
    .char { display: inline-block; will-change: transform, opacity; }
    .word { display: inline-block; }

    /* Video preview */
    .video-card {
      position: relative;
      width: 100%; max-width: 520px;
      aspect-ratio: 16 / 10;
      border-radius: 14px; overflow: hidden;
      background: #0b1220;
      box-shadow: 0 20px 50px rgba(10,30,80,.18), 0 0 0 1px rgba(10,30,80,.06);
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .video-card:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(124,92,255,.25), 0 0 0 1px rgba(124,92,255,.25); }
    .video-card video {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .video-card .play-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(180deg, rgba(11,18,32,0) 40%, rgba(11,18,32,.45) 100%);
      pointer-events: none;
    }
    .video-card .play-btn {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(255,255,255,.95); color: #0b1220;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 10px 30px rgba(10,30,80,.30);
      transition: transform .2s ease;
    }
    .video-card:hover .play-btn { transform: scale(1.08); }
    .video-card .play-btn svg { margin-left: 4px; }
    .video-card .badge-bottom {
      position: absolute; left: 12px; bottom: 12px;
      background: rgba(255,255,255,.92); color: #0b1220;
      padding: 6px 10px; border-radius: 8px;
      font-size: 11px; font-weight: 700; letter-spacing: .3px;
      backdrop-filter: blur(6px);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .video-card .badge-bottom .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3366; box-shadow: 0 0 8px #ff3366; animation: spm-rec 1.4s infinite; }
    @keyframes spm-rec { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

    /* Lightbox: fijo a viewport para que NO lo recorte el stage. */
    .lightbox {
      position: fixed; inset: 0; z-index: 2147483647;
      background: rgba(8, 12, 24, .94);
      display: none; align-items: center; justify-content: center;
      padding: 20px; box-sizing: border-box;
      backdrop-filter: blur(10px);
    }
    .lightbox.open { display: flex; animation: spm-fadein .25s; }
    .lightbox .lb-inner {
      width: 100%; max-width: 1100px;
      position: relative; border-radius: 14px; overflow: hidden;
      background: #000;
      box-shadow: 0 30px 80px rgba(0,0,0,.6);
      display: flex; flex-direction: column;
    }
    .lightbox video {
      width: 100%; height: auto;
      max-height: calc(100vh - 120px);
      display: block; background: #000;
      object-fit: contain;
    }
    .lightbox .lb-bar {
      position: absolute; top: 12px; left: 12px; right: 12px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; z-index: 5; pointer-events: none;
    }
    .lightbox .lb-bar > * { pointer-events: auto; }
    .lightbox .lb-back {
      background: rgba(255,255,255,.92); color: #0b1220;
      border: 0; cursor: pointer;
      padding: 9px 14px; border-radius: 999px;
      font-size: 13px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .lightbox .lb-back:hover { background:#fff; }
    .lightbox .lb-actions { display:flex; gap:8px; }
    .lightbox .lb-close {
      width: 40px; height: 40px; border-radius: 50%;
      background: white; color: #0b1220;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; border: 0;
      box-shadow: 0 8px 24px rgba(0,0,0,.45);
      font-size: 20px; font-weight: 700;
    }
    .lightbox .lb-close.danger {
      background: linear-gradient(135deg, #00d4ff, #7c5cff);
      color: white; width: auto; padding: 0 14px; border-radius: 999px;
      font-size: 13px; height: 40px;
    }
    .lightbox .lb-title {
      position: absolute; bottom: 14px; left: 18px; right: 18px;
      color: white; font-size: 13px; font-weight: 700; letter-spacing: .4px;
      text-shadow: 0 2px 8px rgba(0,0,0,.6);
      pointer-events: none; text-align: center;
    }

    @media (prefers-reduced-motion: reduce) {
      :host, .unmute-hero { animation: none !important; }
    }

    /* ============ MOVIL: aprovechamos toda la pantalla ============ */
    @media (max-width: 760px) {
      .stage-wrap { padding: 0; }
      .stage {
        width: 100vw; height: 100vh; height: 100dvh;
        max-width: 100vw; max-height: 100vh; max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
      }
      /* Centrado vertical real para no dejar huecos */
      .scene {
        padding: 60px 18px 90px;
        align-items: center;
        justify-content: center;
      }
      .scene > * { width: 100%; }

      .controls.tr {
        top: 10px; right: 10px; left: 10px;
        justify-content: flex-end; gap: 6px;
      }
      .ctrl-btn { padding: 8px 11px; font-size: 12px; }
      .ctrl-btn.danger { padding: 8px 12px; }

      .unmute-hero {
        top: auto; bottom: 14px; left: 50%;
        font-size: 12px; padding: 8px 14px;
      }

      /* Tipografia */
      .title { font-size: clamp(22px, 6.8vw, 32px) !important; line-height: 1.1; }
      /* En movil el gradiente con .char rompe el clipping en algunos navegadores.
         Forzamos color solido oscuro para garantizar visibilidad. */
      .title.gradient,
      .title.gradient .char { -webkit-text-fill-color: #0b1220 !important; color: #0b1220 !important; background: none !important; }
      .subtitle { font-size: 14.5px !important; line-height: 1.45; }
      .kicker { font-size: 10px; padding: 4px 10px; letter-spacing: 2px; }

      /* INTRO compacta */
      [data-scene="intro"] .intro-wrap { gap: 14px !important; }
      [data-scene="intro"] .logo-ring { width: 96px !important; height: 96px !important; }
      [data-scene="intro"] .logo-img { width: 60px !important; }

      /* Feature scenes: texto arriba, video abajo, sin huecos */
      .feat-wrap {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        max-width: 100% !important;
      }
      .feat-text { gap: 8px !important; }
      .feat-title { font-size: clamp(20px, 5.6vw, 28px) !important; text-align: center !important; }
      .feat-text .kicker { align-self: center !important; }
      .feat-sub { font-size: 13.5px !important; text-align: center !important; }
      .bullets { margin: 4px 0 0 !important; }
      .bullets li { font-size: 12.5px !important; }
      .feat-cta { font-size: 13px !important; padding: 10px 14px !important; align-self: stretch !important; justify-content: center; }
      .feat-video { max-width: 100% !important; aspect-ratio: 16 / 10; margin: 0 auto; }

      /* CTA: cards en una columna compactas */
      [data-scene="cta"] > div { gap: 14px !important; }
      .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .contact-card { padding: 12px 14px !important; flex-direction: row !important; align-items: center !important; text-align: left; gap: 14px !important; }
      .contact-card > div:first-child { flex: none; width: 40px !important; height: 40px !important; }
      .contact-card > div:first-child svg { width: 18px !important; height: 18px !important; }
      .contact-card > div:not(:first-child) { text-align: left; }
      .cta-footer { font-size: 11px !important; text-align: center; }
      .cta-help { font-size: 11px !important; }

      .brand-watermark { font-size: 9px; bottom: 8px; left: 12px; right: 12px; }
      .progress { height: 4px; }

      /* Lightbox movil */
      .lightbox { padding: 8px; }
      .lightbox .lb-inner { max-width: 100%; }
      .lightbox video { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
      .lightbox .lb-bar { top: 8px; left: 8px; right: 8px; flex-direction: column; align-items: stretch; gap: 6px; }
      .lightbox .lb-back, .lightbox .lb-close.danger { width: 100%; justify-content: center; }
      .lightbox .lb-actions { width: 100%; }
      .lightbox .lb-actions .lb-close.danger { flex: 1; }
      .lightbox .lb-actions .lb-close:not(.danger) { display: none; }
      .lightbox .lb-title { font-size: 11px; bottom: 8px; }
    }

    /* Movil pequeno */
    @media (max-width: 380px) {
      .scene { padding: 56px 14px 86px; }
      .controls.tr .ctrl-btn { padding: 7px 10px; font-size: 11px; }
      .controls.tr .ctrl-btn.danger { padding: 7px 11px; }
      .feat-video { aspect-ratio: 16 / 11; }
      .title { font-size: 21px !important; }
      .feat-title { font-size: 19px !important; }
      .subtitle, .feat-sub { font-size: 13px !important; }
    }
  </style>

  <div class="backdrop"></div>

  <div class="stage-wrap">
    <div class="stage" part="stage">
      <canvas class="bg"></canvas>

      <button class="unmute-hero" data-act="toggle-mute" aria-label="Activar sonido">
        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M16.5 12A4.5 4.5 0 0 0 14 8.04v2.21l2.45 2.45c.03-.23.05-.46.05-.7zM19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.96 8.96 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.17v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>
        <span class="lbl">Activar sonido</span>
      </button>

      <div class="scenes">
        <div class="scene" data-scene="intro"></div>
        <div class="scene" data-scene="hacer"></div>
        <div class="scene" data-scene="reportar"></div>
        <div class="scene" data-scene="explicar"></div>
        <div class="scene" data-scene="cta"></div>
      </div>

      <div class="controls tr">
        <button class="ctrl-btn" data-act="skip" aria-label="Saltar al final">⏭ Saltar</button>
        <button class="ctrl-btn" data-act="replay" aria-label="Reiniciar">↻</button>
        <button class="ctrl-btn danger" data-act="close" aria-label="Cerrar e ingresar">✕ Cerrar e ingresar</button>
      </div>

      <span class="brand-watermark">Lanzamiento <b>Sm@rt IA</b> · Módulo adicional</span>
      <div class="progress"><i></i></div>

      <div class="lightbox" data-lb>
        <div class="lb-bar">
          <button class="lb-back" data-act="close-lb" aria-label="Volver al video promo">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
            Volver
          </button>
          <div class="lb-actions">
            <button class="lb-close danger" data-act="close" aria-label="Cerrar e ingresar">✕ Cerrar e ingresar</button>
            <button class="lb-close" data-act="close-lb" aria-label="Cerrar video">✕</button>
          </div>
        </div>
        <div class="lb-inner">
          <video data-lb-video controls playsinline preload="metadata"></video>
          <span class="lb-title" data-lb-title></span>
        </div>
      </div>
    </div>
  </div>
  `;

  class SmartposPromoModal extends HTMLElement {
    constructor() { super(); this.attachShadow({ mode: 'open' }); }

    connectedCallback() {
      this.shadowRoot.innerHTML = TEMPLATE;
      document.body.classList.add('smartpos-promo-locked');

      var root = this.shadowRoot;
      this.$canvas   = root.querySelector('canvas.bg');
      this.$scenes   = {};
      root.querySelectorAll('.scene').forEach(function (el) {
        this.$scenes[el.dataset.scene] = el;
      }.bind(this));
      this.$progress = root.querySelector('.progress > i');
      this.$unmute   = root.querySelector('.unmute-hero');
      this.$lb       = root.querySelector('[data-lb]');
      this.$lbVideo  = root.querySelector('[data-lb-video]');
      this.$lbTitle  = root.querySelector('[data-lb-title]');

      var self = this;
      root.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-act]');
        if (!btn) return;
        var act = btn.dataset.act;
        if (act === 'close')         self.dismiss();
        else if (act === 'skip')     self.director && self.director.skipToCTA();
        else if (act === 'replay')   self.director && self.director.replay();
        else if (act === 'toggle-mute') self.toggleMute();
        else if (act === 'open-lb') {
          var src = btn.dataset.src; var title = btn.dataset.title || '';
          self.openLightbox(src, title);
        }
        else if (act === 'close-lb') self.closeLightbox();
      });

      // Cierre fácil: clic en backdrop (fuera del .stage) cierra el modal.
      // Si el lightbox está abierto, primero lo cerramos en lugar de salir.
      var $backdrop = root.querySelector('.backdrop');
      if ($backdrop) {
        $backdrop.addEventListener('click', function () {
          if (self.$lb && self.$lb.classList.contains('open')) self.closeLightbox();
          else self.dismiss();
        });
      }

      // Cierre fácil: tecla ESC. Idem comportamiento que el backdrop.
      this._onKeydown = function (e) {
        if (e.key !== 'Escape' && e.keyCode !== 27) return;
        if (self.$lb && self.$lb.classList.contains('open')) self.closeLightbox();
        else self.dismiss();
      };
      document.addEventListener('keydown', this._onKeydown, true);

      // Audio voiceover (placeholder)
      var base = this.getAttribute('data-base') || '/promo/';
      this.audio = new Audio(base + 'assets/audio/voiceover.mp3');
      this.audio.preload = 'auto';
      this.audio.muted = true;
      this.audio.volume = 0.85;

      this.stage    = new window.SmartposPromoThreeStage(this.$canvas);
      this.director = new window.SmartposPromoDirector({
        scenes: this.$scenes,
        progress: this.$progress,
        stage: this.stage,
        audio: this.audio,
        base: base,
        onEnd: function () {}
      });
      this.director.start();
    }

    disconnectedCallback() {
      document.body.classList.remove('smartpos-promo-locked');
      if (this._onKeydown) document.removeEventListener('keydown', this._onKeydown, true);
      if (this.director) this.director.destroy();
      if (this.stage)    this.stage.destroy();
      if (this.audio)    { try { this.audio.pause(); } catch (e) {} }
    }

    openLightbox(src, title) {
      // Pausar voiceover si suena
      try { this.audio.pause(); } catch (e) {}
      // Pausar previews
      this.shadowRoot.querySelectorAll('video.preview').forEach(function (v) { try { v.pause(); } catch (e) {} });
      // Pausar director
      if (this.director && this.director.pause) this.director.pause();

      this.$lbVideo.src = src;
      this.$lbVideo.muted = false;
      this.$lbTitle.textContent = title;
      this.$lb.classList.add('open');
      this.$lbVideo.currentTime = 0;
      var p = this.$lbVideo.play();
      if (p && p.catch) p.catch(function () {});
    }

    closeLightbox() {
      try { this.$lbVideo.pause(); } catch (e) {}
      this.$lbVideo.removeAttribute('src');
      this.$lbVideo.load();
      this.$lb.classList.remove('open');
      // Reanudar previews visibles
      this.shadowRoot.querySelectorAll('video.preview').forEach(function (v) {
        if (v.offsetParent !== null) { try { v.play(); } catch (e) {} }
      });
      if (this.director && this.director.resume) this.director.resume();
    }

    toggleMute() {
      if (!this.audio) return;
      var willPlay = this.audio.muted;
      this.audio.muted = !willPlay;
      var lbl = this.$unmute.querySelector('.lbl');
      if (willPlay) {
        try {
          this.audio.currentTime = this.director ? this.director.elapsed() : 0;
          this.audio.play().catch(function () {});
        } catch (e) {}
        this.$unmute.classList.remove('muted-off');
        if (lbl) lbl.textContent = 'Silenciar';
        this.$unmute.querySelector('svg').innerHTML = '<path d="M3 10v4h4l5 4V6L7 10H3zm13.5 2A4.5 4.5 0 0 0 14 8.04v7.92A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z"/>';
      } else {
        try { this.audio.pause(); } catch (e) {}
        this.$unmute.classList.add('muted-off');
        if (lbl) lbl.textContent = 'Activar sonido';
        this.$unmute.querySelector('svg').innerHTML = '<path d="M16.5 12A4.5 4.5 0 0 0 14 8.04v2.21l2.45 2.45c.03-.23.05-.46.05-.7zM19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.96 8.96 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.17v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/>';
      }
    }

    dismiss() {
      var self = this;
      this.dispatchEvent(new CustomEvent('promo-dismiss', { bubbles: true }));
      this.shadowRoot.host.style.transition = 'opacity .35s ease';
      this.shadowRoot.host.style.opacity = '0';
      setTimeout(function () {
        if (self.parentNode) self.parentNode.removeChild(self);
      }, 360);
    }
  }

  if (!customElements.get('smartpos-promo-modal')) {
    customElements.define('smartpos-promo-modal', SmartposPromoModal);
  }
})();
