/* Login Popup Styles */
.login-popup-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.7);
 z-index: 10000;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
}

.login-popup-overlay.active {
 opacity: 1;
 visibility: visible;
}

.login-popup-container {
 background: #fff;
 padding: 30px;
 border-radius: 16px;
 width: 90%;
 max-width: 400px;
 text-align: center;
 transform: translateY(20px);
 transition: all 0.3s ease;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.login-popup-overlay.active .login-pop极速飞艇-container {
 transform: translateY(0);
}

.login-popup-title {
 font-size: 22px;
 font-weight: 700;
 color: #333;
 margin-bottom: 10px;
}

.login-popup-subtitle {
 font-size: 16px;
 color: #666;
 margin-bottom: 25px;
 line-height: 1.5;
}

.login-popup-button {
 display: block;
 width: 100%;
 padding: 14px;
 border-radius: 8px;
 font-weight: 600;
 font-size: 16px;
 transition: all 0.3s ease;
 text-decoration: none;
 margin-bottom: 12px;
 border: none;
 cursor: pointer;
}

.login-popup-primary {
 background: #4809bd;
 color: white;
}

.login-popup-primary:hover {
 background: #3a07a1;
 transform: translateY(-2px);
}

.login-popup-secondary {
 background: white;
 color: #4809bd;
 border: 2px solid #4809bd;
}

.login-popup-secondary:hover {
 background: #f8f5ff;
 transform: translateY(-2px);
}

.login-popup-close {
 margin-top: 15px;
 border: none;
 background: none;
 color: #888;
 font-size: 14px;
 cursor: pointer;
 transition: color 0.2s ease;
}

.login-popup-close:hover {
 color: #555;
}
 .course-access-container {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin: 20px 0;
     padding: 0;
     width: 100%;
 }
 
 .course-access-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     position: relative;
     padding: 14px 24px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 15px;
     line-height: 1;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     min-width: 140px;
 }
 
 .course-access-btn:hover {
     transform: translateY(-2px);
 }
 
 .start-learning-btn {
     background: white;
     color: #2541b2;
     border: 2px solid #2541b2;
 }
 
 .start-learning-btn:hover {
     background: #f8f9fa;
     color: #1a2d7a;
     border-color: #1a2d7a;
 }
 
 .buy-now-btn {
     background: linear-gradient(135deg, #4a6bff 0%, #2541b2 100%);
     color: white;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .buy-now-btn:hover {
     background: linear-gradient(135deg, #2541b2 0%, #1a2d7a 100%);
     color: white;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 .add-to-cart-btn {
     background: white;
     color: #4809bd;
     border: 2px solid #4809bd;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .add-to-cart-btn:hover {
     background: #f8f5ff;
     color: #3a07a1;
     border-color: #3a07a1;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* OTP Popup Styles */
 .otp-popup-overlay, .login-popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0,0,0,0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }
 
 .otp-popup-overlay.active, .login-popup-overlay.active {
     opacity: 1;
     visibility: visible;
 }
 
 .otp-popup-container {
     background: #fff;
     border-radius: 16px;
     width: 90%;
     max-width: 440px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     transform: translateY(20px);
     transition: transform 0.4s ease;
 }
 
 .otp-popup-overlay.active, .login-popup-overlay.active .otp-popup-container {
     transform: translateY(0);
 }
 
 .popup-header {
     padding: 24px 24px 16px;
     text-align: center;
     border-bottom: 1px solid #f0f0f0;
 }
 
 .popup-body {
     padding: 20px 24px;
 }
 
 .popup-footer {
     padding: 16px 24px 24px;
     text-align: center;
     border-top: 1px solid #f0f0f0;
 }
 
 .otp-popup-title {
     margin: 0 0 8px;
     color: #1a1a1a;
     font-size: 22px;
     font-weight: 700;
 }
 
 .otp-popup-subtitle {
     margin: 0;
     color: #666;
     font-size: 14px;
 }
 
 .input-group {
     margin-bottom: 20px;
 }
 
 .input-label {
     display: block;
     margin-bottom: 6px;
     color: #444;
     font-weight: 500;
     font-size: 14px;
 }
 
 .otp-popup-input {
     width: 100%;
     padding: 14px 16px;
     border-radius: 8px;
     border: 1px solid #ddd;
     font-size: 15px;
     transition: all 0.2s ease;
     box-sizing: border-box;
 }
 
 .otp-popup-input:focus {
     outline: none;
     border-color: #0073e6;
     box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.1);
 }
 
 .otp-popup-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     border: none;
     padding: 14px;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     font-size: 15px;
     transition: all 0.2s ease;
     margin-top: 8px;
 }
 
 .otp-popup-btn:hover {
     transform: translateY(-1px);
 }
 
 .primary-btn {
     background: linear-gradient(135deg, #4a6bff 0%, #2541b2 100%);
     color: white;
 }
 
 .primary-btn:hover {
     background: linear-gradient(135deg, #2541b2 0%, #1a2d7a 100%);
 }
 
 .otp-verify-section {
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px dashed #e0e0e0;
     display: none;
 }
 
 .otp-msg {
     font-size: 14px;
     margin-top: 6px;
     padding: 6px 0;
     min-height: 20px;
 }
 
 .otp-msg.success {
     color: #28a745;
 }
 
 .otp-msg.error {
     color: #dc3545;
 }
 
 .otp-popup-close {
     background: none;
     border: none;
     color: #666;
     cursor: pointer;
     font-size: 14px;
     padding: 8px 16px;
     border-radius: 6px;
     transition: all 0.2s ease;
 }
 
 .otp-popup-close:hover {
     background: #f5f5f5;
     color: #333;
 }
 
 .btn-icon {
     font-size: 16px;
 }
 
 .btn-spinner {
     display: none;
 }
 
 @media (max-width: 480px) {
     .course-access-container {
         flex-direction: column;
     }
     
     .course-access-btn {
         width: 100%;
     }
     
     .otp-popup-container {
         width: 95%;
         margin: 20px;
     }
 }