/* =========================================================
   Aquatec Moodboard Separator — Elementor widget
   Hairline-flanked gradient bar that grows on hover.
   All visual properties are CSS custom properties so the
   Elementor controls can override them per-instance.
   ========================================================= */

/* Reset Elementor's default widget padding/margin so the widget's
   rendered height equals exactly what the controls dictate. The
   user can still add space via Advanced → Margin/Padding because
   Elementor's per-instance overrides have higher specificity. */
body .elementor-widget-aquatec_mb_separator {
    margin: 0;
}

body .elementor-widget-aquatec_mb_separator > .elementor-widget-container {
    padding: 0;
}

/* Editor-only minimum height: makes the widget always grabbable in
   the Elementor backend, even if saved Container Height is 0 or
   unset. Front-end is unaffected. */
body.elementor-editor-active .elementor-widget-aquatec_mb_separator,
.elementor-edit-area .elementor-widget-aquatec_mb_separator {
    min-height: 30px;
}

.mb-separator {
    --mb-sep-width: 64px;
    --mb-sep-width-hover: 220px;
    --mb-sep-height: 2px;
    --mb-sep-rail: rgba(0, 0, 0, .12);
    --mb-sep-gradient: linear-gradient(
        to right, #8a2387 0%, #e94057 50%, #f27121 100%
    );
    --mb-sep-duration: 400ms;
    --mb-sep-easing: cubic-bezier(0.19, 1, 0.22, 1);

    display: flex;
    align-items: center;
    width: 100%;
    max-width: 720px;
    color: #000;
}

/* ---------- Alignment (anchored to the parent column) ----------
   Elementor's `prefix_class: mb-sep-align-` puts these on the
   widget WRAPPER, so we can flip both the separator's own margin
   and which hairline shows. */
.mb-sep-align-center .mb-separator {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.mb-sep-align-left .mb-separator {
    margin-left: 0;
    margin-right: auto;
    justify-content: flex-start;
}
.mb-sep-align-left .mb-separator::before {
    display: none;
}
.mb-sep-align-left .mb-separator__line {
    margin-left: 0;
}

.mb-sep-align-right .mb-separator {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
}
.mb-sep-align-right .mb-separator::after {
    display: none;
}
.mb-sep-align-right .mb-separator__line {
    margin-right: 0;
}

/* ---------- Hairlines ---------- */
.mb-separator::before,
.mb-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right, transparent, var(--mb-sep-rail) 60%
    );
}
.mb-separator::after {
    background: linear-gradient(
        to right, var(--mb-sep-rail), transparent 40%
    );
}

.mb-separator--no-hairlines::before,
.mb-separator--no-hairlines::after {
    display: none;
}

/* ---------- The gradient bar ---------- */
.mb-separator__line {
    display: block;
    width: var(--mb-sep-width);
    height: var(--mb-sep-height);
    margin: 0 22px;
    border-radius: 999px;
    background: var(--mb-sep-gradient);
    transition: width var(--mb-sep-duration) var(--mb-sep-easing);
}

/* hover-grow */
.mb-separator:hover .mb-separator__line {
    width: var(--mb-sep-width-hover);
}

/* hover disabled — bar stays at idle width regardless of cursor */
.mb-separator--no-hover:hover .mb-separator__line {
    width: var(--mb-sep-width);
}

/* auto-grow on page load */
.mb-separator--auto-grow .mb-separator__line {
    animation: mb-separator-grow var(--mb-sep-duration) var(--mb-sep-easing) both;
}

@keyframes mb-separator-grow {
    from { width: var(--mb-sep-width); }
    to   { width: var(--mb-sep-width-hover); }
}

.mb-separator--auto-grow:hover .mb-separator__line {
    width: var(--mb-sep-width-hover);
}

/* if hover is disabled but auto-grow is on, lock final width to hover-width */
.mb-separator--auto-grow.mb-separator--no-hover .mb-separator__line {
    width: var(--mb-sep-width-hover);
}
.mb-separator--auto-grow.mb-separator--no-hover:hover .mb-separator__line {
    width: var(--mb-sep-width-hover);
}