/* ================================================
   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 */
.tutor-course-nav,
.tutor-course-nav-items,
.tutor-course-nav-item,
.tutor-tabs,
.tutor-tabs-container {
  background: rgba(10, 15, 25, 0.95) !important;
  background-color: rgba(10, 15, 25, 0.95) !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
}

.tutor-course-nav-item a,
.tutor-tabs-btn,
.tutor-tabs-link,
.tutor-tabs-btn span,
.tutor-course-nav-item span {
  color: #ffffff !important; /* Inactive: clear gray */
  font-weight: 700 !important;
  text-decoration: none !important;
}

.tutor-course-nav-item.active a,
.tutor-course-nav-item.is-active a,
.tutor-tabs-btn.active,
.tutor-tabs-btn.is-active,
.tutor-tabs-btn.active span,
.tutor-tabs-btn.is-active span,
.tutor-course-nav-item.active span {
  color: var(--accent-cyan) !important; /* Active: bright glowing cyan */
  border-bottom: 2px solid var(--accent-cyan) !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,
html[lang="ar"] .tutor-dashboard *,
body.lang-ar .tutor-dashboard,
body.lang-ar .tutor-dashboard * {
  direction: rtl !important;
  text-align: right !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 */
}

/* ==========================================================================
   REMOVE ALL ICON ELEMENTS IN THE ARABIC VERSION (RTL) FOR A CLEAN LOOK
   ========================================================================== */
html[lang="ar"] .tutor-icon,
html[lang="ar"] .tutor-icon:before,
html[lang="ar"] .tutor-icon::before,
html[lang="ar"] [class*="tutor-icon"],
html[lang="ar"] [class*="tutor-icon"]:before,
html[lang="ar"] [class*="tutor-icon"]::before,
html[lang="ar"] [class^="tutor-icon"],
html[lang="ar"] [class^="tutor-icon"]:before,
html[lang="ar"] [class^="tutor-icon"]::before,
html[lang="ar"] .fa,
html[lang="ar"] .fa:before,
html[lang="ar"] .fa::before,
html[lang="ar"] [class*="fa-"],
html[lang="ar"] [class*="fa-"]:before,
html[lang="ar"] [class*="fa-"]::before,
html[lang="ar"] [class^="fa-"],
html[lang="ar"] [class^="fa-"]:before,
html[lang="ar"] [class^="fa-"]::before,
html[lang="ar"] i,
html[lang="ar"] i:before,
html[lang="ar"] i::before,
body.lang-ar .tutor-icon,
body.lang-ar .tutor-icon:before,
body.lang-ar .tutor-icon::before,
body.lang-ar [class*="tutor-icon"],
body.lang-ar [class*="tutor-icon"]:before,
body.lang-ar [class*="tutor-icon"]::before,
body.lang-ar [class^="tutor-icon"],
body.lang-ar [class^="tutor-icon"]:before,
body.lang-ar [class^="tutor-icon"]::before,
body.lang-ar .fa,
body.lang-ar .fa:before,
body.lang-ar .fa::before,
body.lang-ar [class*="fa-"],
body.lang-ar [class*="fa-"]:before,
body.lang-ar [class*="fa-"]::before,
body.lang-ar [class^="fa-"],
body.lang-ar [class^="fa-"]:before,
body.lang-ar [class^="fa-"]::before,
body.lang-ar i,
body.lang-ar i:before,
body.lang-ar i::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 gateway selection area */
.woocommerce-checkout #payment {
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-bottom: 15px !important;
  margin-bottom: 20px !important;
  list-style: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 12px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-weight: 700 !important;
}

/* Fix radio buttons */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--accent-cyan) !important;
  cursor: pointer !important;
  margin-left: 8px !important;
}

/* Gateway logos container */
.alm-checkout-gateways {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 15px !important; /* Space after label for RTL */
  vertical-align: middle !important;
}

html[dir="ltr"] .alm-checkout-gateways,
body.ltr .alm-checkout-gateways {
  margin-left: 0 !important;
  margin-right: 15px !important; /* Space after label for LTR */
}

/* Gateway logos */
.alm-checkout-gateways img {
  border-radius: 4px !important;
  background: transparent !important;
  padding: 1px !important;
  max-width: 80px !important;
  height: 20px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.15)) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Payment box details description */
.woocommerce-checkout #payment div.payment_box {
  background: rgba(14, 210, 247, 0.04) !important;
  border: 1px solid rgba(14, 210, 247, 0.15) !important;
  color: #cccccc !important;
  border-radius: 8px !important;
  padding: 15px 20px !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin: 10px 0 15px !important;
  position: relative !important;
}

.woocommerce-checkout #payment div.payment_box::before {
  content: "" !important;
  border: 8px solid transparent !important;
  border-bottom-color: rgba(14, 210, 247, 0.15) !important;
  position: absolute !important;
  top: -16px !important;
  right: 20px !important;
}

.woocommerce-checkout #payment div.payment_box strong {
  color: #ffffff !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  margin: 0 4px !important;
  font-family: monospace !important;
  font-size: 14px !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;
}