/* ================================================
   ALMADANI THEME — Auth, Courses & Dashboard CSS
   Extends the main design system (dark + cyan)
   ================================================ */

/* ─── AUTH PAGES (Login / Register) ───────────────── */
.alm-auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem 1rem;
  background: var(--bg-color);
}

.alm-auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.alm-auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  background: rgba(10, 15, 25, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.alm-auth-logo {
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #fff;
}

.alm-auth-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 0.4rem;
  background: linear-gradient(135deg, #fff 60%, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.alm-auth-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.alm-auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Form fields */
.alm-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.alm-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.alm-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alm-field-input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--font-en);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.alm-field-input:focus {
  border-color: var(--accent-cyan);
  background: rgba(14, 210, 247, 0.04);
}
.alm-field-input::placeholder {
  color: rgba(255,255,255,0.25);
}

.alm-field-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.alm-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alm-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.alm-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-cyan);
}

.alm-link {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.alm-link:hover { color: var(--accent-cyan); }

.alm-link-accent {
  color: var(--accent-cyan);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
}

/* Submit button */
.alm-btn-submit {
  width: 100%;
  padding: 0.9rem;
  background: var(--accent-cyan);
  color: #06090f;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.alm-btn-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.alm-btn-submit:active {
  transform: scale(0.98);
}
.alm-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner */
.alm-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(6, 9, 15, 0.2);
  border-top-color: #06090f;
  border-radius: 50%;
  animation: alm-spin 0.6s linear infinite;
}
@keyframes alm-spin {
  to { transform: rotate(360deg); }
}

.alm-auth-footer {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}


/* ─── PAGE LAYOUT ─────────────────────────────────── */
.alm-page {
  min-height: 100dvh;
  background: var(--bg-color);
  position: relative;
  padding-bottom: 4rem;
}

.alm-page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.alm-page-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 8rem 1.5rem 3rem;
  max-width: 700px;
  margin: 0 auto;
}

.alm-page-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff 60%, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.alm-page-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
}


/* ─── COURSE GRID ─────────────────────────────────── */
.alm-course-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  padding: 0 2rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .alm-course-grid {
    grid-template-columns: 1fr;
    padding: 0 1.25rem 3rem;
    gap: 1.5rem;
  }
}

.alm-course-card {
  background: rgba(13, 20, 32, 0.6);
  border: 1px solid transparent !important;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.alm-course-card:hover {
  border-color: var(--accent-cyan) !important;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 242, 254, 0.15);
}

.alm-course-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.alm-course-card-img-w {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: none !important;
}
.alm-course-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.alm-course-card:hover .alm-course-card-img {
  transform: scale(1.04);
}

.alm-course-free-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #10b981;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.alm-course-card-body {
  padding: 1.5rem;
}

.alm-course-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  transition: color 0.25s;
}
.alm-course-card:hover .alm-course-card-title {
  color: var(--accent-cyan);
}

.alm-course-card-excerpt {
  font-size: 0.85rem;
  color: #ffffff; /* Same high legibility white */
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.alm-course-card-meta {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.alm-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #ffffff; /* Same high legibility white */
  font-weight: 500;
}
.alm-meta-item svg {
  color: var(--accent-cyan);
  flex-shrink: 0;
}

.alm-course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: none !important;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.alm-course-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
}
.alm-course-price.free {
  color: #10b981;
}

.alm-course-cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: #06090f;
  background: var(--accent-cyan);
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 242, 254, 0.2);
}
.alm-course-card:hover .alm-course-cta {
  background: #ffffff;
  color: #06090f;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Empty state */
.alm-empty-state {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 5rem 2rem;
}
.alm-empty-state h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.alm-empty-state p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Footer links */
.alm-footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.alm-footer-links a {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.2s;
}
.alm-footer-links a:hover {
  color: var(--accent-cyan);
}


/* ─── RTL SUPPORT ──────────────────────────────────── */
[lang="ar"] .alm-auth-card,
[lang="ar"] .alm-auth-form,
[lang="ar"] .alm-field {
  direction: rtl;
  text-align: right;
}

[lang="ar"] .alm-field-input {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar) !important;
}

[lang="ar"] .alm-course-cta {
  direction: rtl;
}

/* ─── HEADER LOGIN CTA BUTTON ───────────────────────── */
.nav-btn {
  border: 1px solid var(--accent-cyan) !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  background: rgba(0, 242, 254, 0.04) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.1) !important;
  transition: all 0.3s ease !important;
}
.nav-btn:hover {
  background: var(--accent-cyan) !important;
  color: #06090f !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important;
}


/* ─── TUTOR LMS STUDENT DASHBOARD PREMIUM OVERRIDES ───────────────── */
/* Force readable text colors in Tutor LMS dashboard */
.tutor-dashboard,
.tutor-dashboard-content,
.tutor-dashboard-body,
.tutor-dashboard-single-item,
.tutor-dashboard-left-menu {
  color: #cbd5e1 !important; /* Readable light gray body text */
}

.tutor-dashboard h1,
.tutor-dashboard h2,
.tutor-dashboard h3,
.tutor-dashboard h4,
.tutor-dashboard h5,
.tutor-dashboard h6,
.tutor-dashboard-title,
.tutor-segment-title,
.tutor-dashboard-header-h1 {
  color: #ffffff !important; /* Stark white headings */
}

/* Sidebar & Mobile Navigation Menu Overrides */
.tutor-dashboard-menu ul li a,
.tutor-dashboard-left-menu ul li a,
.tutor-dashboard-menu-item,
.tutor-dashboard-menu-item-link,
.tutor-dashboard-left-menu li a,
.tutor-dashboard-menu li a,
.tutor-dashboard-left-menu-item a {
  color: #cbd5e1 !important; /* Clear slate gray text labels */
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar & Mobile Navigation Menu Item Hover State */
.tutor-dashboard-menu ul li a:hover,
.tutor-dashboard-left-menu ul li a:hover,
.tutor-dashboard-menu-item:hover,
.tutor-dashboard-menu-item-link:hover,
.tutor-dashboard-left-menu li a:hover,
.tutor-dashboard-menu li a:hover,
.tutor-dashboard-left-menu-item a:hover {
  color: var(--accent-cyan) !important; /* Glowing cyan hover */
  background: rgba(0, 242, 254, 0.06) !important;
  padding-left: 0.5rem !important;
}

/* Sidebar & Mobile Navigation Menu Item Active State */
.tutor-dashboard-menu ul li.active a,
.tutor-dashboard-menu ul li.tutor-dashboard-menu-item-active a,
.tutor-dashboard-menu-item.active,
.tutor-dashboard-menu-item.is-active,
.tutor-dashboard-menu-item-active,
.tutor-dashboard-left-menu li.active a,
.tutor-dashboard-left-menu li.is-active a,
.tutor-dashboard-left-menu-item.is-active a {
  color: #ffffff !important;
  background: var(--accent-cyan) !important; /* Premium Cyan Background for active item */
  font-weight: 700 !important;
}

/* Sidebar navigation icon colors */
.tutor-dashboard-menu ul li a i,
.tutor-dashboard-menu ul li a svg,
.tutor-dashboard-menu ul li a span,
.tutor-dashboard-left-menu li a i,
.tutor-dashboard-left-menu li a svg,
.tutor-dashboard-left-menu-item a i,
.tutor-dashboard-left-menu-item a svg {
  color: var(--accent-cyan) !important; /* Make icons pop with bright cyan */
}

/* Active navigation item icon & text color must be white for high contrast */
.tutor-dashboard-menu ul li.active a span,
.tutor-dashboard-menu ul li.active a i,
.tutor-dashboard-menu ul li.active a svg,
.tutor-dashboard-menu ul li.tutor-dashboard-menu-item-active a span,
.tutor-dashboard-menu ul li.tutor-dashboard-menu-item-active a i,
.tutor-dashboard-menu ul li.tutor-dashboard-menu-item-active a svg,
.tutor-dashboard-left-menu-item.is-active a i,
.tutor-dashboard-left-menu-item.is-active a span,
.tutor-dashboard-left-menu-item.is-active a svg {
  color: #06090f !important; /* Dark text/icon over cyan background */
}

/* Divider lines in dashboard */
.tutor-dashboard-menu-divider,
.tutor-dashboard-left-menu-divider,
.tutor-dashboard-menu-items-group::before {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tutor LMS Forms, Inputs, Dropdowns in Dashboard */
.tutor-form-control,
.tutor-input-control,
.tutor-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
.tutor-form-control:focus,
.tutor-input-control:focus {
  border-color: var(--accent-cyan) !important;
  background-color: rgba(14, 210, 247, 0.04) !important;
}

/* Tutor LMS Tables (Grades, Quiz attempts, Orders) */
.tutor-table,
.tutor-dashboard-table {
  background-color: rgba(13, 20, 32, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.tutor-table th,
.tutor-dashboard-table th {
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.tutor-table td,
.tutor-dashboard-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important;
}

/* Quiz result / success badges */
.tutor-badge {
  background-color: rgba(0, 242, 254, 0.1) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid rgba(0, 242, 254, 0.2) !important;
}


/* ─── GLOBAL TUTOR LMS DARK MODE OVERRIDES (Curriculum, Course Pages, Lesson Player) ─── */
/* Force Tutor LMS CSS Variables to match the theme */
:root, body, .tutor-wrap {
  --tutor-color-bg-white: rgba(13, 20, 32, 0.75) !important;
  --tutor-color-bg-light: rgba(13, 20, 32, 0.75) !important;
  --tutor-color-bg-page: #06090f !important;
  --tutor-color-text-black: #ffffff !important;
  --tutor-color-text-muted: #ffffff !important;
  --tutor-color-text-primary: #ffffff !important;
  --tutor-color-text-secondary: #ffffff !important;
  --tutor-color-text-hint: #ffffff !important;
  --tutor-color-border: transparent !important;
  --tutor-color-border-muted: transparent !important;
  --tutor-color-white: #ffffff !important;
  --tutor-color-black: #ffffff !important;
}

/* Overrides for Tutor LMS White and Light Background Utility & Card Classes */
.tutor-bg-white,
.tutor-bg-white-80,
.tutor-bg-white-90,
.tutor-color-bg-white,
.tutor-bg-light,
.tutor-bg-light-blue,
.tutor-color-bg-light,
.tutor-card,
.tutor-card-body,
.tutor-course-status-card,
.tutor-course-status,
.tutor-course-progress-box,
.tutor-sidebar-card,
.tutor-single-course-sidebar .tutor-card,
.tutor-card.tutor-bg-white,
.tutor-card.tutor-bg-light,
.tutor-card[class*="tutor-bg-white"],
.tutor-card[class*="tutor-bg-light"],
[class*="tutor-bg-white"],
[class*="tutor-color-bg-white"],
[class*="tutor-bg-light"],
[class*="tutor-color-bg-light"] {
  background: rgba(13, 20, 32, 0.75) !important;
  background-color: rgba(13, 20, 32, 0.75) !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Overrides for Tutor LMS Black/Dark/Muted Text Utility Classes & Links */
.tutor-wrap,
.tutor-container,
.tutor-card,
.tutor-single-course-sidebar,
.tutor-course-single,
.tutor-course-status-card,
.tutor-instructor-card,
.tutor-course-author-box,
.tutor-course-author-card,
.tutor-single-course-author-meta,
.tutor-meta-value,
.tutor-meta-key,
.tutor-color-text-muted,
.tutor-color-text-secondary,
.tutor-color-text-primary,
.tutor-color-text-hint,
.tutor-color-text-black,
.tutor-color-muted,
.tutor-text-muted,
[class*="tutor-color-text-"],
[class*="tutor-text-"],
[class*="tutor-color-muted"],
[class*="tutor-text-muted"],
.tutor-meta-item,
.tutor-color-black,
.tutor-color-text-black,
.tutor-text-black,
[class*="tutor-color-black"],
[class*="tutor-text-black"] {
  color: #ffffff !important;
}

/* Force links inside Tutor LMS to be white */
.tutor-wrap a,
.tutor-container a,
.tutor-card a,
.tutor-single-course-sidebar a,
.tutor-course-single a,
.tutor-course-status-card a,
.tutor-instructor-card a,
.tutor-course-author-box a,
.tutor-course-author-card a,
.tutor-single-course-author-meta a,
.tutor-meta-value a,
[class*="tutor-"] a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.tutor-wrap a:hover,
.tutor-container a:hover,
.tutor-card a:hover,
.tutor-single-course-sidebar a:hover,
.tutor-course-single a:hover,
[class*="tutor-"] a:hover {
  color: var(--accent-cyan) !important;
}

/* Re-assert dark text color for primary buttons for contrast */
.tutor-btn,
.tutor-button,
.tutor-btn-primary,
.tutor-course-compulsary-enroll-btn,
.tutor-course-enroll-btn,
.tutor-btn-primary *,
.tutor-course-compulsary-enroll-btn *,
.tutor-course-enroll-btn * {
  color: #06090f !important;
}

.tutor-btn:hover,
.tutor-button:hover,
.tutor-btn-primary:hover,
.tutor-course-compulsary-enroll-btn:hover,
.tutor-course-enroll-btn:hover,
.tutor-btn-primary:hover *,
.tutor-course-compulsary-enroll-btn:hover *,
.tutor-course-enroll-btn:hover * {
  color: #06090f !important;
}

/* Outline buttons text color is cyan */
.tutor-btn-outline-primary,
.tutor-btn-outline,
.tutor-btn-outline-primary *,
.tutor-btn-outline * {
  color: var(--accent-cyan) !important;
}
.tutor-btn-outline-primary:hover,
.tutor-btn-outline:hover,
.tutor-btn-outline-primary:hover *,
.tutor-btn-outline:hover * {
  color: #06090f !important;
}

/* Global Tutor elements readable colors */
.tutor-wrap, 
.tutor-container,
.tutor-course-single,
.tutor-course-single-sidebar,
.tutor-course-topics-list,
.tutor-course-player,
.tutor-course-lesson,
.tutor-single-course-meta,
.tutor-course-benefits,
.tutor-course-target-audience,
.tutor-course-requirements {
  color: #ffffff !important; /* Readable light gray globally */
}

/* Headings in Tutor Pages */
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3, .tutor-wrap h4, .tutor-wrap h5, .tutor-wrap h6,
.tutor-container h1, .tutor-container h2, .tutor-container h3, .tutor-container h4, .tutor-container h5, .tutor-container h6,
.tutor-course-title, .tutor-segment-title, .tutor-topic-title, .tutor-course-single-title {
  color: #ffffff !important; /* Stark white headers */
}

/* Accordion Topics / Syllabus curriculum headers */
.tutor-accordion-item-header,
.tutor-course-title-wrap,
.tutor-course-topics-header,
.tutor-course-topics-list .tutor-accordion-item-header {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  color: #ffffff !important;
}

.tutor-accordion-item-header:hover {
  background-color: rgba(0, 242, 254, 0.04) !important;
}

.tutor-accordion-item-header .tutor-icon,
.tutor-accordion-item-header span {
  color: #ffffff !important;
}

/* Course Curriculum Topic details / Lectures list */
.tutor-course-topics-list .tutor-accordion-item-body,
.tutor-accordion-item-body {
  background-color: rgba(6, 9, 15, 0.4) !important;
  border: none !important;
}

.tutor-course-topics-list .tutor-accordion-item-body a,
.tutor-accordion-item-body li a,
.tutor-course-lesson-item a {
  color: #ffffff !important; /* Slate grey readable text */
  transition: all 0.25s ease !important;
}

.tutor-course-topics-list .tutor-accordion-item-body a:hover,
.tutor-accordion-item-body li a:hover,
.tutor-course-lesson-item a:hover {
  color: var(--accent-cyan) !important;
}

/* Lesson play icons in curriculum */
.tutor-course-topics-list .tutor-accordion-item-body svg,
.tutor-accordion-item-body li svg,
.tutor-course-lesson-item svg {
  color: var(--accent-cyan) !important;
}

/* Enroll box / Cart block in single course sidebar */
.tutor-course-enroll-box,
.tutor-single-course-sidebar,
.tutor-price-preview-box {
  background-color: rgba(13, 20, 32, 0.75) !important;
  border: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Single course sidebar price text */
.tutor-course-sidebar-price,
.tutor-price-preview,
.tutor-price-preview .price {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Enroll / Add to cart buttons styling overrides */
.tutor-btn,
.tutor-button,
.tutor-btn-primary,
.tutor-course-compulsary-enroll-btn,
.tutor-course-enroll-btn {
  background-color: var(--accent-cyan) !important;
  color: #06090f !important; /* Dark text on bright button */
  font-weight: 700 !important;
  border-radius: 30px !important;
  border: none !important;
  padding: 12px 28px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.25) !important;
  text-align: center !important;
  display: inline-block !important;
}

.tutor-btn:hover,
.tutor-button:hover,
.tutor-btn-primary:hover,
.tutor-course-compulsary-enroll-btn:hover,
.tutor-course-enroll-btn:hover {
  background-color: #ffffff !important;
  color: #06090f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

/* Secondary outline buttons */
.tutor-btn-outline-primary,
.tutor-btn-outline {
  border: 1px solid var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  background-color: transparent !important;
  border-radius: 30px !important;
}

.tutor-btn-outline-primary:hover,
.tutor-btn-outline:hover {
  background-color: var(--accent-cyan) !important;
  color: #06090f !important;
}

/* Course metadata details (instructor, duration, level, categories) */
.tutor-meta-value,
.tutor-single-course-meta,
.tutor-single-course-meta *,
.tutor-course-meta-detail,
.tutor-course-meta-detail *,
.tutor-course-sidebar-meta,
.tutor-course-sidebar-meta *,
.tutor-course-metadata,
.tutor-course-metadata *,
.tutor-course-metadata-item,
.tutor-course-metadata-item *,
.tutor-single-course-meta ul li,
.tutor-single-course-meta-list li,
.tutor-single-course-meta-list li * {
  color: #ffffff !important; /* Stark crisp readable white-gray */
}

.tutor-meta-key,
.tutor-meta-label,
.tutor-single-course-meta-list label,
.tutor-course-metadata-item label {
  color: #ffffff !important; /* Faint key label text */
}

/* Tabs Navigation in single course details page */
html body .tutor-course-details-tab {
    background: rgba(10, 16, 28, 0.85) !important;
    background-color: rgba(10, 16, 28, 0.85) !important;
    border: none !important;
    border-width: 0 !important;
    border-radius: 14px !important;
    padding: 25px 30px !important;
    box-shadow: none !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* Force backgrounds of navigation bar and all utility background/border containers to be transparent */
html body .tutor-course-details-tab .tutor-nav,
html body .tutor-course-details-tab .tutor-tabs,
html body .tutor-course-details-tab .tutor-nav-line,
html body .tutor-course-details-tab .tutor-nav-pills,
html body .tutor-course-details-tab .tutor-nav-tabs,
html body .tutor-course-details-tab .tutor-segment-tab,
html body .tutor-course-details-tab .tutor-course-details-tab-nav,
html body .tutor-course-details-tab [class*="tutor-bg-"],
html body .tutor-course-details-tab [class*="tutor-border-"],
html body .tutor-course-details-tab nav,
html body .tutor-course-details-tab ul,
html body .tutor-course-details-tab li,
html body .tutor-course-nav,
html body .tutor-course-nav-items,
html body .tutor-nav,
html body .tutor-nav-line,
html body .tutor-nav-pills,
html body .tutor-nav-tabs,
html body .tutor-segment-tab,
html body nav.tutor-nav,
html body .tutor-tabs,
html body .tutor-tabs-container,
html body [class*="tutor-bg-mute"],
html body [class*="tutor-bg-light"],
html body [class*="tutor-bg-white"],
html body [class*="tutor-bg-gray"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Prevent responsive tab collapse / force all tab links to be visible */
html body .tutor-course-details-tab .tutor-nav-item.tutor-d-none,
html body .tutor-course-details-tab .tutor-nav-link.tutor-d-none,
html body .tutor-course-details-tab .tutor-segment-tab-item.tutor-d-none,
html body .tutor-course-details-tab li.tutor-d-none,
html body .tutor-course-details-tab a.tutor-d-none,
html body .tutor-course-details-tab .tutor-d-none {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide the "More" / responsive dropdown menu tab entirely */
html body .tutor-course-details-tab .tutor-nav-more,
html body .tutor-course-details-tab .tutor-nav-item-more,
html body .tutor-course-details-tab [class*="-more"],
html body .tutor-course-details-tab .tutor-dropdown,
html body .tutor-course-details-tab .tutor-dropdown-toggle {
    display: none !important;
}

/* Non-active tab items text styling - make them larger, pure white, with high opacity for readability */
html body .tutor-course-details-tab .tutor-nav-link,
html body .tutor-course-details-tab .nav-link,
html body .tutor-course-details-tab .tutor-nav-item,
html body .tutor-course-details-tab .tutor-segment-tab-item,
html body .tutor-course-nav-item a,
html body .tutor-tabs-btn,
html body .tutor-tabs-link,
html body .tutor-tabs-btn span,
html body .tutor-course-nav-item span,
html body .tutor-nav-item,
html body .tutor-nav-link,
html body .tutor-segment-tab-item {
    color: rgba(255, 255, 255, 0.85) !important; /* Extremely clear white-gray */
    font-weight: 700 !important;
    font-size: 16px !important; /* Larger readable size */
    padding: 10px 20px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
}

/* Active tab items styling - pure white and fully visible */
html body .tutor-course-details-tab .tutor-nav-link.active,
html body .tutor-course-details-tab .nav-link.active,
html body .tutor-course-details-tab .tutor-nav-item.active,
html body .tutor-course-details-tab .tutor-nav-item.is-active,
html body .tutor-course-details-tab .tutor-segment-tab-item.active,
html body .tutor-course-details-tab .tutor-segment-tab-item.is-active,
html body .tutor-course-nav-item.active a,
html body .tutor-course-nav-item.is-active a,
html body .tutor-tabs-btn.active,
html body .tutor-tabs-btn.is-active,
html body .tutor-tabs-btn.active span,
html body .tutor-tabs-btn.is-active span,
html body .tutor-course-nav-item.active span,
html body .tutor-nav-item.active,
html body .tutor-nav-item.is-active,
html body .tutor-nav-link.active,
html body .tutor-nav-link.is-active,
html body .tutor-segment-tab-item.active,
html body .tutor-segment-tab-item.is-active {
    color: #ffffff !important; /* Solid crisp white */
    font-weight: 800 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #ffffff !important; /* Crisp white line under active tab */
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
}

/* Hover state styling */
html body .tutor-course-details-tab .tutor-nav-link:hover,
html body .tutor-course-details-tab .nav-link:hover,
html body .tutor-course-details-tab .tutor-nav-item:hover,
html body .tutor-course-details-tab .tutor-segment-tab-item:hover,
html body .tutor-course-nav-item a:hover,
html body .tutor-tabs-btn:hover,
html body .tutor-nav-item:hover,
html body .tutor-nav-link:hover,
html body .tutor-segment-tab-item:hover {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}



/* ═══════════════════════════════════════════════════════
   TUTOR LMS — CONFIRMED CLASS NAMES (via browser inspector)
   ═══════════════════════════════════════════════════════ */

/* ① Hide instructor/author white card — exact class confirmed via inspector */
.tutor-course-details-instructors {
  display: none !important;
}

/* ② Hide "Total Enrolled" metadata row — target by icon class inside the li */
.tutor-single-course-meta-list li:has(.tutor-icon-graduation-cap),
.tutor-single-course-meta-list li:has(.tutor-icon-person),
.tutor-single-course-meta-list li:has(.tutor-icon-people),
.tutor-single-course-meta-list li:has(.tutor-icon-user),
.tutor-single-course-meta-list li:has(.tutor-icon-user-line),
.tutor-single-course-meta-list li:has(.tutor-icon-academic-cap),
.tutor-single-course-meta-list li:has(.tutor-icon-student),
.tutor-meta-item:has(.tutor-icon-graduation-cap),
.tutor-meta-item:has(.tutor-icon-person),
.tutor-meta-item:has(.tutor-icon-people),
.tutor-single-course-meta-enrolled,
.tutor-course-enrolled-count {
  display: none !important;
}

/* ③ Brighten metadata text (All Levels, Last Updated) */
.tutor-single-course-meta-list li,
.tutor-single-course-meta-list li *,
.tutor-meta-item,
.tutor-meta-item *,
.tutor-meta-value,
.tutor-meta-key,
.tutor-course-metadata-item,
.tutor-course-metadata-item * {
  color: #f1f5f9 !important;
  opacity: 1 !important;
}


/* About course summary text legibility */
.tutor-course-summery,
.tutor-course-summery *,
.tutor-course-details-content,
.tutor-course-details-content *,
.tutor-course-content-wrap,
.tutor-course-content-wrap *,
.tutor-course-about-content,
.tutor-course-about-content *,
.tutor-course-target-audience-items,
.tutor-course-target-audience-items *,
.tutor-course-requirements-items,
.tutor-course-requirements-items * {
  color: #ffffff !important;
  line-height: 1.8 !important;
}

/* Lesson Player / Learning Screen Overrides */
.tutor-course-player-sidebar,
.tutor-lesson-sidebar {
  background-color: #0d1420 !important;
  border-right: none !important;
}

.tutor-course-player-sidebar-title,
.tutor-lesson-sidebar-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.tutor-lesson-list-item,
.tutor-course-player-lesson-item {
  border-bottom: none !important;
}

.tutor-lesson-list-item.active,
.tutor-course-player-lesson-item.active {
  background-color: rgba(0, 242, 254, 0.06) !important;
  border-left: 3px solid var(--accent-cyan) !important;
}

.tutor-lesson-list-item.active a,
.tutor-course-player-lesson-item.active a {
  color: #ffffff !important;
  font-weight: 700 !important;
}


/* ─── DASHBOARD INNER TAB & AVATAR NAME DARK MODE OVERRIDES ───────── */
/* Dashboard header hello text legibility (Fixes dark text in avatar area) */
.tutor-dashboard-header-info-name,
.tutor-dashboard-header-display-name,
.tutor-dashboard-header-username,
.tutor-dashboard-header-info-name *,
.tutor-dashboard-header-display-name *,
.tutor-dashboard-header-username *,
.tutor-dashboard-header-header h3,
.tutor-dashboard-header-header h3 *,
.tutor-dashboard-header-header p,
.tutor-dashboard-header-header p * {
  color: #ffffff !important; /* Stark white */
}

.tutor-dashboard-header-stats-item,
.tutor-dashboard-header-stats-item *,
.tutor-dashboard-header-stats-item-value,
.tutor-dashboard-header-stats-item-title {
  color: #ffffff !important;
}

/* Global inner pages content readability */
.tutor-dashboard-content,
.tutor-dashboard-content *,
.tutor-dashboard-inner,
.tutor-dashboard-inner * {
  color: #ffffff; /* Base white for maximum legibility */
}

.tutor-dashboard-content h1,
.tutor-dashboard-content h2,
.tutor-dashboard-content h3,
.tutor-dashboard-content h4,
.tutor-dashboard-content h5,
.tutor-dashboard-content h6,
.tutor-dashboard-content h1 *,
.tutor-dashboard-content h2 *,
.tutor-dashboard-content h3 *,
.tutor-dashboard-content h4 * {
  color: #ffffff !important; /* Stark white titles inside all tabs */
}

/* Question & Answer Tab */
.tutor-question-wrap,
.tutor-question-wrap *,
.tutor-question-title,
.tutor-question-text,
.tutor-question-meta,
.tutor-question-meta *,
.tutor-qna-reply-wrap,
.tutor-qna-reply-wrap * {
  color: #ffffff !important;
}
.tutor-question-title,
.tutor-question-title * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Settings Forms & Profile editing fields */
.tutor-dashboard-setting-title,
.tutor-dashboard-settings-title,
.tutor-dashboard-settings-label,
.tutor-dashboard-setting-label,
.tutor-dashboard-settings-field,
.tutor-dashboard-settings-field *,
.tutor-dashboard-settings-label *,
.tutor-dashboard-setting-label *,
.tutor-dashboard-settings-value,
.tutor-dashboard-settings-value * {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.tutor-dashboard-settings-desc,
.tutor-dashboard-settings-help,
.tutor-dashboard-settings-help *,
.tutor-dashboard-settings-desc * {
  color: #ffffff !important; /* White help text */
}

/* Inner cards (like Course Cards in Enrolled Courses tab) */
.tutor-dashboard-course-card,
.tutor-dashboard-course-card *,
.tutor-course-loop-title,
.tutor-course-loop-title * {
  color: #ffffff !important;
}
.tutor-course-loop-title,
.tutor-course-loop-title a {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.tutor-course-loop-title a:hover {
  color: var(--accent-cyan) !important;
}


/* ==========================================================================
   TUTOR LMS DASHBOARD STATS & COURSE CARDS - PREMIUM DARK GLASSMORPHISM OVERRIDES
   ========================================================================== */

/* 1. Dashboard Stats Cards - Force Dark Theme & Fix Legibility */
.tutor-dashboard-info-card,
.tutor-dashboard-stat-card,
.tutor-dashboard-stats-card,
.tutor-dashboard-single-stat,
.tutor-dashboard-stats-item,
.tutor-dashboard-header-stats-item,
.tutor-card,
.tutor-card-has-border {
  background-color: rgba(13, 20, 32, 0.7) !important;
  background: rgba(13, 20, 32, 0.7) !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 32px 24px !important;
}

/* Hover effect on stats cards */
.tutor-dashboard-info-card:hover,
.tutor-dashboard-stat-card:hover,
.tutor-dashboard-stats-card:hover,
.tutor-dashboard-single-stat:hover,
.tutor-dashboard-stats-item:hover,
.tutor-card:hover,
.tutor-card-has-border:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0, 242, 254, 0.3) !important; /* Cyan glow border */
  box-shadow: 0 12px 40px rgba(0, 242, 254, 0.15), 0 0 20px rgba(0, 242, 254, 0.1) !important;
  background: rgba(13, 20, 32, 0.85) !important;
}

/* Icons inside the stats cards */
.tutor-dashboard-info-card .tutor-icon,
.tutor-dashboard-stat-card .tutor-icon,
.tutor-dashboard-stats-card .tutor-icon,
.tutor-dashboard-single-stat .tutor-icon,
.tutor-dashboard-stats-item .tutor-icon,
.tutor-dashboard-info-card i,
.tutor-dashboard-stat-card i,
.tutor-dashboard-single-stat i,
.tutor-dashboard-stats-item i {
  color: #00f2fe !important; /* Bright cyan icon */
  background: rgba(0, 242, 254, 0.1) !important; /* Soft cyan background */
  width: 56px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin: 0 auto 16px auto !important;
  font-size: 24px !important;
  border: 1px solid rgba(0, 242, 254, 0.2) !important;
}

/* Numbers/Values inside the stats cards */
.tutor-dashboard-info-card .tutor-fs-3,
.tutor-dashboard-stat-card .tutor-fs-3,
.tutor-dashboard-stats-card .tutor-fs-3,
.tutor-dashboard-single-stat .tutor-fs-3,
.tutor-dashboard-stats-item-value,
.tutor-dashboard-stat-card-value,
.tutor-card h4,
.tutor-card h2,
.tutor-card span.tutor-fs-3,
.tutor-dashboard-stats-item-value *,
.tutor-dashboard-info-card .tutor-dashboard-info-card-val {
  color: #ffffff !important; /* Bright stark white number */
  font-size: 40px !important;
  font-weight: 800 !important;
  font-family: 'Outfit', 'Cairo', sans-serif !important;
  line-height: 1.1 !important;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

/* Labels text under the numbers */
.tutor-dashboard-info-card .tutor-color-muted,
.tutor-dashboard-info-card .tutor-fs-7,
.tutor-dashboard-stat-card .tutor-fs-7,
.tutor-dashboard-stats-card .tutor-fs-7,
.tutor-dashboard-single-stat .tutor-fs-7,
.tutor-dashboard-stats-item-title,
.tutor-dashboard-stat-card-title,
.tutor-card p,
.tutor-card span.tutor-fs-7,
.tutor-card .tutor-dashboard-stats-item-title *,
.tutor-dashboard-info-card-text {
  color: #ffffff !important; /* White text */
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: 'Outfit', 'Cairo', sans-serif !important;
  margin-top: 5px !important;
}

/* 2. Course Loop Cards inside the Student Dashboard & Catalog */
.tutor-course-card,
.tutor-course-loop-card,
.tutor-dashboard-course-card,
.tutor-course-card-wrap {
  background-color: rgba(13, 20, 32, 0.7) !important;
  background: rgba(13, 20, 32, 0.7) !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tutor-course-card:hover,
.tutor-course-loop-card:hover,
.tutor-dashboard-course-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 242, 254, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 242, 254, 0.2) !important;
  background: rgba(13, 20, 32, 0.85) !important;
}

/* Course Metadata (Duration, Lessons, Difficulty) */
.tutor-course-loop-meta,
.tutor-course-loop-meta *,
.tutor-meta-value,
.tutor-meta-key {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Course Card Footer */
.tutor-course-loop-footer,
.tutor-course-loop-footer * {
  border-top: none !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

/* Price values in Course Card */
.tutor-price-preview,
.tutor-course-loop-price,
.tutor-price-preview *,
.tutor-course-loop-price * {
  color: #00f2fe !important; /* Cyan price highlight */
  font-weight: 800 !important;
}

/* Progress bar inside Enrolled Courses tab */
.tutor-progress-bar-wrap,
.tutor-course-progress-bar {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}

.tutor-progress-bar,
.tutor-course-progress {
  background: linear-gradient(90deg, #00f2fe, #4facfe) !important;
  border-radius: 10px !important;
}

.tutor-course-progress-percent {
  color: #00f2fe !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   ARABIC (RTL) AND TRANSLATION LAYOUT COMPATIBILITY OVERRIDES (MOBILE & COMPUTER)
   ========================================================================== */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] a,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button,
html[lang="ar"] label,
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] th,
body.lang-ar body,
body.lang-ar p,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6,
body.lang-ar a,
body.lang-ar input,
body.lang-ar select,
body.lang-ar textarea,
body.lang-ar button,
body.lang-ar label,
body.lang-ar li,
body.lang-ar td,
body.lang-ar th {
  font-family: 'Cairo', 'Cairo Black', sans-serif !important;
}

/* Force Tutor LMS and WooCommerce layout direction to RTL for Arabic */
html[lang="ar"] .tutor-dashboard,
body.lang-ar .tutor-dashboard {
  direction: rtl !important;
  text-align: right !important;
}

@font-face {
  font-family: "tutor-iconfont";
  src: url("/wp-content/plugins/tutor/assets/fonts/tutor-iconfont.woff2") format("woff2"),
       url("/wp-content/plugins/tutor/assets/fonts/tutor-iconfont.woff") format("woff"),
       url("/wp-content/plugins/tutor/assets/fonts/tutor-iconfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Ensure Tutor LMS rating stars always use their correct font family and direction (LTR) globally */
.tutor-ratings-stars span,
.tutor-loop-rating-stars span,
.tutor-star-rating span,
.tutor-rating span,
.tutor-icon-star,
.tutor-icon-star-bold,
.tutor-icon-star-line,
.tutor-icon-star::before,
.tutor-icon-star-bold::before,
.tutor-icon-star-line::before,
.tutor-icon-star:before,
.tutor-icon-star-bold:before,
.tutor-icon-star-line:before {
  direction: ltr !important;
  font-family: "tutor-iconfont" !important;
  unicode-bidi: embed !important;
  display: inline-block !important;
}

/* Reverse Tutor LMS Dashboard flex containers for RTL */
html[lang="ar"] .tutor-dashboard-inline-item,
html[lang="ar"] .tutor-dashboard-header-stats,
html[lang="ar"] .tutor-dashboard-nav,
html[lang="ar"] .tutor-dashboard-settings-field,
html[lang="ar"] .tutor-form-row,
body.lang-ar .tutor-dashboard-inline-item,
body.lang-ar .tutor-dashboard-header-stats,
body.lang-ar .tutor-dashboard-nav,
body.lang-ar .tutor-dashboard-settings-field,
body.lang-ar .tutor-form-row {
  flex-direction: row-reverse !important;
}

/* Fix sidebar alignment and borders in RTL */
html[lang="ar"] .tutor-dashboard-left-menu,
body.lang-ar .tutor-dashboard-left-menu {
  border-left: none !important;
  border-right: none !important;
  text-align: right !important;
}

/* Fix main dashboard content alignment in RTL */
html[lang="ar"] .tutor-dashboard-content,
body.lang-ar .tutor-dashboard-content {
  padding-right: 30px !important;
  padding-left: 0 !important;
}

@media (max-width: 991px) {
  html[lang="ar"] .tutor-dashboard-content,
  body.lang-ar .tutor-dashboard-content {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}

/* Sidebar Menu item icon/text margins in RTL */
html[lang="ar"] .tutor-dashboard-menu-item a,
body.lang-ar .tutor-dashboard-menu-item a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html[lang="ar"] .tutor-dashboard-menu-item a span,
body.lang-ar .tutor-dashboard-menu-item a span {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Alignment of icons in info cards */
html[lang="ar"] .tutor-dashboard-info-card,
body.lang-ar .tutor-dashboard-info-card {
  text-align: right !important;
}

/* Checkboxes and form alignments in RTL */
html[lang="ar"] .tutor-form-group,
html[lang="ar"] .tutor-form-check,
body.lang-ar .tutor-form-group,
body.lang-ar .tutor-form-check {
  text-align: right !important;
}

html[lang="ar"] .tutor-form-check-input,
body.lang-ar .tutor-form-check-input {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

/* Force all course titles, names, metadata, and progress text to be legible on dark cards */
.tutor-course-title,
.tutor-course-title a,
.tutor-course-loop-title,
.tutor-course-loop-title a,
.tutor-course-name,
.tutor-course-name a,
.tutor-course-loop-title-wrap,
.tutor-course-loop-title-wrap *,
[class^="tutor-course-"] h2,
[class^="tutor-course-"] h3,
[class^="tutor-course-"] h4 {
  color: #ffffff !important; /* Bright stark white */
  font-weight: 700 !important;
}

/* Force course excerpt/description inside cards to be legible slate grey */
.tutor-course-loop-excerpt,
.tutor-course-excerpt,
.tutor-course-loop-excerpt *,
.tutor-course-excerpt * {
  color: #ffffff !important; /* Faint slate grey */
}

/* Restored Tutor icon pseudo-elements globally to enable dashboard & course icons */

/* Hide wishlist bookmark button completely to avoid showing empty circles */
a.tutor-iconic-btn,
.tutor-iconic-btn,
.save-bookmark-btn {
  display: none !important;
}

/* Hide FontAwesome icons in Arabic version only for clean RTL look */
html[lang="ar"] .fa,
html[lang="ar"] .fa:before,
html[lang="ar"] .fa::before,
html[lang="ar"] [class*="fa-"]::before,
html[lang="ar"] [class^="fa-"]::before,
body.lang-ar .fa,
body.lang-ar .fa:before,
body.lang-ar .fa::before,
body.lang-ar [class*="fa-"]::before,
body.lang-ar [class^="fa-"]::before {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   BRANDS MARQUEE SLIDER (فاصل متحرك بين الصفحات)
   ════════════════════════════════════════════════════════════════ */
.brands-sec {
  position: relative;
  z-index: 99 !important; /* Ensure it stays on top of other sections and never gets covered */
  padding: 2.2rem 0; /* Compact separator padding */
  background: #06090f !important; /* Solid dark background to prevent overlap transparency */
  overflow: hidden;
  border-top: 1px solid rgba(0, 242, 254, 0.15); /* Glowing cyan top border */
  border-bottom: 1px solid rgba(0, 242, 254, 0.15); /* Glowing cyan bottom border */
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.05); /* Subtle glow around the separator */
}

.brands-title-w {
  text-align: center;
  margin-bottom: 1.8rem;
  padding: 0 20px;
}

.brands-title-w h3 {
  font-size: 20px; /* Sleeker title */
  font-family: 'Cairo', 'Outfit', sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: 0.05em;
}

.brands-title-w p {
  color: #777;
  font-size: 13px;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.5;
}

.brands-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 2rem;
  direction: ltr !important; /* Force LTR to prevent RTL direction collapse and quick-disappearing bugs */
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.brands-track {
  display: flex;
  gap: 2rem;
  direction: ltr !important; /* Force LTR track direction */
  animation: scroll-marquee 28s linear infinite;
  min-width: 100%;
  flex-shrink: 0;
}

.brands-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 2rem)); /* Scroll exactly one full track width + gap */
  }
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px 24px;
  white-space: nowrap;
  transition: all 0.3s ease;
  direction: ltr !important; /* Force content inside card to be LTR */
}

.brand-card:hover {
  background: rgba(0, 242, 254, 0.03);
  border-color: rgba(0, 242, 254, 0.25);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.08);
  transform: translateY(-1px);
}

.brand-logo-text {
  font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.03em;
}

.brand-logo-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-svg {
  width: 20px;
  height: 20px;
  max-width: 100%;
  max-height: 100%;
}

.brand-logo-img {
  height: 24px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1) opacity(0.8); /* Monochrome white on dark background */
  transition: all 0.3s ease;
}

.brand-card:hover .brand-logo-img {
  filter: none; /* Smoothly restore original brand colors on hover */
  opacity: 1;
}

/* ─── EMBEDDED VIDEO PLAYER STYLES ───────────────── */
.video-player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Default to standard landscape */
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 15, 25, 0.6);
  border: 1px solid rgba(14, 210, 247, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(14, 210, 247, 0.08);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* If the user pasted Bunny's responsive wrapper div, we reset the aspect-ratio to let the child div dictate the height */
.video-player-wrapper:has(div) {
  aspect-ratio: auto;
}

.video-player-wrapper:hover {
  border-color: rgba(14, 210, 247, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 40px rgba(14, 210, 247, 0.18);
  transform: translateY(-3px);
}

/* Style direct iframes, videos, or nested ones to fill their container */
.video-player-wrapper iframe,
.video-player-wrapper video {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  border-radius: 16px;
  display: block;
}

/* If it is a raw iframe or video (not nested inside a div), absolute position it to fill the aspect-ratio box */
.video-player-wrapper > iframe,
.video-player-wrapper > video {
  position: absolute;
  top: 0;
  left: 0;
}

.video-player-wrapper video {
  object-fit: contain;
}

/* If there is a nested div (Bunny's wrapper), make sure it is relative and spans 100% width */
.video-player-wrapper div {
  width: 100%;
  position: relative;
}

/* Ensure the iframe inside Bunny's wrapper sits correctly */
.video-player-wrapper div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix spacing on mobile layout */
@media (max-width: 991px) {
  .me-video .video-player-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   WOOCOMMERCE CART & CHECKOUT PREMIUM REDESIGN (DARK / CYAN / GLASSMORPHISM)
   ========================================================================== */

/* Spacing layout for general article pages (Cart & Checkout pages) to avoid header overlap */
.alm-page-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10rem 2rem 4rem !important; /* Push content below the fixed header */
}

@media (max-width: 768px) {
  .alm-page-content {
    padding: 7.5rem 1.25rem 3rem !important;
  }
}

/* Page title styles */
.alm-page-content .alm-page-title {
  text-align: center;
  font-size: clamp(2rem, 5.5vw, 3rem) !important;
  font-weight: 800 !important;
  font-family: 'Cairo', sans-serif !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.2 !important;
  background: linear-gradient(135deg, #fff 50%, var(--accent-cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* WooCommerce general styles */
.woocommerce {
  color: #ffffff !important;
  font-family: 'Cairo', sans-serif !important;
}

/* 1. Alerts & Notices */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error,
.woocommerce-NoticeGroup,
.woocommerce-notice {
  background: rgba(13, 20, 32, 0.6) !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 18px 24px 18px 60px !important; /* Left padding for LTR icon */
  margin-bottom: 2rem !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.05) !important;
  position: relative;
  list-style: none !important;
}

/* RTL layout for notices */
html[dir="rtl"] .woocommerce-message,
html[dir="rtl"] .woocommerce-info,
html[dir="rtl"] .woocommerce-error,
html[dir="rtl"] .woocommerce-NoticeGroup,
html[dir="rtl"] .woocommerce-notice,
body.rtl .woocommerce-message,
body.rtl .woocommerce-info,
body.rtl .woocommerce-error,
body.rtl .woocommerce-NoticeGroup,
body.rtl .woocommerce-notice {
  padding: 18px 60px 18px 24px !important; /* Right padding for RTL icon */
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: var(--accent-cyan) !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  margin: 0 !important;
}

html[dir="rtl"] .woocommerce-message::before,
html[dir="rtl"] .woocommerce-info::before,
html[dir="rtl"] .woocommerce-error::before,
body.rtl .woocommerce-message::before,
body.rtl .woocommerce-info::before,
body.rtl .woocommerce-error::before {
  left: auto !important;
  right: 20px !important;
}

.woocommerce-message {
  border-color: rgba(0, 255, 102, 0.25) !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.05) !important;
}
.woocommerce-message a.button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  margin-left: 15px !important;
  float: left !important;
  font-weight: 600 !important;
}
.woocommerce-message a.button:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

.woocommerce-error {
  border-color: rgba(255, 77, 77, 0.25) !important;
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.05) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.woocommerce-error li {
  margin-left: 0 !important;
  list-style: none !important;
}

/* 2. Shop/Cart Table */
.woocommerce table.shop_table {
  background: rgba(13, 20, 32, 0.45) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}

.woocommerce table.shop_table th {
  background: rgba(14, 210, 247, 0.05) !important;
  border-bottom: 1px solid rgba(14, 210, 247, 0.15) !important;
  color: var(--accent-cyan) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Cairo', sans-serif !important;
}

.woocommerce table.shop_table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Product names */
.woocommerce-cart-form__cart-item .product-name a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  transition: color 0.2s ease !important;
}
.woocommerce-cart-form__cart-item .product-name a:hover {
  color: var(--accent-cyan) !important;
}

/* Product subtotal */
.woocommerce-cart-form__cart-item .product-subtotal span {
  color: var(--accent-cyan) !important;
  font-weight: 700 !important;
}

/* Quantity inputs styling */
.woocommerce .quantity .qty {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 8px !important;
  font-weight: 700 !important;
  width: 60px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}
.woocommerce .quantity .qty:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 10px rgba(14, 210, 247, 0.2) !important;
  background: rgba(14, 210, 247, 0.02) !important;
}

/* Remove button */
.woocommerce a.remove {
  color: #ff4d4d !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255, 77, 77, 0.08) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.woocommerce a.remove:hover {
  background: #ff4d4d !important;
  color: #000000 !important;
}

/* Coupon & actions area */
.woocommerce table.shop_table td.actions {
  background: rgba(13, 20, 32, 0.2) !important;
  padding: 20px !important;
}

.woocommerce-cart-form .coupon {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.woocommerce-cart-form .coupon input.input-text {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  min-width: 150px !important;
  height: auto !important;
  transition: all 0.2s ease !important;
}
.woocommerce-cart-form .coupon input.input-text:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 8px rgba(14, 210, 247, 0.15) !important;
}

/* General Button Styles overrides */
.woocommerce button.button, 
.woocommerce a.button, 
.woocommerce input.button {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: 'Cairo', sans-serif !important;
  text-transform: none !important;
}

.woocommerce button.button:hover, 
.woocommerce a.button:hover, 
.woocommerce input.button:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  box-shadow: 0 0 15px rgba(14, 210, 247, 0.15) !important;
  background: rgba(14, 210, 247, 0.02) !important;
  transform: translateY(-1px) !important;
}

.woocommerce button.button:disabled, 
.woocommerce button.button[disabled] {
  opacity: 0.5 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255,255,255,0.4) !important;
  cursor: not-allowed !important;
}

/* Alt / Primary checkout buttons */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  background: var(--accent-cyan) !important;
  color: #06090f !important;
  border: none !important;
  padding: 14px 35px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  box-shadow: 0 5px 20px rgba(14, 210, 247, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #ffffff !important;
  color: #06090f !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* 3. Cart Collaterals & Totals */
.cart-collaterals {
  margin-top: 3rem !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.woocommerce .cart_totals {
  width: 100% !important;
  max-width: 480px !important;
  background: rgba(13, 20, 32, 0.55) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 25px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce .cart_totals h2 {
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 10px !important;
  font-family: 'Cairo', sans-serif !important;
}

.woocommerce .cart_totals table.shop_table {
  background: transparent !important;
  border: none !important;
  margin-bottom: 20px !important;
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 0 !important;
}

.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce .cart_totals table.shop_table tr.order-total th {
  border-bottom: none !important;
}

.woocommerce .cart_totals table.shop_table tr.order-total td span {
  color: var(--accent-cyan) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* 4. Checkout Page Layout */
@media (min-width: 992px) {
  form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 7fr 5fr !important;
    gap: 40px !important;
    grid-template-areas: 
      "billing review-heading"
      "billing review-box" !important;
    align-items: start !important;
  }
  
  form.woocommerce-checkout .col2-set {
    grid-area: billing !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  form.woocommerce-checkout .col2-set .col-1 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  form.woocommerce-checkout .col2-set .col-2 {
    display: none !important;
  }

  form.woocommerce-checkout #order_review_heading {
    grid-area: review-heading !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  
  form.woocommerce-checkout .woocommerce-checkout-review-order {
    grid-area: review-box !important;
  }
}

@media (max-width: 991px) {
  form.woocommerce-checkout {
    display: block !important;
  }
  .woocommerce-checkout .col2-set {
    display: block !important;
    width: 100% !important;
    margin-bottom: 30px !important;
  }
  .woocommerce-checkout .col2-set .col-1 {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce-checkout .col2-set .col-2 {
    display: none !important;
  }
}

.woocommerce-checkout h3 {
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  font-family: 'Cairo', sans-serif !important;
}

/* Form fields customization */
.woocommerce-checkout .form-row {
  margin-bottom: 15px !important;
}

.woocommerce-checkout label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: 'Cairo', sans-serif !important;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-family: 'Cairo', sans-serif !important;
  transition: all 0.3s ease !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 10px rgba(14, 210, 247, 0.2) !important;
  background: rgba(14, 210, 247, 0.02) !important;
  outline: none !important;
}

.woocommerce-checkout textarea {
  height: 120px !important;
}

/* Coupon info bar in checkout */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
  background: rgba(14, 210, 247, 0.03) !important;
  border: 1px dashed rgba(14, 210, 247, 0.25) !important;
  border-radius: 8px !important;
  padding: 15px 20px !important;
  margin-bottom: 25px !important;
  font-size: 14px !important;
  color: #e0e0e0 !important;
  font-family: 'Cairo', sans-serif !important;
}

.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a {
  color: var(--accent-cyan) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover {
  text-decoration: underline !important;
}

/* Order review area */
.woocommerce-checkout-review-order {
  background: rgba(13, 20, 32, 0.45) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 14px 0 !important;
}

.woocommerce-checkout-review-order-table tr.cart-subtotal td span,
.woocommerce-checkout-review-order-table tr.order-total td span {
  color: var(--accent-cyan) !important;
  font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table tr.order-total td span {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* ── PAYMENT SECTION: clean full-width layout ──────────────────────── */
.woocommerce-checkout #payment {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 15px !important;
  margin-top: 20px !important;
  background: rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding-bottom: 16px !important;
  width: 100% !important;
}

/* Each payment method row */
.woocommerce-checkout #payment ul.payment_methods li {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* Label row: radio + text on right, logo on left — horizontal always */
.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  /* TEXT */
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

/* Logo inside label — fixed width, doesn't squish text */
.woocommerce-checkout #payment ul.payment_methods li label img,
.woocommerce-checkout #payment ul.payment_methods li label .alm-checkout-gateways img {
  flex-shrink: 0 !important;
  max-width: 70px !important;
  max-height: 30px !important;
  height: auto !important;
  object-fit: contain !important;
}

.alm-checkout-gateways {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Radio button */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--accent-cyan) !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* Payment description box */
.woocommerce-checkout #payment div.payment_box,
.wc_payment_method .payment_box {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(14, 210, 247, 0.04) !important;
  border: 1px solid rgba(14, 210, 247, 0.18) !important;
  border-radius: 8px !important;
  padding: 14px 14px !important;
  margin: 6px 0 12px !important;
  /* TEXT */
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #d0d0d0 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Paragraphs inside payment box */
.woocommerce-checkout #payment div.payment_box p,
.wc_payment_method .payment_box p {
  margin: 0 0 6px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Phone / account number pill — LTR, centered, readable */
.woocommerce-checkout #payment div.payment_box strong:not(.alm-highlight),
.wc_payment_method .payment_box strong:not(.alm-highlight) {
  display: inline-block !important;
  direction: ltr !important;
  unicode-bidi: embed !important;
  color: #00f2fe !important;
  font-family: 'Courier New', monospace !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  background: rgba(14,210,247,0.08) !important;
  border: 1px solid rgba(14,210,247,0.22) !important;
  border-radius: 6px !important;
  padding: 3px 12px !important;
  margin: 0 3px !important;
}

/* Explicit style for instructions highlights to prevent monospace issues */
.woocommerce-checkout #payment div.payment_box strong.alm-highlight,
.wc_payment_method .payment_box strong.alm-highlight {
  display: inline !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
  unicode-bidi: normal !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Terms and conditions checkbox */
.woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 15px !important;
  line-height: 1.6 !important;
}

.woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  color: #ffffff !important;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  accent-color: var(--accent-cyan) !important;
}

/* Thank You page design compatibility */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  text-align: center !important;
  font-size: 22px !important;
  color: #00ff66 !important;
  font-weight: 700 !important;
  margin-bottom: 30px !important;
  text-shadow: 0 0 15px rgba(0, 255, 102, 0.15) !important;
}

.woocommerce-order-details {
  background: rgba(13, 20, 32, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-top: 30px !important;
}

.woocommerce-order-details h2.woocommerce-order-details__title {
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 10px !important;
}

/* ==========================================================================
   WOOCOMMERCE CART & CHECKOUT MOBILE OPTIMIZATIONS
   ========================================================================== */

/* Checkout payment methods list layout */
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 15px !important;
}

@media (max-width: 768px) {
  /* Cart & Checkout mobile container padding */
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce {
    padding: 0 5px !important;
  }

  /* Make cart table responsive and card-like on mobile */
  .woocommerce table.shop_table_responsive,
  .woocommerce-page table.shop_table_responsive {
    border: none !important;
    background: transparent !important;
  }

  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr {
    display: block !important;
    background: rgba(13, 20, 32, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  }
  
  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    display: block !important;
    text-align: right !important;
    padding: 12px 10px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05) !important;
    font-size: 14px !important;
    position: relative !important;
    clear: none !important;
  }
  
  .woocommerce table.shop_table_responsive tr td:last-child,
  .woocommerce-page table.shop_table_responsive tr td:last-child {
    border-bottom: none !important;
  }
  
  /* Right-align labels for Arabic RTL mobile view */
  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ": " !important;
    font-weight: 700 !important;
    color: var(--accent-cyan) !important;
    float: right !important;
    margin-left: 10px !important;
  }
  
  /* LTR direction compatibility */
  html[dir="ltr"] .woocommerce table.shop_table_responsive tr td::before,
  html[dir="ltr"] .woocommerce-page table.shop_table_responsive tr td::before {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
  }
  
  /* Product thumbnail alignment on mobile */
  .woocommerce-cart table.cart td.product-thumbnail {
    text-align: center !important;
  }
  
  .woocommerce-cart table.cart td.product-thumbnail img {
    max-width: 120px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    display: block !important;
  }

  /* Coupon form adjustments on mobile */
  .woocommerce-cart-form .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
  
  .woocommerce-cart-form .coupon input.input-text {
    width: 100% !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  .woocommerce-cart-form .coupon button.button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Checkout payment gateway choices label wrapping and spacing */
  .woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 14px !important;
  }
  
  .alm-checkout-gateways {
    margin-left: 0 !important;
    margin-top: 6px !important;
    width: 100% !important;
    display: flex !important;
  }
}

/* ==========================================================================
   WOOCOMMERCE ORDER CONFIRMATION - MOBILE FIX
   ========================================================================== */

/* Order received / Thank You page full redesign */
.woocommerce-order-received .woocommerce {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 20px 15px !important;
}

/* Thank You header */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    text-align: center !important;
    font-size: 20px !important;
    color: #00e676 !important;
    font-weight: 700 !important;
    background: rgba(0, 230, 118, 0.07) !important;
    border: 1px solid rgba(0, 230, 118, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
}

/* Order details table */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: rgba(13, 20, 32, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 17px !important;
    color: var(--accent-cyan) !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Order overview info row (order number, date, email, total) */
.woocommerce-order-overview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px !important;
    background: rgba(13, 20, 32, 0.45) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    padding: 18px !important;
}

.woocommerce-order-overview li {
    flex: 1 1 140px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

.woocommerce-order-overview li strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
}

/* Mobile-specific payment & order fixes */
@media (max-width: 768px) {
    .woocommerce-checkout #payment div.payment_box {
        padding: 14px !important;
        font-size: 13px !important;
    }

    .woocommerce-checkout #payment div.payment_box strong:not(.alm-highlight) {
        font-size: 13px !important;
        padding: 2px 7px !important;
    }

    .woocommerce-order-overview {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .woocommerce-order-overview li {
        flex: 1 1 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
    }

    .woocommerce-order-overview li strong {
        display: inline !important;
        margin-top: 0 !important;
        margin-left: 8px !important;
    }

    .woocommerce-order-details,
    .woocommerce-customer-details {
        padding: 16px !important;
    }

    .woocommerce-order-received .woocommerce-thankyou-order-received {
        font-size: 16px !important;
        padding: 15px !important;
    }
}



/* Target both popups and inline forms in single course page sidebars */
.tutor-modal,
.tutor-login-modal-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
    display: none !important;
}

/* When modal is active */
.tutor-modal.tutor-is-active,
.tutor-modal.active,
.tutor-modal.is-active,
.tutor-modal.show,
.tutor-login-modal-wrap.tutor-is-active,
.tutor-login-modal-wrap.active,
.tutor-login-modal-wrap.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Background overlay inside the modal */
.tutor-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(6, 9, 15, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 1 !important;
    display: block !important;
}

/* Modal window styling */
.tutor-modal-window,
.tutor-login-modal,
.tutor-modal-content-wrap {
    background: rgba(10, 15, 25, 0.96) !important;
    border: 1px solid rgba(14, 210, 247, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65) !important;
    max-width: 450px !important;
    width: 90% !important;
    padding: 35px 30px !important;
    position: relative !important;
    margin: auto !important; /* Centered layout in flex container */
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Close button positioning and styling */
.tutor-modal-close,
.tutor-modal-close-btn,
.tutor-modal-close-icon,
.tutor-modal-window .tutor-modal-close,
.tutor-icon-line-cross {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    z-index: 10 !important;
    padding: 5px !important;
    line-height: 1 !important;
}

.tutor-modal-close:hover,
.tutor-modal-close-btn:hover,
.tutor-icon-line-cross:hover {
    color: var(--accent-cyan) !important;
    transform: rotate(90deg) !important;
}

/* Modal inner body container */
.tutor-modal-body,
.tutor-modal-content {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 !important;
}

/* Modal Title */
.tutor-modal-title,
.tutor-modal-content h3,
.tutor-login-form-wrap h3 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    font-family: 'Cairo', sans-serif !important;
    text-align: center !important;
    background: linear-gradient(135deg, #fff 60%, var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Form structure */
.tutor-login-form-wrap form,
.tutor-login-form form,
.tutor-modal-content form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Labels */
.tutor-login-form-wrap label,
.tutor-login-form label,
.tutor-modal-content label,
.tutor-form-label {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-align: right !important; /* Arabic defaults */
    letter-spacing: 0.02em !important;
}

html[dir="ltr"] .tutor-login-form-wrap label,
html[dir="ltr"] .tutor-login-form label,
html[dir="ltr"] .tutor-modal-content label {
    text-align: left !important;
}

/* Inputs styling */
.tutor-login-form-wrap input[type="text"],
.tutor-login-form-wrap input[type="email"],
.tutor-login-form-wrap input[type="password"],
.tutor-login-form input[type="text"],
.tutor-login-form input[type="password"],
.tutor-modal-content input[type="text"],
.tutor-modal-content input[type="password"],
.tutor-modal-content .tutor-form-control {
    width: 100% !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    direction: ltr !important; /* Credentials are LTR */
    text-align: left !important;
}

.tutor-login-form-wrap input:focus,
.tutor-login-form input:focus,
.tutor-modal-content input:focus {
    border-color: var(--accent-cyan) !important;
    background: rgba(14, 210, 247, 0.04) !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
}

/* Checkbox (Remember Me) row */
.tutor-login-rememberme,
.tutor-form-rememberme,
.tutor-modal-content .tutor-login-rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 5px 0 !important;
    font-size: 13px !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
}

.tutor-login-rememberme input[type="checkbox"],
.tutor-modal-content input[type="checkbox"] {
    accent-color: var(--accent-cyan) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Primary Button (Log In submit) styling */
.tutor-login-form-wrap button[type="submit"],
.tutor-login-form button[type="submit"],
.tutor-modal-content button[type="submit"],
.tutor-modal-content .tutor-btn-primary {
    width: 100% !important;
    padding: 13px !important;
    background: var(--accent-cyan) !important;
    color: #06090f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2) !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-top: 10px !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.tutor-login-form-wrap button[type="submit"]:hover,
.tutor-login-form button[type="submit"]:hover,
.tutor-modal-content button[type="submit"]:hover {
    background: #ffffff !important;
    color: #06090f !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* "Forgot Password" link reset (Prevent it from inheriting giant button styles) */
.tutor-modal-content a,
.tutor-modal-content a.tutor-btn,
.tutor-modal-content a.tutor-btn-link,
.tutor-modal-content .tutor-login-forgot-password,
.tutor-login-form-wrap a,
.tutor-login-form a {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 5px 0 0 0 !important;
    transition: color 0.2s ease !important;
    line-height: normal !important;
}

.tutor-modal-content a:hover,
.tutor-modal-content a.tutor-btn:hover,
.tutor-login-form-wrap a:hover {
    color: var(--accent-cyan) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

/* Social logins styling */
.tutor-social-login-wrap {
    margin-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 15px !important;
}

/* Hide or clean up the blue circle loading dot at the top of modal if it looks weird */
.tutor-modal-window .tutor-modal-icon,
.tutor-modal-window .tutor-icon-login {
    color: var(--accent-cyan) !important;
    font-size: 32px !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
    text-align: center !important;
}

/* ==========================================================================
   TUTOR LMS RATINGS & REVIEWS PREMIUM DARK THEME STYLE & FIXES
   ========================================================================== */

/* Push single course page content down to prevent overlapping with the fixed navigation header */
body.single-courses {
    padding-top: 130px !important;
}

@media (max-width: 991px) {
    body.single-courses {
        padding-top: 100px !important;
    }
}

@media (max-width: 768px) {
    body.single-courses {
        padding-top: 80px !important;
    }
}

/* Review Individual Items and Comment Boxes styling - overrides white backgrounds */
.tutor-ratings-and-reviews .tutor-card,
.tutor-course-reviews-wrap .tutor-card,
#tutor-course-reviews .tutor-card,
.tutor-reviews-list .tutor-card,
.tutor-review-individual-item.tutor-card,
.tutor-review-list-item.tutor-card,
.tutor-ratings-and-reviews,
.tutor-course-reviews-wrap,
#tutor-course-reviews,
.tutor-review-individual-item,
.tutor-comment-item,
.tutor-reviews-list,
.tutor-review-list-item,
.comment-body,
li.comment,
div.comment-body,
.tutor-card.tutor-review-box,
.tutor-review-box {
    background: rgba(10, 16, 28, 0.85) !important;
    background-color: rgba(10, 16, 28, 0.85) !important;
    border: 1px solid rgba(14, 210, 247, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    padding: 25px 30px !important;
    margin-bottom: 25px !important;
    color: #ffffff !important;
    overflow: visible !important;
}

/* Ensure sub-items and text inside reviews have legible light colors instead of default dark styles */
.tutor-ratings-and-reviews .tutor-card *,
.tutor-course-reviews-wrap .tutor-card *,
#tutor-course-reviews .tutor-card *,
.tutor-reviews-list .tutor-card *,
.tutor-review-individual-item *,
.tutor-review-list-item *,
.tutor-comment-item *,
.comment-body *,
.tutor-ratings-and-reviews * {
    color: #cbd5e1 !important; /* Soft white/gray readability */
}

/* Author names inside reviews */
.tutor-ratings-and-reviews .tutor-card strong,
.tutor-ratings-and-reviews .tutor-card cite,
.tutor-ratings-and-reviews .tutor-card h4,
.tutor-review-individual-item strong,
.tutor-review-individual-item h4,
.tutor-review-individual-item .tutor-review-user,
.tutor-review-individual-item .tutor-review-author,
.tutor-review-individual-item .comment-author,
.tutor-review-individual-item cite,
.tutor-review-individual-item cite * {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Review text body - high contrast */
.tutor-ratings-and-reviews .tutor-card p,
.tutor-review-text,
.tutor-review-content,
.tutor-comment-text,
.comment-content,
.comment-text p,
.tutor-review-individual-item p,
.tutor-comment-item p {
    color: #e2e8f0 !important; /* Stark crisp readability */
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin-top: 8px !important;
}

/* Review dates and metadata */
.tutor-review-individual-item .tutor-review-time,
.tutor-review-individual-item .comment-metadata,
.tutor-review-individual-item .comment-metadata a,
.tutor-review-individual-item .tutor-review-date {
    color: #94a3b8 !important; /* Muted gray */
    font-size: 11.5px !important;
}

/* Star rating container and icon colors - force gold */
.tutor-ratings-and-reviews .tutor-icon-star,
.tutor-ratings-and-reviews .tutor-icon-star-bold,
.tutor-ratings-and-reviews .tutor-icon-star-line,
.tutor-review-individual-item .tutor-icon-star,
.tutor-review-individual-item .tutor-icon-star-bold,
.tutor-review-individual-item .tutor-icon-star-line,
.tutor-review-individual-item i[class*="star"],
.tutor-ratings-and-reviews i[class*="star"],
.tutor-star-rating-group,
.tutor-star-rating-group *,
.tutor-review-rating,
.tutor-review-rating *,
.tutor-rating-stars,
.tutor-ratings-stars,
.tutor-course-rating-stars,
.tutor-loop-rating-stars,
.tutor-course-loop-rating,
.tutor-rating-stars *,
.tutor-ratings-stars * {
    color: #ff9900 !important; /* Maintain gold stars color */
}

/* Ratings summary box (stars overview block) */
.tutor-ratings-summary-wrap,
.tutor-ratings-summary,
.tutor-review-summary {
    background: rgba(10, 16, 28, 0.8) !important;
    border: 1px solid rgba(14, 210, 247, 0.15) !important;
    border-radius: 14px !important;
    padding: 25px !important;
    color: #ffffff !important;
}

/* Make inner columns transparent and remove nested borders */
.tutor-review-summary-average-rating,
.tutor-review-summary-ratings,
.tutor-ratings-summary-average-wrap,
.tutor-ratings-summary-ratings {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Force all text, numbers, and labels in the summary to be bright white */
.tutor-ratings-summary-wrap *,
.tutor-ratings-summary *,
.tutor-review-summary *,
.tutor-review-summary-average-rating *,
.tutor-review-summary-ratings *,
.tutor-ratings-summary-progress-row,
.tutor-ratings-summary-progress-row *,
.tutor-ratings-summary-progress-row span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure star icons in the summary are always gold, not white */
.tutor-ratings-summary-wrap [class*="star"],
.tutor-ratings-summary-wrap i,
.tutor-ratings-summary-wrap span.tutor-icon-star,
.tutor-ratings-summary-wrap span.tutor-icon-star-bold,
.tutor-ratings-summary-wrap span.tutor-icon-star-line,
.tutor-review-summary [class*="star"],
.tutor-review-summary i,
.tutor-review-summary span.tutor-icon-star,
.tutor-review-summary span.tutor-icon-star-bold,
.tutor-review-summary span.tutor-icon-star-line,
.tutor-ratings-summary-progress-row [class*="star"],
.tutor-ratings-summary-progress-row i {
    color: #ff9900 !important;
    -webkit-text-fill-color: #ff9900 !important;
}

/* Center average rating column in summary block and style text */
.tutor-ratings-summary-average-wrap,
.tutor-ratings-summary-average,
.tutor-review-summary-average-rating {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px !important;
}

.tutor-ratings-summary-average-number,
.tutor-review-summary-average-rating {
    font-size: 4.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    background: none !important;
    display: block !important;
    width: 100% !important;
}

.tutor-ratings-summary-average-stars {
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: center !important;
}

.tutor-ratings-summary-average-count,
.tutor-ratings-summary-average-text,
.tutor-review-summary-ratings .tutor-review-summary-average-count,
.tutor-review-summary-ratings-count {
    font-size: 13.5px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    direction: inherit !important;
    unicode-bidi: embed !important;
}

/* Progress bar inside reviews summary - cyan neon fill */
.tutor-ratings-summary-wrap .tutor-ratings-progress-bar-fill,
.tutor-review-summary .tutor-ratings-progress-bar-fill,
.tutor-review-summary [class*="progress-bar-fill"] {
    background: linear-gradient(90deg, #00f2fe, #0072ff) !important;
}

.tutor-ratings-summary-wrap .tutor-ratings-progress-bar,
.tutor-review-summary .tutor-ratings-progress-bar,
.tutor-review-summary [class*="progress-bar"] {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Push language toggle to the correct side depending on site direction to avoid title overlap */
.lang-toggle {
    margin-left: auto !important;
}

body.lang-ar .lang-toggle,
html[dir="rtl"] .lang-toggle {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ==========================================================================
   TUTOR LMS CUSTOM POLISHES & COMPREHENSIVE MOBILE FIXES
   ========================================================================== */

/* ──── FIX ①: DASHBOARD ICONS — Force tutor-iconfont to load & render ──── */
/* Ensure the @font-face actually takes effect on ALL devices including mobile */
[class*="tutor-icon-"]::before,
[class^="tutor-icon-"]::before,
.tutor-icon::before,
i[class*="tutor-icon"]::before,
span[class*="tutor-icon"]::before {
    font-family: "tutor-iconfont" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    speak: never !important;
}

/* Dashboard stat card icons — visible cyan */
.tutor-dashboard-info-card .tutor-icon,
.tutor-dashboard-stat-card .tutor-icon,
.tutor-dashboard-stats-card .tutor-icon,
.tutor-dashboard-single-stat .tutor-icon,
.tutor-dashboard-stats-item .tutor-icon,
.tutor-dashboard-info-card [class*="tutor-icon-"],
.tutor-dashboard-stat-card [class*="tutor-icon-"],
.tutor-dashboard-stats-card [class*="tutor-icon-"],
.tutor-dashboard-single-stat [class*="tutor-icon-"],
.tutor-dashboard-stats-item [class*="tutor-icon-"],
.tutor-dashboard-info-card i,
.tutor-dashboard-stat-card i,
.tutor-dashboard-stats-card i,
.tutor-dashboard-single-stat i,
.tutor-dashboard-stats-item i {
    color: #00f2fe !important;
    font-family: "tutor-iconfont" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tutor-dashboard-info-card .tutor-icon::before,
.tutor-dashboard-stat-card .tutor-icon::before,
.tutor-dashboard-stats-card .tutor-icon::before,
.tutor-dashboard-single-stat .tutor-icon::before,
.tutor-dashboard-stats-item .tutor-icon::before,
.tutor-dashboard-info-card [class^="tutor-icon-"]::before,
.tutor-dashboard-stat-card [class^="tutor-icon-"]::before,
.tutor-dashboard-stats-card [class^="tutor-icon-"]::before,
.tutor-dashboard-single-stat [class^="tutor-icon-"]::before,
.tutor-dashboard-stats-item [class^="tutor-icon-"]::before {
    display: inline-block !important;
    color: #00f2fe !important;
    font-family: "tutor-iconfont" !important;
    font-size: 24px !important;
}

/* Dashboard sidebar navigation icons */
.tutor-dashboard-nav .tutor-icon,
.tutor-dashboard-nav [class*="tutor-icon-"],
.tutor-dashboard-nav i[class*="tutor-icon"],
.tutor-dashboard-menu-item [class*="tutor-icon-"],
.tutor-dashboard-menu-item .tutor-icon {
    font-family: "tutor-iconfont" !important;
    display: inline-block !important;
    color: #00f2fe !important;
    width: auto !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* ──── FIX ②: WHITE BAR — Kill any white/grey background on course tabs ──── */
html body .tutor-course-details-tab,
html body .tutor-course-details-tab > *,
html body .tutor-course-details-tab > div,
html body .tutor-course-details-tab > nav,
html body .tutor-course-details-tab > ul,
html body .tutor-course-details-tab .tutor-nav,
html body .tutor-course-details-tab nav.tutor-nav,
html body nav.tutor-nav,
html body ul.tutor-nav,
html body .tutor-nav-line,
html body .tutor-tabs,
html body .tutor-tabs-container,
html body .tutor-segment-tab,
html body .tutor-course-details-tab .tutor-segment-tab,
html body .tutor-course-sidebar,
html body .tutor-single-course-segment,
html body .tutor-course-details-tab .tutor-card,
html body .tutor-course-details-content > .tutor-card {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Specifically target any remaining white backgrounds on card wrappers */
html body .tutor-single-course-segment .tutor-card,
html body .tutor-single-course-segment .tutor-card-has-border {
    background: rgba(10, 16, 28, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ──── FIX ③: REVIEWS LAYOUT — Force horizontal on mobile ──── */
@media (max-width: 768px) {
    /* Outer ratings summary card: block layout, full width, reduced padding */
    html body .tutor-card.tutor-review-card,
    html body .tutor-ratings-and-reviews .tutor-card,
    html body .tutor-course-reviews-wrap .tutor-card,
    html body #tutor-course-reviews .tutor-card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Inner ratings summary: vertical centered flex layout to keep average rating in the center */
    html body .tutor-ratings-summary-wrap,
    html body .tutor-ratings-summary,
    html body .tutor-review-summary {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Average rating column (Centered at the top of the card) */
    html body .tutor-ratings-summary-average-wrap,
    html body .tutor-ratings-summary-average,
    html body .tutor-review-summary-average-rating {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Average rating number — smaller on mobile and centered */
    html body .tutor-ratings-summary-average-number,
    html body .tutor-review-summary-average-rating {
        font-size: 2.2rem !important;
        margin-bottom: 2px !important;
        line-height: 1 !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    /* Stars row below the average number */
    html body .tutor-ratings-summary-average-stars {
        margin-bottom: 2px !important;
        gap: 2px !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    html body .tutor-ratings-summary-average-stars span {
        font-size: 13px !important;
    }

    /* Rating count text under stars */
    html body .tutor-ratings-summary-average-count,
    html body .tutor-ratings-summary-average-text,
    html body .tutor-review-summary-ratings-count {
        font-size: 13px !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    /* Progress bars column (Stretching below the average rating) */
    html body .tutor-ratings-summary-ratings,
    html body .tutor-review-summary-ratings {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Each progress row: horizontal */
    html body .tutor-ratings-summary-progress-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    html body .tutor-ratings-summary-progress-row > span:first-child {
        flex: 0 0 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        text-align: right !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    html body .tutor-ratings-summary-progress-row .tutor-ratings-progress-bar {
        flex: 1 1 auto !important;
        margin: 0 !important;
        height: 5px !important;
        border-radius: 3px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    html body .tutor-ratings-summary-progress-row > span:last-child {
        flex: 0 0 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        text-align: left !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    /* Individual review items — proper card layout */
    html body .tutor-review-individual-item,
    html body .tutor-review-list-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
}

/* ──── FIX ④: COURSE TABS — Single scrollable row on mobile ──── */
@media (max-width: 768px) {
    html body .tutor-course-details-tab .tutor-nav,
    html body .tutor-course-details-tab .tutor-tabs,
    html body .tutor-course-details-tab .tutor-nav-tabs,
    html body .tutor-course-nav,
    html body .tutor-course-nav-items,
    html body .tutor-nav,
    html body .tutor-course-details-tab ul,
    html body .tutor-course-details-tab nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        padding: 5px 0 !important;
        margin-bottom: 15px !important;
        gap: 0 !important;
        background: transparent !important;
    }
    
    html body .tutor-course-details-tab .tutor-nav::-webkit-scrollbar,
    html body .tutor-course-nav::-webkit-scrollbar,
    html body .tutor-nav::-webkit-scrollbar,
    html body .tutor-course-details-tab ul::-webkit-scrollbar,
    html body .tutor-course-details-tab nav::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }

    html body .tutor-course-details-tab .tutor-nav-link,
    html body .tutor-course-details-tab .nav-link,
    html body .tutor-course-details-tab .tutor-nav-item,
    html body .tutor-course-details-tab .tutor-segment-tab-item,
    html body .tutor-course-details-tab li,
    html body .tutor-course-nav-item a,
    html body .tutor-tabs-btn,
    html body .tutor-tabs-link,
    html body .tutor-nav-item,
    html body .tutor-nav-link {
        font-size: 12px !important;
        padding: 6px 10px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
    }

    /* Course info meta items — single row compact */
    html body .tutor-single-course-meta,
    html body .tutor-single-course-meta-list,
    html body .tutor-course-details-info,
    html body .tutor-single-course-meta ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 11px !important;
    }

    html body .tutor-single-course-meta li,
    html body .tutor-single-course-meta-list li,
    html body .tutor-course-details-info > div {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }
}

/* ──── FIX ⑤: GENERAL MOBILE POLISHES ──── */

/* Offset the floating review button to avoid overlapping mobile Safari controls */
@media (max-width: 768px) {
    .tutor-write-review-btn,
    .tutor-btn-primary.tutor-write-review-btn,
    [class*="write-review-btn"],
    [class*="write-review"],
    [class*="edit-review-btn"] {
        bottom: 80px !important;
        z-index: 9999 !important;
    }

    /* Ensure proper padding top for content below fixed mobile header */
    html body .tutor-dashboard {
        padding-top: 60px !important;
    }

    /* Dashboard nav on mobile — single column, compact */
    html body .tutor-dashboard-nav,
    html body .tutor-dashboard-menu {
        flex-direction: column !important;
    }

    /* Enrolled courses card grid — single column on mobile */
    html body .tutor-dashboard-content .tutor-course-card,
    html body .tutor-dashboard-content .tutor-course-loop-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ──── Enrolled course badges / status labels ──── */
.tutor-course-loop-badge,
.tutor-course-loop-level,
.tutor-badge,
.tutor-course-difficulty-level {
    background: rgba(0, 242, 254, 0.1) !important;
    color: #00f2fe !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    font-weight: 600 !important;
}

/* HIDE ALL tutor icons except stars completely, and hide circular backgrounds on dashboard cards */
[class*="tutor-icon-"]:not([class*="star"]),
.tutor-icon:not([class*="star"]),
.tutor-dashboard-menu-item i,
.tutor-dashboard-menu-item span.tutor-icon,
.tutor-svg-icon,
svg.tutor-icon,
.tutor-dashboard-info-card .tutor-icon,
.tutor-dashboard-stat-card .tutor-icon,
.tutor-dashboard-stats-card .tutor-icon,
.tutor-dashboard-single-stat .tutor-icon,
.tutor-dashboard-stats-item .tutor-icon,
.tutor-dashboard-info-card i,
.tutor-dashboard-stat-card i,
.tutor-dashboard-stats-card i,
.tutor-dashboard-single-stat i,
.tutor-dashboard-stats-item i,
.tutor-dashboard-info-card-icon,
.tutor-dashboard-stat-card-icon,
.tutor-dashboard-stats-card-icon,
.tutor-round-box {
    display: none !important;
}

/* HIDE white/grey footer bar and mobile dashboard bottom navigation menu completely */
.tutor-dashboard-footer,
footer.tutor-dashboard-footer,
.tutor-footer,
.tutor-app-footer,
.tutor-dashboard-footer-shadow,
.tutor-dashboard-footer-wrap,
#tutor-dashboard-footer,
.tutor-dashboard-footer-inner,
.tutor-dashboard-left-menu,
.tutor-dashboard-nav,
.tutor-dashboard-responsive-menu,
.tutor-dashboard-menu,
.tutor-dashboard-mobile-menu,
#tutor-dashboard-footer-mobile {
    display: none !important;
}

/* ──── FIX ⑥: HIDE FLOATING HAMBURGER TOGGLE ON DESKTOP ──── */
@media (min-width: 769px) {
    .m-menu-toggle,
    #js-m-menu-toggle {
        display: none !important;
    }
}