.section-bg {
   background: #f8f9fa;
   min-height: 80vh;
}

/* Category Header */
.category-header {
   background: white;
   padding: 3rem;
   border-radius: 20px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.category-image-banner {
   max-width: 600px;
   margin: 0 auto;
}

.category-image-banner img {
   max-height: 300px;
   object-fit: cover;
   width: 100%;
}

.category-title {
   color: #013b4b;
   font-weight: bold;
   font-size: 2.5rem;
   margin-bottom: 1rem;
}

.category-description {
   color: #ff9800;
   font-size: 1.1rem;
   font-weight: 500;
}

.category-description i {
   margin-left: 8px;
}

.category-price-badge {
   display: inline-block;
   background: linear-gradient(135deg, #013b4b, #026d8a);
   color: white;
   padding: 12px 30px;
   border-radius: 50px;
   font-size: 1.3rem;
   font-weight: bold;
   margin-top: 1rem;
   box-shadow: 0 4px 15px rgba(1, 59, 75, 0.3);
}

.category-price-badge i {
   margin-left: 8px;
}

/* Custom Alerts */
.alert-container {
   max-width: 800px;
   margin: 3rem auto;
}

.custom-alert {
   display: flex;
   align-items: center;
   gap: 2rem;
   padding: 3rem;
   border-radius: 20px;
   background: white;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   border: none;
}

.alert-icon {
   flex-shrink: 0;
}

.alert-icon i {
   font-size: 4rem;
}

.alert-warning .alert-icon i {
   color: #ffc107;
}

.alert-info .alert-icon i {
   color: #17a2b8;
}

.alert-secondary .alert-icon i {
   color: #6c757d;
}

.alert-content {
   flex: 1;
   text-align: right;
}

.warning-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.alert-content h3 {
   color: #013b4b;
   font-size: 1.8rem;
   font-weight: bold;
   margin-bottom: 1rem;
}

.alert-content p {
   color: #666;
   font-size: 1.1rem;
   margin-bottom: 1.5rem;
}

.alert-actions {
   display: flex;
   justify-content: center;
   gap: 3rem;
   flex-wrap: wrap;
   margin-top: 1rem;
}

/* Custom Buttons */
.btn-custom {
   padding: 12px 30px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 1rem;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: all 0.3s ease;
   border: none;
   text-decoration: none;
}

.btn-login {
   background: linear-gradient(135deg, #013b4b, #026d8a);
   color: white !important;
}

.btn-login:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(1, 59, 75, 0.3);
}

.btn-register {
   background: linear-gradient(135deg, #ff9800, #ff6f00);
   color: white !important;
}

.btn-register:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
}

.btn-join {
   background: linear-gradient(135deg, #4caf50, #45a049);
   color: white !important;
}

.btn-join:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-back {
   background: #6c757d;
   color: white !important;
}

.btn-back:hover {
   background: #5a6268;
   transform: translateY(-3px);
}

/* Buy All Button */
.btn-buy-all {
   background: linear-gradient(135deg, #ff9800, #f57c00);
   color: white;
   border: none;
   padding: 15px 40px;
   border-radius: 50px;
   font-size: 1.2rem;
   font-weight: bold;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   transition: all 0.3s ease;
   box-shadow: 0 5px 20px rgba(255, 152, 0, 0.3);
}

.btn-buy-all:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
}

.btn-buy-all .badge-count {
   background: rgba(255, 255, 255, 0.3);
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 0.9rem;
}

/* Course Card */
.course-card {
   background: white;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.course-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.course-image {
   position: relative;
   height: 220px;
   overflow: hidden;
}

.course-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.course-card:hover .course-image img {
   transform: scale(1.1);
}

.course-badge {
   position: absolute;
   top: 15px;
   right: 15px;
}

.badge-free {
   background: #4caf50;
   color: white;
   padding: 8px 20px;
   border-radius: 20px;
   font-weight: bold;
   font-size: 0.9rem;
}

.badge-paid {
   background: linear-gradient(135deg, #ff9800, #f57c00);
   color: white;
   padding: 8px 20px;
   border-radius: 20px;
   font-weight: bold;
   font-size: 0.9rem;
}

.course-body {
   padding: 1.5rem;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.course-title {
   color: #013b4b;
   font-size: 1.3rem;
   font-weight: bold;
   margin-bottom: 1rem;
}

.course-description {
   color: #666;
   font-size: 0.95rem;
   margin-bottom: 1rem;
   flex: 1;
}

.course-meta {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid #eee;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 5px;
   color: #666;
   font-size: 0.9rem;
}

.meta-item i {
   color: #ff9800;
   font-size: 1rem;
}

.btn-course {
   background: linear-gradient(135deg, #013b4b, #026d8a);
   color: white !important;
   border: none;
   border-radius: 50px;
   padding: 12px 25px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all 0.3s ease;
   text-decoration: none;
   margin-top: auto;
}

.btn-course:hover {
   background: linear-gradient(135deg, #026d8a, #013b4b);
   transform: translateX(-5px);
   box-shadow: 0 5px 15px rgba(1, 59, 75, 0.3);
}

.btn-course i {
   transition: transform 0.3s ease;
}

.btn-course:hover i {
   transform: translateX(-5px);
}

/* Responsive */
@media (max-width: 768px) {
   .category-title {
      font-size: 2rem;
   }

   .custom-alert {
      flex-direction: column;
      padding: 2rem;
      text-align: center;
   }

   .alert-content {
      text-align: center;
   }

   .alert-actions {
      justify-content: center;
   }

   .alert-icon i {
      font-size: 3rem;
   }

   .btn-buy-all {
      font-size: 1rem;
      padding: 12px 30px;
   }
}

.purchase-modal {
   padding: 20px;
}

.swal2-container {
   z-index: 90002 !important;
}

.purchase-option {
   border: 2px solid #e0e0e0;
   border-radius: 12px;
   padding: 25px;
   margin-bottom: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
}

.purchase-option:hover {
   border-color: #007bff;
   background-color: #f8f9fa;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.purchase-option.selected {
   border-color: #007bff;
   background-color: #e7f3ff;
}

.purchase-option i {
   font-size: 3rem;
   margin-bottom: 15px;
   color: #007bff;
}

.purchase-option h5 {
   margin-bottom: 10px;
   font-weight: bold;
   color: #333;
}

.purchase-option p {
   color: #666;
   margin: 0;
   font-size: 0.9rem;
}

.wallet-balance {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 15px;
   border-radius: 10px;
   margin-bottom: 20px;
   text-align: center;
}

.wallet-balance .balance-amount {
   font-size: 1.8rem;
   font-weight: bold;
   margin: 10px 0;
}

.swal2-popup {
   font-family: 'Cairo', sans-serif !important;
}
/* Purchase Modal Styles */
.purchase-modal {
    text-align: center;
}

.wallet-balance {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
}

.wallet-balance i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.balance-amount {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 5px;
}

.purchase-option {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 20px;
    margin: 10px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.purchase-option:hover {
    background: #e9ecef;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.purchase-option.selected {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.purchase-option h5 {
    margin-bottom: 5px;
    font-weight: bold;
}

.purchase-option p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}