/* ══════════════════════════════════════════════════════
   Tutor LMS — Complete Style Override
   Younis Bakeer Theme | Author: Bassam Elsawy
   bassamelsawy.com
══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────
   TOKENS (inherited from theme)
────────────────────────────────────── */
:root {
  --t-bg:       #0b0c0e;
  --t-bg2:      #111318;
  --t-bg3:      #16181f;
  --t-gold:     #c9a96e;
  --t-gold-lt:  #e8cc99;
  --t-gold-dk:  #8a6c3e;
  --t-cream:    #f5f0e8;
  --t-muted:    rgba(232,228,220,0.45);
  --t-border:   rgba(201,169,110,0.15);
  --t-green:    #4ade80;
  --t-radius:   12px;
  --t-trans:    0.25s ease;
}

/* ══════════════════════════════════════
   1. COURSES GRID WRAPPER
══════════════════════════════════════ */
.tutor-course-loop,
.tutor-courses-archive-wrap,
.tutor-courses-lists,
.tutor-course-grid,
.yb-tutor-wrap {
  background: transparent !important;
  padding: 0 !important;
}

/* Force 3-column grid on all Tutor wrappers */
.tutor-course-grid-view,
.tutor-courses-list-wrap,
.tutor-loop-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  .tutor-course-grid-view,
  .tutor-courses-list-wrap,
  .tutor-loop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .tutor-course-grid-view,
  .tutor-courses-list-wrap,
  .tutor-loop-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   2. INDIVIDUAL COURSE CARD
══════════════════════════════════════ */
.tutor-course-card,
.tutor-card,
.tutor-course-list .tutor-card,
.tutor-courses-lists .tutor-card {
  background: var(--t-bg) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  overflow: hidden !important;
  transition:
    border-color var(--t-trans),
    transform var(--t-trans),
    box-shadow var(--t-trans) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.tutor-course-card:hover,
.tutor-card:hover {
  border-color: rgba(201,169,110,0.5) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 52px rgba(0,0,0,0.45) !important;
}

/* ── THUMBNAIL ── */
.tutor-course-card .tutor-card-thumbnail,
.tutor-card .tutor-card-thumbnail,
.tutor-course-thumbnail {
  position: relative !important;
  overflow: hidden !important;
  height: 200px !important;
  background: linear-gradient(135deg, #16120a, #1e1810) !important;
  flex-shrink: 0 !important;
}

.tutor-course-card .tutor-card-thumbnail img,
.tutor-card .tutor-card-thumbnail img,
.tutor-course-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

.tutor-course-card:hover .tutor-card-thumbnail img,
.tutor-card:hover .tutor-card-thumbnail img {
  transform: scale(1.05) !important;
}

/* gradient overlay on thumbnail */
.tutor-course-card .tutor-card-thumbnail::after,
.tutor-card .tutor-card-thumbnail::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(11,12,14,0.7) 100%
  ) !important;
  pointer-events: none !important;
}

/* ── CATEGORY BADGE on thumbnail ── */
.tutor-course-card .tutor-card-thumbnail .tutor-course-categories,
.tutor-card .tutor-course-categories {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.tutor-course-card .tutor-course-category-tag,
.tutor-course-categories a,
.tutor-course-category {
  background: rgba(201,169,110,0.15) !important;
  border: 1px solid rgba(201,169,110,0.35) !important;
  color: var(--t-gold) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px) !important;
}

/* ── WISHLIST / BOOKMARK icon ── */
.tutor-card .tutor-wishlist-btn,
.tutor-course-wishlist {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(11,12,14,0.7) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t-muted) !important;
  font-size: 14px !important;
  transition: background var(--t-trans), color var(--t-trans) !important;
  cursor: pointer !important;
  backdrop-filter: blur(6px) !important;
}
.tutor-card .tutor-wishlist-btn:hover { background: var(--t-gold) !important; color: var(--t-bg) !important; }

/* ── CARD BODY ── */
.tutor-course-card .tutor-card-body,
.tutor-card .tutor-card-body {
  padding: 20px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background: var(--t-bg) !important;
}

/* ── AUTHOR ROW ── */
.tutor-card .tutor-card-author,
.tutor-course-author {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.tutor-card .tutor-card-author img,
.tutor-course-author img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1px solid var(--t-border) !important;
  object-fit: cover !important;
}

.tutor-card .tutor-card-author a,
.tutor-course-author a {
  font-size: 12px !important;
  color: var(--t-muted) !important;
  text-decoration: none !important;
  font-family: 'Tajawal', sans-serif !important;
  transition: color var(--t-trans) !important;
}
.tutor-card .tutor-card-author a:hover { color: var(--t-gold) !important; }

/* ── COURSE TITLE ── */
.tutor-card .tutor-card-title,
.tutor-course-name,
.tutor-card h3,
.tutor-card h2,
.tutor-card-title h3 {
  font-family: 'Amiri', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--t-cream) !important;
  margin-bottom: 10px !important;
}

.tutor-card .tutor-card-title a,
.tutor-course-name a {
  color: var(--t-cream) !important;
  text-decoration: none !important;
  transition: color var(--t-trans) !important;
}
.tutor-card .tutor-card-title a:hover,
.tutor-course-name a:hover { color: var(--t-gold) !important; }

/* ── COURSE DESCRIPTION ── */
.tutor-card .tutor-card-description,
.tutor-course-description {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--t-muted) !important;
  margin-bottom: 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── RATING ── */
.tutor-card .tutor-card-rating,
.tutor-ratings-overview,
.tutor-star-rating {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.tutor-card .tutor-star-icons,
.tutor-star-rating .tutor-star-icons {
  display: flex !important;
  gap: 2px !important;
}

.tutor-card .tutor-star-icons i,
.tutor-star-icons i,
.tutor-icon-star-full,
.tutor-icon-star-half {
  color: var(--t-gold) !important;
  font-size: 13px !important;
}

.tutor-icon-star-line { color: rgba(201,169,110,0.3) !important; font-size: 13px !important; }

.tutor-card .tutor-rating-count,
.tutor-rating-count {
  font-size: 12px !important;
  color: var(--t-muted) !important;
  font-family: 'DM Mono', monospace !important;
}

/* ── META ROW (lessons, students, duration) ── */
.tutor-card .tutor-course-meta,
.tutor-card .tutor-meta,
.tutor-course-stats {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--t-border) !important;
  margin-top: auto !important;
}

.tutor-card .tutor-meta-item,
.tutor-course-meta span,
.tutor-course-stat {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: var(--t-muted) !important;
  font-family: 'DM Mono', monospace !important;
}

.tutor-card .tutor-meta-item i,
.tutor-course-meta i {
  color: var(--t-gold-dk) !important;
  font-size: 13px !important;
}

/* ── CARD FOOTER (price + button) ── */
.tutor-card .tutor-card-footer,
.tutor-course-card-footer {
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid var(--t-border) !important;
  background: rgba(255,255,255,0.015) !important;
  margin-top: 0 !important;
}

/* ── PRICE ── */
.tutor-card .tutor-course-price,
.tutor-price-wrap,
.tutor-card-price {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.tutor-card .tutor-course-price .tutor-price,
.tutor-price-wrap .tutor-price,
.tutor-sale-price,
.tutor-price {
  font-family: 'Amiri', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--t-cream) !important;
  line-height: 1 !important;
}

/* Free badge */
.tutor-card .tutor-free,
.tutor-course-free,
.tutor-price.free {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--t-green) !important;
  background: rgba(74,222,128,0.12) !important;
  border: 1px solid rgba(74,222,128,0.25) !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
}

/* Original price crossed out */
.tutor-card .tutor-regular-price,
.tutor-regular-price,
.tutor-original-price {
  font-size: 13px !important;
  color: rgba(232,228,220,0.3) !important;
  text-decoration: line-through !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* ── ENROLL / VIEW BUTTON ── */
.tutor-card .tutor-btn,
.tutor-card .tutor-card-footer a,
.tutor-course-loop-btn,
.tutor-btn-primary,
.tutor-enroll-btn,
a.tutor-btn {
  background: var(--t-gold) !important;
  color: var(--t-bg) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  border-radius: 3px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background var(--t-trans), transform var(--t-trans) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tutor-card .tutor-btn:hover,
.tutor-card .tutor-card-footer a:hover,
.tutor-btn-primary:hover,
.tutor-enroll-btn:hover {
  background: var(--t-gold-lt) !important;
  color: var(--t-bg) !important;
  transform: translateY(-1px) !important;
}

/* ── LEVEL BADGE ── */
.tutor-card .tutor-course-level,
.tutor-course-level {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-muted) !important;
}

/* ══════════════════════════════════════
   3. FEATURED / SALE BADGE (ribbon)
══════════════════════════════════════ */
.tutor-card .tutor-badge,
.tutor-sale-badge,
.tutor-course-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  background: var(--t-gold) !important;
  color: var(--t-bg) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 3px !important;
}

/* ══════════════════════════════════════
   4. PROGRESS BAR (enrolled courses)
══════════════════════════════════════ */
.tutor-card .tutor-progress-bar,
.tutor-course-progress-bar {
  height: 4px !important;
  background: rgba(201,169,110,0.12) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 10px !important;
}

.tutor-card .tutor-progress-bar-fill,
.tutor-course-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--t-gold-dk), var(--t-gold)) !important;
  border-radius: 2px !important;
  transition: width 0.5s ease !important;
}

.tutor-card .tutor-progress-text,
.tutor-progress-text {
  font-size: 11px !important;
  color: var(--t-muted) !important;
  font-family: 'DM Mono', monospace !important;
  margin-top: 4px !important;
  text-align: left !important;
}

/* ══════════════════════════════════════
   5. PAGINATION
══════════════════════════════════════ */
.tutor-courses-pagination,
.tutor-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 48px !important;
}

.tutor-courses-pagination a,
.tutor-pagination a,
.tutor-courses-pagination span,
.tutor-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: 'DM Mono', monospace !important;
  color: var(--t-muted) !important;
  text-decoration: none !important;
  transition: all var(--t-trans) !important;
  background: var(--t-bg2) !important;
}

.tutor-courses-pagination a:hover,
.tutor-pagination a:hover {
  border-color: var(--t-gold) !important;
  color: var(--t-gold) !important;
  background: rgba(201,169,110,0.08) !important;
}

.tutor-courses-pagination .current,
.tutor-pagination .current,
.tutor-courses-pagination span.current {
  background: var(--t-gold) !important;
  color: var(--t-bg) !important;
  border-color: var(--t-gold) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════
   6. FILTER / SEARCH BAR
══════════════════════════════════════ */
.tutor-course-filter,
.tutor-courses-filter-wrap,
.tutor-filter-bar {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 32px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.tutor-course-filter input[type="text"],
.tutor-course-filter input[type="search"],
.tutor-filter-search {
  background: var(--t-bg) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  color: var(--t-text) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  padding: 9px 14px !important;
  flex: 1 !important;
  min-width: 200px !important;
  transition: border-color var(--t-trans) !important;
  outline: none !important;
}
.tutor-course-filter input:focus { border-color: var(--t-gold) !important; }

.tutor-course-filter select,
.tutor-filter-select {
  background: var(--t-bg) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  color: var(--t-muted) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  padding: 9px 14px !important;
  outline: none !important;
  cursor: pointer !important;
}

.tutor-course-filter button,
.tutor-filter-btn {
  background: var(--t-gold) !important;
  color: var(--t-bg) !important;
  border: none !important;
  border-radius: 3px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  font-family: 'Tajawal', sans-serif !important;
  transition: background var(--t-trans) !important;
}
.tutor-course-filter button:hover { background: var(--t-gold-lt) !important; }

/* ══════════════════════════════════════
   7. SINGLE COURSE PAGE
══════════════════════════════════════ */
.tutor-single-course-segment {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
  color: var(--t-text) !important;
}

.tutor-single-course-segment h2,
.tutor-single-course-segment h3,
.tutor-single-course-segment h4 {
  font-family: 'Amiri', serif !important;
  color: var(--t-cream) !important;
  margin-bottom: 16px !important;
}

/* Course sidebar card */
.tutor-course-sidebar-card {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  overflow: hidden !important;
}

.tutor-course-sidebar-card .tutor-btn {
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  padding: 14px !important;
  font-size: 16px !important;
}

/* Requirements / What you learn */
.tutor-course-requirement-list li,
.tutor-course-what-includes li {
  color: var(--t-muted) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 15px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--t-border) !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

.tutor-course-requirement-list li::before,
.tutor-course-what-includes li::before {
  content: '✓' !important;
  color: var(--t-gold) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Curriculum accordion */
.tutor-accordion-header {
  background: var(--t-bg3) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  color: var(--t-cream) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  transition: background var(--t-trans) !important;
}
.tutor-accordion-header:hover { background: rgba(201,169,110,0.07) !important; }

.tutor-accordion-body { background: var(--t-bg) !important; padding: 12px 18px !important; }

/* Lessons list */
.tutor-lesson-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--t-border) !important;
  color: var(--t-muted) !important;
  font-size: 14px !important;
  font-family: 'Tajawal', sans-serif !important;
}

.tutor-lesson-item i {
  color: var(--t-gold-dk) !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════
   8. EMPTY STATE
══════════════════════════════════════ */
.tutor-courses-no-found,
.tutor-no-courses-found {
  text-align: center !important;
  padding: 80px 40px !important;
  color: var(--t-muted) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 17px !important;
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
}

.tutor-courses-no-found::before {
  content: '☪' !important;
  display: block !important;
  font-size: 48px !important;
  color: rgba(201,169,110,0.2) !important;
  margin-bottom: 16px !important;
}

/* ══════════════════════════════════════
   9. LOADING SKELETON
══════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.tutor-skeleton {
  background: linear-gradient(
    90deg,
    var(--t-bg2) 25%,
    var(--t-bg3) 50%,
    var(--t-bg2) 75%
  ) !important;
  background-size: 468px 100% !important;
  animation: shimmer 1.4s infinite linear !important;
  border-radius: 4px !important;
}

/* ══════════════════════════════════════
   10. NOTIFICATIONS / ALERTS
══════════════════════════════════════ */
.tutor-alert,
.tutor-notification {
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.tutor-alert-success {
  background: rgba(74,222,128,0.1) !important;
  border: 1px solid rgba(74,222,128,0.25) !important;
  color: var(--t-green) !important;
}

.tutor-alert-warning {
  background: rgba(201,169,110,0.1) !important;
  border: 1px solid rgba(201,169,110,0.25) !important;
  color: var(--t-gold) !important;
}

.tutor-alert-danger {
  background: rgba(251,2,0,0.1) !important;
  border: 1px solid rgba(251,2,0,0.25) !important;
  color: #ff6b6b !important;
}

/* ══════════════════════════════════════
   11. MODAL (Tutor popup)
══════════════════════════════════════ */
.tutor-modal-overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(6px) !important;
}

.tutor-modal-content {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  color: var(--t-text) !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.5) !important;
}

.tutor-modal-header {
  border-bottom: 1px solid var(--t-border) !important;
  padding: 20px 24px !important;
}

.tutor-modal-header h3 {
  font-family: 'Amiri', serif !important;
  color: var(--t-cream) !important;
  font-size: 22px !important;
}

.tutor-modal-close {
  color: var(--t-muted) !important;
  background: var(--t-bg3) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--t-trans) !important;
}
.tutor-modal-close:hover { background: var(--t-gold) !important; color: var(--t-bg) !important; border-color: var(--t-gold) !important; }