/* ======================================================
   WP Drag Builder — Frontend CSS v2
   ====================================================== */

/* ── Canvas (desktop) ── */
.wpdb-layout-canvas {
  position: relative;
  width: 100%;
  min-height: var(--wpdb-canvas-h, 40vh);
  box-sizing: border-box;
}

.wpdb-layout-widget {
  position: absolute;
  box-sizing: border-box;
}

/* ── Widget base ── */
.wpdb-widget { width: 100%; height: 100%; box-sizing: border-box; }
.wpdb-text-content { line-height: 1.6; }
.wpdb-text-content p:last-child { margin-bottom: 0; }
.wpdb-placeholder {
  padding: 20px;
  text-align: center;
  color: #888;
  border: 2px dashed #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* ── Button ── */
.wpdb-btn {
  display: inline-block;
  padding: 10px 22px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter .2s, transform .1s;
}
.wpdb-btn:hover { filter: brightness(.88); text-decoration: none; }
.wpdb-btn:active { transform: scale(.97); }

/* ── Video ── */
.wpdb-video-wrap { width: 100%; border-radius: 4px; overflow: hidden; }

/* ── Slider ── */
.wpdb-slider { position: relative; overflow: hidden; border-radius: 6px; }

.wpdb-slider-track { height: 100%; }

.wpdb-slide {
  flex-shrink: 0;
  min-width: 100%;
  height: 100%;
  position: relative;
}
.wpdb-slide img { width: 100%; height: 100%; display: block; }
.wpdb-slide a   { display: block; width: 100%; height: 100%; }

/* Slide caption */
.wpdb-slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* Arrows */
.wpdb-sl-prev, .wpdb-sl-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
  line-height: 1;
  transition: background .2s;
  user-select: none;
}
.wpdb-sl-prev:hover, .wpdb-sl-next:hover { background: rgba(0,0,0,.7); }
.wpdb-sl-prev { left: 10px; }
.wpdb-sl-next { right: 10px; }

/* Dots */
.wpdb-sl-dots {
  position: absolute;
  bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 10;
}
.wpdb-sl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: 2px solid rgba(255,255,255,.8);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.wpdb-sl-dot.active { background: #fff; transform: scale(1.2); }

/* ── Editing overlays (frontend editor mode) ── */
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget {
  outline: 2px dashed rgba(0,115,170,.4);
  cursor: move;
}
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget:hover {
  outline-color: #0073aa;
  z-index: 10;
}
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget.wpdb-selected {
  outline: 2px solid #0073aa;
  box-shadow: 0 0 0 4px rgba(0,115,170,.15);
  z-index: 20;
}

.wpdb-widget-handle {
  display: none;
  position: absolute;
  top: -26px; left: 0;
  background: #0073aa;
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px 3px 0 0;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  z-index: 30;
}
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget:hover .wpdb-widget-handle,
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget.wpdb-selected .wpdb-widget-handle {
  display: flex;
}
.wpdb-widget-handle button {
  background: none; border: none; color: #fff;
  cursor: pointer; font-size: 12px; padding: 0 2px;
}
.wpdb-widget-handle .wpdb-wh-label { font-weight: 600; }

.wpdb-fe-resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  cursor: se-resize;
  display: none;
  background: linear-gradient(135deg, transparent 50%, #0073aa 50%);
}
.wpdb-layout-canvas.wpdb-editing .wpdb-layout-widget.wpdb-selected .wpdb-fe-resize { display: block; }

/* ======================================================
   FRONTEND EDITOR PANEL (left side)
   ====================================================== */
#wpdb-fe-editor {
  position: fixed;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 200px;
  background: #1e2a35;
  color: #fff;
  border-radius: 0 12px 12px 0;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
  z-index: 999999;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
}

.wpdb-fe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0073aa;
  font-weight: 700;
  font-size: 13px;
}
.wpdb-fe-logo { letter-spacing: -.01em; }
.wpdb-fe-icon-btn {
  background: none; border: none; color: #fff;
  font-size: 15px; cursor: pointer; padding: 0; line-height: 1;
}

.wpdb-fe-section { padding: 10px 10px 8px; border-bottom: 1px solid #2d3e4e; }
.wpdb-fe-section:last-child { border-bottom: none; }
.wpdb-fe-section-title {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #5577aa; margin: 0 0 8px;
}

/* Mode toggle */
.wpdb-fe-toggle-row { display: flex; gap: 0; border-radius: 5px; overflow: hidden; border: 1px solid #2d3e4e; }
.wpdb-fe-mode-btn {
  flex: 1; padding: 6px 4px;
  background: #253342; border: none;
  color: #8899aa; font-size: 11px; cursor: pointer;
  transition: background .15s, color .15s;
}
.wpdb-fe-mode-btn:first-child { border-right: 1px solid #2d3e4e; }
.wpdb-fe-mode-btn.active { background: #0073aa; color: #fff; font-weight: 600; }

/* Palette items */
.wpdb-fe-palette-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  background: #253342;
  border-radius: 5px;
  margin-bottom: 4px;
  cursor: grab;
  color: #cdd5df;
  font-size: 12px;
  transition: background .15s;
  user-select: none;
}
.wpdb-fe-palette-item:hover { background: #0073aa; color: #fff; }
.wpdb-fe-palette-item:last-child { margin-bottom: 0; }

/* Action buttons */
.wpdb-fe-btn-save {
  display: block; width: 100%; padding: 8px;
  background: #0073aa; color: #fff;
  border: none; border-radius: 5px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  margin-bottom: 5px; transition: background .15s;
}
.wpdb-fe-btn-save:hover { background: #005d8c; }
.wpdb-fe-btn-clear {
  display: block; width: 100%; padding: 7px;
  background: #253342; color: #cdd5df;
  border: none; border-radius: 5px;
  cursor: pointer; font-size: 12px; transition: background .15s;
}
.wpdb-fe-btn-clear:hover { background: #c0392b; color: #fff; }
#wpdb-fe-status { font-size: 11px; color: #46b450; min-height: 16px; text-align: center; margin-top: 6px; }

/* ── Frontend Settings Panel ── */
#wpdb-fe-settings {
  position: fixed;
  left: 210px; top: 50%;
  transform: translateY(-50%);
  width: 280px;
  max-height: 85vh;
  background: #1e2a35;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 0 20px rgba(0,0,0,.3);
  z-index: 999998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wpdb-fe-sp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: #0073aa; color: #fff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
#wpdb-fe-sp-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 15px; }

.wpdb-fe-sp-tabs { display: flex; border-bottom: 1px solid #2d3e4e; flex-shrink: 0; }
.wpdb-fe-sp-tab {
  flex: 1; padding: 8px 4px;
  background: none; border: none;
  cursor: pointer; color: #8899aa;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.wpdb-fe-sp-tab.active { color: #fff; border-bottom-color: #0073aa; }

.wpdb-fe-sp-pane { display: none; overflow-y: auto; padding: 10px; flex: 1; }
.wpdb-fe-sp-pane.active { display: block; }

.wpdb-fe-sp-footer {
  padding: 8px 10px; border-top: 1px solid #2d3e4e;
  display: flex; gap: 6px; flex-shrink: 0;
}
#wpdb-fe-sp-apply {
  flex: 1; padding: 7px;
  background: #0073aa; color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-size: 12px;
}
#wpdb-fe-sp-delete {
  padding: 7px 10px;
  background: none; color: #e74c3c;
  border: 1px solid #e74c3c; border-radius: 4px; cursor: pointer; font-size: 12px;
}

/* ======================================================
   MOBILE RESPONSIVE
   ====================================================== */
@media (max-width: 768px) {
  /* Stack widgets vertically, ordered by mobile_order */
  .wpdb-layout-canvas {
    display: flex;
    flex-direction: column;
    min-height: auto !important;
    position: static;
  }

  .wpdb-layout-widget {
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 16px;
  }

  /* Slider stays fixed height on mobile */
  .wpdb-slider { height: 220px !important; }
  .wpdb-slide  { height: 220px !important; }

  /* Frontend editor panel on mobile — bottom strip */
  #wpdb-fe-editor {
    top: auto; bottom: 0;
    left: 0; right: 0;
    transform: none;
    width: 100%;
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    max-height: 50vh;
  }
  .wpdb-fe-header { width: 100%; border-radius: 0; }
  .wpdb-fe-section { flex: 1; min-width: 150px; border-right: 1px solid #2d3e4e; border-bottom: none; }

  #wpdb-fe-settings {
    left: 0; right: 0;
    top: auto; bottom: 50vh;
    transform: none;
    width: 100%;
    max-height: 45vh;
    border-radius: 12px 12px 0 0;
  }
}

/* ======================================================
   ENTRANCE ANIMATIONS — WP Drag Builder by Elpisman
   ====================================================== */

/* Base: widgets start hidden until triggered */
.wpdb-layout-widget[data-animation]:not(.wpdb-anim-done) {
  opacity: 0;
}

/* --- Keyframes --- */
@keyframes wpdb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wpdb-from-top {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpdb-from-bottom {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpdb-from-left {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpdb-from-right {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpdb-zoom-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wpdb-zoom-out {
  from { opacity: 0; transform: scale(1.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wpdb-flip-x {
  from { opacity: 0; transform: perspective(600px) rotateX(-90deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}
@keyframes wpdb-flip-y {
  from { opacity: 0; transform: perspective(600px) rotateY(-90deg); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}
@keyframes wpdb-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wpdb-rotate-in {
  from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes wpdb-slide-up-fade {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Active animation classes (added by JS on scroll trigger) --- */
.wpdb-anim-done[data-animation="fade"]         { animation: wpdb-fade-in      var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="from-top"]     { animation: wpdb-from-top     var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="from-bottom"]  { animation: wpdb-from-bottom  var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="from-left"]    { animation: wpdb-from-left    var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="from-right"]   { animation: wpdb-from-right   var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="zoom-in"]      { animation: wpdb-zoom-in      var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="zoom-out"]     { animation: wpdb-zoom-out     var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="flip-x"]       { animation: wpdb-flip-x       var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="flip-y"]       { animation: wpdb-flip-y       var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="bounce"]       { animation: wpdb-bounce-in    var(--wpdb-anim-dur, .9s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="rotate"]       { animation: wpdb-rotate-in    var(--wpdb-anim-dur, .8s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }
.wpdb-anim-done[data-animation="slide-up"]     { animation: wpdb-slide-up-fade var(--wpdb-anim-dur, .7s) var(--wpdb-anim-ease, ease) var(--wpdb-anim-delay, 0s) both; }

/* Easing variants applied via CSS var */
.wpdb-anim-done[data-anim-ease="ease"]        { --wpdb-anim-ease: ease; }
.wpdb-anim-done[data-anim-ease="ease-in"]     { --wpdb-anim-ease: ease-in; }
.wpdb-anim-done[data-anim-ease="ease-out"]    { --wpdb-anim-ease: ease-out; }
.wpdb-anim-done[data-anim-ease="ease-in-out"] { --wpdb-anim-ease: ease-in-out; }
.wpdb-anim-done[data-anim-ease="spring"]      { --wpdb-anim-ease: cubic-bezier(.34,1.56,.64,1); }

/* No animation = always visible */
.wpdb-layout-widget[data-animation="none"],
.wpdb-layout-widget:not([data-animation]) {
  opacity: 1 !important;
  animation: none !important;
}

/* ── Admin canvas preview indicator ── */
.wpdb-canvas-widget[data-animation]:not([data-animation="none"])::after {
  content: attr(data-animation);
  position: absolute;
  top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 9px;
  background: #8e44ad;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* ── Disable animations on mobile if requested ── */
@media (max-width: 768px) {
  .wpdb-anim-mobile-off[data-animation] {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .wpdb-layout-widget[data-animation] {
    opacity: 1 !important;
    animation: none !important;
  }
}