/* SED Section Dots — v1.3.0 */

/* -------------------------------------------------- *
 *  Custom property defaults (on container)            *
 * -------------------------------------------------- */
.sed-dots {
	--sed-dot-size:           12px;
	--sed-dot-color:          rgba(255, 255, 255, 0.6);
	--sed-dot-active-color:   #ffffff;
	--sed-dot-spacing:        15px;
	--sed-scale-value:        1.5;
	--sed-pill-height:        2.5;
	--sed-h-offset:           30px;
	--sed-v-offset:           30px;
	--sed-tx:                 0;      /* set by pos_h_anchor selectors_dictionary */
	--sed-ty:                 0;      /* set by pos_v_anchor selectors_dictionary */
}

/* -------------------------------------------------- *
 *  Container                                          *
 * -------------------------------------------------- */
.sed-dots {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-direction:  column;
}

/*
 * Transform for fixed positioning.
 * --sed-tx and --sed-ty are written by the pos_h_anchor / pos_v_anchor
 * selectors_dictionary values, so the transform always matches the active
 * breakpoint without any JS involvement.
 */
.sed-dots--widget {
	transform: translate(var(--sed-tx, 0), var(--sed-ty, 0));
}

/* -------------------------------------------------- *
 *  Individual dot — base state                        *
 * -------------------------------------------------- */
.sed-dot {
	flex-shrink:   0;
	width:         var(--sed-dot-size);
	height:        var(--sed-dot-size);
	border-radius: calc(var(--sed-dot-size) / 2);
	background:    var(--sed-dot-color);
	cursor:        pointer;
	transition:    transform       0.35s ease,
	               background-color 0.35s ease,
	               height          0.35s ease,
	               border-radius   0.35s ease;
	position: relative;
}

/* Spacing — correct axis per orientation */
.sed-dots[data-direction="column"] .sed-dot:not(:last-child) { margin-bottom: var(--sed-dot-spacing); }
.sed-dots[data-direction="row"]    .sed-dot:not(:last-child) { margin-right:  var(--sed-dot-spacing); }
/* Default before JS sets attribute */
.sed-dot:not(:last-child) { margin-bottom: var(--sed-dot-spacing); }

/* -------------------------------------------------- *
 *  Active / hover — SCALE mode (default)              *
 * -------------------------------------------------- */
.sed-dots[data-active-style="scale"] .sed-dot:hover,
.sed-dots[data-active-style="scale"] .sed-dot--active,
/* fallback when attribute not yet written */
.sed-dots:not([data-active-style="pill"]) .sed-dot:hover,
.sed-dots:not([data-active-style="pill"]) .sed-dot--active {
	transform:        scale(var(--sed-scale-value));
	background-color: var(--sed-dot-active-color);
}

/* -------------------------------------------------- *
 *  Active / hover — PILL mode                         *
 * -------------------------------------------------- */
.sed-dots[data-active-style="pill"] .sed-dot {
	/* ensure width stays fixed; only height morphs */
	transition: transform       0.35s ease,
	            background-color 0.35s ease,
	            height          0.35s ease,
	            border-radius   0.35s ease;
}

.sed-dots[data-active-style="pill"] .sed-dot:hover,
.sed-dots[data-active-style="pill"] .sed-dot--active {
	transform:        none;
	background-color: var(--sed-dot-active-color);
	height:           calc(var(--sed-dot-size) * var(--sed-pill-height));
	border-radius:    999px !important; /* always fully rounds both ends regardless of height */
}

/* -------------------------------------------------- *
 *  Tooltip                                            *
 * -------------------------------------------------- */
.sed-dot__tooltip {
	position:       absolute;
	right:          calc(100% + 10px);
	top:            50%;
	transform:      translateY(-50%);
	background:     rgba(0, 0, 0, 0.75);
	color:          #fff;
	font-size:      12px;
	padding:        4px 8px;
	border-radius:  4px;
	white-space:    nowrap;
	pointer-events: none;
	opacity:        0;
	transition:     opacity 0.2s ease-in-out;
	line-height:    1.4;
}
.sed-dot:hover .sed-dot__tooltip { opacity: 1; }

.sed-dots[data-direction="row"] .sed-dot__tooltip {
	right:     auto;
	left:      50%;
	top:       auto;
	bottom:    calc(100% + 8px);
	transform: translateX(-50%);
}

/* -------------------------------------------------- *
 *  Elementor editor — live fixed preview              *
 * -------------------------------------------------- */

/*
 * Small floating label shown only in the editor so the widget
 * can be clicked/identified in the canvas.
 * Positioned just below the dot container.
 */
.sed-dots--editor {
	/* outline so it's clickable even when fully outside the normal flow */
	outline:        2px dashed rgba(100,180,255,0.6);
	outline-offset: 6px;
}

.sed-dots-editor-tag {
	position:       absolute;
	top:            calc(100% + 8px);
	left:           50%;
	transform:      translateX(-50%);
	white-space:    nowrap;
	font-size:      10px;
	font-weight:    600;
	color:          #fff;
	background:     rgba(100,180,255,0.85);
	padding:        2px 6px;
	border-radius:  3px;
	pointer-events: none;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 *  Debug overlay                                      *
 * -------------------------------------------------- */
#sed-debug {
	position:   fixed;
	bottom:     0;
	left:       0;
	right:      0;
	max-height: 40vh;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.88);
	color:      #0f0;
	font:       12px/1.6 monospace;
	padding:    10px 14px;
	z-index:    999999;
}
#sed-debug h4         { color: #ff0; margin: 0 0 6px; font-size: 13px; }
#sed-debug ul         { margin: 0; padding-left: 16px; }
#sed-debug li         { margin-bottom: 2px; }
.sed-debug-error      { color: #f66; }
.sed-debug-ok         { color: #6f6; }