/* Course Detail Pages - Enhanced Solid Gradient Styles */

/* ============================================
   ANIMATED GRADIENT TEXT FOR HEADINGS
   ============================================ */

.animated-gradient-heading {
    background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4, #8b5cf6, #f59e0b, #ec4899, #6366f1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 4s ease infinite;
}

@keyframes gradient-text-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   COURSE HERO SECTIONS - Solid Gradient Backgrounds
   ============================================ */

.course-hero {
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.course-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: orb-float 10s ease-in-out infinite;
}

@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -40px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
}

/* SAP SuccessFactors Theme - Purple/Pink Solid */
.sf-theme {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 25%, #9333ea 50%, #db2777 75%, #be185d 100%);
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-sf {
    background: linear-gradient(90deg, #a78bfa, #f472b6, #e879f9, #a78bfa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.sf-badge {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.sf-gradient {
    background: linear-gradient(135deg, #7c3aed, #db2777);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
}

/* SAP EWM Theme - Orange/Amber Solid */
.ec-theme {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 25%, #ea580c 50%, #f59e0b 75%, #d97706 100%);
}

.orb-ec-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-ec-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-ec {
    background: linear-gradient(90deg, #fdba74, #fb923c, #fcd34d, #fdba74);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.ec-badge {
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.ec-gradient {
    background: linear-gradient(135deg, #ea580c, #f59e0b);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(234, 88, 12, 0.3);
}

/* SAP Ariba Theme - Blue/Cyan Solid */
.ariba-theme {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 25%, #0891b2 50%, #06b6d4 75%, #0ea5e9 100%);
}

.orb-ariba-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-ariba-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-ariba {
    background: linear-gradient(90deg, #67e8f9, #38bdf8, #22d3ee, #67e8f9);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.ariba-badge {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.ariba-gradient {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
}

/* SAP CPQ Theme - Indigo/Violet Solid */
.cpq-theme {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 25%, #7c3aed 50%, #8b5cf6 75%, #a855f7 100%);
}

.orb-cpq-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-cpq-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-cpq {
    background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #ddd6fe, #a5b4fc);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.cpq-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.cpq-gradient {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.3);
}

/* SAP AI Theme - Emerald/Teal Solid */
.ai-theme {
    background: linear-gradient(135deg, #064e3b 0%, #059669 25%, #10b981 50%, #14b8a6 75%, #06b6d4 100%);
}

.orb-ai-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-ai-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-ai {
    background: linear-gradient(90deg, #6ee7b7, #34d399, #2dd4bf, #6ee7b7);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.ai-badge {
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.ai-gradient {
    background: linear-gradient(135deg, #059669, #14b8a6);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(5, 150, 105, 0.3);
}

/* SAP Joule Theme - Rose/Pink Solid */
.joule-theme {
    background: linear-gradient(135deg, #881337 0%, #be123c 25%, #e11d48 50%, #ec4899 75%, #f472b6 100%);
}

.orb-joule-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.5), transparent 60%);
    top: -150px;
    right: -100px;
}

.orb-joule-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.4), transparent 60%);
    bottom: -100px;
    left: 5%;
    animation-delay: -5s;
}

.text-gradient-joule {
    background: linear-gradient(90deg, #fda4af, #fb7185, #f9a8d4, #fda4af);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 3s ease infinite;
}

.joule-badge {
    background: linear-gradient(135deg, #e11d48, #ec4899);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4);
}

.joule-gradient {
    background: linear-gradient(135deg, #be123c, #ec4899);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(190, 18, 60, 0.3);
}

/* ============================================
   COMMON COURSE HERO STYLES
   ============================================ */

.course-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.course-hero-content {
    max-width: 600px;
}

.course-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.course-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.course-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.course-meta-hero {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    backdrop-filter: blur(10px);
}

.course-desc {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.course-actions {
    display: flex;
    gap: 1rem;
}

/* 3D Course Card */
.course-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.course-card-3d {
    width: 340px;
    height: 420px;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card-3d:hover {
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-20px) scale(1.05);
}

.card-content {
    text-align: center;
    color: white;
}

.card-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.card-content h3 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-content p {
    font-size: 1.125rem;
    opacity: 0.95;
    font-weight: 500;
}

/* ============================================
   COURSE CONTENT SECTIONS - Solid Gradient Backgrounds
   ============================================ */

.course-content-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

.section-block {
    margin-bottom: 3rem;
}

.section-block h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #6366f1, #ec4899, #06b6d4, #8b5cf6, #6366f1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text-shift 5s ease infinite;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.skill-card {
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 3px solid transparent;
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.skill-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 1rem;
    background-size: 300% 300%;
    animation: gradient-rotate 3s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Skill Card Theme Colors - Solid Gradients */
.sf-skill::before { background: linear-gradient(45deg, #7c3aed, #db2777, #9333ea, #7c3aed); }
.ec-skill::before { background: linear-gradient(45deg, #ea580c, #f59e0b, #d97706, #ea580c); }
.ariba-skill::before { background: linear-gradient(45deg, #2563eb, #0891b2, #0ea5e9, #2563eb); }
.cpq-skill::before { background: linear-gradient(45deg, #4f46e5, #7c3aed, #8b5cf6, #4f46e5); }
.ai-skill::before { background: linear-gradient(45deg, #059669, #14b8a6, #10b981, #059669); }
.joule-skill::before { background: linear-gradient(45deg, #be123c, #ec4899, #e11d48, #be123c); }

.skill-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.skill-card:hover::before {
    opacity: 1;
}

.skill-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.skill-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.skill-card p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Curriculum List */
.curriculum-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.curriculum-item {
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 3px solid transparent;
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.curriculum-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 1rem;
    background-size: 300% 300%;
    animation: gradient-rotate 3s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sf-item::before { background: linear-gradient(45deg, #7c3aed, #db2777, #9333ea, #7c3aed); }
.ec-item::before { background: linear-gradient(45deg, #ea580c, #f59e0b, #d97706, #ea580c); }
.ariba-item::before { background: linear-gradient(45deg, #2563eb, #0891b2, #0ea5e9, #2563eb); }
.cpq-item::before { background: linear-gradient(45deg, #4f46e5, #7c3aed, #8b5cf6, #4f46e5); }
.ai-item::before { background: linear-gradient(45deg, #059669, #14b8a6, #10b981, #059669); }
.joule-item::before { background: linear-gradient(45deg, #be123c, #ec4899, #e11d48, #be123c); }

.curriculum-item:hover {
    transform: translateX(10px);
    border-color: transparent;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.curriculum-item:hover::before {
    opacity: 1;
}

.curriculum-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.module-number {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9375rem;
    color: white;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.curriculum-header h4 {
    flex: 1;
    font-weight: 700;
    color: white;
    font-size: 1.0625rem;
}

.duration {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.curriculum-item ul {
    padding-left: 3.75rem;
    color: rgba(255, 255, 255, 0.75);
}

.curriculum-item li {
    padding: 0.375rem 0;
    position: relative;
}

.curriculum-item li::before {
    content: '•';
    color: #6366f1;
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Sidebar */
.course-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-card {
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 3px solid transparent;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.sidebar-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 1.5rem;
    background: linear-gradient(45deg, #6366f1, #ec4899, #06b6d4, #8b5cf6, #6366f1);
    background-size: 300% 300%;
    animation: gradient-rotate 3s ease infinite;
    z-index: -1;
}

.sidebar-card h3 {
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #ddd6fe);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.includes-list {
    list-style: none;
    margin-bottom: 2rem;
}

.includes-list li {
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.includes-list li::before {
    content: '✓';
    color: #22c55e;
    font-weight: bold;
    font-size: 1.125rem;
}

.price-block {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.current-price {
    font-size: 2.75rem;
    font-weight: 800;
    background: linear-gradient(90deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    margin-left: 0.75rem;
}

.discount {
    display: block;
    font-size: 0.9375rem;
    color: #4ade80;
    font-weight: 700;
    margin-top: 0.5rem;
    background: rgba(74, 222, 128, 0.15);
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    display: inline-block;
}

.btn-full {
    width: 100%;
    font-weight: 700;
    font-size: 1.0625rem;
    padding: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .course-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .course-card-3d {
        width: 300px;
        height: 380px;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .course-sidebar {
        position: static;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .course-actions {
        flex-direction: column;
    }
    
    .course-meta-hero {
        flex-wrap: wrap;
        justify-content: center;
    }
}