/*!
 * Tcw Responsive Preview 1.89.0
 * New tcw-* classes are emitted together with legacy rpb-* compatibility aliases.
 */
.tcw-root,.rpb-root{position:relative}
body.tcw-lock,body.rpb-lock{overflow:hidden}

/* Trigger */
.rpb-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  padding:12px 26px;border-radius:999px;
  color:#fff;background:#ff4d6d;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .18s ease, filter .18s ease;
}
/* Popup */
.rpb-popup{position:fixed;inset:0;display:none;z-index:99999;background:transparent}
.rpb-popup.show{display:flex;align-items:center;justify-content:center}
.rpb-box{
  position:relative;width:var(--rpb-box-w,92%);max-width:var(--rpb-box-max,1400px);height:82%;
  border-radius:22px;overflow:hidden;
  background:#050b22;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  --rpb-bar-h:72px;
  --rpb-viewport-max: 100%;
  transition:none!important;
}

/* Preview Bar - IMPORTANT: no gradient shorthand so Elementor bg color can override */
.rpb-bar{
  height:var(--rpb-bar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background-color: #0b0b0b;
  background-image:none;
}
.rpb-bar-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(var(--rpb-bar-h) - 22px);
  padding:0 22px;border-radius:999px;
  text-decoration:none;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

/* Devices (dashicons) */
.rpb-devices{display:flex;align-items:center;justify-content:center;gap:10px}
.rpb-device{
  width:44px;height:44px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;

  margin-bottom: 0px !important;
}
.rpb-device:hover{transform:translateY(-1px)}
.rpb-device.is-active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.rpb-device .dashicons{font-size:22px;width:22px;height:22px;line-height:22px}

/* Frame + viewport */
.rpb-frame{
  position:relative;flex:1;min-width:0;min-height:0;padding:16px;
  display:flex;align-items:stretch;justify-content:center;overflow:hidden;
}
.rpb-viewport{
  position:relative;
  width:100%;
  max-width:var(--rpb-viewport-max);
  height:100%;
  transition:none!important;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.tcw-viewport.tcw-scaled-canvas,
.rpb-viewport.rpb-scaled-canvas{
  position:absolute!important;
  width:var(--tcw-canvas-width,var(--rpb-canvas-width))!important;
  max-width:none!important;
  height:var(--tcw-canvas-height,var(--rpb-canvas-height))!important;
  flex:none!important;
  transform:scale(var(--tcw-canvas-scale,var(--rpb-canvas-scale)));
  transform-origin:top left;
}
.tcw-viewport iframe,.rpb-viewport iframe{width:100%;height:100%;border:0;display:block}
.rpb-remote-state{
  position:absolute;inset:0;z-index:3;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:28px;text-align:center;color:#4b5563;background:#f3f4f6;
  font:600 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.rpb-remote-state.is-visible{display:flex}
.rpb-remote-state.is-error{color:#991b1b;background:#fef2f2}
.rpb-remote-spinner{
  width:34px;height:34px;border:3px solid rgba(17,24,39,.18);
  border-top-color:#111827;border-radius:50%;animation:rpb-remote-spin .8s linear infinite;
}
.rpb-loading-dots{display:none;align-items:center;justify-content:center;gap:7px;min-height:12px}
.rpb-remote-state.is-loading .rpb-loading-dots{display:flex}
.rpb-loading-dots i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:#cbd5e1;transform:scale(.72);opacity:.62;
  transition:background-color .22s ease,transform .22s ease,opacity .22s ease;
}
.rpb-loading-dots i.is-active{
  background:#111827;transform:scale(1);opacity:1;
  animation:rpb-loading-dot-pop .3s ease both;
}
.rpb-remote-state.is-complete .rpb-loading-dots i.is-active{background:#16a34a}
.rpb-remote-state.is-error .rpb-remote-spinner{display:none}
.rpb-remote-state.is-error .rpb-loading-dots{display:none}
.rpb-remote-retry{
  display:none;border:0;border-radius:8px;padding:9px 18px;
  color:#fff;background:#111827;font:inherit;cursor:pointer;
}
.rpb-remote-state.is-error .rpb-remote-retry{display:inline-flex}
@keyframes rpb-remote-spin{to{transform:rotate(360deg)}}
@keyframes rpb-loading-dot-pop{0%{transform:scale(.72)}65%{transform:scale(1.28)}100%{transform:scale(1)}}

/* Device preview widths (v22 behaviour) */
.rpb-box.rpb-mode-dsk{--rpb-viewport-max:100%;--rpb-box-max:1400px;}
.rpb-box.rpb-mode-tbl{--rpb-viewport-max:980px;--rpb-box-max:1044px;}
.rpb-box.rpb-mode-mob{--rpb-viewport-max:420px;--rpb-box-max:484px;}

@media (max-width:767px){
  .rpb-box{width:96%;height:86%}
  .rpb-bar{
    display:grid!important;
    grid-template-columns:minmax(36px,1fr) auto minmax(36px,1fr);
    align-items:center;gap:6px;padding:0 8px!important;
  }
  .rpb-back{justify-self:start}
  .rpb-devices{justify-self:center;gap:4px!important}
  .rpb-visit{justify-self:end}
  .rpb-bar-btn{
    width:38px!important;min-width:38px!important;height:40px!important;
    padding:0!important;gap:0!important;
  }
  .rpb-bar-btn .rpb-btn-text{display:none!important}
  .rpb-bar-btn .rpb-btn-icon{display:inline-flex!important}
  .rpb-bar-btn:not(.has-icon)::before{
    display:inline-flex;align-items:center;justify-content:center;
    font:normal 20px/1 dashicons;-webkit-font-smoothing:antialiased;
  }
  .rpb-back:not(.has-icon)::before{content:"\f341"}
  .rpb-visit:not(.has-icon)::before{content:"\f504"}
  .rpb-device{
    width:38px!important;min-width:38px!important;height:38px!important;
    padding:0!important;
  }
  .rpb-frame{padding:10px}
}


/* Back/Visit icon support */
.rpb-bar-btn{gap:8px}
.rpb-bar-btn .rpb-btn-icon{display:none;align-items:center;justify-content:center}
.rpb-bar-btn.has-icon .rpb-btn-icon{display:inline-flex}
.rpb-bar-btn.has-icon .rpb-btn-icon i{font-size:18px;line-height:1}
.rpb-bar-btn.has-icon .rpb-btn-icon svg{width:18px;height:18px}
.rpb-bar-btn .rpb-btn-text{display:inline}

/* Mobile viewport: icon-only (if enabled on the button) */
.rpb-box.rpb-mode-mob .rpb-icon-only-mobile .rpb-btn-text,
.rpb-box.rpb-mode-mobile .rpb-icon-only-mobile .rpb-btn-text{display:none}
.rpb-box.rpb-mode-mob .rpb-icon-only-mobile .rpb-btn-icon,
.rpb-box.rpb-mode-mobile .rpb-icon-only-mobile .rpb-btn-icon{display:inline-flex}
.rpb-box.rpb-mode-mob .rpb-icon-only-mobile,
.rpb-box.rpb-mode-mobile .rpb-icon-only-mobile{padding:0 16px}
.rpb-box.rpb-mode-mob .rpb-icon-only-mobile.has-icon,
.rpb-box.rpb-mode-mobile .rpb-icon-only-mobile.has-icon{gap:0}


/* Ensure device buttons don't add extra whitespace */
.rpb-device{margin-bottom:0px;}

/* Trigger hover effect (match demo video) */
.rpb-trigger{
  position: relative;
  overflow: hidden;
  will-change: transform, filter;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.rpb-trigger:active{
  transform: translateY(0);
  filter: brightness(0.99) saturate(1);
}

/* Prevent background scroll when popup is open */
body.tcw-responsive-preview-noscroll,
body.rpb-apb-noscroll{
  overflow: hidden !important;
}
/* --- Auxin/Phlox style overlay scale animation for trigger button --- */
.rpb-trigger{
  position: relative;
  overflow: hidden;
  text-shadow: none !important;
}
.rpb-trigger *{
  text-shadow: none !important;
}
.rpb-trigger .rpb-aux-overlay{
  position:absolute;
  width:120%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) scale(0, 0);
  transition: transform 450ms cubic-bezier(0.75, 0.1, 0.25, 0.9);
  pointer-events:none;
  z-index:1;
}
.rpb-trigger .rpb-aux-overlay::after{
  position: relative;
  content:'';
  border-radius:50%;
  display:block;
  padding-top:100%;
  background: var(--rpb-trigger-overlay-bg, rgba(255,255,255,0.25));
}
.rpb-trigger:hover .rpb-aux-overlay{
  transform: translate(-50%, -50%) scale(1, 1);
}
.rpb-trigger .rpb-trigger-text{
  position: relative;
  z-index: 2;
}