/**
 * TPG Single Course Page Styles
 * Matches Figma Breakpoints B1-B6
 */

:root {
    --tpg-blue: #2359A7;
    --tpg-blue-link: #297CBF;
    --tpg-orange: #F05A28;
    --tpg-orange-gradient: linear-gradient(180deg, #F88E4E 0%, #F1612D 100%);
    --tpg-text-dark: #4A4B4C;
    --tpg-text-body: #686869;
    --tpg-text-name: #212121;
    --tpg-bg-gray: #F0F4F7;
    --tpg-border: #DCE1E4;
    
    --font-heading: 'Lora', serif;
    --font-body: 'Source Sans Pro', sans-serif;
}

/* Base Reset */
#tpg-single-course-wrapper {
    width: 100%;
    overflow-x: hidden;
    background: #FFFFFF;
    color: var(--tpg-text-body);
    font-family: var(--font-body);
}

.tpg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ==========================================================================
   HERO SECTION - See bottom of file for complete responsive hero styles
   ========================================================================== */

/* ==========================================================================
   COURSE INFO
   ========================================================================== */
.tpg-course-info {
    background: var(--tpg-bg-gray);
    padding: 160px 0 60px;
}

.tpg-info-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.tpg-meta-category {
    font-size: 16px;
    color: var(--tpg-blue-link);
    text-transform: uppercase;
}

.tpg-meta-right {
    display: flex;
    gap: 32px;
    color: #737376;
}

.tpg-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.tpg-course-title {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    font-size: 44px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: var(--tpg-text-name) !important;
    margin: 0 0 20px;
}

.tpg-course-description {
    font-size: 20px;
    line-height: 175%;
    color: #6C6E6F;
    letter-spacing: -0.01em;
    margin-bottom: 40px;
    max-width: 995px;
}

.tpg-rating-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.tpg-bestseller-badge .inner {
    background: #FFFFFF;
    border-radius: 13px;
    padding: 8px 20px;
    color: var(--tpg-text-dark);
    font-size: 16px;
    line-height: 1em;
}

.tpg-rating-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

span.tpg-stars-container {
    display: flex;
    flex-wrap: nowrap;
}
.tpg-rating-val {
    font-weight: 600;
    font-size: 16px;
    color: var(--tpg-orange);
}

.tpg-rating-count {
    color: #F78A4B;
    font-size: 16px;
    text-decoration: none;
}

.tpg-student-count {
    color: #6C6E6F;
    font-size: 16px;
}

.tpg-price-row {
    margin-bottom: 24px;
}

.tpg-price {
    font-weight: 600;
    font-size: 24px;
    color: var(--tpg-text-dark);
    margin-right: 12px;
}

.tpg-price-original {
    font-weight: 400;
    font-size: 24px;
    color: #4A4B4C;
    text-decoration: line-through;
    text-decoration-color: #000000;
}

.tpg-price-discount {
    font-weight: 400;
    font-size: 24px;
    color: #4A4B4C;
    margin-left: 8px;
}

.tpg-price-free {
    color: var(--tpg-orange);
}

.tpg-enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    height: 44px;
    padding: 7px 24px;
    margin: 0;
    background: var(--tpg-orange-gradient);
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.tpg-enroll-btn:hover {
    transform: translateY(-2px);
    color: white;
}

/* Enrolled: course complete state */
.tpg-enroll-btn.tpg-enroll-complete {
    background: #4CA2E7;
    cursor: default;
}
.tpg-enroll-btn.tpg-enroll-complete:hover {
    transform: none;
}

/* No access plans available */
.tpg-enroll-btn.tpg-enroll-unavailable {
    background: #8A8E90;
    cursor: default;
}
.tpg-enroll-btn.tpg-enroll-unavailable:hover {
    transform: none;
}

/* WooCommerce cart states */
.tpg-enroll-btn.tpg-adding {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}
.tpg-enroll-btn.tpg-view-basket {
    background: var(--tpg-orange-gradient);
}

/* Free enroll form styling */
.tpg-free-enroll-form {
    display: contents;
}
.tpg-free-enroll-form .llms-form-field {
    display: none;
}

.tpg-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

/* Favourite heart button in CTA row */
.tpg-cta-row .tpg-favorite-heart,
.tpg-cta-row button.tpg-favorite-heart,
body .tpg-cta-row .tpg-favorite-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0;
    min-height: auto;
    min-width: auto;
    line-height: 1;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tpg-cta-row .tpg-favorite-heart i {
    font-size: 24px;
    color: #D8DDE2;
    transition: color 0.2s ease;
}

.tpg-cta-row .tpg-favorite-heart:hover i,
.tpg-cta-row .tpg-favorite-heart.is-favorited i {
    color: #F05A28;
}

.tpg-cta-row .tpg-favorite-heart:hover {
    transform: scale(1.15);
}

.tpg-cta-row .tpg-favorite-heart.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Override theme hover/focus styles on heart button */
body .tpg-cta-row .tpg-favorite-heart:hover,
body .tpg-cta-row .tpg-favorite-heart:focus,
body .tpg-cta-row .tpg-favorite-heart:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none;
}

.tpg-includes-box {
    background: #FFFFFF;
    padding: 40px;
    margin-bottom: 40px;
    max-width: 995px;
    border: none;
    box-shadow: none;
    outline: none;
}

.tpg-includes-heading {
    font-family: var(--font-body) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    text-transform: capitalize !important;
    margin: 0 0 24px !important;
    color: var(--tpg-text-dark) !important;
}

.tpg-includes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
}

.tpg-includes-list .tpg-check {
    margin-top: 10px;
    width: 30px;
}

.tpg-includes-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 20px;
    line-height: 170%;
    letter-spacing: -0.01em;
    color: var(--tpg-text-body);
}

.tpg-author-date {
    font-size: 20px;
    line-height: 150%;
    color: var(--tpg-text-body);
}

.tpg-author-date a {
    text-decoration: none;
    color: var(--tpg-orange);
}

/* ==========================================================================
   TABS
   ========================================================================== */
.tpg-tabs-section {
    background: #FFFFFF;
    padding-top: 60px;
    border-bottom: 1px solid var(--tpg-border);
}

.tpg-tabs-nav {
    display: flex;
    gap: 40px;
    position: relative;
}

.tpg-tab {
    /* Reset all button/theme styling */
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    
    /* Figma design */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    color: #8A8E90;
    padding: 0 0 12px 0;
    margin: 0;
    cursor: pointer;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    white-space: nowrap;
    line-height: 120%;
    letter-spacing: 0;
    transition: color 0.2s ease;
}

.tpg-tab:hover {
    background: none !important;
    background-color: transparent !important;
    color: var(--tpg-text-dark);
}

.tpg-tab:focus {
    background: none !important;
    background-color: transparent !important;
    outline: 2px solid #4CA2E7;
    outline-offset: 2px;
}

.tpg-tab.active {
    color: var(--tpg-text-dark);
    border-bottom-color: #4CA2E7 !important;
    background: none !important;
    background-color: transparent !important;
}

/* Tab Panels */
.tpg-tab-panel {
    padding: 60px 0;
    display: none;
}

.tpg-tab-panel.active {
    display: block;
}

.tpg-section-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    color: var(--tpg-text-dark);
    margin: 0 0 20px;
    line-height: 1.35em;
}

.tpg-about-text {
    font-size: 20px;
    line-height: 1.5em;
    margin-bottom: 60px;
}

.tpg-about-text a {
    color: var(--tpg-orange);
}

/* Featured Review */
.tpg-featured-review {
    background: var(--tpg-bg-gray);
    padding: 40px;
    margin-top: 60px;
}

.tpg-featured-heading {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: var(--tpg-text-dark) !important;
    margin-bottom: 30px;
}

.tpg-review-card-featured {
    max-width: 1013px;
}

.tpg-reviewer {
    display: flex;
    gap: 20px;
}

.tpg-reviewer img {
    border-radius: 50%;
    width: 75px;
    height: 75px;
}

.tpg-reviewer-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tpg-reviewer-name {
    font-weight: 600;
    font-size: 20px;
    color: var(--tpg-text-dark);
}

.tpg-review-text {
    font-size: 20px;
    line-height: 1.75em;
    color: var(--tpg-text-body);
    margin-left: 95px;
}

/* Featured Review - Empty State (enrolled user, no reviews yet) */
.tpg-review-card-featured.tpg-review-empty-state {
    text-align: center;
    padding: 48px 40px;
}

.tpg-empty-review-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    color: var(--tpg-text-dark);
    margin: 0 0 12px;
}

.tpg-empty-review-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 170%;
    color: #6C6E6F;
    margin: 0 0 20px;
}

.tpg-write-review-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--tpg-orange-gradient);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.tpg-write-review-link:hover {
    transform: translateY(-2px);
    color: #FFFFFF;
}

/* ==========================================================================
   COURSE CONTENT TAB (Syllabus)
   ========================================================================== */

.tpg-course-overview {
    margin-bottom: 60px;
    max-width: 996px;
}

.tpg-overview-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
    color: var(--tpg-text-name);
    margin-bottom: 12px;
}

.tpg-overview-summary {
    font-size: 18px;
    line-height: 170%;
    color: #6C6E6F;
    margin: 0 0 24px;
}

.tpg-syllabus-wrapper {
    max-width: 996px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Section Header */
.tpg-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.2s;
    background: #FFFFFF;
}

.tpg-section-header:hover {
    background: #FAFAFA;
}

.tpg-section-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tpg-section-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    color: #D8DDE2;
}

.tpg-section-item.expanded .tpg-section-arrow {
    transform: rotate(90deg);
    margin-top: 3px;
}

.tpg-section-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: var(--tpg-text-dark);
    margin: 0;
}

.tpg-section-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: var(--tpg-text-dark);
    text-align: right;
}

/* Lesson List */
.tpg-lesson-list {
    display: none;
    background: #FFFFFF;
    padding-left: 28px;
}

.tpg-section-item.expanded .tpg-lesson-list {
    display: block;
}

.tpg-lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.tpg-lesson-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tpg-lesson-icon {
    width: 20px;
    height: 20px;
    color: #686869;
}

.tpg-lesson-title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 175%;
    color: #686869;
    text-decoration: none;
    transition: color 0.2s;
}

.tpg-lesson-title:hover {
    color: var(--tpg-orange);
}

.tpg-lesson-status {
    width: 20px;
    height: 20px;
    color: #686869;
}

.tpg-lesson-free-label {
    color: #F05A28;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

/* ==========================================================================
   REVIEWS GRID
   ========================================================================== */
.tpg-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    max-width: 996px;
}

.tpg-reviews-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    margin: 0;
    color: var(--tpg-text-dark);
}

.tpg-filter-btns {
    display: flex;
    gap: 8px;
}

.tpg-filter-btn {
    padding: 6px 16px;
    background: var(--tpg-bg-gray);
    border-radius: 14px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.tpg-filter-btn.active {
    background: #F99351;
    color: white;
}

.tpg-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 996px;
}

.tpg-review-card {
    background: var(--tpg-bg-gray);
    padding: 32px;
}

/* Gap between review cards — ID specificity beats OceanWP theme resets */
#tab-reviews .tpg-reviews-list .tpg-review-card {
    margin-bottom: 20px !important;
}

#tab-reviews .tpg-reviews-list .tpg-review-card:last-child {
    margin-bottom: 0 !important;
}

.tpg-review-author {
    font-weight: 600;
    font-size: 18px;
    color: var(--tpg-text-body);
}

.tpg-review-content {
    font-size: 18px;
    line-height: 175%;
    margin: 12px 0;
}

.tpg-review-more {
    font-size: 18px;
    color: #F8904F;
    text-decoration: none;
}

/* Pagination */
.tpg-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.tpg-page-prev, .tpg-page-next {
    background: none;
    border: none;
    color: #F8904F;
    font-size: 18px;
    cursor: pointer;
}

.tpg-page-numbers {
    display: flex;
    gap: 8px;
}

.tpg-page-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8A8E90;
    cursor: pointer;
    font-size: 18px;
}

.tpg-page-num.active {
    background: var(--tpg-orange-gradient);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* ==========================================================================
   ENROLLMENT REQUIRED CARD — Course Page
   Reusable component ported from lesson page (lessons.css).
   Used in Reviews tab for non-enrolled user CTAs.
   @since 2.17.17
   ========================================================================== */

#tab-reviews .tpg-enrollment-required-section {
    background-color: var(--tpg-bg-gray);
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 24px;
}

#tab-reviews .tpg-enrollment-required-section .tab-content-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.06px;
    color: var(--tpg-text-dark);
    margin-bottom: 15px;
}

#tab-reviews .tpg-enrollment-required-section .tpg-enrollment-required-description {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--tpg-text-body);
}

#tab-reviews .tpg-enrollment-required-section .tpg-enrollment-required-description p {
    margin-bottom: 0;
}

/* CTA button inside enrollment card */
#tab-reviews .tpg-enrollment-required-section .tpg-button,
#tab-reviews .tpg-enrollment-required-section .tpg-button.primary,
#tab-reviews .tpg-enrollment-required-section .tpg-free-enroll-form .tpg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 164px;
    min-width: 164px;
    height: 44px;
    min-height: 44px;
    background: var(--tpg-orange-gradient);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    color: #FBFBFB;
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    margin-top: 20px;
}

#tab-reviews .tpg-enrollment-required-section .tpg-button:hover,
#tab-reviews .tpg-enrollment-required-section .tpg-button.primary:hover,
#tab-reviews .tpg-enrollment-required-section .tpg-free-enroll-form .tpg-button:hover {
    background: linear-gradient(180deg, #F99B5E 0%, #F26E3D 100%);
    color: #FBFBFB;
}

#tab-reviews .tpg-enrollment-required-section .tpg-free-enroll-form {
    display: inline-block;
}

/* Responsive — smaller title on mobile */
@media (max-width: 839px) {
    #tab-reviews .tpg-enrollment-required-section .tab-content-title {
        font-size: 22px;
        line-height: 28px;
    }

    #tab-reviews .tpg-enrollment-required-section .tpg-enrollment-required-description {
        font-size: 16px;
    }
}

/* ==========================================================================
   REVIEWS TAB — Empty State (enrolled user, no reviews)
   Matches lesson page .tab-review-no-reviews-section pattern.
   @since 2.17.17
   ========================================================================== */

.tpg-reviews-tab-empty-state {
    display: block;
}

.tpg-reviews-tab-empty-inner {
    background-color: var(--tpg-bg-gray);
    padding: 40px 20px;
    text-align: center;
}

.tpg-reviews-tab-empty-inner .tpg-reviews-tab-empty-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.06px;
    color: var(--tpg-text-dark);
    margin-bottom: 15px;
}

.tpg-reviews-tab-empty-inner .tpg-reviews-tab-empty-description {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--tpg-text-body);
}

.tpg-reviews-tab-empty-inner .tpg-reviews-tab-empty-description p {
    margin-bottom: 0;
}

/* Responsive — smaller title on mobile */
@media (max-width: 839px) {
    .tpg-reviews-tab-empty-inner .tpg-reviews-tab-empty-title {
        font-size: 22px;
        line-height: 28px;
    }

    .tpg-reviews-tab-empty-inner .tpg-reviews-tab-empty-description {
        font-size: 16px;
    }
}

/* ==========================================================================
   COACH SECTION
   ========================================================================== */
.tpg-coach-section {
    background: #F0F3F6;
    padding: 50px 0;
}

.tpg-coach-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    margin-bottom: 32px !important;
    color: var(--tpg-text-name) !important;
}

.tpg-coach-card {
    display: flex;
    align-items: center;
    gap: 32px;
}

.tpg-coach-avatar img {
    border-radius: 50%;
}

.tpg-coach-name {
    font-weight: 600 !important;
    font-size: 20px !important;
    margin: 0;
    color: var(--tpg-text-name) !important;
}

.tpg-coach-role {
    color: #7F8182;
    font-size: 16px;
    margin: 0;
}

.tpg-coach-link {
    color: #F99351;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
}

/* ==========================================================================
   RELATED COURSES
   ========================================================================== */
.tpg-related-section {
    padding: 60px 0;
}

.tpg-related-section .tpg-container {
    max-width: 1340px;
}

.tpg-related-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 1.5 !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    color: var(--tpg-text-name) !important;
}

/* Carousel Layout */
.tpg-related-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tpg-swiper-prev, .tpg-swiper-next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    z-index: 2;
    transition: opacity 0.2s;
}

.tpg-swiper-prev:hover, .tpg-swiper-next:hover {
    opacity: 0.7;
}

.tpg-swiper-prev.swiper-button-disabled,
.tpg-swiper-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.tpg-swiper-pagination {
    text-align: center;
    margin-top: 24px;
}

.tpg-swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--tpg-orange);
}

.tpg-courses-swiper {
    overflow: hidden !important;
    flex: 1;
}

/* Course Card Component */
.tpg-course-card {
    background: #FFFFFF;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tpg-course-card .tpg-card-image {
    display: block;
    width: 100%;
    height: 207px;
    overflow: hidden;
    position: relative;
}

.tpg-course-card .tpg-card-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.3s;
}

.tpg-course-card .tpg-card-image:hover img {
    transform: scale(1.05);
}

.tpg-course-card .tpg-card-placeholder {
    width: 100%;
    height: 100%;
    background: #E8EAED;
}

.tpg-course-card .tpg-card-body {
    padding: 16px 0 0;
}

.tpg-course-card .tpg-card-category {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: #F88E4E;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    display: block;
    margin-bottom: 4px;
}

.tpg-course-card .tpg-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    color: var(--tpg-text-name) !important;
}

.tpg-course-card .tpg-card-title a {
    color: var(--tpg-text-dark);
    text-decoration: none;
}

.tpg-course-card .tpg-card-title a:hover {
    color: var(--tpg-blue-link);
}

.tpg-course-card .tpg-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: #737373;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.tpg-course-card .tpg-card-instructor {
    font-weight: 400;
}

.tpg-course-card .tpg-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tpg-course-card .tpg-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.tpg-course-card .tpg-card-rating-val {
    font-weight: 600;
    font-size: 16px;
    color: #F05A28;
}

.tpg-course-card .tpg-card-rating .tpg-stars-container {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tpg-course-card .tpg-card-rating-count {
    font-size: 16px;
    color: #F78A4B;
}

.tpg-course-card .tpg-card-price {
    margin-bottom: 10px;
}

.tpg-course-card .tpg-card-price-current {
    font-weight: 600;
    font-size: 20px;
    color: #4A4B4C;
}

.tpg-course-card .tpg-card-price-original {
    font-weight: 400;
    font-size: 20px;
    color: #707274;
    text-decoration: line-through;
    text-decoration-color: #707274;
    margin-left: 6px;
}

.tpg-course-card .tpg-card-bestseller {
    display: inline-block;
    background: #F05A28;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 12.74px;
    line-height: 1.4;
}

/* ==========================================================================
   LIFTERLMS SAFETY NET - Hide leaked native elements inside TPG template
   ========================================================================== */
#tpg-single-course-wrapper .llms-meta-info,
#tpg-single-course-wrapper .llms-instructor-info,
#tpg-single-course-wrapper .llms-video-wrapper,
#tpg-single-course-wrapper .wp-block-llms-course-progress,
#tpg-single-course-wrapper .wp-block-llms-course-continue-button,
#tpg-single-course-wrapper .wp-block-llms-course-syllabus,
#tpg-single-course-wrapper .llms-syllabus-wrapper,
#tpg-single-course-wrapper .llms-progress,
#tpg-single-course-wrapper .llms-course-continue-button,
#tpg-single-course-wrapper .llms-button-primary {
    display: none !important;
}

/* Override OceanWP's aggressive button styling on tab buttons */
#tpg-single-course-wrapper .tpg-tabs-nav .tpg-tab,
#tpg-single-course-wrapper .tpg-tabs-nav button.tpg-tab,
body .tpg-tabs-nav .tpg-tab,
body .tpg-tabs-nav button.tpg-tab {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    padding: 0 0 12px 0;
    color: #8A8E90;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 120%;
}

#tpg-single-course-wrapper .tpg-tabs-nav .tpg-tab.active,
body .tpg-tabs-nav button.tpg-tab.active {
    color: var(--tpg-text-dark) !important;
    border-bottom-color: #4CA2E7 !important;
    background: none !important;
    background-color: transparent !important;
}

#tpg-single-course-wrapper .tpg-tabs-nav .tpg-tab:hover,
body .tpg-tabs-nav button.tpg-tab:hover {
    color: var(--tpg-text-dark) !important;
    background: none !important;
    background-color: transparent !important;
}

/* Override OceanWP's swiper/carousel button styling */
#tpg-single-course-wrapper .tpg-swiper-prev,
#tpg-single-course-wrapper .tpg-swiper-next {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px;
}

/* ==========================================================================
   LEARNING RESOURCES TAB
   Mirrors #lesson-resources styles from lessons.css
   ========================================================================== */

/* Resource list — matches #lesson-resources .resource-list */
#tab-resources .resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 30px;
}

/* Resource item — matches #lesson-resources .resource-list .resource-item */
#tab-resources .resource-list .resource-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    background: var(--e-global-color-51a985e, #F0F4F7);
    padding: 35px;
    margin-bottom: 25px;
}

/* Resource header — matches #lesson-resources .resource-header */
#tab-resources .resource-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Resource title — matches #lesson-resources .resource-title */
#tab-resources .resource-title {
    font-family: var(--e-global-typography-secondary-font-family, var(--font-body));
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
    color: var(--e-global-color-text, var(--tpg-text-dark));
}

/* Resource icon — matches #lesson-resources .resource-icon */
#tab-resources .resource-icon {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

/* Download link — matches #lesson-resources .resource-download */
#tab-resources .resource-download {
    font-family: var(--e-global-typography-secondary-font-family, var(--font-body));
    font-size: 18px;
    font-weight: 600;
    line-height: 1.11;
    color: var(--e-global-color-9534cd2, #F99351);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

#tab-resources .resource-download:hover {
    color: var(--e-global-color-9534cd2, #F05A28);
}

/* Empty state — matches lesson .resource-first-section styles */
#tab-resources .resource-first-section {
    display: block;
}

#tab-resources .tab-resource-no-resources-section {
    background-color: var(--e-global-color-51a985e, #F0F4F7);
    padding: 40px 20px;
    text-align: center;
}

#tab-resources .tab-resource-no-resources-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, var(--font-heading)) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, var(--tpg-text-dark)) !important;
    margin-bottom: 15px;
}

#tab-resources .tab-resource-no-resources-section .llms-resource-description {
    font-family: var(--e-global-typography-secondary-font-family, var(--font-body));
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #686869);
}

#tab-resources .tab-resource-no-resources-section .llms-resource-description p {
    margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE (Figma Breakpoints)
   ========================================================================== */

/* --- B5: Desktop Small (1024px - 1279px) --- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tpg-container { max-width: 960px; }
    .tpg-course-title { font-size: 42px !important; }
    
    /* Reviews & Content */
    .tpg-reviews-header, .tpg-reviews-grid, .tpg-course-overview, .tpg-syllabus-wrapper { max-width: 796px; }
    .tpg-reviews-title { font-size: 28px; }
    .tpg-reviews-grid { gap: 25px; }
    .tpg-review-card { padding: 30px; }
    .tpg-section-header { padding: 23px 10px; }
}

/* --- B4: Tablet Large (840px - 1023px) --- */
@media (min-width: 840px) and (max-width: 1023px) {
    .tpg-container { max-width: 840px; }
    .tpg-course-title { font-size: 38px !important; }
    .tpg-course-description { font-size: 18px; max-width: 775px; }
    .tpg-tab { font-size: 20px; }
    
    /* Reviews & Content */
    .tpg-reviews-header, .tpg-reviews-grid, .tpg-course-overview, .tpg-syllabus-wrapper { max-width: 777px; margin: 0 auto; }
    .tpg-reviews-grid { gap: 23px; }
    .tpg-review-card { padding: 24px; }
    .tpg-section-header { padding: 24px 10px; }
    .tpg-lesson-list { padding-left: 20px; }

    /* Resources — matches lesson @media (max-width: 1280px) */
    #tab-resources .resource-title { font-size: 18px; line-height: 1.3; }
    #tab-resources .resource-icon { font-size: 26px; width: 26px; height: 26px; }
    #tab-resources .resource-download { font-size: 16px; line-height: 1.11; }
}

/* --- B3: Tablet Small (600px - 839px) --- */
@media (min-width: 600px) and (max-width: 839px) {
    .tpg-container { width: 100%; padding: 0 16px; }
    .tpg-course-title { font-size: 32px !important; }
    
    /* Reviews & Content */
    .tpg-reviews-header, .tpg-reviews-grid, .tpg-course-overview, .tpg-syllabus-wrapper { max-width: 745px; margin: 0 auto; }
    .tpg-reviews-grid { gap: 22px; }
    .tpg-lesson-item { padding: 14px 0; }
    .tpg-includes-list li span { font-size: 18px; }
    
    /* Related Cards */
    .tpg-course-card .tpg-card-image { height: 170px; }
    .tpg-course-card .tpg-card-title { font-size: 16px; }
    .tpg-course-card .tpg-card-price-current { font-size: 18px; }
    .tpg-course-card .tpg-card-price-original { font-size: 18px; }
}

/* --- B2: Mobile Large (480px - 599px) --- */
@media (min-width: 480px) and (max-width: 599px) {
    .tpg-container { padding: 0 16px; }
    .tpg-course-title { font-size: 36px !important; }
    
    .tpg-includes-list { grid-template-columns: 1fr; }
    .tpg-tabs-nav { overflow-x: auto; padding-bottom: 2px; }
    .tpg-tab { font-size: 16px; white-space: nowrap; }

    /* Single Column Layouts */
    .tpg-reviews-grid { grid-template-columns: 1fr; max-width: 539px; margin: 0 auto 40px; }
    .tpg-reviews-header { flex-direction: column; align-items: flex-start; }
    .tpg-filter-btns { width: 100%; overflow-x: auto; }
    
    /* Content Tab */
    .tpg-course-overview, .tpg-syllabus-wrapper { max-width: 541px; }
    .tpg-section-header { flex-wrap: wrap; gap: 8px; }
    .tpg-section-left, .tpg-section-meta { width: 100%; }
    .tpg-section-meta { text-align: left; padding-left: 28px; }
    
    /* Carousel */
    .tpg-swiper-prev, .tpg-swiper-next { display: none; }
    .tpg-related-carousel { gap: 0; }
    .tpg-course-card .tpg-card-image { height: 160px; }

    /* Resources — matches lesson @media (max-width: 480px) */
    #tab-resources .resource-list .resource-item { padding: 20px; margin-bottom: 15px; gap: 20px; flex-wrap: wrap; }
    #tab-resources .resource-icon { font-size: 26px; width: 26px; height: 26px; }
    #tab-resources .resource-title { font-size: 16px; }
    #tab-resources .resource-download { font-size: 14px; }
    #tab-resources .tab-resource-no-resources-section .tab-content-title { font-size: 22px !important; line-height: 28px !important; }
    #tab-resources .tab-resource-no-resources-section .llms-resource-description { font-size: 16px; }
}

/* --- B1: Mobile Small (Max 479px) --- */
@media (max-width: 479px) {
    .tpg-container { padding: 0 16px; }
    .tpg-course-title { font-size: 36px !important; }
    .tpg-info-meta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    
    .tpg-includes-list { grid-template-columns: 1fr; }
    .tpg-enroll-btn { width: 100%; }
    
    /* Single Column Layouts */
    .tpg-reviews-grid { grid-template-columns: 1fr; width: 100%; }
    .tpg-reviews-header { flex-direction: column; align-items: flex-start; }
    .tpg-filter-btns { width: 100%; overflow-x: auto; }
    
    /* Content Tab */
    .tpg-course-overview, .tpg-syllabus-wrapper { max-width: 418px; width: 100%; }
    .tpg-section-header { flex-wrap: wrap; padding: 20px 10px; }
    .tpg-section-left, .tpg-section-meta { width: 100%; text-align: left; }
    .tpg-section-meta { padding-left: 28px; }
    
    .tpg-tabs-nav { overflow-x: auto; padding-bottom: 2px; }
    .tpg-coach-card { align-items: flex-start; }
    
    /* Rating row wrapping */
    .tpg-rating-row {
        flex-wrap: wrap;
    }

    .tpg-bestseller-badge {
        flex-basis: 100%;
        width: fit-content;
    }

    .tpg-review-text {
        margin-left: 0;
        margin-top: 20px;
    }
    
    /* Carousel */
    .tpg-swiper-prev, .tpg-swiper-next { display: none; }
    .tpg-related-carousel { gap: 0; }
    .tpg-course-card .tpg-card-image { height: 150px; }
    .tpg-course-card .tpg-card-title { font-size: 16px; }

    /* Resources — matches lesson @media (max-width: 480px) */
    #tab-resources .resource-list .resource-item { padding: 20px; margin-bottom: 15px; gap: 20px; flex-wrap: wrap; }
    #tab-resources .resource-icon { font-size: 26px; width: 26px; height: 26px; }
    #tab-resources .resource-title { font-size: 16px; }
    #tab-resources .resource-download { font-size: 14px; }
    #tab-resources .tab-resource-no-resources-section .tab-content-title { font-size: 22px !important; line-height: 28px !important; }
    #tab-resources .tab-resource-no-resources-section .llms-resource-description { font-size: 16px; }
}

/* ==========================================================================
   HERO SECTION - Figma Design Specs
   ========================================================================== */

/* B6 - Desktop Large (1280px+) */
.tpg-course-hero {
    position: relative;
    width: 100%;
}

.tpg-hero-bg {
    width: 100%;
    height: 738px;
    background: #2359A7;
}

.tpg-hero-container {
    z-index: 2;
    max-width: 1200px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 134px);
}

.tpg-hero-image-wrapper {
    position: relative;
    width: 1200px;
    max-width: 100%;
    height: 677px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
}

.tpg-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video container - contained within thumbnail */
.tpg-hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tpg-hero-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.tpg-hero-image-wrapper.tpg-video-playing .tpg-hero-img,
.tpg-hero-image-wrapper.tpg-video-playing .tpg-play-button {
    display: none !important;
}

/* Play button - B6 */
.tpg-play-button {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #F8904F 0%, #F15D2A 100%) !important;
    background-color: transparent !important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Extra specificity for OceanWP overrides */
#tpg-single-course-wrapper .tpg-play-button,
body .tpg-play-button,
button.tpg-play-button {
    border-radius: 50% !important;
    background: linear-gradient(180deg, #F8904F 0%, #F15D2A 100%) !important;
    border: none !important;
    width: 90px !important;
    height: 90px !important;
    padding: 0 !important;
}

.tpg-play-button:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25) !important;
    background: linear-gradient(180deg, #F8904F 0%, #F15D2A 100%) !important;
}

.tpg-play-button svg {
    width: 28px;
    height: 27px;
    margin-left: 4px; /* Optical centering */
}

/* B5 - Desktop Small (1024px - 1279px) */
@media (max-width: 1279px) {
    
    .tpg-hero-bg {
        height: 588px;
    }
    
    .tpg-hero-container {
        max-width: 960px;
        transform: translate(-50%, 110px);
    }

    .tpg-course-info {
        padding: 130px 0 60px;
    }
    
    .tpg-hero-image-wrapper {
        width: 960px;
        height: 536px;
    }
}

/* B4 - Tablet Large (840px - 1023px) */
@media (max-width: 1023px) {
    .tpg-hero-bg {
        height: 394px;
    }
    
    .tpg-hero-container {
        max-width: 840px;
        transform: translate(-50%, 70px);
    }
    
    .tpg-hero-image-wrapper {
        width: 840px;
        height: 469px;
    }

    .tpg-course-info {
        padding: 210px 0 60px;
    }
}

/* B3 - Tablet Small (600px - 839px) */
@media (max-width: 839px) {
    .tpg-hero-bg {
        height: 370px;
    }
    
    .tpg-hero-container {
        max-width: 100%;
        width: 100%;
        left: 0;
        transform: none;
    }
    
    .tpg-hero-image-wrapper {
        width: 100%;
        height: 471px;
        margin-top: 12px;
    }

    .tpg-course-info {
        padding: 180px 0 60px;
    }
}

/* B2 - Mobile Large (480px - 599px) */
@media (max-width: 599px) {
    
    .tpg-hero-bg {
        height: 226px;
    }
    
    .tpg-hero-image-wrapper {
        width: 100%;
        height: 335px;
    }
}

/* B1 - Mobile Small (360px - 479px) */
@media (max-width: 479px) {
    
    .tpg-hero-bg {
        height: 252px;
    }
    
    .tpg-hero-image-wrapper {
        width: 100%;
        height: 272px;
    }

    .tpg-course-info {
        padding: 50px 0 60px;
    }
}

/* ==========================================================================
   Coming Soon — Course Availability Feature
   @since 2.28.0

   Colour rationale: blue (#294196) for informational elements,
   grey for disabled actions. Orange is reserved for actionable CTAs.
   ========================================================================== */

/* Hero badge overlay — centred on the thumbnail */
.tpg-hero-coming-soon-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    padding: 14px 36px;
    border-radius: 6px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Price row — "Coming Soon" label replaces price figures */
.tpg-price.tpg-price-coming-soon {
    color: #294196;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.01em;
}

/* CTA button — disabled grey appearance, non-interactive */
.tpg-enroll-btn.tpg-coming-soon-btn {
    background: linear-gradient(180deg, #B0B7BE 0%, #9AA2AB 100%);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    color: #FBFBFB;
}

/* Related course card — "Coming Soon" badge */
.tpg-card-coming-soon {
    display: inline-block;
    background: #294196;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Related course card — "Coming Soon" thumbnail pill overlay */
.tpg-course-card .tpg-card-coming-soon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 10px 24px;
    border-radius: 6px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}