/**
 * TPG Satisfaction Scores — Accordion + Hero Layout
 *
 * ALL font-sizes in px to avoid OceanWP root font-size interference.
 * Values mapped directly from Figma Base Typography spec (base 16px).
 *
 * Breakpoints (from Figma Global Grid System):
 * - BP6: Desktop   (1280px+)   12-col, grid 1200px, gutter 24px
 * - BP5: Desktop-S (1024-1279) 12-col, grid  960px, gutter 24px
 * - BP4: Tablet-L  (840-1023)  12-col, grid  840px, gutter 24px
 * - BP3: Tablet    (600-839)    8-col, grid  100%,  gutter 24px
 * - BP2: Mobile-L  (480-599)    4-col, grid  100%,  gutter 16px
 * - BP1: Mobile    (360-479)    4-col, grid  100%,  gutter 16px
 *
 * Typography mapping (element → Figma style):
 * - Title              → H2   (Lora Bold)
 * - Description         → Body (Source Sans Regular)
 * - Row label           → H4   (Source Sans Semibold)
 * - Row tagline         → Caption (Source Sans Regular)
 * - Row score           → H4
 * - Review count        → Body
 * - Ring caption        → Small Text
 * - Criterion name/val  → Small Text
 * - Row review count    → Small Text
 *
 * @package TPG_Addons_LifterLMS
 * @since   2.26.0
 */

/* =========================================
   SECTION WRAPPER
   Standalone = grey background.
   Inside Elementor = transparent (parent handles bg).
   ========================================= */
.tpg-satisfaction {
    background: #ECEDEF;
    padding: 56px 0;
    box-sizing: border-box;
}

.elementor-shortcode .tpg-satisfaction,
.elementor-widget-shortcode .tpg-satisfaction {
    background: transparent;
    padding: 24px 0;
}

.tpg-satisfaction *,
.tpg-satisfaction *::before,
.tpg-satisfaction *::after {
    box-sizing: border-box;
}

/* ── Grid container — BP6 default ── */
.tpg-satisfaction__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* =========================================
   LEFT: HERO OVERALL
   ========================================= */
.tpg-satisfaction__hero {
    flex: 0 0 auto;
    width: 280px;
    text-align: center;
}

/* Title — Figma H2: Lora Bold 32px / 44px / -0.013em */
.tpg-satisfaction__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    color: #3A3A3C;
    line-height: 1.375;
    letter-spacing: -0.013em;
    margin: 0 0 32px 0;
    text-align: left;
}

/* Ring container */
.tpg-satisfaction__ring-wrap {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-bottom: 16px;
}

.tpg-satisfaction__ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tpg-satisfaction__ring-track {
    stroke: #DCDEE0;
}

.tpg-satisfaction__ring-fill {
    stroke: #E8833A;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Centered label inside ring */
.tpg-satisfaction__ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Ring value — large display number */
.tpg-satisfaction__ring-value {
    font-family: 'Lora', Georgia, serif;
    font-size: 48px;
    font-weight: 700;
    color: #3A3A3C;
    line-height: 1;
}

/* Ring percent symbol */
.tpg-satisfaction__ring-percent {
    font-family: 'Lora', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: #3A3A3C;
}

/* Ring caption — Figma Small Text: Source Sans 16px / 26px / 0.013em */
.tpg-satisfaction__ring-caption {
    display: block;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: #6A6C6D;
    line-height: 1.625;
    letter-spacing: 0.013em;
    margin-top: 4px;
}

/* Review count — Figma Body: Source Sans 20px / 32px */
.tpg-satisfaction__review-count {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color: #6A6C6D;
    line-height: 1.6;
    margin: 0;
}

.tpg-satisfaction__review-count strong {
    color: #3A3A3C;
    font-weight: 600;
}

/* =========================================
   RIGHT: ACCORDION
   ========================================= */
.tpg-satisfaction__accordion {
    flex: 1 1 auto;
    min-width: 0;
}

/* Description — Figma Body: Source Sans 20px / 32px */
.tpg-satisfaction__description {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color: #6A6C6D;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

/* ── Individual Row ── */
.tpg-satisfaction__row {
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
    margin-bottom: 8px;
}

.tpg-satisfaction__row:last-child {
    margin-bottom: 0;
}

.tpg-satisfaction__row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Row Header (button) ──
   Aggressive resets to override OceanWP / Elementor global button styles.
   The theme applies background, color, text-transform, letter-spacing,
   border-radius, and padding to ALL button elements. We need !important
   to reclaim control. Same pattern as tpg-pop-heart in popular-courses.css */
.tpg-satisfaction__row-header,
.tpg-satisfaction button.tpg-satisfaction__row-header,
section.tpg-satisfaction .tpg-satisfaction__row-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: none !important;
}

/* Hover / focus / active — prevent theme from re-applying button styles */
.tpg-satisfaction__row-header:hover,
.tpg-satisfaction__row-header:focus,
.tpg-satisfaction__row-header:active,
.tpg-satisfaction button.tpg-satisfaction__row-header:hover,
.tpg-satisfaction button.tpg-satisfaction__row-header:focus,
.tpg-satisfaction button.tpg-satisfaction__row-header:active {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
    outline: none !important;
}

.tpg-satisfaction__row-header:focus-visible {
    outline: 2px solid #E8833A !important;
    outline-offset: -2px !important;
    border-radius: 8px !important;
}

/* Orange accent bar on left */
.tpg-satisfaction__row-indicator {
    flex: 0 0 4px !important;
    width: 4px !important;
    height: 32px !important;
    border-radius: 2px !important;
    background: #DCDEE0 !important;
    transition: background 0.2s ease;
}

.tpg-satisfaction__row.is-open .tpg-satisfaction__row-indicator {
    background: #E8833A !important;
}

/* Text block */
.tpg-satisfaction__row-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Row label — Figma H4: Lora Bold 22px / 34px */
.tpg-satisfaction__row-label {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #3A3A3C !important;
    line-height: 1.545 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Row tagline — Figma Caption: Source Sans 14px / 20px / 0.013em */
.tpg-satisfaction__row-tagline {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
    font-size: 14px !important;
    color: #6A6C6D !important;
    line-height: 1.43 !important;
    letter-spacing: 0.013em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
}

/* Score + chevron */
.tpg-satisfaction__row-meta {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Row score — Figma H4: 22px */
.tpg-satisfaction__row-score {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #E8833A !important;
}

.tpg-satisfaction__row-chevron {
    color: #6A6C6D !important;
    transition: transform 0.25s ease;
    display: flex !important;
}

.tpg-satisfaction__row.is-open .tpg-satisfaction__row-chevron {
    transform: rotate(180deg);
}

/* ── Expandable Panel ── */
.tpg-satisfaction__row-panel {
    overflow: hidden;
}

.tpg-satisfaction__row-panel[hidden] {
    display: none;
}

.tpg-satisfaction__criteria {
    padding: 0 20px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

/* Individual criterion */
.tpg-satisfaction__criterion {
    flex: 1 1 180px;
    min-width: 140px;
}

.tpg-satisfaction__criterion-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Criterion name — Figma Small Text: Source Sans 16px / 26px / 0.013em */
.tpg-satisfaction__criterion-name {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #3A3A3C;
    line-height: 1.625;
    letter-spacing: 0.013em;
}

/* Criterion value — Figma Small Text: 16px */
.tpg-satisfaction__criterion-value {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #6A6C6D;
    line-height: 1.625;
    letter-spacing: 0.013em;
}

/* Progress bar */
.tpg-satisfaction__bar-track {
    height: 6px;
    background: #ECEDEF;
    border-radius: 3px;
    overflow: hidden;
}

.tpg-satisfaction__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #E8833A, #F4A261);
    border-radius: 3px;
    transition: width 0.6s ease 0.15s;
}

/* Review count footer — Figma Small Text: 16px */
.tpg-satisfaction__row-review-count {
    flex: 0 0 100%;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: #6A6C6D;
    line-height: 1.625;
    letter-spacing: 0.013em;
    margin-top: 4px;
}


/* =========================================
   BREAKPOINT 5: Small Desktop (1024-1279)
   Grid: 960px, gutter 24px
   Typography: H2=30px, H4=20px, Body=18px
   ========================================= */
@media (max-width: 1279px) {
    .tpg-satisfaction__inner {
        max-width: 960px;
        gap: 40px;
    }

    .tpg-satisfaction__hero {
        width: 240px;
    }

    /* H2 → 30px */
    .tpg-satisfaction__title {
        font-size: 30px;
        line-height: 1.4;
    }

    .tpg-satisfaction__ring-wrap {
        width: 180px;
        height: 180px;
    }

    .tpg-satisfaction__ring-value {
        font-size: 40px;
    }

    .tpg-satisfaction__ring-percent {
        font-size: 20px;
    }

    /* Body → 18px */
    .tpg-satisfaction__description {
        font-size: 18px;
    }

    .tpg-satisfaction__review-count {
        font-size: 18px;
    }

    /* H4 → 20px */
    .tpg-satisfaction__row-label {
        font-size: 20px !important;
    }

    .tpg-satisfaction__row-score {
        font-size: 20px !important;
    }
}


/* =========================================
   BREAKPOINT 4: Large Tablet (840-1023)
   Grid: 840px centered, gutter 24px
   Typography: H2=28px, H4=20px, Body=18px
   ========================================= */
@media (max-width: 1023px) {
    .tpg-satisfaction__inner {
        max-width: 840px;
        gap: 32px;
    }

    .tpg-satisfaction__hero {
        width: 200px;
    }

    /* H2 → 28px */
    .tpg-satisfaction__title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .tpg-satisfaction__ring-wrap {
        width: 160px;
        height: 160px;
    }

    .tpg-satisfaction__ring-value {
        font-size: 36px;
    }

    .tpg-satisfaction__ring-percent {
        font-size: 18px;
    }
}


/* =========================================
   BREAKPOINT 3: Tablet (600-839)
   Grid: 100% fluid, gutter 24px, 8-col
   Stack to single column
   Typography: H2=26px, H4=20px, Body=18px
   ========================================= */
@media (max-width: 839px) {
    .tpg-satisfaction {
        padding: 40px 0;
    }

    .tpg-satisfaction__inner {
        max-width: 100%;
        padding: 0 24px;
        flex-direction: column;
        gap: 32px;
        align-items: center;
    }

    .tpg-satisfaction__hero {
        width: 100%;
        max-width: 480px;
        text-align: center;
    }

    /* H2 → 26px */
    .tpg-satisfaction__title {
        text-align: center;
        font-size: 26px;
        margin-bottom: 24px;
    }

    .tpg-satisfaction__ring-wrap {
        width: 180px;
        height: 180px;
    }

    .tpg-satisfaction__ring-value {
        font-size: 40px;
    }

    .tpg-satisfaction__ring-percent {
        font-size: 20px;
    }

    .tpg-satisfaction__accordion {
        width: 100%;
    }

    .tpg-satisfaction__description {
        text-align: center;
    }

    /* Criteria layout: tighter on tablet */
    .tpg-satisfaction__criteria {
        padding: 0 16px 16px 36px;
        gap: 12px 24px;
    }

    .tpg-satisfaction__criterion {
        flex: 1 1 140px;
    }
}


/* =========================================
   BREAKPOINT 2: Large Mobile (480-599)
   Grid: 100% fluid, gutter 16px, 4-col
   Typography: H2=24px, H4=20px, Body=18px
   ========================================= */
@media (max-width: 599px) {
    .tpg-satisfaction {
        padding: 32px 0;
    }

    .tpg-satisfaction__inner {
        padding: 0 16px;
        gap: 24px;
    }

    /* H2 → 24px */
    .tpg-satisfaction__title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .tpg-satisfaction__ring-wrap {
        width: 160px;
        height: 160px;
    }

    .tpg-satisfaction__ring-value {
        font-size: 36px;
    }

    .tpg-satisfaction__ring-percent {
        font-size: 18px;
    }

    .tpg-satisfaction__review-count {
        font-size: 16px;
    }

    .tpg-satisfaction__description {
        font-size: 16px;
    }

    .tpg-satisfaction__row-header {
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .tpg-satisfaction__row-tagline {
        display: none !important;
    }

    .tpg-satisfaction__criteria {
        padding: 0 16px 16px 32px;
        flex-direction: column;
        gap: 12px;
    }

    .tpg-satisfaction__criterion {
        flex: 1 1 100%;
    }
}


/* =========================================
   BREAKPOINT 1: Mobile (360-479)
   Grid: 100% fluid, gutter 16px, 4-col
   Typography: H2=24px, H4=20px, Body=18px
   ========================================= */
@media (max-width: 479px) {
    .tpg-satisfaction {
        padding: 28px 0;
    }

    .tpg-satisfaction__inner {
        padding: 0 16px;
    }

    /* H2 stays 24px (same as BP2) */
    .tpg-satisfaction__title {
        font-size: 24px;
    }

    .tpg-satisfaction__ring-wrap {
        width: 140px;
        height: 140px;
    }

    .tpg-satisfaction__ring-value {
        font-size: 32px;
    }

    .tpg-satisfaction__ring-percent {
        font-size: 16px;
    }

    .tpg-satisfaction__ring-caption {
        font-size: 14px;
    }

    .tpg-satisfaction__row-header {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .tpg-satisfaction__row-indicator {
        height: 28px !important;
    }

    .tpg-satisfaction__row-label {
        font-size: 18px !important;
    }

    .tpg-satisfaction__row-score {
        font-size: 18px !important;
    }

    .tpg-satisfaction__criteria {
        padding: 0 14px 14px 28px;
    }

    .tpg-satisfaction__criterion-name,
    .tpg-satisfaction__criterion-value {
        font-size: 14px;
    }
}


/* =========================================
   ANIMATION: Intersection Observer trigger
   ========================================= */
.tpg-satisfaction__ring-fill.is-animated {
    /* Offset is set inline by JS based on data-percent */
}

.tpg-satisfaction__bar-fill.is-animated {
    /* Width is set inline by JS based on data-width */
}


/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .tpg-satisfaction__ring-fill {
        transition: none;
    }

    .tpg-satisfaction__bar-fill {
        transition: none;
    }
}