/* ========= HERO ========= */
.hero-qbank{
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-md);
}

.hero-qbank h2{
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xs);
}

.hero-qbank p{
  font-size: var(--font-size-md);
  color: var(--color-primary-light);
}

.hero-qbank-actions{
  margin-top: var(--space-xs);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-qbank-btn{
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-fast);
}

.hero-qbank-btn.primary{
  background: var(--color-white);
  color: var(--color-primary);
}

.hero-qbank-btn.primary:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hero-qbank-btn.secondary{
  background: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.hero-qbank-btn.secondary:hover{
  background: rgba(255,255,255,0.15);
}


/* ========= QBANK LAYOUT ========= */
.qbank-section{
  background: var(--color-bg-section);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.class-group{
  margin-bottom: var(--space-lg);
}

.class-title{
  border-left: 5px solid var(--color-secondary);
  color: var(--color-heading);
  padding-left: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.subject-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}


/* ========= CARD ========= */
.subject-card{
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-fast);
}

.subject-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


/* ========= DROPDOWN ========= */
.dropdown{
  position: relative;
}

.dropbtn{
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md);
  border: none;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.dropbtn:hover{
  background: var(--color-primary-hover);
}

.dropdown-content{
  display: none;
  flex-direction: column;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: var(--space-sm);
}

.dropdown.active .dropdown-content{
  display: flex;
}

.dropdown-content a{
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.dropdown-content a:hover{
  background: var(--color-bg-light);
  color: var(--color-primary);
}

.resource-category{
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-xs) ;
  font-weight: var(--font-weight-medium);
}
/* ========= RESOURCE ITEM ========= */
.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: var(--space-xs) 0;
  padding: var(--space-xs) ;

  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

/* Hover effect */
.resource-item:hover {
  box-shadow: var(--shadow-md);
  background: var(--color-bg-light);
}

/* Resource name */
.resource-item span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Actions container */
.actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Buttons + Links */
.actions button,
.actions a {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);

  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;

  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;

  transition: var(--transition-fast);
}

/* 👁 View Button */
.viewPdf {
  background: var(--color-secondary);
  color: var(--color-text-white);
}

.viewPdf:hover {
  background: var(--color-secondary-hover);
}

/* ⬇ Download Button */
.downloadPdf {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.downloadPdf:hover {
  background: var(--color-primary-hover);
}


/* ========= FILTER CONTROLS ========= */
.qbank-controls{
  display: flex;
  gap: var(--space-md);
  margin: var(--space-md) 0;
  flex-wrap: wrap;
  justify-content: center;
}

.qbank-controls input,
.qbank-controls select{
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  min-width: 200px;
}

.qbank-controls input:focus,
.qbank-controls select:focus{
  outline: none;
  border-color: var(--color-primary);
}


/* ========= SEARCH DROPDOWN ========= */
.search-wrapper{
  position: relative;
  width: 250px;
}

.search-suggestions{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: var(--z-index-dropdown);
}

.search-suggestions.show{
  display: block;
}

.suggestion-item{
  padding: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}

.suggestion-item:hover{
  background: var(--color-bg-light);
  color: var(--color-primary);
}


/* ========= BUTTONS ========= */
.reset-btn{
  padding: var(--space-sm) var(--space-md);
  background: var(--color-border);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.reset-btn:hover{
  background: var(--color-primary-light);
  color: var(--color-primary);
}


/* ========= MODAL ========= */
.premium-modal{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.4);
  z-index: var(--z-index-modal);
}

.premium-modal.show{
  display: flex;
}

.premium-modal-box{
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  width: 320px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: premiumPop 0.35s ease;
}

@keyframes premiumPop{
  from{
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  to{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal-icon{
  font-size: 40px;
  margin-bottom: var(--space-sm);
}

.premium-modal-box h2{
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.premium-modal-box p{
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.suggestions{
  margin-bottom: var(--space-md);
}

.suggestions span{
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.suggestion-chip{
  background: var(--color-bg-light);
  border: none;
  padding: 6px 10px;
  margin: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: var(--transition-fast);
}

.suggestion-chip:hover{
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.modal-actions{
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.primary-btn{
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.primary-btn:hover{
  background: var(--color-primary-hover);
}

.secondary-btn{
  background: var(--color-border);
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* ========= PAYMENT MODAL ========= */

.payment-modal {
  position: fixed;
  inset: 0;

  display: none; /* 🔥 IMPORTANT */
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);

  z-index: 999;
}

.payment-modal.show {
  display: flex;
}

.modal-content {
  text-align: center;
  padding: 20px;
}

#paymentTitle {
  font-size: 20px;
  margin-bottom: 10px;
}

#paymentMessage {
  color: #666;
  margin-bottom: 15px;
}

#payNowBtn {
  background: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}