/**
 * WooCommerce Shop & Product Page Styles for CE Courses
 * Familay CEU Plugin
 * 
 * NOTE: This stylesheet uses !important declarations extensively to override
 * Enfold theme's default WooCommerce styles. This is intentional and necessary
 * for proper integration with the Enfold theme.
 */

:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --dark-color: #1e293b;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-500: #64748b;
    --gray-700: #334155;
}

/* ============================================
   SHOP PAGE - COURSE CARDS
   ============================================ */

/* Shop page course card grid - Enfold Override */
.woocommerce ul.products,
.woocommerce.archive ul.products,
body.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
}

/* Course card container - Enfold Override */
.woocommerce ul.products li.product,
.woocommerce.archive ul.products li.product,
body.woocommerce ul.products li.product {
    position: relative !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce.archive ul.products li.product:hover,
body.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Product image with gradient overlay - Enfold Override */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block !important;
}

/* Product image with gradient overlay - Enfold Override */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block !important;
}

/* FIXED: Only target the main product thumbnail, not all images */
.woocommerce ul.products li.product .woocommerce-loop-product__link > img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img,
.woocommerce ul.products li.product > a > img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail.wp-post-image {
    border-radius: 12px 12px 0 0 !important;
    width: 100% !important;
    height: 250px !important;
    max-width: 100% !important;
    object-fit: cover !important;
}

/* Reset styles for course meta icons - prevent them from inheriting product image styles */
/* High specificity selectors to override product image styles in all contexts */
/* Note: Multiple contexts (.woocommerce, .related.products, body.woocommerce) ensure */
/* these rules override Enfold theme's WooCommerce styles in all scenarios */
.woocommerce ul.products li.product .fceu-course-meta img,
.woocommerce ul.products li.product .fceu-course-type img,
.woocommerce ul.products li.product .fceu-course-time img,
.woocommerce .related.products ul.products li.product .fceu-course-meta img,
.woocommerce .related.products ul.products li.product .fceu-course-type img,
.woocommerce .related.products ul.products li.product .fceu-course-time img,
body.woocommerce ul.products li.product .fceu-course-meta img,
body.woocommerce ul.products li.product .fceu-course-type img,
body.woocommerce ul.products li.product .fceu-course-time img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* WordPress Twemoji-specific rules for emoji images */
/* These rules have higher specificity when .emoji class is present, */
/* providing font-relative sizing (1em) instead of fixed 16px */
.fceu-course-meta img.emoji,
.fceu-course-type img.emoji,
.fceu-course-time img.emoji {
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em !important;
    display: inline !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    max-width: 1em !important;
    max-height: 1em !important;
}

/* CEU Badge Overlay - Enfold Override */
.fceu-ceu-badge-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 15px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.fceu-ceu-badge {
    display: inline-block !important;
    background: var(--secondary-color) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    pointer-events: auto !important;
}

/* Course metadata (Reading Course, Hours) - Enfold Override */
.fceu-course-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    font-size: 13px !important;
    color: var(--gray-500) !important;
    margin: 8px 0 !important;
    padding: 0 15px !important;
}

.fceu-course-type,
.fceu-course-time {
    font-size: 13px !important;
    color: var(--gray-700) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Course excerpt/description - Enfold Override */
.fceu-course-excerpt {
    padding: 0 15px 15px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--gray-700) !important;
    flex-grow: 1 !important;
}

/* Product title styling - Enfold Override */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    padding: 0 15px !important;
    margin: 15px 0 5px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    line-height: 1.3 !important;
}

/* Price styling - Enfold Override */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span {
    padding: 0 15px !important;
    margin: 15px 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
}

/* Divider before price/button section - Enfold Override */
.woocommerce ul.products li.product .price::before {
    content: '' !important;
    display: block !important;
    width: calc(100% + 30px) !important;
    height: 1px !important;
    background: var(--gray-200) !important;
    margin: 0 -15px 15px !important;
}

/* Enroll Now button - Enfold Override */
.woocommerce ul.products li.product .fceu-enroll-button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: block !important;
    width: calc(100% - 30px) !important;
    margin: 0 15px 15px !important;
    padding: 12px 24px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-align: center !important;
    transition: background 0.3s ease !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

.woocommerce ul.products li.product .fceu-enroll-button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: var(--primary-dark) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */

/* Back to Courses link - Enfold Override */
.fceu-back-to-courses {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.fceu-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.fceu-back-link:hover {
    text-decoration: underline !important;
    color: var(--primary-dark) !important;
}

/* Course feature badges - Enfold Override */
.fceu-course-badges {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin: 20px 0 30px !important;
}

.fceu-badge-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px !important;
    background: var(--gray-100) !important;
    border-radius: 12px !important;
    min-width: 120px !important;
    text-align: center !important;
    border: 2px solid var(--gray-200) !important;
}

.fceu-badge-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

.fceu-badge-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin-bottom: 4px !important;
}

.fceu-badge-label {
    font-size: 12px !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Single product add to cart button - Enfold Override */
.single-product .single_add_to_cart_button,
body.single-product .cart .single_add_to_cart_button {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 48px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: background 0.3s ease !important;
    width: 100% !important;
    max-width: 400px !important;
    text-decoration: none !important;
}

.single-product .single_add_to_cart_button:hover,
body.single-product .cart .single_add_to_cart_button:hover {
    background: var(--primary-dark) !important;
    color: white !important;
}

/* Course Content Tab - Enfold Override */
.fceu-course-content-tab h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin-bottom: 20px !important;
}

.fceu-course-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.fceu-section-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 20px !important;
    background: var(--gray-100) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--primary-color) !important;
}

.fceu-section-icon {
    font-size: 20px !important;
}

.fceu-section-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--dark-color) !important;
}

/* WooCommerce Tabs Styling Enhancement - Enfold Override */
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--gray-200) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
    color: var(--gray-700) !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    border-bottom: 3px solid transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
    background: transparent !important;
}

/* Product summary adjustments for courses - Enfold Override */
.single-product .product .summary,
.single-product div.product div.summary {
    padding-top: 0 !important;
}

.single-product .product .summary .product_title,
.single-product div.product div.summary .product_title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin-bottom: 10px !important;
}

.single-product .product .summary .price,
.single-product div.product div.summary .price,
.single-product .product .summary .price span,
.single-product div.product div.summary .price span {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-bottom: 20px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and below */
@media (max-width: 768px) {
    /* Shop page - single column layout */
    .woocommerce ul.products {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Course badges - stack on mobile */
    .fceu-course-badges {
        flex-direction: column;
    }

    .fceu-badge-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        gap: 15px;
    }

    .fceu-badge-icon {
        font-size: 28px;
        margin-bottom: 0;
    }

    .fceu-badge-value {
        font-size: 18px;
    }

    /* Adjust single product title and price */
    .single-product .product .summary .product_title {
        font-size: 24px;
    }

    .single-product .product .summary .price {
        font-size: 28px;
    }

    /* Full-width add to cart button on mobile */
    .single-product .single_add_to_cart_button {
        max-width: 100%;
    }

    /* Back to courses link smaller */
    .fceu-back-link {
        font-size: 14px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .fceu-ceu-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 16px;
    }

    .woocommerce ul.products li.product .price {
        font-size: 20px;
    }

    .fceu-course-excerpt {
        font-size: 13px;
    }

    .fceu-course-type,
    .fceu-course-time {
        font-size: 12px;
    }

    .fceu-section-item {
        padding: 12px 15px;
    }

    .fceu-section-title {
        font-size: 14px;
    }
}

/* ============================================
   ACCESSIBILITY & TOUCH IMPROVEMENTS
   ============================================ */

/* Ensure touch targets are large enough */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .fceu-enroll-button,
    .single-product .single_add_to_cart_button {
        min-height: 48px;
        padding: 14px 24px;
    }

    .woocommerce-tabs ul.tabs li a {
        padding: 18px 20px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Focus states for accessibility */
.woocommerce ul.products li.product .button:focus,
.woocommerce ul.products li.product .fceu-enroll-button:focus,
.single-product .single_add_to_cart_button:focus,
.fceu-back-link:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth scrolling for tab navigation */
html {
    scroll-behavior: smooth;
}

/* ============================================
   ENFOLD THEME SPECIFIC OVERRIDES
   ============================================ */

/* Ensure our product grid works with Enfold */
.woocommerce .products,
.woocommerce ul.products {
    clear: both !important;
}

/* Fix Enfold's default product spacing */
.woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override Enfold's avia framework styles */
.avia-content-slider .slide-entry-wrap,
.avia-content-slider .slide-entry {
    border: none !important;
}

/* Ensure buttons aren't affected by Enfold's global button styles */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Fix Enfold theme product image container */
.woocommerce ul.products li.product .inner_product,
.woocommerce ul.products li.product .inner_product_header {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Override Enfold's default link colors in products */
.woocommerce ul.products li.product a:not(.button) {
    color: inherit !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__title:hover,
.woocommerce ul.products li.product h2 a:hover,
.woocommerce ul.products li.product h3 a:hover {
    color: var(--primary-color) !important;
}

/* Fix product tabs content area */
.woocommerce-tabs .panel {
    padding: 20px !important;
    background: transparent !important;
    border: none !important;
}

/* Ensure quantity input is hidden for courses (sold individually) */
.single-product .quantity {
    display: none !important;
}

/* Responsive breakpoints for product grid */
/* Tablet (2 columns) */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce.archive ul.products,
    body.woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile (1 column) */
@media (max-width: 640px) {
    .woocommerce ul.products,
    .woocommerce.archive ul.products,
    body.woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* Override Enfold's default product thumbnail size */
.woocommerce ul.products li.product a img {
    display: block !important;
    margin: 0 auto !important;
}

/* Ensure star ratings don't interfere with our layout */
.woocommerce ul.products li.product .star-rating {
    margin: 5px auto !important;
}

/* ============================================
   COURSE OVERVIEW PAGE - SINGLE PRODUCT
   ============================================ */

/* Main layout wrapper for course overview */
.fceu-course-overview-wrapper {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Two-column layout: Main content + Sidebar */
.fceu-course-overview-layout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 40px !important;
    margin-top: 30px !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.fceu-course-main-content {
    min-width: 0 !important; /* Prevent grid blowout */
}

/* Course Header Section */
.fceu-course-header-section {
    margin-bottom: 30px !important;
}

.fceu-course-categories {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 15px !important;
}

.fceu-category-tag {
    display: inline-block !important;
    background: var(--primary-color) !important;
    color: white !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.fceu-course-title-main {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    line-height: 1.3 !important;
    margin: 0 0 15px 0 !important;
}

.fceu-course-subtitle {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--gray-700) !important;
    margin-top: 15px !important;
}

/* Overview Card */
.fceu-overview-card {
    background: white !important;
    border-radius: 12px !important;
    padding: 35px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 30px !important;
}

.fceu-section-heading {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--gray-200) !important;
}

.fceu-course-description {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--gray-700) !important;
    margin-bottom: 30px !important;
}

.fceu-course-description p {
    margin-bottom: 15px !important;
}

/* Learning Objectives */
.fceu-learning-objectives {
    margin-top: 30px !important;
    padding-top: 30px !important;
    border-top: 1px solid var(--gray-200) !important;
}

.fceu-subsection-heading {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin: 0 0 15px 0 !important;
}

.fceu-objectives-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fceu-objectives-list li {
    padding: 12px 0 12px 35px !important;
    position: relative !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--gray-700) !important;
}

.fceu-objectives-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 24px !important;
    height: 24px !important;
    background: var(--secondary-color) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Target Audience & Prerequisites */
.fceu-target-audience,
.fceu-prerequisites {
    margin-top: 25px !important;
    padding: 20px !important;
    background: var(--gray-100) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--primary-color) !important;
}

.fceu-target-audience p,
.fceu-prerequisites p {
    margin: 5px 0 0 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--gray-700) !important;
}

/* ============================================
   SIDEBAR DETAILS
   ============================================ */

.fceu-course-sidebar-details {
    position: relative !important;
}

.fceu-sidebar-sticky-wrapper {
    position: sticky !important;
    top: 20px !important;
}

.fceu-course-details-card {
    background: white !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid var(--gray-200) !important;
}

/* Price Section */
.fceu-course-price-section {
    text-align: center !important;
    padding-bottom: 25px !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid var(--gray-200) !important;
}

.fceu-course-price-section .price,
.fceu-course-price-section .price span {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    display: block !important;
}

/* Course Features */
.fceu-course-features {
    margin-bottom: 25px !important;
}

.fceu-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.fceu-feature-item:last-child {
    border-bottom: none !important;
}

.fceu-feature-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.fceu-feature-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.fceu-feature-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--gray-500) !important;
    font-weight: 600 !important;
}

.fceu-feature-value {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--dark-color) !important;
}

/* Enroll CTA */
.fceu-enroll-cta {
    margin-top: 25px !important;
}

.fceu-enroll-cta .cart {
    margin: 0 !important;
    padding: 0 !important;
}

.fceu-enroll-cta .single_add_to_cart_button {
    width: 100% !important;
    padding: 18px 30px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: block !important;
}

.fceu-enroll-cta .single_add_to_cart_button:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* ================================================================
   Course Details Card (Sidebar)
   Modern styling for price, features and CTA
   ================================================================ */

/* Card container */
.fceu-course-details-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 40px 30px !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

/* Price section */
.fceu-course-price-section {
    text-align: center !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--gray-200) !important;
    margin-bottom: 0 !important;
}

.fceu-course-price-section .price {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    line-height: 1 !important;
}

.fceu-course-price-section .price bdi {
    display: flex !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

.fceu-course-price-section .woocommerce-Price-currencySymbol {
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--dark-color) !important;
    opacity: 0.8 !important;
}

/* Feature list */
.fceu-course-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.fceu-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 !important;
}

/* Icon wrapper: circle with subtle background */
.fceu-feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--gray-100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: var(--primary-color) !important;
}

/* Ensure emoji icons scale correctly */
.fceu-feature-icon img {
    width: 24px !important;
    height: 24px !important;
}

.fceu-feature-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.fceu-feature-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--gray-500) !important;
    font-weight: 600 !important;
}

.fceu-feature-value {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--dark-color) !important;
}

/* Call‑to‑action button */
.fceu-enroll-cta .single_add_to_cart_button {
    width: 100% !important;
    padding: 20px 0 !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
}

.fceu-enroll-cta .single_add_to_cart_button:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
}

@media (max-width: 768px) {
    .fceu-course-details-card {
        padding: 32px 20px !important;
        border-radius: 12px !important;
    }
    .fceu-course-price-section .price {
        font-size: 36px !important;
    }
    .fceu-feature-icon {
        width: 40px !important;
        height: 40px !important;
    }
    .fceu-feature-value {
        font-size: 16px !important;
    }
    .fceu-enroll-cta .single_add_to_cart_button {
        font-size: 18px !important;
    }
}


/* ============================================
   PRODUCT TABS - ENHANCED
   ============================================ */

/* Course Outline Tab */
.fceu-course-outline-tab {
    padding: 20px 0 !important;
}

.fceu-course-outline-tab h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin-bottom: 25px !important;
}

.fceu-outline-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.fceu-outline-section-item {
    background: white !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.fceu-outline-section-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--primary-color) !important;
}

.fceu-outline-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 20px !important;
}

.fceu-outline-number {
    width: 40px !important;
    height: 40px !important;
    background: var(--primary-color) !important;
    color: white !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.fceu-outline-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--dark-color) !important;
    flex: 1 !important;
}

/* Accreditation Tab */
.fceu-accreditation-tab {
    padding: 20px 0 !important;
}

.fceu-accreditation-tab h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--dark-color) !important;
    margin-bottom: 25px !important;
}

.fceu-approval-badge {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
    background: var(--gray-100) !important;
    border-radius: 8px !important;
    border-left: 4px solid var(--secondary-color) !important;
    margin-bottom: 25px !important;
}

.fceu-approval-icon {
    width: 32px !important;
    height: 32px !important;
    background: var(--secondary-color) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.fceu-approval-content {
    flex: 1 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--gray-700) !important;
}

.fceu-accreditation-content {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--gray-700) !important;
}

.fceu-accreditation-content p {
    margin-bottom: 15px !important;
}

/* ============================================
   RESPONSIVE DESIGN - COURSE OVERVIEW
   ============================================ */

/* Tablet and below */
@media (max-width: 991px) {
    .fceu-course-overview-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .fceu-course-sidebar-details {
        order: -1 !important; /* Move sidebar above main content */
    }

    .fceu-sidebar-sticky-wrapper {
        position: relative !important;
        top: 0 !important;
    }

    .fceu-course-title-main {
        font-size: 28px !important;
    }

    .fceu-overview-card {
        padding: 25px !important;
    }

    .fceu-section-heading {
        font-size: 24px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .fceu-course-overview-wrapper {
        padding: 0 15px !important;
    }

    .fceu-course-overview-layout {
        gap: 20px !important;
        margin-top: 20px !important;
    }

    .fceu-course-title-main {
        font-size: 24px !important;
    }

    .fceu-course-subtitle {
        font-size: 16px !important;
    }

    .fceu-overview-card {
        padding: 20px !important;
    }

    .fceu-section-heading {
        font-size: 22px !important;
    }

    .fceu-subsection-heading {
        font-size: 18px !important;
    }

    .fceu-course-details-card {
        padding: 20px !important;
    }

    .fceu-course-price-section .price,
    .fceu-course-price-section .price span {
        font-size: 36px !important;
    }

    .fceu-outline-section-header {
        padding: 15px !important;
    }

    .fceu-outline-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .fceu-outline-title {
        font-size: 14px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .fceu-course-title-main {
        font-size: 20px !important;
    }

    .fceu-category-tag {
        font-size: 11px !important;
        padding: 5px 12px !important;
    }

    .fceu-overview-card {
        padding: 15px !important;
    }

    .fceu-course-details-card {
        padding: 15px !important;
    }

    .fceu-enroll-cta .single_add_to_cart_button {
        padding: 16px 24px !important;
        font-size: 16px !important;
    }
}