*{margin:0;padding:0;box-sizing:border-box;} .module-card, .free-course-card{position:relative;background:#ffffff;border-radius:24px;overflow:visible;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);display:flex;flex-direction:column;border:2px solid #f0f0f0;} .module-card:hover, .free-course-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(25, 60, 118, 0.15);border-color:#193c76;} .module-card.owned{border:2px solid #10b981;background:linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);} .module-card.owned::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0) 100%);pointer-events:none;border-radius:22px;z-index:0;} .card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;} .card-image-wrapper, .module-image-wrapper{position:relative;width:100%;height:200px;overflow:hidden;background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:24px 24px 0 0;} @media (min-width:640px){.card-image-wrapper, .module-image-wrapper{height:220px;}} @media (min-width:768px){.card-image-wrapper, .module-image-wrapper{height:240px;}} @media (min-width:1024px){.card-image-wrapper, .module-image-wrapper{height:260px;}} .card-image, .module-image{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);padding:12px;background:#ffffff;} .card-image[src*="medi-notfound"], .module-image[src*="medi-notfound"]{object-fit:contain;padding:20px;} .free-course-card:hover .card-image, .module-card:hover .card-image, .module-card:hover .module-image{transform:scale(1.15) rotate(2deg);} .badge-free{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg, #10b981 0%, #059669 100%);color:white;border-radius:30px;font-size:11px;font-weight:800;z-index:3;box-shadow:0 4px 15px rgba(16, 185, 129, 0.5);text-transform:uppercase;letter-spacing:1px;animation:pulse-glow 2s infinite;border:2px solid rgba(255, 255, 255, 0.3);} @keyframes pulse-glow{0%, 100%{box-shadow:0 4px 15px rgba(16, 185, 129, 0.5);} 50%{box-shadow:0 6px 25px rgba(16, 185, 129, 0.7);}} .badge-free i{font-size:14px;animation:shake 3s infinite;} @keyframes shake{0%, 100%{transform:rotate(0deg);} 10%, 30%, 50%{transform:rotate(-15deg);} 20%, 40%{transform:rotate(15deg);}} .badge-claim{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:30px;font-size:11px;font-weight:800;z-index:3;box-shadow:0 4px 15px rgba(0, 0, 0, 0.25);text-transform:uppercase;letter-spacing:1px;backdrop-filter:blur(10px);border:2px solid rgba(255, 255, 255, 0.3);} .badge-claim.unlimited{background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);color:white;} .badge-claim.unlimited i{animation:rotate 3s linear infinite;} @keyframes rotate{from{transform:rotate(0deg);} to{transform:rotate(360deg);}} .badge-claim.limited{background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color:white;} .badge-claim.limited.low-stock{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);animation:pulse-warning 1.5s infinite;} @keyframes pulse-warning{0%, 100%{transform:scale(1);box-shadow:0 4px 15px rgba(239, 68, 68, 0.5);} 50%{transform:scale(1.08);box-shadow:0 6px 25px rgba(239, 68, 68, 0.7);}} .badge-claim.sold-out{background:linear-gradient(135deg, #6b7280 0%, #4b5563 100%);color:white;opacity:0.95;} .badge-access, .owned-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg, #10b981 0%, #059669 100%);color:white;border-radius:18px;font-size:11px;font-weight:800;z-index:3;box-shadow:0 4px 15px rgba(16, 185, 129, 0.5);text-transform:uppercase;letter-spacing:0.8px;border:2px solid rgba(255, 255, 255, 0.3);} .badge-access{bottom:12px;top:auto;left:12px;right:12px;justify-content:center;background:linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);backdrop-filter:blur(10px);} @media (min-width:768px){.owned-badge, .badge-access{font-size:12px;padding:9px 16px;}} @media (min-width:1024px){.owned-badge, .badge-access{font-size:13px;padding:10px 18px;}} .discount-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);color:#ffffff;padding:8px 14px;border-radius:18px;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(220, 38, 38, 0.5);z-index:3;letter-spacing:0.5px;border:2px solid rgba(255, 255, 255, 0.3);} @media (min-width:768px){.discount-badge{font-size:13px;padding:9px 16px;}} @media (min-width:1024px){.discount-badge{font-size:14px;padding:10px 18px;}} .card-content, .module-content{padding:20px;display:flex;flex-direction:column;flex:1;background:#ffffff;position:relative;z-index:1;} @media (min-width:768px){.card-content, .module-content{padding:22px;}} @media (min-width:1024px){.card-content, .module-content{padding:24px;}} .card-tag, .module-tag{display:inline-block;padding:6px 14px;background:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);color:#1e40af;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;align-self:flex-start;border:1px solid #93c5fd;box-shadow:0 2px 8px rgba(59, 130, 246, 0.2);flex-shrink:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px;} .module-tag{background:linear-gradient(135deg, #edd25f 0%, #f5c542 100%);color:#193c76;border:1px solid rgba(245, 197, 66, 0.4);} @media (min-width:768px){.card-tag, .module-tag{font-size:11px;padding:7px 15px;margin-bottom:12px;}} @media (min-width:1024px){.card-tag, .module-tag{font-size:12px;padding:8px 16px;margin-bottom:14px;}} .card-title, .module-title{font-size:15px;font-weight:700;color:#1e293b;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:42px;max-height:42px;transition:color 0.3s ease;flex-shrink:0;margin:0 0 12px 0;} .module-title{color:#193c76;} .free-course-card:hover .card-title, .module-card:hover .card-title, .module-card:hover .module-title{color:#193c76;} @media (min-width:768px){.card-title, .module-title{font-size:16px;min-height:45px;max-height:45px;}} @media (min-width:1024px){.card-title, .module-title{font-size:17px;min-height:48px;max-height:48px;margin-bottom:15px;}} .card-stats, .module-meta{display:flex;gap:12px;padding-bottom:12px;border-bottom:2px solid #e2e8f0;flex-shrink:0;flex-wrap:wrap;align-items:center;margin-bottom:12px;} @media (min-width:768px){.card-stats, .module-meta{gap:14px;}} .stat-item, .module-meta-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#64748b;font-weight:600;} @media (min-width:768px){.stat-item, .module-meta-item{font-size:12px;gap:6px;}} @media (min-width:1024px){.stat-item, .module-meta-item{font-size:13px;}} .stat-item i, .module-meta-item i{color:#3b82f6;font-size:13px;flex-shrink:0;} @media (min-width:768px){.stat-item i, .module-meta-item i{font-size:14px;}} .module-meta-item span{font-weight:500;} .module-meta-item.video-count{background:linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.15) 100%);padding:5px 10px;border-radius:8px;border:1.5px solid rgba(74, 222, 128, 0.4);transition:all 0.3s ease;} @media (min-width:768px){.module-meta-item.video-count{padding:6px 12px;border-radius:9px;}} @media (min-width:1024px){.module-meta-item.video-count{padding:7px 14px;border-radius:10px;}} .module-card:hover .module-meta-item.video-count{background:linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(34, 197, 94, 0.25) 100%);border-color:rgba(74, 222, 128, 0.6);transform:scale(1.05);} .module-meta-item.video-count i{color:#22c55e !important;font-size:13px;animation:pulse-play 2s infinite;} @media (min-width:768px){.module-meta-item.video-count i{font-size:14px;}} @media (min-width:1024px){.module-meta-item.video-count i{font-size:15px;}} @keyframes pulse-play{0%, 100%{opacity:1;transform:scale(1);} 50%{opacity:0.8;transform:scale(1.1);}} .module-meta-item.video-count span{font-weight:700;color:#16a34a;font-size:12px;} @media (min-width:768px){.module-meta-item.video-count span{font-size:13px;}} @media (min-width:1024px){.module-meta-item.video-count span{font-size:14px;}} .module-meta-item.duration{background:rgba(59, 130, 246, 0.08);padding:5px 10px;border-radius:8px;border:1.5px solid rgba(59, 130, 246, 0.2);} @media (min-width:768px){.module-meta-item.duration{padding:6px 12px;}} @media (min-width:1024px){.module-meta-item.duration{padding:7px 14px;}} .module-meta-item.duration i{color:#3b82f6 !important;} .module-meta-item.duration span{color:#2563eb;font-weight:600;} .module-meta-item.pricing-indicator{background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);color:white;padding:5px 10px;border-radius:8px;font-weight:700;font-size:11px;letter-spacing:0.3px;border:1.5px solid rgba(124, 58, 237, 0.3);} @media (min-width:768px){.module-meta-item.pricing-indicator{padding:6px 12px;font-size:12px;}} @media (min-width:1024px){.module-meta-item.pricing-indicator{padding:7px 14px;font-size:13px;}} .module-meta-item.pricing-indicator i{color:white !important;font-size:10px;} @media (min-width:768px){.module-meta-item.pricing-indicator i{font-size:11px;}} @media (min-width:1024px){.module-meta-item.pricing-indicator i{font-size:12px;}} .claim-status-text{font-size:11px;line-height:1.3;flex:1;display:flex;align-items:flex-start;margin-bottom:12px;} .status-claimed, .status-available, .status-unavailable{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-weight:700;border:2px solid;width:100%;} .status-claimed{color:#059669;background:linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);border-color:#6ee7b7;} .status-claimed i{font-size:12px;flex-shrink:0;} .status-available{color:#2563eb;background:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);border-color:#93c5fd;} .status-available i{font-size:12px;flex-shrink:0;} .status-available.low-stock-text{color:#dc2626;background:linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);border-color:#fca5a5;} .status-unavailable{color:#4b5563;background:linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);border-color:#d1d5db;} .status-unavailable i{font-size:12px;flex-shrink:0;} .module-price-old{font-size:13px;color:#9ca3af;text-decoration:line-through;margin-bottom:5px;font-weight:500;} @media (min-width:768px){.module-price-old{font-size:14px;}} @media (min-width:1024px){.module-price-old{font-size:15px;margin-bottom:6px;}} .module-price-new{font-size:20px;font-weight:800;color:#193c76;margin-bottom:12px;background:linear-gradient(135deg, #193c76 0%, #0077b6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} @media (min-width:768px){.module-price-new{font-size:22px;}} @media (min-width:1024px){.module-price-new{font-size:24px;margin-bottom:15px;}} .card-action{margin-top:auto;flex-shrink:0;padding-top:8px;} .btn-card, .btn-order-small{display:flex;align-items:center;justify-content:center;width:100%;padding:13px 18px;border-radius:16px;font-weight:800;font-size:12px;border:none;cursor:pointer;transition:all 0.3s ease;text-decoration:none;text-transform:uppercase;letter-spacing:0.8px;position:relative;overflow:hidden;white-space:nowrap;background:linear-gradient(135deg, #193c76 0%, #0077b6 100%);color:#ffffff;box-shadow:0 6px 20px rgba(25, 60, 118, 0.4);} @media (min-width:768px){.btn-card, .btn-order-small{padding:14px 20px;font-size:13px;}} @media (min-width:1024px){.btn-card, .btn-order-small{font-size:14px;}} .btn-card i, .btn-order-small i{flex-shrink:0;margin-right:8px;} .btn-card::before, .btn-order-small::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255, 255, 255, 0.3);transform:translate(-50%, -50%);transition:width 0.6s, height 0.6s;} .btn-card:hover::before, .btn-order-small:hover::before{width:400px;height:400px;} .btn-accessed, .btn-owned{background:linear-gradient(135deg, #10b981 0%, #059669 100%);box-shadow:0 6px 20px rgba(16, 185, 129, 0.4);} .btn-accessed:hover, .btn-owned:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(16, 185, 129, 0.5);color:white;background:linear-gradient(135deg, #059669 0%, #047857 100%);} .btn-claim{background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);color:white;box-shadow:0 6px 20px rgba(59, 130, 246, 0.4);} .btn-claim:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(59, 130, 246, 0.5);color:white;} .btn-order-small:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(25, 60, 118, 0.5);} .btn-order-small:active{transform:translateY(-1px);} .btn-unavailable{background:linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);color:#9ca3af;cursor:not-allowed;box-shadow:none;} .btn-unavailable:hover{transform:none;} .expiry-info{margin-top:10px;font-size:11px;display:flex;align-items:center;gap:6px;justify-content:center;padding:9px 12px;border-radius:12px;font-weight:700;transition:all 0.3s ease;border:2px solid;flex-shrink:0;} @media (min-width:768px){.expiry-info{font-size:12px;padding:10px 14px;}} @media (min-width:1024px){.expiry-info{font-size:13px;margin-top:12px;padding:11px 16px;}} .expiry-info.lifetime{background:linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);color:#059669;border-color:rgba(16, 185, 129, 0.3);} .expiry-info.lifetime i{font-size:14px;color:#10b981;animation:rotate-infinity 3s linear infinite;} @keyframes rotate-infinity{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} .expiry-info.normal{background:linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);color:#2563eb;border-color:rgba(59, 130, 246, 0.3);} .expiry-info.normal i{font-size:13px;color:#3b82f6;} .expiry-info.expiring-soon{background:linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);color:#ea580c;border-color:rgba(249, 115, 22, 0.4);animation:pulse-expiry 2s ease-in-out infinite;} .expiry-info.expiring-soon i{font-size:13px;color:#f97316;animation:shake-warning 0.5s ease-in-out infinite;} @keyframes pulse-expiry{0%, 100%{box-shadow:0 0 0 0 rgba(249, 115, 22, 0.4);} 50%{box-shadow:0 0 0 8px rgba(249, 115, 22, 0);}} @keyframes shake-warning{0%, 100%{transform:translateX(0);} 25%{transform:translateX(-2px);} 75%{transform:translateX(2px);}} .expiry-info.expired{background:linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);color:#dc2626;border-color:rgba(239, 68, 68, 0.4);display:none;} .module-card:hover .expiry-info.lifetime{background:linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);border-color:rgba(16, 185, 129, 0.5);} .module-card:hover .expiry-info.normal{background:linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);border-color:rgba(59, 130, 246, 0.5);} .module-card:hover .expiry-info.expiring-soon{background:linear-gradient(135deg, rgba(251, 146, 60, 0.25) 0%, rgba(249, 115, 22, 0.25) 100%);border-color:rgba(249, 115, 22, 0.6);} .module-card.loading{pointer-events:none;opacity:0.6;} .module-card.loading .module-image, .module-card.loading .card-image{animation:pulse-loading 1.5s ease-in-out infinite;} @keyframes pulse-loading{0%, 100%{opacity:1;} 50%{opacity:0.5;}} img.card-image, img.module-image{opacity:0;transition:opacity 0.3s ease;} img.card-image.loaded, img.module-image.loaded{opacity:1;} @keyframes fadeInUp{from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);}} .module-card, .free-course-card{animation:fadeInUp 0.6s ease forwards;} .modules-grid .module-card:nth-child(1), .modules-grid .free-course-card:nth-child(1){animation-delay:0.1s;} .modules-grid .module-card:nth-child(2), .modules-grid .free-course-card:nth-child(2){animation-delay:0.2s;} .modules-grid .module-card:nth-child(3), .modules-grid .free-course-card:nth-child(3){animation-delay:0.3s;} .modules-grid .module-card:nth-child(4), .modules-grid .free-course-card:nth-child(4){animation-delay:0.4s;} @media (max-width:639px){.card-image-wrapper, .module-image-wrapper{height:180px;} .card-content, .module-content{padding:16px;} .card-tag, .module-tag{font-size:9px;padding:5px 12px;margin-bottom:8px;} .card-title, .module-title{font-size:14px;min-height:39px;max-height:39px;margin-bottom:10px;} .card-stats, .module-meta{margin-bottom:10px;padding-bottom:10px;} .claim-status-text{margin-bottom:10px;} .btn-card, .btn-order-small{padding:12px 16px;font-size:11px;} .stat-item, .module-meta-item{font-size:10px;} .module-meta-item.video-count{padding:4px 8px;} .module-meta-item.video-count i{font-size:11px !important;} .module-meta-item.video-count span{font-size:10px;} .module-price-new{font-size:18px;} .expiry-info{font-size:10px;padding:8px 10px;}} .modules-grid{display:grid;grid-template-columns:1fr;gap:25px;margin-top:40px;} @media (min-width:640px){.modules-grid{grid-template-columns:repeat(2, 1fr);gap:25px;}} @media (min-width:1024px){.modules-grid{grid-template-columns:repeat(4, 1fr);gap:30px;}} .free-course-card, .module-card{contain:layout style paint;will-change:transform;}