/**
 * Page Designer — Progress Block — dedicated canvas/runtime styles
 * v1.1.0 (PAGE_DESIGNER_VERSION 2.9.273)
 *
 * Every selector in this file is prefixed `.pd-blk-prog-*` for child
 * elements — dedicated namespace, never shared with any other block.
 * The root selector targets the markup attribute `[data-pd-block=
 * "progress"]` directly because the rendered root carries no class
 * (matches the Counter block's `[data-pd-block="counter_pe"]` pattern).
 *
 * v1.1.0 — fixed root selector. Was `.pd-blk-prog-root` which never
 * matched (registration in components_blocks.js doesn't apply that
 * class), so padding: 20px was lost and the block bounding-rect
 * collapsed to its column's exact inner size — making it impossible
 * to hover/click "just the block" rather than the column. Variant /
 * animate compound rules unchanged.
 *
 * The settings panel lives under `.pd-prg-pnl-*` in
 * `assets/css/pd_progress_panel.css`.
 */

/* ── Root container ───────────────────────────────────────────────── */
[data-pd-block="progress"] {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Bar item wrapper (linear variants) ───────────────────────────── */
.pd-blk-prog-item {
    margin-bottom: 16px;
}
.pd-blk-prog-item:last-child { margin-bottom: 0; }
.pd-blk-prog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.pd-blk-prog-head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pd-blk-prog-icon {
    flex: 0 0 auto;
    /* v3.7.30 — default icon size follows Global General Text (≈ the label,
       0.875×16=14). The panel bakes an inline font-size only when the bar's
       Size slider or the block Icon Size control overrides it. width relaxed
       to min-width so a larger glyph isn't clipped by a fixed 16px box. */
    font-size: calc(var(--pd-general-size, 16px) * 0.875);
    min-width: 16px;
    text-align: center;
}
.pd-blk-prog-label {
    /* v3.7.28 — bar text follows Global Theme > General Text. Sizes are
       proportional factors of --pd-general-size (0.875×16=14, 0.8125×16=13)
       so the default look is unchanged but scales with the slider. Weight /
       line-height / letter-spacing follow General; colour is inherited
       (the panel bakes var(--pd-general-color…) on the head). */
    font-size: calc(var(--pd-general-size, 16px) * 0.875);
    font-weight: var(--pd-general-weight, 600);
    line-height: var(--pd-general-lh, 1.3);
    letter-spacing: var(--pd-general-ls, normal);
}
.pd-blk-prog-value {
    font-size: calc(var(--pd-general-size, 16px) * 0.8125);
    line-height: var(--pd-general-lh, 1.3);
    letter-spacing: var(--pd-general-ls, normal);
}

/* ── Label position variants ──────────────────────────────────────── */
/* v1.1.1 (PAGE_DESIGNER_VERSION 2.9.278): hide ONLY the label text
   when label-pos="hidden". Previously this collapsed the entire head
   row, which incorrectly took the per-bar icon and the right-side
   value down with it — coupling that conflicted with the panel's
   independent "Show value" checkbox. The head row now stays so the
   icon + value still render when their own toggles are on. */
.pd-blk-prog-item[data-label-pos="hidden"] .pd-blk-prog-label { display: none; }
.pd-blk-prog-item[data-label-pos="below"] { display: flex; flex-direction: column-reverse; }
.pd-blk-prog-item[data-label-pos="below"] .pd-blk-prog-head { margin-bottom: 0; margin-top: 6px; }

/* ── Track + fill (linear base) ───────────────────────────────────── */
.pd-blk-prog-track {
    background: color-mix(in srgb, currentColor 15%, transparent); /* v3.7.19 — neutral track, no admin token */
    border-radius: 8px;
    height: 10px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.pd-blk-prog-fill {
    height: 100%;
    background: var(--pd-link-color, #89b4fa); /* v3.7.23 — bar fill follows Global Links */
    border-radius: inherit;
    transition: width 1.2s ease-out;
    position: relative;
    overflow: hidden;
    width: 0;
}
[data-pd-block="progress"][data-pd-prog-animate="0"] .pd-blk-prog-fill {
    transition: none;
}

/* ── Inside-label variant: label sits inside the track ───────────── */
.pd-blk-prog-item[data-label-pos="inside"] .pd-blk-prog-head { display: none; }
.pd-blk-prog-item[data-label-pos="inside"] .pd-blk-prog-track {
    height: auto;
    min-height: 22px;
    display: flex;
    align-items: center;
}
.pd-blk-prog-item[data-label-pos="inside"] .pd-blk-prog-inner-label {
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #fff; /* v3.7.19 — readable on the coloured fill, no admin token */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.pd-blk-prog-item:not([data-label-pos="inside"]) .pd-blk-prog-inner-label {
    display: none;
}

/* ── Value position: inside the bar ───────────────────────────────── */
.pd-blk-prog-item[data-value-pos="inside"] .pd-blk-prog-value { display: none; }
.pd-blk-prog-item[data-value-pos="inside"] .pd-blk-prog-fill-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff; /* v3.7.19 — readable on the coloured fill */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.pd-blk-prog-item:not([data-value-pos="inside"]) .pd-blk-prog-fill-value { display: none; }

/* ── Value hidden completely ──────────────────────────────────────── */
.pd-blk-prog-item[data-value-show="0"] .pd-blk-prog-value,
.pd-blk-prog-item[data-value-show="0"] .pd-blk-prog-fill-value { display: none; }

/* ── Variant: striped ─────────────────────────────────────────────── */
[data-pd-block="progress"][data-pd-prog-variant="striped"] .pd-blk-prog-fill,
[data-pd-block="progress"][data-pd-prog-variant="striped-anim"] .pd-blk-prog-fill {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}
@keyframes pd-blk-prog-stripe-move {
    from { background-position: 1rem 0; }
    to   { background-position: 0 0; }
}
[data-pd-block="progress"][data-pd-prog-variant="striped-anim"] .pd-blk-prog-fill {
    animation: pd-blk-prog-stripe-move 1s linear infinite;
}

/* ── Variant: gradient ────────────────────────────────────────────── */
[data-pd-block="progress"][data-pd-prog-variant="gradient"] .pd-blk-prog-fill {
    background-image: linear-gradient(90deg, var(--pd-link-color, #89b4fa) 0%, color-mix(in srgb, var(--pd-link-color, #89b4fa) 55%, #ffffff) 100%); /* v3.7.23 — gradient from Global Links, no hardcoded palette */
}

/* ── Variant: segmented ───────────────────────────────────────────── */
[data-pd-block="progress"][data-pd-prog-variant="segmented"] .pd-blk-prog-fill {
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) calc(10% - 2px),
            rgba(17, 17, 27, 0.35) calc(10% - 2px),
            rgba(17, 17, 27, 0.35) 10%
        );
}

/* ── Variant: circular ────────────────────────────────────────────── */
[data-pd-block="progress"][data-pd-prog-variant="circular"] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
[data-pd-block="progress"][data-pd-prog-variant="circular"] .pd-blk-prog-item {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}
[data-pd-block="progress"][data-pd-prog-variant="circular"] .pd-blk-prog-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    gap: 2px;
}
[data-pd-block="progress"][data-pd-prog-variant="circular"] .pd-blk-prog-track {
    display: none;
}
.pd-blk-prog-circ {
    display: block;
    width: 100px;
    height: 100px;
    position: relative;
}
.pd-blk-prog-circ-track {
    stroke: color-mix(in srgb, currentColor 15%, transparent); /* v3.7.19 — neutral track */
    fill: none;
}
.pd-blk-prog-circ-fill {
    stroke: var(--pd-link-color, #89b4fa); /* v3.7.19 — accent follows Global Links */
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.2s ease-out;
}
[data-pd-block="progress"][data-pd-prog-animate="0"] .pd-blk-prog-circ-fill { transition: none; }
.pd-blk-prog-circ-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(-50%);
    font-size: calc(var(--pd-general-size, 16px) * 1.125); /* v3.7.28 — 18px @ General 16; follows General Text */
    font-weight: var(--pd-general-weight, 700); /* v3.7.28 — follows General Text Weight */
    color: inherit; /* v3.7.19 — General Text colour */
    pointer-events: none;
}
[data-pd-block="progress"][data-pd-prog-variant="circular"] .pd-blk-prog-item:not([data-value-show="1"]) .pd-blk-prog-circ-text {
    display: none;
}
[data-pd-block="progress"]:not([data-pd-prog-variant="circular"]) .pd-blk-prog-circ { display: none; }