/* =========================================================
   PASO 18.18 - TEMPLATE PREVIEW MODULE
   COMPLETELY ISOLATED
========================================================= */

.nwp-template-preview {
  width: 100%;
  height: 100%;
  min-height: 360px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 18px;

  background: #0b1020;

  box-shadow:
    0 18px 55px
    rgba(0,0,0,.34);
}


.nwp-template-preview-toolbar {
  flex:
    0 0 30px;

  display: flex;
  align-items: center;

  padding:
    0 10px;

  background:
    linear-gradient(
      180deg,
      #1f2937,
      #111827
    );

  border-bottom:
    1px solid
    rgba(255,255,255,.10);
}


.nwp-template-preview-dots {
  display: flex;
  gap: 5px;
}


.nwp-template-preview-dots span {
  width: 7px;
  height: 7px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.40);
}


.nwp-template-preview-address {
  margin:
    0 auto;

  padding:
    3px 36px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.06);

  color:
    rgba(255,255,255,.45);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.nwp-template-preview-viewport {
  position: relative;

  flex: 1;

  min-height: 0;

  overflow: hidden;

  background:
    #ffffff;
}


.nwp-template-preview-frame {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  opacity: 0;

  visibility: hidden;

  background:
    #ffffff;

  pointer-events:
    none;

  transition:
    opacity .18s ease;
}


.nwp-template-preview.is-loaded
.nwp-template-preview-frame {
  opacity: 1;
  visibility: visible;
}


.nwp-template-preview-loading {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #111827
    );

  color:
    rgba(255,255,255,.66);

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

  transition:
    opacity .18s ease;
}


.nwp-template-preview.is-loaded
.nwp-template-preview-loading {
  opacity: 0;
  pointer-events: none;
}


.nwp-template-preview-fallback {
  width: 100%;
  min-height: 320px;

  display: grid;

  place-items: center;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #111827,
      #1e293b
    );

  color: #ffffff;

  font-weight: 900;
}


@media (max-width: 900px) {

  .nwp-template-preview {
    min-height:
      300px;
  }

}


@media (max-width: 620px) {

  .nwp-template-preview {
    min-height:
      230px;

    border-radius:
      12px;
  }

  .nwp-template-preview-toolbar {
    flex-basis:
      24px;
  }

  .nwp-template-preview-address {
    display:
      none;
  }

}