/**
 * Art Photography for WooCommerce — Pricing Progress Indicator
 *
 * v2.3.25 — Adds the five-circle progress indicator that sits between the
 * Artwork Insurance section and the Total Price row on the single-product
 * page. Strictly additive: nothing here overrides any existing rules in
 * frontend.css. All selectors are namespaced under `.ap-progress-*` and
 * `.ap-toast` so they cannot collide with existing classes.
 *
 * Visual language
 *   - Five hand-picked stops in a single dark→light green progression
 *     (Print = darkest, Insurance = lightest). NOT random shades — the
 *     hue stays in the same family and lightness moves smoothly.
 *   - Inactive state: ~25% opacity, no tick, very subtle scale-down.
 *   - All transitions ~400ms ease so changes feel calm, not snappy.
 *   - Toast pill is a soft dark rounded surface with subtle shadow,
 *     fixed near the bottom of the viewport, fades in/out gently.
 *   - When idle, the toast is removed from the layout flow entirely
 *     (visibility:hidden + pointer-events:none) so it never reserves
 *     space or blocks clicks.
 */

/* ---------- Progress block container ----------
 * v2.3.32: container is now sized to match the visual mass of the
 * "Add Insurance Coverage" panel above it. Previously the stepper used
 * `padding: 0 2px` and 20px/16px vertical margins, which made the row
 * read as visually smaller than the surrounding cards. The mockup shows
 * the stepper occupying roughly the same vertical mass as the insurance
 * panel — we get there by:
 *   - generous vertical padding (18px top / 14px bottom)
 *   - a touch of horizontal padding (10px) so the outermost circles sit
 *     inside the column edge, not flush against it
 *   - larger top/bottom margins to separate from the cards above/below
 *   - a subtle off-white background-tint + 1px border that mirrors the
 *     visual weight of the insurance card without competing with it
 */
.ap-progress-track {
    margin: 22px 0 22px;
    padding: 18px 14px 16px;
    background-color: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
}

/* ---------- The five circles — v2.3.29 connected stepper ----------
 * Circles spread across the full container width (space-between).
 * A thin gradient line behind them connects the centres, drawn as a
 * ::before pseudo-element so no extra markup is needed.
 * Each <li> is a flex-column: coloured circle on top, label below.
 * The JS is unchanged — it still targets .ap-step[data-step] and
 * toggles .is-active; transitions are now on the inner .ap-circle.
 * ------------------------------------------------------------------ */
.ap-progress-circles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;            /* circles at top, labels hang below */
    position: relative;                 /* needed for the connector ::before */
    gap: 0;
}

/* Thin gradient connector line through the circle centres.
   top = half the circle height (26px / 2 = 13px).
   left/right inset = half the circle width so it starts/ends at
   each circle's centre rather than the container edge. */
.ap-progress-circles::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 1.5px;
    background: linear-gradient(
        to right,
        #1f5135 0%,
        #2e6b47 25%,
        #3f8559 50%,
        #559e6e 75%,
        #76b889 100%
    );
    opacity: 0.28;
    z-index: 0;
}

/* Each <li> is a vertical flex column — circle above, label below */
.ap-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    position: relative;
    z-index: 1;                         /* sit above the connector line */
    /* Reset all old direct-circle styling that used to live on the <li> */
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    opacity: 1;
    transform: none;
    box-shadow: none;
    transition: none;
}

/* The coloured circle inside each step.
   v2.3.32: bumped from 26 → 28 px so the row reads at the same scale
   as the insurance panel's icon column. Connector ::before top/inset
   below is updated to match (28 / 2 = 14 px). */
.ap-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d6dfd5;          /* soft inactive base */
    color: #ffffff;
    opacity: 0.28;
    transform: scale(0.92);
    transition: opacity 400ms ease,
                transform 400ms ease,
                background-color 400ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Five tuned green stops, darkest → lightest, same hue family */
.ap-step.ap-step--print    .ap-circle { background-color: #1f5135; }
.ap-step.ap-step--size     .ap-circle { background-color: #2e6b47; }
.ap-step.ap-step--frame    .ap-circle { background-color: #3f8559; }
.ap-step.ap-step--shipping .ap-circle { background-color: #559e6e; }
.ap-step.ap-step--insurance .ap-circle { background-color: #76b889; }

/* Active state: full opacity, full scale */
.ap-step.is-active .ap-circle {
    opacity: 1;
    transform: scale(1);
}

/* The tick mark — soft white check inside the circle */
.ap-step .ap-check {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 320ms ease 80ms,
                transform 320ms ease 80ms;
}

.ap-step.is-active .ap-check {
    opacity: 1;
    transform: scale(1);
}

/* Draw the check using two CSS borders (pure CSS, no glyph dependency) */
.ap-step .ap-check::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 4.5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(-50%, -65%) rotate(-45deg);
    border-radius: 1px;
}

/* ---------- Per-step labels (one per circle, below it) ---------- */
.ap-step-label {
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #9aa39a;
    font-family: 'Helvetica', Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}

/* ============================================================
 * v2.3.28 — Section icons (premium polish)
 * Small monoline SVG icons that sit at the far right of each
 * option-section header (Print Size, Frame, Shipping, Insurance),
 * plus a larger shield-with-check on the "Add Insurance Coverage"
 * row. All icons use currentColor so a single CSS color rule
 * themes everything. Strictly additive — no existing rule modified.
 * ============================================================ */

.ap-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    color: #8a938a;                      /* muted gray-green, low-contrast */
    flex-shrink: 0;
    /* Sits naturally at the right end of each .option-title because
       .section-title-text already has flex-grow:1 (defined in
       frontend.css), pushing all subsequent flex items rightward. */
}

.ap-section-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Larger shield rendered inside the "Add Insurance Coverage" row,
   next to the label. Uses the mid-green stop from the progress
   palette so it ties visually to the fifth circle. */
.ap-insurance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    color: #3f8559;                      /* mid stop from progress gradient */
    flex-shrink: 0;
}

.ap-insurance-icon-svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Decorative sparkle appended to the toast — a tiny detail that
   says "this is meant to feel polished". CSS ::after is used so we
   don't have to modify the translatable toast strings. */
.ap-toast::after {
    content: ' \2728';                   /* ✨ */
    margin-left: 4px;
    opacity: 0.9;
}

/* ---------- Floating toast ---------- */
.ap-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 8px);
    background-color: rgba(40, 44, 40, 0.92);
    color: #ffffff;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 280ms ease,
                transform 280ms ease,
                visibility 0s linear 280ms;
    z-index: 9999;
    max-width: 90vw;
    white-space: nowrap;
}

.ap-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 280ms ease,
                transform 280ms ease,
                visibility 0s linear 0s;
}

/* Respect users who ask for reduced motion — disable the smooth
   transitions but keep the visual states correct. */
@media (prefers-reduced-motion: reduce) {
    .ap-step,
    .ap-step .ap-check,
    .ap-toast {
        transition: none !important;
    }
}

/* Mobile: on very narrow viewports, shrink circles slightly so the
   row never overflows. Five 26px circles + connector = ~170px minimum
   which fits any phone, but we give a touch more breathing room. */
@media (max-width: 380px) {
    .ap-circle {
        width: 22px;
        height: 22px;
    }
    .ap-progress-circles::before {
        top: 11px;     /* recalculate: half of 22px */
        left: 11px;
        right: 11px;
    }
    .ap-step-label {
        font-size: 9px;
    }
}

/* =========================================================================
   v2.3.31 — Strikethrough original price + "Save $X" savings label
   Renders directly beneath .art-photography-total-price. The wrapper is
   hidden by default (aria-hidden=true on initial render); JS toggles
   .is-visible whenever insurance is applied so the line never shows a
   misleading "Save $0.00" when insurance is unchecked.
   ------------------------------------------------------------------------- */
.art-photography-savings-row {
    display: none;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0 12px;
    margin-top: -4px;
    line-height: 1.2;
}
.art-photography-savings-row.is-visible {
    display: flex;
}
.art-photography-original-price {
    font-size: 13px;
    color: #9aa0a6;
    text-decoration: line-through;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.art-photography-savings-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* =========================================================================
   v2.3.31 — Reassurance line beneath the Purchase button.
   Centered grey caption with inline shield-with-check icon. Uses
   currentColor on the SVG strokes so theming is one-line.
   ------------------------------------------------------------------------- */
.ap-secure-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
    line-height: 1.3;
}
.ap-secure-icon {
    display: inline-flex;
    align-items: center;
    color: #6b7280;
}
.ap-secure-icon svg {
    display: block;
}

/* v2.3.31 — Lock icon inside the Purchase button (matches mockup). */
.art-photography-add-to-cart .ap-lock-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
    color: currentColor;
}
.art-photography-add-to-cart .ap-lock-icon svg {
    display: block;
}