.membership-card{border-radius:20px;overflow:visible;position:relative;display:flex;flex-direction:column;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 6px 25px rgba(0, 0, 0, 0.15);border:2px solid rgba(255, 255, 255, 0.1);height:100%;}  .membership-card.card-blue{background:linear-gradient(135deg, #193c76 0%, #0077b6 100%);color:#ffffff;}  .membership-card.card-gold{background:linear-gradient(135deg, #f5c542 0%, #edd25f 100%);color:#ffffff; box-shadow:0 8px 30px rgba(245, 197, 66, 0.4);}  .membership-card.card-red{background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);color:#ffffff;box-shadow:0 8px 30px rgba(220, 38, 38, 0.4);} .membership-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 40px rgba(0, 0, 0, 0.3);} .membership-card.active{transform:translateY(-10px) scale(1.03);box-shadow:0 15px 45px rgba(0, 0, 0, 0.35);z-index:5;}  .membership-card.card-blue.active{background:linear-gradient(135deg, #224a8d 0%, #0088cc 100%);} .membership-card.card-gold.active{background:linear-gradient(135deg, #f5c542 0%, #f5c542 100%);} .membership-card.card-red.active{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);}  .membership-card.owned{border:3px solid #10b981;box-shadow:0 8px 30px rgba(16, 185, 129, 0.3);} .owned-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);pointer-events:none;z-index:1;border-radius:inherit;} .owned-badge-membership{position:absolute;top:16px;left:16px;background:linear-gradient(135deg, #10b981 0%, #059669 100%);color:white;padding:10px 18px;border-radius:14px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px rgba(16, 185, 129, 0.5);z-index:10;text-transform:uppercase;letter-spacing:0.8px;animation:badge-glow 2s ease-in-out infinite;} @keyframes badge-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);}} .owned-badge-membership i{font-size:16px;animation:crown-rotate 3s linear infinite;} @keyframes crown-rotate{0%, 90%{transform:rotate(0deg);} 95%{transform:rotate(-15deg);} 100%{transform:rotate(0deg);}}  .membership-card-image{position:relative;width:100%;height:100%;overflow:hidden;border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:center;} .membership-card-image img{width:100%;height:100%;object-fit:cover;padding:5px;border-top-left-radius:20px;border-top-right-radius:20px;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);user-select:none;-webkit-user-drag:none;} .membership-card:hover .membership-card-image img{transform:scale(1.1) rotate(2deg);} @media (min-width:768px){.membership-card-image{height:220px;}} @media (min-width:1024px){.membership-card-image{height:240px;}}  .discount-badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);color:white;padding:8px 16px;border-radius:25px;font-size:13px;font-weight:900;box-shadow:0 4px 15px rgba(220, 38, 38, 0.5);z-index:10;letter-spacing:0.8px;text-transform:uppercase;border:2px solid rgba(255, 255, 255, 0.3);animation:discount-pulse 2s ease-in-out infinite;} @keyframes discount-pulse{0%, 100%{transform:scale(1);box-shadow:0 4px 15px rgba(220, 38, 38, 0.5);} 50%{transform:scale(1.05);box-shadow:0 6px 25px rgba(220, 38, 38, 0.7);}} @media (min-width:768px){.discount-badge{font-size:14px;padding:9px 18px;}} @media (min-width:1024px){.discount-badge{font-size:15px;padding:10px 20px;}}  .badge-membership{display:inline-block;padding:10px 20px;border-radius:25px;font-size:13px;font-weight:900;letter-spacing:0.8px;text-transform:uppercase;box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);animation:badge-pulse 2s ease-in-out infinite;border:2px solid rgba(255, 255, 255, 0.2);} @media (min-width:768px){.badge-membership{font-size:14px;padding:11px 22px;}} @media (min-width:1024px){.badge-membership{font-size:15px;padding:12px 24px;}}  .badge-membership.badge-recommended{background:linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);color:#ffffff;box-shadow:0 4px 20px rgba(153, 27, 27, 0.5);}  .badge-membership.badge-popular{background:linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);color:#ffffff;box-shadow:0 4px 20px rgba(127, 29, 29, 0.5);}  @keyframes badge-pulse{0%, 100%{transform:scale(1);} 50%{transform:scale(1.05);}}  .membership-card-content{padding:24px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2;} @media (min-width:768px){.membership-card-content{padding:26px;}} @media (min-width:1024px){.membership-card-content{padding:28px;}}  .price-section{position:relative;margin-bottom:16px;} .badge-wrapper{margin-bottom:12px;min-height:40px;display:flex;align-items:center;} .discount-price{font-size:14px;text-decoration:line-through;opacity:0.7;font-weight:600;margin-bottom:6px;color:inherit;} .real-price{font-size:28px;font-weight:900;line-height:1.2;margin-bottom:0;letter-spacing:-0.5px;color:inherit;} @media (min-width:768px){.real-price{font-size:30px;}} @media (min-width:1024px){.real-price{font-size:32px;} .discount-price{font-size:15px;}}  .membership-card-title{font-size:16px;font-weight:800;margin-bottom:16px;min-height:48px;line-height:1.4;color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} @media (min-width:768px){.membership-card-title{font-size:17px;min-height:50px;}} @media (min-width:1024px){.membership-card-title{font-size:18px;min-height:52px;}}  .detail-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;border-radius:15px;font-weight:700;font-size:14px;border:none;cursor:pointer;background:rgba(255, 255, 255, 0.15);color:inherit;margin-bottom:16px;transition:all 0.3s ease;position:relative;z-index:2;backdrop-filter:blur(10px);} @media (min-width:768px){.detail-btn{font-size:15px;padding:15px 22px;}} @media (min-width:1024px){.detail-btn{padding:16px 24px;font-size:16px;}} .detail-btn:hover{background:rgba(255, 255, 255, 0.25);transform:translateY(-2px);} .detail-btn:active{transform:scale(0.98);} .detail-btn.active, .membership-card.active .detail-btn{background:rgba(255, 255, 255, 0.35);font-weight:800;} .chevron{transition:transform 0.4s ease;flex-shrink:0;} .chevron.rotate{transform:rotate(180deg);}  .details-dropdown{position:absolute;left:20px;right:20px;bottom:22%;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity 0.4s ease, max-height 0.4s ease, visibility 0.4s ease;margin-bottom:12px;z-index:1000;pointer-events:none;} @media (min-width:768px){.details-dropdown{left:22px;right:22px;}} @media (min-width:1024px){.details-dropdown{left:24px;right:24px;}} .details-content{border-radius:16px;padding:16px;background:rgba(255, 255, 255, 0.15);backdrop-filter:blur(15px);box-shadow:0 -4px 20px rgba(0, 0, 0, 0.2);max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(255, 255, 255, 0.1);} @media (min-width:1024px){.details-content{padding:18px;max-height:320px;}} .details-dropdown.active{opacity:1;visibility:visible;pointer-events:auto;max-height:400px;} .benefits-list{list-style:none;padding:0;margin:0;} .benefits-list li{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin-bottom:10px;color:inherit;line-height:1.6;} @media (min-width:768px){.benefits-list li{font-size:14px;margin-bottom:11px;}} @media (min-width:1024px){.benefits-list li{font-size:15px;margin-bottom:12px;}} .check{color:#86efac;font-weight:900;margin-top:2px;flex-shrink:0;font-size:16px;} .spacer{flex:1;}  .order-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 28px;border-radius:30px;font-weight:900;text-decoration:none;font-size:16px;z-index:2;position:relative;transition:all 0.3s ease;line-height:1.4;text-transform:uppercase;letter-spacing:0.5px;overflow:hidden;background:rgba(255, 255, 255, 0.9);color:inherit;box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);}  .card-blue .order-btn{background:rgba(255, 255, 255, 0.9);color:#193c76;} .card-gold .order-btn{background:rgba(255, 255, 255, 0.95);color:#f5c542;} .card-red .order-btn{background:rgba(255, 255, 255, 0.9);color:#dc2626;} .order-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(0, 0, 0, 0.1);transform:translate(-50%, -50%);transition:width 0.6s, height 0.6s;} .order-btn:hover::before{width:400px;height:400px;} @media (min-width:768px){.order-btn{padding:17px 30px;font-size:17px;}} @media (min-width:1024px){.order-btn{padding:18px 32px;font-size:18px;}} .order-btn:hover{box-shadow:0 8px 30px rgba(0, 0, 0, 0.3);transform:translateY(-3px);} .order-btn:active{transform:scale(0.98);}  .expiry-section{margin-top:20px;margin-bottom:20px;} .expiry-info{font-size:14px;display:flex;align-items:center;gap:10px;justify-content:center;padding:14px 20px;border-radius:15px;font-weight:800;transition:all 0.3s ease;border:2px solid;text-transform:uppercase;letter-spacing:0.5px;} @media (min-width:768px){.expiry-info{font-size:15px;padding:15px 22px;}} @media (min-width:1024px){.expiry-info{font-size:16px;padding:16px 24px;}}  .expiry-info.lifetime{background:linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);color:#059669;border-color:rgba(16, 185, 129, 0.4);} .expiry-info.lifetime i{font-size:20px;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.15) 0%, rgba(37, 99, 235, 0.15) 100%);color:#2563eb;border-color:rgba(59, 130, 246, 0.4);} .expiry-info.normal i{font-size:18px;color:#3b82f6;}  .expiry-info.expiring-soon{background:linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(249, 115, 22, 0.2) 100%);color:#ea580c;border-color:rgba(249, 115, 22, 0.5);animation:pulse-warning 2s ease-in-out infinite;} .expiry-info.expiring-soon i{font-size:18px;color:#f97316;animation:shake-warning 0.5s ease-in-out infinite;} @keyframes pulse-warning{0%, 100%{box-shadow:0 0 0 0 rgba(249, 115, 22, 0.4);} 50%{box-shadow:0 0 0 10px rgba(249, 115, 22, 0);}} @keyframes shake-warning{0%, 100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);}}  .membership-card:hover .expiry-info.lifetime{background:linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.25) 100%);border-color:rgba(16, 185, 129, 0.6);} .membership-card:hover .expiry-info.normal{background:linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);border-color:rgba(59, 130, 246, 0.6);} .membership-card:hover .expiry-info.expiring-soon{background:linear-gradient(135deg, rgba(251, 146, 60, 0.3) 0%, rgba(249, 115, 22, 0.3) 100%);border-color:rgba(249, 115, 22, 0.7);}  @media (max-width:576px){.membership-card{border-radius:16px;} .owned-badge-membership{font-size:11px;padding:8px 14px;} .owned-badge-membership i{font-size:14px;} .badge-membership{font-size:11px !important;padding:8px 16px !important;} .membership-card-content{padding:20px;} .real-price{font-size:24px;} .membership-card-title{font-size:15px;min-height:44px;} .detail-btn{font-size:13px;padding:12px 18px;} .expiry-info{font-size:12px;padding:12px 16px;} .expiry-info i{font-size:14px !important;} .order-btn{font-size:14px;padding:14px 24px;}}  .details-content::-webkit-scrollbar{width:6px;} .details-content::-webkit-scrollbar-track{background:rgba(255, 255, 255, 0.1);border-radius:10px;} .details-content::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.3);border-radius:10px;} .details-content::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.5);}