.elementor-2583 .elementor-element.elementor-element-82c3459{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:-130px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2583 .elementor-element.elementor-element-82c3459:not(.elementor-motion-effects-element-type-background), .elementor-2583 .elementor-element.elementor-element-82c3459 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF47;}.elementor-2583 .elementor-element.elementor-element-82c3459::before, .elementor-2583 .elementor-element.elementor-element-82c3459 > .elementor-background-video-container::before, .elementor-2583 .elementor-element.elementor-element-82c3459 > .e-con-inner > .elementor-background-video-container::before, .elementor-2583 .elementor-element.elementor-element-82c3459 > .elementor-background-slideshow::before, .elementor-2583 .elementor-element.elementor-element-82c3459 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2583 .elementor-element.elementor-element-82c3459 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://be-craft.com/wp-content/uploads/2026/01/subtle-white-feathers.png");--background-overlay:'';}.elementor-2583 .elementor-element.elementor-element-6f34878{--spacer-size:168px;}.elementor-2583 .elementor-element.elementor-element-c48e140{--display:flex;--overlay-opacity:0.5;}.elementor-2583 .elementor-element.elementor-element-c48e140:not(.elementor-motion-effects-element-type-background), .elementor-2583 .elementor-element.elementor-element-c48e140 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, #444444 12%);}.elementor-2583 .elementor-element.elementor-element-c48e140::before, .elementor-2583 .elementor-element.elementor-element-c48e140 > .elementor-background-video-container::before, .elementor-2583 .elementor-element.elementor-element-c48e140 > .e-con-inner > .elementor-background-video-container::before, .elementor-2583 .elementor-element.elementor-element-c48e140 > .elementor-background-slideshow::before, .elementor-2583 .elementor-element.elementor-element-c48e140 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2583 .elementor-element.elementor-element-c48e140 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://be-craft.com/wp-content/uploads/2026/01/subtle-white-feathers.png");--background-overlay:'';}.elementor-2583 .elementor-element.elementor-element-b84eedf.elementor-element{--align-self:center;}.elementor-2583 .elementor-element.elementor-element-f00e440.elementor-element{--align-self:center;}.elementor-2583 .elementor-element.elementor-element-3774386.elementor-element{--align-self:center;}.elementor-2583 .elementor-element.elementor-element-3b2e271.elementor-element{--align-self:center;}.elementor-2583 .elementor-element.elementor-element-f7644ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2583 .elementor-element.elementor-element-53b7e63{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2583 .elementor-element.elementor-element-c48e140{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-b84eedf *//* =========================
   RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   TEMPLATE LIST
========================= */
.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px;
}

.template {
  position: relative;
  padding: 25px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);

  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 20px rgba(255,255,255,.05);

  transition: all .4s cubic-bezier(.175,.885,.32,1.275);
  animation: fadeIn .6s ease forwards;
  animation-delay: calc(var(--item-index) * .1s);
  opacity: 0;
}

.template::before,
.template::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.template::before {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}

.template::after {
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.25));
  opacity: 0;
  transition: opacity .4s ease;
}

.template:hover {
  transform: translateY(-12px) scale(1.06);
  background: rgba(255,255,255,.12);
  border-color: rgba(99,102,241,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.28),
    inset 0 0 0 2px rgba(99,102,241,.55);
}

.template:hover::after {
  opacity: 1;
}

.template img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: transform .3s ease;
}

.template:hover img {
  transform: scale(1.05);
}

.template p {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* =========================
   PREVIEW CONTAINER
========================= */
.template-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: none;
  flex-direction: column;

  background: linear-gradient(135deg, #0c0c14, #1a1a2e);
}

.template-preview.active {
  display: flex;
}

/* =========================
   IFRAME ZONE
========================= */
.iframe-wrapper {
  position: relative;
  flex: 1;
  background: white;
}

#template-preview {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: white;
}

/* =========================
   IFRAME LOADER (KEY PART)
========================= */
.iframe-loader {
  position: absolute;
  inset: 0;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: white;

  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}

.iframe-loader.active {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: #4361ee;
  animation: spin .9s linear infinite;
  margin-bottom: 12px;
}

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

.iframe-loader span {
  font-size: 14px;
  color: #333;
}

/* =========================
   PREVIEW CONTROLS
========================= */
.preview-controls {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  gap: 30px;

  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
}

.back-btn,
.select-btn {
  min-width: 180px;
  padding: 16px 40px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.back-btn {
  background: rgba(255,255,255,.1);
  color: white;
}

.select-btn {
  background: linear-gradient(135deg, #4cc9f0, #4361ee);
  color: white;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   MOBILE FIX
========================= */
@media (pointer: coarse) {
  .preview-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===== FORCE: iframe overlay loader (append at the END) ===== */

/* preview must be visible when active */
.template-preview { 
  display: none !important; 
}
.template-preview.active { 
  display: flex !important; 
}

/* wrapper that holds iframe + loader */
.iframe-wrapper{
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: #fff !important;
}

/* iframe should fill wrapper */
#template-preview{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #fff !important;
}

/* loader overlay ON TOP of iframe only */
#iframe-loader{
  position: absolute !important;
  inset: 0 !important;
  z-index: 99999 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  background: #fff !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .2s ease !important;
}

#iframe-loader.active{
  opacity: 1 !important;
  visibility: visible !important;
}

/* spinner */
#iframe-loader .spinner{
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 4px solid rgba(0,0,0,.15) !important;
  border-top-color: #4361ee !important;
  animation: iframeSpin .9s linear infinite !important;
  margin-bottom: 12px !important;
}

@keyframes iframeSpin { 
  to { transform: rotate(360deg); } 
}

#iframe-loader .label{
  font-size: 14px !important;
  color: #333 !important;
  opacity: .9 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3774386 */.template-.elementor-2583 .elementor-element.elementor-element-3774386 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.template {
  cursor: pointer;
  text-align: center;
  width: 400px;
}

.template img {
  width: 100%;
  height: auto;
}

.template-preview {
  display: none;
  text-align: center;
}

button {
  padding: 10px 20px;
  margin: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .template {
    width: 100%;
  }
}

.template-list {
  display: flex;
  gap: 20px;              /* разстояние между шаблоните */
  flex-wrap: wrap;        /* ако са много – да минават на нов ред */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3b2e271 */.template-.elementor-2583 .elementor-element.elementor-element-3b2e271 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.template {
  cursor: pointer;
  text-align: center;
  width: 400px;
}

.template img {
  width: 100%;
  height: auto;
}

.template-preview {
  display: none;
  text-align: center;
}

button {
  padding: 10px 20px;
  margin: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .template {
    width: 100%;
  }
}

.template-list {
  display: flex;
  gap: 20px;              /* разстояние между шаблоните */
  flex-wrap: wrap;        /* ако са много – да минават на нов ред */
}/* End custom CSS */