/* =====================================================================
   home-progress.css
   Fix: progress bar label/percentage overlap — works in both LTR & RTL.
   Scoped to the expertise section (data-id="588fcab") on page 6782.
   ===================================================================== */

/* ── 1. Widget container: give each bar its own stacking context ──────── */
.elementor-6782 [data-id="588fcab"] .elementor-widget-progress {
    margin-bottom: 20px;
}

/* ── 2. Header row: title on one side, percentage on the other ────────── */
/*
   We use a flex row that automatically mirrors itself in RTL because we
   rely on logical (start/end) rather than physical (left/right) properties.
   The .elementor-title and .elementor-progress-percentage are siblings
   inside .elementor-widget-container, so we make the container a flex row.
*/
.elementor-6782 [data-id="588fcab"] .elementor-widget-progress
    > .elementor-widget-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Header row that holds title + percentage number */
.elementor-6782 [data-id="588fcab"] .elementor-widget-progress
    .elementor-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    /* Prevent the title from wrapping under the percentage */
    white-space: normal;
    word-break: break-word;
}

/* ── 3. Pull the percentage label OUT of the bar and into the title row ─ */
/*
   The elementor-progress-percentage span lives INSIDE elementor-progress-bar
   in the original HTML.  We lift it visually to the title row using
   CSS order-independent flexbox tricks on the WRAPPER level, but since
   the span is nested two levels deep (bar > percentage) we cannot reorder
   it from the title's flex context.

   Instead we:
   a) Make the progress-bar a normal flow bar (no positioning hacks).
   b) Move the percentage to sit ABOVE the bar using negative margin +
      absolute positioning anchored to the wrapper — zero risk of overlap.
*/

/* Make the wrapper the positioning parent */
.elementor-6782 [data-id="588fcab"] .elementor-widget-progress
    > .elementor-widget-container {
    position: relative;
}

/* The track */
.elementor-6782 [data-id="588fcab"] .elementor-progress-wrapper {
    position: relative;
    overflow: visible; /* allow the label to escape upward */
    border-radius: 4px;
    height: 8px !important;   /* slim, modern bar height */
    background-color: #e8e4f8;
}

/* The fill */
.elementor-6782 [data-id="588fcab"] .elementor-progress-bar {
    height: 100% !important;
    border-radius: 4px;
    background: linear-gradient(90deg, #6254e7 0%, #9b8df5 100%);
    display: block !important;  /* override elementor flex – no text inside */
    line-height: unset;
    font-size: unset;
    position: relative;
    overflow: visible;
}

/* ── 4. Percentage label: escape the bar, float to the inline-end ────── */
/*
   We position it relative to the progress-bar fill so it always tracks
   the end of the bar.  The `inset-inline-end` logical property means:
   - LTR → right edge of the fill
   - RTL → left edge of the fill (automatically mirrored by the browser)
   Then we translate it upward so it sits above the track.
*/
.elementor-6782 [data-id="588fcab"] .elementor-progress-percentage {
    /* Reset any elementor / inline styles that cause overlap */
    position: absolute !important;
    right: auto   !important;  /* neutralise the hardcoded style="right:93%" */
    left:  auto   !important;
    top:   auto   !important;
    bottom: auto  !important;
    padding: 0 !important;

    /* Anchor to the inline-end of the fill bar */
    inset-block-end: calc(100% + 6px);   /* sit 6 px above the track */
    inset-inline-end: 0;                  /* always the trailing edge */

    /* Typography */
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #6254e7;
    white-space: nowrap;

    /* Make sure it is always readable */
    background: transparent;
    z-index: 2;
}

/* Hide the empty elementor-progress-text span — it adds no value */
.elementor-6782 [data-id="588fcab"] .elementor-progress-text {
    display: none !important;
}

/* ── 5. Title text (the label, not the percentage) ───────────────────── */
.elementor-6782 [data-id="588fcab"] .elementor-title {
    /* leave room for the absolute-positioned percentage */
    padding-inline-end: 48px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    display: block;
}

/* ── 6. Spacing between consecutive progress widgets ─────────────────── */
.elementor-6782 [data-id="588fcab"] [data-id="59b9440"],
.elementor-6782 [data-id="588fcab"] [data-id="d2906f9"],
.elementor-6782 [data-id="588fcab"] [data-id="e8f800f"] {
    margin-bottom: 28px;
}

/* ── 7. RTL-specific overrides ───────────────────────────────────────── */
/*
   `inset-inline-end` and `padding-inline-end` already handle RTL/LTR
   automatically.  The only extra touch: in RTL the gradient should read
   from right to left so the fill still "grows" from the correct side.
*/
[dir="rtl"] .elementor-6782 [data-id="588fcab"] .elementor-progress-bar,
.elementor-6782 [data-id="588fcab"] [style*="direction: rtl"] .elementor-progress-bar {
    background: linear-gradient(270deg, #6254e7 0%, #9b8df5 100%);
}

/* ── 8. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .elementor-6782 [data-id="588fcab"] .elementor-widget-progress {
        margin-bottom: 16px;
    }

    .elementor-6782 [data-id="588fcab"] .elementor-title {
        font-size: 13px;
    }

    .elementor-6782 [data-id="588fcab"] .elementor-progress-percentage {
        font-size: 11px;
    }
}

/* ── 9. Reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .elementor-6782 [data-id="588fcab"] .elementor-progress-bar {
        transition: none;
    }
}