/* Sparkle for Divi 5 — Floating Live Editor v0.6.3 */

/* ─── Panel shell ─── */
#sfd-live-editor {
  position:      fixed;
  z-index:       999999;
  bottom:        32px;
  right:         32px;
  width:         400px;
  background:    #16161f;
  border:        1px solid #3a3a55;
  border-radius: 12px;
  box-shadow:    0 12px 40px rgba(0,0,0,.7);
  font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:     13px;
  color:         #e2e4f0;           /* ↑ raised from #cdd6f4 */
  user-select:   none;
  display:       flex;
  flex-direction: column;
}

#sfd-live-editor.sfd-le-minimized #sfd-le-body,
#sfd-live-editor.sfd-le-minimized #sfd-le-tabs,
#sfd-live-editor.sfd-le-minimized #sfd-le-footer { display: none; }

/* ─── Header ─── */
#sfd-le-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 12px 10px 14px;
  background:    #111119;
  border-radius: 12px 12px 0 0;
  cursor:        grab;
  border-bottom: 1px solid #3a3a55;
  flex-shrink:   0;
}
#sfd-le-header:active { cursor: grabbing; }

.sfd-le-logo { font-size: 15px; }

#sfd-le-title {
  font-size:     13px;
  font-weight:   700;
  color:         #d4b8ff;           /* purple tint, strong */
  white-space:   nowrap;
  flex:          1;
}
#sfd-le-preset-name {
  font-size:     11px;
  color:         #c0c4d8;           /* ↑ raised from #a6adc8 */
  max-width:     130px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  background:    rgba(255,255,255,.06);
  border-radius: 4px;
  padding:       1px 6px;
}
.sfd-le-hbtn {
  background:  transparent;
  border:      none;
  color:       #9098b8;             /* ↑ raised from #6c7086 */
  cursor:      pointer;
  padding:     2px 6px;
  border-radius: 4px;
  font-size:   14px;
  line-height: 1;
  transition:  color .15s, background .15s;
}
.sfd-le-hbtn:hover { color: #e2e4f0; background: #2a2a3e; }

/* ─── Tab bar ─── */
#sfd-le-tabs {
  display:       flex;
  background:    #111119;
  border-bottom: 1px solid #3a3a55;
  flex-shrink:   0;
}
.sfd-le-tab {
  flex:          1;
  padding:       8px 4px;
  background:    transparent;
  border:        none;
  border-bottom: 2px solid transparent;
  color:         #9098b8;           /* ↑ raised */
  cursor:        pointer;
  font-size:     12px;
  font-weight:   600;
  letter-spacing: .03em;
  transition:    color .15s, border-color .15s;
}
.sfd-le-tab:hover  { color: #c8ccdf; }
.sfd-le-tab.active {
  color:         #d4b8ff;
  border-bottom-color: #9b72f7;
}

/* ─── Body / scroll ─── */
#sfd-le-body {
  flex:          1;
  overflow-y:    auto;
  overflow-x:    hidden;
  height:        320px;      /* default — user kan slepen via resize handle */
  scrollbar-width: thin;
  scrollbar-color: #4a4a6a transparent;
}
#sfd-le-body::-webkit-scrollbar       { width: 4px; }
#sfd-le-body::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 4px; }
#sfd-le-body::-webkit-scrollbar-thumb:hover { background: #7c6aab; }
/* Hide scrollbar when content fits — only show when actually scrollable */
#sfd-le-body:not([data-overflowing]) {
  scrollbar-color: transparent transparent;
}

/* ─── Resize handle — boven de body ─── */
/* ─── Resize handle — grip dots ─── */
#sfd-le-resize {
  height:          18px;
  cursor:          ns-resize;
  background:      #1a1a2e;
  border-top:      1px solid #2e2e48; /* separates from body above */
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .15s;
  flex-shrink:     0;
}
#sfd-le-resize:hover,
#sfd-le-resize.dragging {
  background:      rgba(124,58,237,.30);
}
/* Six grip dots rendered as a 2-row × 3-col dot grid via box-shadow */
.sfd-le-grip {
  display:         block;
  width:           4px;
  height:          4px;
  border-radius:   50%;
  background:      #94a3b8;
  box-shadow:
    10px 0   0 #94a3b8,
    20px 0   0 #94a3b8,
     0px 7px 0 #94a3b8,
    10px 7px 0 #94a3b8,
    20px 7px 0 #94a3b8;
  margin-left:     -10px; /* centre the 3-col group */
}
#sfd-le-resize:hover   .sfd-le-grip,
#sfd-le-resize.dragging .sfd-le-grip {
  background:      #c4b5fd;
  box-shadow:
    10px 0   0 #c4b5fd,
    20px 0   0 #c4b5fd,
     0px 7px 0 #c4b5fd,
    10px 7px 0 #c4b5fd,
    20px 7px 0 #c4b5fd;
}

/* ─── Tab panes ─── */
.sfd-le-tabpane         { display: none; padding: 12px 14px 10px; }
.sfd-le-tabpane.active  { display: block; }

/* ─── Section label ─── */
.sfd-le-section-label {
  font-size:     10px;
  font-weight:   700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          #8890b0;          /* ↑ raised from #585b70 */
  margin:         10px 0 6px;
}
.sfd-le-section-label:first-child { margin-top: 0; }

/* ─── Divider between sections inside a pane ─── */
.sfd-le-divider {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin:      14px 0 10px;
}
.sfd-le-divider::before,
.sfd-le-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: #2e2e48;
}
.sfd-le-divider span {
  font-size:     10px;
  font-weight:   700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          #8890b0;
  white-space:    nowrap;
}

/* ─── Mode badge (position tab) ─── */
.sfd-le-mode-badge {
  display:       inline-block;
  font-size:     11px;
  font-weight:   600;
  color:         #d4b8ff;
  background:    rgba(155,114,247,.15);
  border:        1px solid rgba(155,114,247,.3);
  border-radius: 6px;
  padding:       3px 9px;
  margin-bottom: 12px;
}

/* ─── Slider rows ─── */
.sfd-le-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 7px;
}
.sfd-le-label {
  min-width:  108px;
  font-size:  12px;
  color:      #c0c4d8;              /* ↑ raised from #a6adc8 */
  line-height: 1.3;
}
.sfd-le-hint {
  display:    block;
  font-size:  10px;
  color:      #8890b0;
  font-weight: 400;
  margin-top: 1px;
}
.sfd-le-row-hint {
  font-size:    10px;
  color:        #8890b0;
  margin:       -6px 0 4px;
  padding-left: 116px;  /* align with slider start: label min-width(108) + gap(8) */
  padding-right: 46px;  /* align with slider end: val min-width(38) + gap(8) */
  text-align:   center;
  letter-spacing: 0.3px;
}
.sfd-le-row input[type=range] {
  flex:         1;
  accent-color: #9b72f7;
  cursor:       pointer;
  height:       4px;
}
.sfd-le-val {
  font-size:   11px;
  font-weight: 700;
  min-width:   38px;
  text-align:  right;
  color:       #e2e4f0;             /* full brightness */
}

/* ─── Dual range (Active zone) ─── */
.sfd-le-row-dual { align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.sfd-le-row-dual .sfd-le-label { padding-top: 3px; }

.sfd-le-dual-wrap {
  flex:       1;
  position:   relative;
  height:     28px;
  min-width:  0;
}
.sfd-le-dual-track {
  position:     absolute;
  left:         0; right: 0;
  top:          50%; transform: translateY(-50%);
  height:       4px;
  background:   #2e2e48;
  border-radius: 2px;
  overflow:     hidden;
}
.sfd-le-dual-fill {
  position:   absolute;
  height:     100%;
  background: #9b72f7;
  border-radius: 2px;
}
.sfd-le-dual-input {
  position:   absolute;
  width:      100%;
  top:        50%; transform: translateY(-50%);
  height:     4px;
  margin:     0;
  background: transparent;
  appearance: none;
  pointer-events: none;
  accent-color: #9b72f7;
}
.sfd-le-dual-input::-webkit-slider-thumb {
  appearance:   none;
  width:        14px; height: 14px;
  border-radius: 50%;
  background:   #9b72f7;
  border:       2px solid #e2e4f0;
  cursor:       pointer;
  pointer-events: all;
}
.sfd-le-dual-input::-moz-range-thumb {
  width:        14px; height: 14px;
  border-radius: 50%;
  background:   #9b72f7;
  border:       2px solid #e2e4f0;
  cursor:       pointer;
  pointer-events: all;
}

/* ─── Toggle switch ─── */
.sfd-le-toggle-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 7px;
}
.sfd-le-toggle-row .sfd-le-label { flex: 1; }

.sfd-le-switch-wrap {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-shrink: 0;
}

.sfd-le-switch-off,
.sfd-le-switch-on {
  font-size:     10px;
  font-weight:   700;
  letter-spacing: .06em;
  transition:    color .2s, opacity .2s;
}
.sfd-le-switch-off { color: #9b72f7; opacity: 1; }
.sfd-le-switch-on  { color: #8890b0; opacity: .4; }

/* When checked: ON lights up, OFF dims */
.sfd-le-switch input:checked ~ .sfd-le-switch-on,
.sfd-le-switch-wrap:has(input:checked) .sfd-le-switch-on  { color: #9b72f7; opacity: 1; }
.sfd-le-switch-wrap:has(input:checked) .sfd-le-switch-off { color: #8890b0; opacity: .4; }

.sfd-le-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.sfd-le-switch input { opacity: 0; width: 0; height: 0; }
.sfd-le-switch-slider {
  position:   absolute; inset: 0;
  background: #2e2e48;
  border-radius: 20px;
  cursor:     pointer;
  transition: background .2s;
}
.sfd-le-switch-slider::before {
  content:    '';
  position:   absolute;
  width:      14px; height: 14px;
  left: 3px; top: 3px;
  background: #9098b8;
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.sfd-le-switch input:checked + .sfd-le-switch-slider { background: rgba(155,114,247,.35); }
.sfd-le-switch input:checked + .sfd-le-switch-slider::before {
  transform:  translateX(14px);
  background: #9b72f7;
}

/* ─── Colour swatches ─── */
.sfd-le-colors {
  display:    flex;
  gap:        5px;
  flex-wrap:  wrap;
  margin-bottom: 10px;
}
.sfd-le-swatch {
  width:        16px; height: 16px;
  border-radius: 50%;
  border:       1px solid #313fd1;
  cursor:       pointer;
  padding:      0;
  transition:   transform .1s, border-color .15s, box-shadow .15s;
}
.sfd-le-swatch:hover  { transform: scale(1.2); }
.sfd-le-swatch.active {
  border-color: #e2e4f0;
  box-shadow:   0 0 0 2px #9b72f7;
}

/* ─── Shape / Motion button groups ─── */
.sfd-le-inline-group {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin-bottom: 6px;
}
.sfd-le-inline-label {
  min-width:   46px;
  font-size:   10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:       #8890b0;
  flex-shrink: 0;
}
.sfd-le-btn-group {
  display:    flex;
  flex-wrap:  wrap;
  gap:        4px;
  flex:       1;
}
.sfd-le-opt {
  padding:       4px 9px;
  border-radius: 6px;
  border:        1px solid #3a3a55;
  background:    #1e1e2e;
  color:         #c0c4d8;           /* ↑ raised */
  font-size:     12px;
  cursor:        pointer;
  transition:    background .15s, color .15s, border-color .15s;
}
.sfd-le-opt:hover  { background: #2a2a3e; color: #e2e4f0; }
.sfd-le-opt.active {
  background:    rgba(155,114,247,.2);
  border-color:  #9b72f7;
  color:         #d4b8ff;
  font-weight:   600;
}

/* ─── Footer buttons ─── */
#sfd-le-footer {
  display:     flex;
  gap:         8px;
  padding:     10px 14px;
  background:  #111119;
  border-top:  1px solid #3a3a55;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}
.sfd-le-btn {
  flex:        1;
  padding:     7px 0;
  border-radius: 6px;
  border:      1px solid #3a3a55;
  background:  #1e1e2e;
  color:       #c0c4d8;             /* ↑ raised */
  font-size:   12px;
  font-weight: 600;
  cursor:      pointer;
  transition:  background .15s, color .15s;
}
.sfd-le-btn:hover { background: #2a2a3e; color: #e2e4f0; }
.sfd-le-btn.primary {
  background:    #7c3aed;
  border-color:  #7c3aed;
  color:         #fff;
}
.sfd-le-btn.primary:hover { background: #6d28d9; }
.sfd-le-btn:disabled { opacity: .5; cursor: default; }

/* ─── Activate button on preset card ─── */
.sfd-live-preview-btn {
  background:    linear-gradient(135deg, #7c3aed, #a855f7);
  color:         #fff !important;
  border:        none !important;
  border-radius: 6px;
  padding:       5px 12px;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    opacity .15s;
}
.sfd-live-preview-btn:hover  { opacity: .85; }
.sfd-live-preview-btn.active { background: #16a34a; }

/* ─── Free colour picker swatch (🎨) ─── */
.sfd-le-swatch-picker-wrap {
  display:        inline-flex;
  align-items:    center;
  cursor:         pointer;
  position:       relative;
}
.sfd-le-color-native {
  position:       absolute;
  width:          1px;
  height:         1px;
  opacity:        0;
  pointer-events: none;
}
.sfd-le-swatch-picker-wrap:hover .sfd-le-swatch-picker { transform: scale(1.2); }
.sfd-le-swatch.sfd-le-swatch-picker {
  font-size:      12px;
  line-height:    16px;
  background:     #2a2a3e;
  border-color:   #4a4a6a;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

/* ── Term tooltips in Live Editor ── */
.sfd-le-tt {
  border-bottom: 1.5px dashed rgba(155,114,247,.75);
  cursor:        default;
}
.sfd-le-tt-bubble {
  position:      fixed;
  z-index:       2147483647; /* max z-index — above Divi builder UI */
  width:         220px;
  background:    linear-gradient(160deg,#1e1340 0%,#2a1a5e 100%);
  border:        1px solid rgba(155,114,247,.50);
  border-radius: 10px;
  padding:       10px 13px;
  font-size:     11px;
  color:         #d4d0ee;
  line-height:   1.6;
  box-shadow:    0 10px 32px rgba(0,0,0,.6);
  pointer-events:none;
  opacity:       0;
  transform:     translateY(-4px);
  transition:    opacity .18s ease, transform .18s ease;
  white-space:   normal;
}
.sfd-le-tt-bubble.visible {
  opacity:   1;
  transform: translateY(0);
}
.sfd-le-tt-bubble::after {
  content:    '';
  position:   absolute;
  bottom:     -7px;
  left:       50%;
  transform:  translateX(-50%);
  width:      14px;
  height:     7px;
  background: #2a1a5e;
  clip-path:  polygon(0 0, 100% 0, 50% 100%);
}
.sfd-le-tt-bubble::before {
  content:    '';
  position:   absolute;
  bottom:     -8.5px;
  left:       50%;
  transform:  translateX(-50%);
  width:      16px;
  height:     8px;
  background: rgba(155,114,247,.50);
  clip-path:  polygon(0 0, 100% 0, 50% 100%);
  z-index:    -1;
}
.sfd-le-tt-bubble.flipped::after {
  bottom:    auto;
  top:       -7px;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}
.sfd-le-tt-bubble.flipped::before {
  bottom:    auto;
  top:       -8.5px;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}