/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Qimah
Version: 1.0.5
Description: Child theme for Hello Elementor with custom Qimah styling.
*/

/* =========================================================
 1. LOCAL FONT DEFINITIONS
 (IBM Plex Sans Arabic loaded locally from your server)
========================================================= */

/* Regular (400) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* SemiBold (600) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
 Base fixes and overrides
========================================================= */

/* Global font */
body {
  font-family: var(--q-font) !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

html[dir="rtl"],
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

body {
  overflow-x: hidden;
  background: var(--q-bg) !important;
}

/* Dark background ONLY for 404 */
body.error404 {
  background-color: #24644e54;
}

/* =========================================================
 Qimah 404 Page Styling
========================================================= */
body.error404 #qimah-404 .q404-hero {
  background-image: url("https://qimah.net/wp-content/uploads/2025/09/ChatGPT-Image-Sep-10-2025-01_23_12-AM-min.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #eaf7f2;
  margin: 0;
  padding: 0;
  position: relative;
}

body.error404 #qimah-404 .q404-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 2rem;
  margin: 0 auto;
}

body.error404 #qimah-404 .q404-title {
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: #eaf7f2;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
  margin-bottom: 1.2rem;
}

body.error404 #qimah-404 .q404-sub {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #e2f1ea;
  opacity: 0.95;
  line-height: 1.6;
  margin-bottom: 2rem;
}

body.error404 #qimah-404 .q404-btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 50px;
  background-color: #1e6649;
  color: #eaf7f2;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

body.error404 #qimah-404 .q404-btn:hover {
  background-color: #17503a;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

/* Remove default Hello Elementor padding on error page */
body.error404 main.site-main,
body.error404 .elementor-location-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* 404 responsive */
@media (max-width: 767px) {
  body.error404 #qimah-404 .q404-hero {
    min-height: 75vh;
    background-attachment: scroll;
  }

  body.error404 #qimah-404 .q404-title {
    font-size: 2.2rem;
  }

  body.error404 #qimah-404 .q404-sub {
    font-size: 1rem;
  }

  body.error404 #qimah-404 .q404-btn {
    padding: 0.8rem 1.4rem;
  }
}

/* 404 fade-in animation */
body.error404 #qimah-404 .q404-inner {
  opacity: 0;
  transform: translateY(20px);
  animation: qimahFadeIn 1s ease-out forwards;
}

@keyframes qimahFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
 Qimah Design System - Global
========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --q-primary: #1e6649;
  --q-primary-2: #4f8a87;
  --q-green: #1e6649;
  --q-green-hover: #16533b;
  --q-text: #eaf3f0;
  --q-muted: #9cb6af;
  --glass-tint: rgba(8, 14, 12, 0.35);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-shadow: none;
  --q-bg: #071812;
}

:root {
  --q-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Elementor global typography (prevents Elementor from overriding your font) */
  --e-global-typography-primary-font-family: "IBM Plex Sans Arabic";
  --e-global-typography-secondary-font-family: "IBM Plex Sans Arabic";
  --e-global-typography-text-font-family: "IBM Plex Sans Arabic";
  --e-global-typography-accent-font-family: "IBM Plex Sans Arabic";

  --q-primary: #1e6649;
  --q-primary-2: #4f8a87;
  --q-green: #1e6649;
  --q-green-hover: #16533b;
  --q-green-20: rgba(30, 102, 73, 0.2);
  --q-text: #1f302c;
  --q-muted: #5a6f6a;
  --q-success: #0a875a;
  --q-info: #2563eb;
  --q-danger: #dc2626;
  --q-rad: 12px;
  --glass-tint: rgba(255, 255, 255, 0.1);
  --glass-blur: 14px;
  --glass-stroke: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  --q-bg: #ffffff; 
}

html, body {
  background: var(--q-bg) !important;
  color: var(--q-text) !important;
}

@media (max-width: 480px) {
  :root {
    --glass-blur: 8px;
  }
}

/* =========================================================
 Glass Surface
========================================================= */
.glass-surface {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  background: transparent !important;
  overflow: hidden;
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  padding: 36px 40px;
  max-width: 1200px;
  margin-inline: auto;
}

.glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  pointer-events: none;
  z-index: 0;
}

.glass-surface.rim-glow::before {
  background:
    radial-gradient(160% 160% at 40% 0%, rgba(255, 255, 255, 0.28) 0%, transparent 62%),
    radial-gradient(100% 120% at 60% 100%, rgba(255, 255, 255, 0.12) 0%, transparent 70%),
    var(--glass-tint);
}

.glass-surface>* {
  position: relative;
  z-index: 1;
}

/* =========================================================
 Header System
========================================================= */
.elementor-sticky,
.elementor-sticky--active,
.elementor-sticky--effects {
  transform: none !important;
}

.header-sticky {
  position: relative;
  overflow: visible !important;
  z-index: 100;
}

.header-glass {
  position: relative;
  border-radius: 28px;
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate;
}

.header-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(30, 102, 73, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.header-glass>*,
.header-row {
  position: relative;
  z-index: 1;
}

.header-row {
  overflow: visible !important;
  z-index: 200;
}

.header-row * {
  overflow: visible !important;
}

/* Search + Cart */
.elementskit-header-search .ekit-search-icon,
.elementskit-header-search .elementskit-search-icon {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ekit-search-fullscreen {
  z-index: 2147483646 !important;
}

.elementor-menu-cart__overlay {
  z-index: 2147483646 !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

.elementor-menu-cart__main {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 380px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  z-index: 2147483647 !important;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
}

html[dir="rtl"] .elementor-menu-cart__main {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-105%) !important;
}

html[dir="ltr"] .elementor-menu-cart__main {
  right: 0 !important;
  left: auto !important;
  transform: translateX(105%) !important;
}

.elementor-menu-cart__main[aria-hidden="false"],
.elementor-menu-cart--shown .elementor-menu-cart__main {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.elementor-menu-cart__main .widget_shopping_cart_content {
  max-height: 100vh;
  overflow: auto;
}

/* dark mode toggle */
.q-theme-toggle{
  position:relative;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
  padding:0;
}

.q-theme-toggle .q-glow{
  position:absolute;left:50%;top:50%;
  width:140%;height:140%;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 60%);
  transform: translate(-50%,-50%);
  pointer-events:none;
}

.q-theme-toggle .q-theme-icon{ position:relative; z-index:1; display:inline-flex; }
.q-theme-toggle .q-sun{ display:none; }
html[data-theme="dark"] .q-theme-toggle .q-sun{ display:inline-flex; }
html[data-theme="dark"] .q-theme-toggle .q-moon{ display:none; }

/* =========================================================
 Hero
========================================================= */
.hero-cover img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.hero-title {
  color: #163d31;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
}

.hero-desc {
  color: #2f5d50;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 52ch;
}

.hero-progress .ld-progress {
  height: 10px;
  background: var(--q-green-20);
  border-radius: 999px !important;
  margin: 6px 0 12px;
}

.hero-progress .ld-progress-bar {
  background: var(--q-green);
  border-radius: 999px !important;
}

.hero-progress .ld-progress-stats,
.hero-progress .ld-progress-steps {
  display: none !important;
}

/* Resume button */
.hero-resume {
  text-align: center;
}

.hero-resume .ld-button,
.hero-resume a {
  display: inline-block;
  min-width: 240px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--q-green);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-resume .ld-button:hover,
.hero-resume a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.hero-resume .ld-button:active,
.hero-resume a:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* =========================================================
 LearnDash layout helpers
========================================================= */
.learndash-wrapper {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.learndash-wrapper .ld-course-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  position: relative;
}

.learndash-wrapper .ld-content-area {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.learndash-wrapper .ld-course-navigation {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 10;
  padding-bottom: 20px;
}

.learndash-wrapper .ld-course-navigation.ld-course-nav-collapsed {
  flex: 0 0 50px;
  width: 50px;
}

.learndash-wrapper .ld-course-navigation.ld-course-nav-collapsed~.ld-content-area {
  max-width: none;
}

.learndash-wrapper .ld-content-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 20px 0;
  gap: 15px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.learndash-wrapper .ld-content-actions>* {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.learndash-wrapper .ld-progress {
  margin: 20px 0;
}

/* Videos responsive */
.learndash-wrapper .entry-content iframe,
.learndash-wrapper iframe[src*="bunny"],
.learndash-wrapper iframe[src*="bunnycdn"],
.learndash-wrapper .wp-video,
.learndash-wrapper .wp-block-video,
.learndash-wrapper video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;
}

/* =========================================================
 Topic/Lesson tweaks
========================================================= */
.learndash-wrapper .ld-topic-status .ld-breadcrumbs {
  display: none !important;
}

div:has(> iframe[src*="mediadelivery.net"]) {
  padding-top: 0 !important;
}

body.single-sfwd-topic #ld-focus-content iframe[src*="iframe.mediadelivery.net"] {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.single-sfwd-topic .site-main,
.single-sfwd-topic .content-area,
.single-sfwd-topic .site-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.single-sfwd-topic .ld-course-status,
.single-sfwd-topic .ld-status,
.single-sfwd-topic .ld-progress {
  display: none;
}

.single-sfwd-topic .ld-content-actions .ld-button {
  padding: 14px 22px;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}

.single-sfwd-topic .ld-content-actions .ld-button:hover {
  background: #222;
  color: #fff;
}

/* =========================================================
 Focus Mode
========================================================= */
.ld-focus .ld-focus-sidebar {
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 320px !important;
  max-width: 85vw !important;
  background: #fff !important;
  transform: translateX(-100%) !important;
  transition: transform 0.25s ease !important;
  z-index: 10020 !important;
}

.ld-focus:not(.ld-focus-sidebar-collapsed) .ld-focus-sidebar {
  transform: translateX(0) !important;
}

body:has(.ld-focus:not(.ld-focus-sidebar-collapsed))::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 10010;
  pointer-events: none;
}

.ld-focus .ld-button-toggle {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10030 !important;
}

.ld-focus .ld-focus-main {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

.ld-focus .entry-content iframe[src*="iframe.mediadelivery.net"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
}

@supports not (selector(:has(*))) {
  body::before {
    content: none !important;
  }
}

/* =========================================================
 Contact Buttons (iPad)
========================================================= */
@media screen and (min-width: 767px) and (max-width: 1366px) {

  body.single-sfwd-topic .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container,
  body.single-sfwd-lessons .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container,
  body.learndash-focus-mode .elementor-widget-contact-buttons .e-contact-buttons__chat-button-container {
    position: fixed !important;
    bottom: 140px !important;
    right: 16px !important;
  }

  body.single-sfwd-topic .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom,
  body.single-sfwd-lessons .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom,
  body.learndash-focus-mode .elementor-widget-contact-buttons .e-contact-buttons.has-v-alignment-bottom {
    bottom: 140px !important;
    right: 16px !important;
  }
}

/* =========================================================
 Responsive layout helpers
========================================================= */
@media (max-width: 1024px) {
  .glass-surface {
    padding: 24px;
  }

  .hero-cover img {
    height: 300px;
  }

  body.single-sfwd-courses #id-hero .glass-surface.rim-glow {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .learndash-wrapper {
    max-width: 100%;
  }

  .learndash-wrapper .ld-course-navigation {
    flex: 0 0 250px;
    width: 250px;
  }
}

@media (max-width: 768px) {
  .learndash-wrapper {
    padding: 0 15px;
  }

  .learndash-wrapper .ld-course-content {
    flex-direction: column;
    gap: 20px;
  }

  .learndash-wrapper .ld-content-area,
  .learndash-wrapper .ld-course-navigation {
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    position: relative;
    top: auto;
    max-height: none;
  }

  .learndash-wrapper .ld-course-navigation {
    order: 2;
  }

  .learndash-wrapper .ld-content-area {
    order: 1;
  }

  .learndash-wrapper .ld-content-actions {
    flex-direction: column;
    gap: 10px;
  }

  .learndash-wrapper .ld-content-actions>* {
    width: 100%;
    text-align: center;
  }

  .elementor .glass-surface {
    flex-direction: column;
    gap: 20px;
  }

  .hero-cover img {
    height: 220px;
  }

  .hero-resume .ld-button,
  .hero-resume a {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .learndash-wrapper {
    padding: 0 10px;
  }

  .learndash-wrapper .ld-course-content {
    gap: 15px;
  }
}

/* ========== Bunny player block ========== */
.qimah-bunny {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.qimah-bunny .video-js,
.qimah-bunny video,
.qimah-bunny .vjs-tech {
  width: 100% !important;
  height: auto !important;
  background-color: transparent !important;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .qimah-bunny {
    height: 0;
    padding-top: 56.25%;
  }

  .qimah-bunny .video-js {
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 820px) {
  .qimah-bunny .vjs-tech {
    object-fit: contain;
    background-color: #0000;
  }
}

.qimah-bunny .vjs-fluid {
  padding-top: 0 !important;
  height: auto !important;
}

/* ====================== Checkout polish ====================== */

/* Notices */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup,
.woocommerce-NoticeGroup-checkout {
  display: block !important;
  scroll-margin-top: 120px;
}

:is(ul.woocommerce-error, .woocommerce-info, .woocommerce-message) {
  display: block !important;
  margin: 0 0 14px;
  padding: 12px 14px 12px 44px;
  border-left: 4px solid;
  border-radius: var(--q-rad);
  position: relative;
  font-weight: 500;
  background: #fff;
}

ul.woocommerce-error {
  color: #7f1d1d;
  border-color: var(--q-danger);
  background: linear-gradient(135deg, #fff6f6, #fee2e2);
}

.woocommerce-info {
  color: #1e3a8a;
  border-color: var(--q-info);
  background: linear-gradient(135deg, #f5f9ff, #dbeafe);
}

.woocommerce-message {
  color: #14532d;
  border-color: var(--q-success);
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

ul.woocommerce-error li {
  margin: 4px 0;
  list-style: none;
}

ul.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 18px;
}

ul.woocommerce-error::before {
  content: "⚠️";
}

.woocommerce-info::before {
  content: "ℹ️";
}

.woocommerce-message::before {
  content: "✅";
}

/* Hide coupon blurb */
.e-coupon-box .e-description,
[class*="coupon"][class*="description"] {
  display: none !important;
}

/* Coupon form */
.woocommerce-form-coupon,
.checkout_coupon {
  display: block !important;
}

/* Coupon card */
.e-coupon-box,
.coupon-container-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #ecfdf5, #e6f7f3);
  border: 1px solid #b7e4d8;
  border-radius: 16px;
  padding: 14px;
}

#coupon_code {
  height: 48px;
  border-radius: 24px;
  border: 2px solid #92d3c6;
  background: #fff;
  padding: 0 16px;
  font-size: 15px;
}

.e-coupon-box .e-apply-coupon,
.coupon-container-grid .woocommerce-button {
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--q-primary) 0%, #047857 100%);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
}

/* Inputs: strong borders + green focus (FIXED) */
.woocommerce form .form-row :is(input, select, textarea):focus {
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 2px rgba(30, 102, 73, 0.18) !important;
  outline: 0 !important;
}

/* Checkout grid */
.woocommerce-checkout .col2-set {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  width: 100% !important;
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  text-align: right !important;
}

.woocommerce-checkout-review-order-table thead th {
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.woocommerce-checkout-review-order-table .order-total {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #7c3aed !important;
  padding: 18px 16px !important;
  border: none !important;
}

/* Payment methods */
.wc_payment_methods li {
  list-style: none !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.wc_payment_methods li:hover {
  border-color: #c084fc !important;
}

.wc_payment_methods li input[type="radio"] {
  margin: 16px !important;
  float: right !important;
}

.wc_payment_methods li label {
  padding: 16px 50px 16px 16px !important;
  display: block !important;
  cursor: pointer !important;
}

.wc_payment_methods li input[type="radio"]:checked~label {
  background: #f3e8ff !important;
  color: #7c3aed !important;
  font-weight: 600 !important;
}

.payment_box {
  background: #f9fafb !important;
}

/* Labels */
.woocommerce-checkout label {
  font-weight: 600 !important;
  color: #374151 !important;
  display: block !important;
}

/* Guest login button */
.woocommerce-form-login .button,
.woocommerce-form-login input[type="submit"] {
  background: var(--q-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.woocommerce-form-login .button:disabled,
.woocommerce-form-login input[type="submit"]:disabled,
.woocommerce-form-login .button.disabled {
  background: var(--q-green) !important;
  color: #fff !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* 1. Default (Light Mode) - Keep this! */
#id-hero {
  background-image: linear-gradient(180deg, #1e6649 50%, #fffdf6 100%) !important;
  background-size: cover !important;
}

/* 2. Dark Mode Override - ADD THIS BELOW */
html[data-theme="dark"] #id-hero {
    /* Changes the bottom beige to dark green */
    background-image: linear-gradient(180deg, #1e6649 50%, #163d31 100%) !important;
}

/* Qimah Next Step pill - glassy continue style */
.q-next-step {
  margin: 8px 0 2px;
}

.q-next-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #dbe7e3;
  border-radius: 999px;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  color: #0f3b2f;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.q-next-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.q-next-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e8f5ef;
  color: #1e6649;
  align-items: center;
  justify-content: center;
}

.q-next-k {
  opacity: 0.75;
  font-weight: 700;
}

.q-next-title {
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-next-dot {
  opacity: 0.5;
}

.q-next-pct {
  background: #e8f5ef;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #1e6649;
}

/* Only inside the hero */
#id-hero .q-next-link {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

#id-hero .q-next-title {
  color: #fff;
}

#id-hero .q-next-k {
  color: #fff;
  opacity: 0.9;
}

#id-hero .q-next-dot {
  color: #fff;
  opacity: 0.6;
}

#id-hero .q-next-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Apply RTL to that specific widget */
.rtl-blurb {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* Scope to Focus Mode content pane */
.ld-focus .ld-content .q-lesson-topics-wrap,
.learndash-focus .ld-content .q-lesson-topics-wrap {
  margin-top: 24px;
}

/* Title */
.q-lesson-topics-title {
  margin: 0 0 12px;
  font-weight: 700;
  color: #1e6649;
}

/* Empty state note */
.q-lesson-empty-note {
  margin-top: 12px;
  color: #868686;
  font-size: 14px;
}
/* =========================================================
   DARK MODE: LEARNDASH FOCUS FIXES
========================================================= */

/* 1. Turn the Sidebar Dark */
html[data-theme="dark"] .ld-focus .ld-focus-sidebar {
    background-color: #163d31 !important; /* Darker Green for Sidebar */
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* 2. Turn the Main Content Area Dark */
html[data-theme="dark"] .ld-focus .ld-focus-main,
html[data-theme="dark"] .ld-focus .ld-focus-content,
html[data-theme="dark"] .ld-focus-header,
html[data-theme="dark"] .ld-content-actions {
    background-color: transparent !important;
    color: #eaf3f0 !important;
}

/* 3. Fix Text Colors in Focus Mode */
html[data-theme="dark"] .ld-focus-content h1,
html[data-theme="dark"] .ld-focus-content h2,
html[data-theme="dark"] .ld-focus-content h3,
html[data-theme="dark"] .ld-focus-content h4,
html[data-theme="dark"] .ld-focus-content p,
html[data-theme="dark"] .ld-focus-content li {
    color: #ffffff !important;
}

/* 4. Sidebar Menu Items (Dark Mode) */
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item,
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-item {
    color: #eaf3f0 !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item:hover,
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-item:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* =========================================================
   DARK MODE: CARD FIXES (q-card)
   Turns white cards dark green so text is readable
========================================================= */
html[data-theme="dark"] .q-card {
    background-color: #163d31 !important; /* Dark Green */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle Border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Force text inside these cards to be light */
html[data-theme="dark"] .q-card h1,
html[data-theme="dark"] .q-card h2,
html[data-theme="dark"] .q-card h3,
html[data-theme="dark"] .q-card h4,
html[data-theme="dark"] .q-card h5,
html[data-theme="dark"] .q-card p,
html[data-theme="dark"] .q-card span,
html[data-theme="dark"] .q-card div {
    color: #eaf3f0 !important;
}
/* =========================================================
   QIMAH MINIMAL FIXES
   Version: 1.0.5-minimal
   
   ONLY: Testimonials dark mode, Sidebar text contrast, Global font
   Append to end of style.css
========================================================= */

/* ---------------------------------------------------------
   1. GLOBAL FONT - Force IBM Plex Sans Arabic everywhere
--------------------------------------------------------- */

html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, label,
input, textarea, select, button,
div, section, article, header, footer, nav {
    font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ---------------------------------------------------------
   2. TESTIMONIALS - Dark mode text fix
   Keep card white, force dark text on inner content
--------------------------------------------------------- */

html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__content,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__text,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__text p,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__text .elementor-widget-text-editor,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__text [data-widget_type="text-editor.default"],
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__name,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__title {
    color: #1f302c !important;
}

/* ---------------------------------------------------------
   3. FOCUS MODE - Dark mode fixes
--------------------------------------------------------- */

/* Main content area background */
html[data-theme="dark"] .ld-focus-content,

/* SIDEBAR */

/* Topic list container - fix white background */
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list,
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-list {
    background: transparent !important;
}

/* Topic items wrapper */
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list-items,
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-list-items {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px;
    margin: 4px 8px;
}

/* Lesson titles - bright white */
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item-preview-heading,
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-title,
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item-preview {
    color: #ffffff !important;
}

/* Topic links */
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-item a,
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list-item a,
html[data-theme="dark"] .ld-focus-sidebar a.ld-table-list-item-preview,
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list-item-preview {
    color: #d4e8e2 !important;
    background: transparent !important;
}

/* Topic link hover */
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-item a:hover,
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list-item a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Current/active topic - highlighted */
html[data-theme="dark"] .ld-focus-sidebar a.ld-table-list-item-preview[aria-current="page"],
html[data-theme="dark"] .ld-focus-sidebar .ld-topic-item.ld-is-current-item a,
html[data-theme="dark"] .ld-focus-sidebar .ld-table-list-item.ld-is-current-item a {
    color: #ffffff !important;
    background: var(--q-primary) !important;
}

/* "X Topics" count labels - muted */
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item-expanded-label,
html[data-theme="dark"] .ld-focus-sidebar .ld-section-heading,
html[data-theme="dark"] .ld-focus-sidebar .ld-status-icon + span {
    color: #7fb8a8 !important;
}

/* Course title in sidebar header */
html[data-theme="dark"] .ld-focus-sidebar .ld-course-navigation-heading,
html[data-theme="dark"] #ld-course-navigation-heading,
html[data-theme="dark"] .ld-focus-sidebar .ld-course-navigation-heading span {
    color: #ffffff !important;
}

/* Fix double arrow - hide duplicate expand icons */
.ld-focus-sidebar .ld-lesson-item-expanded .ld-icon-arrow-down:nth-of-type(2),
.ld-focus-sidebar .ld-expand-button .ld-icon:nth-of-type(2) {
    display: none !important;
}

/* Expand/collapse arrow styling */
html[data-theme="dark"] .ld-focus-sidebar .ld-expand-button,
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item-expanded {
    color: #7fb8a8 !important;
}


html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson > .ld-lesson-item-preview {
    background: rgba(30, 102, 73, 0.3) !important;
}
/* Dark mode base */
/* Dark mode base */
html[data-theme="dark"] .ld-focus,
html[data-theme="dark"] .ld-focus .ld-focus-main {
    background: #071812 !important;
}

body.ld-in-focus-mode .learndash-wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* =========================================================
   Focus Mode Header + Current Lesson Contrast Fix
   Append at end
========================================================= */

/* 1) Header: force dark bg + white text in dark mode */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header,
html[data-theme="dark"] body.ld-in-focus-mode .ld-focus-header {
  background: #071812 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: #eaf3f0 !important;
  box-sizing: border-box;
}

/* 2) Header: kill the green (LearnDash uses .ld-secondary-color) */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-secondary-color,
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-progress-percentage,
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-progress-steps,
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header a,
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-text,
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header span {
  color: #eaf3f0 !important;
}

/* 3) Header: prevent overflow/bleed (actions are inside header) */
#ld-focus-header .ld-content-actions {
  flex-wrap: wrap;
  gap: 12px;
}

/* Make header actions compact (no big margins/borders) */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-content-actions {
  margin-top: 0 !important;
  padding: 10px 0 !important;
  border-top: 0 !important;
}

/* Reduce the bright separators */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header * {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Optional: make "Mark Complete" text white */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .learndash_mark_complete_button {
  color: #ffffff !important;
}

/* 4) Current lesson: force WHITE on the anchor + title */
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson a,
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-title,
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading {
  color: #ffffff !important;
}

/* Current lesson: stronger highlight */
html[data-theme="dark"] .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson > .ld-lesson-item-preview {
  background: rgba(30, 102, 73, 0.35) !important;
  border-inline-start: 4px solid var(--q-primary) !important;
}
/* =========================================================
   Focus Mode header: remove logo white block + no-bleed (all modes)
========================================================= */

/* 1) No-bleed header actions (applies to light + dark) */
body.ld-in-focus-mode #ld-focus-header .ld-content-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0 !important;
  padding: 10px 0 !important;
  border-top: 0 !important;
}

/* 2) Remove the white background behind the brand/logo block */
body.ld-in-focus-mode #ld-focus-header .ld-brand-logo,
body.ld-in-focus-mode #ld-focus-header .ld-brand-logo a {
  background: transparent !important;
}

body.ld-in-focus-mode #ld-focus-header .ld-brand-logo img {
  background: transparent !important;
  display: block;
}

/* 3) Optional: make the logo readable in dark mode (white) */
html[data-theme="dark"] body.ld-in-focus-mode #ld-focus-header .ld-brand-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* =========================================================
   LearnDash Course Infobar - styling (Qimah look)
========================================================= */

/* Main bar */
.elementor-widget-ld-course-infobar .ld-course-status {
  border-radius: 14px;
  border: 1px solid rgba(30,102,73,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Segment separators */
.elementor-widget-ld-course-infobar .ld-course-status-segment {
  position: relative;
}

.elementor-widget-ld-course-infobar .ld-course-status-segment:not(:last-child) {
  border-inline-end: 1px solid rgba(30,102,73,0.18);
}

/* Headings */
.elementor-widget-ld-course-infobar .ld-course-status-label {
  font-weight: 700;
  letter-spacing: 0;
}

/* Price styling */
.elementor-widget-ld-course-infobar .ld-course-status-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The actual join button */
.elementor-widget-ld-course-infobar a.ld-enrollment__join-button,
.elementor-widget-ld-course-infobar a#btn-join {
  background: #1E6649;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 22px rgba(30,102,73,0.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.elementor-widget-ld-course-infobar a.ld-enrollment__join-button:hover,
.elementor-widget-ld-course-infobar a#btn-join:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(30,102,73,0.34);
}

/* Accessible focus */
.elementor-widget-ld-course-infobar a.ld-enrollment__join-button:focus-visible,
.elementor-widget-ld-course-infobar a#btn-join:focus-visible {
  outline: 3px solid rgba(79,138,135,0.55);
  outline-offset: 3px;
}
/* =========================================================
   Qimah - Saudi Riyal official symbol (SVG)
   Uses mask so the symbol inherits text color (currentColor).
   SVG URL comes from: --qm-sar-svg (functions.php)
========================================================= */

/* LearnDash: span injected by JS */
.qm-sar-symbol {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  -webkit-mask: var(--qm-sar-svg, url("https://qimah.net/wp-content/uploads/sar-symbol.svg")) no-repeat center / contain;
  mask: var(--qm-sar-svg, url("https://qimah.net/wp-content/uploads/sar-symbol.svg")) no-repeat center / contain;
  background: currentColor;
  margin-inline-end: 0.30em;
  vertical-align: -0.10em;
  
}
/* Elementor: align headings for sar symbol*/
.elementor-heading-title .qm-sar-symbol { vertical-align: -0.12em; }

/* WooCommerce: inject symbol before amount everywhere */
.woocommerce .woocommerce-Price-amount.amount::before,
.woocommerce-page .woocommerce-Price-amount.amount::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.95em !important;
  height: 0.95em !important;

  -webkit-mask-image: var(--qm-sar-svg, url("https://qimah.net/wp-content/uploads/sar-symbol.svg")) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--qm-sar-svg, url("https://qimah.net/wp-content/uploads/sar-symbol.svg")) !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  background: currentColor !important;
  margin-inline-end: 0.30em !important;
  vertical-align: -0.10em !important;
}

/* Defensive: if any template still prints a currency span */
.woocommerce-Price-currencySymbol { display: none !important; }

/* Numeric alignment */
.woocommerce-Price-amount,
.ld-course-status-price {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Qimah – Course Included Features
   ═══════════════════════════════════════════════════════════ */

.qm-course-included-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qm-course-included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px 16px;
  direction: rtl;
  text-align: right;
}

/* Grid columns */
.qm-course-included.qm-cols-1 { grid-template-columns: 1fr; }
.qm-course-included.qm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qm-course-included.qm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qm-course-included.qm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ─────────────────────────────────────────────────────────
   Base pill
   ───────────────────────────────────────────────────────── */
.qm-course-included li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
}

/* ─────────────────────────────────────────────────────────
   Featured item (first row, full width)
   ───────────────────────────────────────────────────────── */
.qm-course-included.qm-featured li {
  padding: 14px 18px;
  min-height: 56px;
}

.qm-course-included.qm-featured .qm-label {
  font-size: 16px;
}

.qm-course-included.qm-featured .qm-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 16px;
}

/* ─────────────────────────────────────────────────────────
   Icon badge
   ───────────────────────────────────────────────────────── */
.qm-course-included .qm-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   Label text
   ───────────────────────────────────────────────────────── */
.qm-course-included .qm-label {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   ✓ INCLUDED – subtle green tint
   ───────────────────────────────────────────────────────── */
.qm-course-included li.is-in {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(230, 245, 235, 0.95) 100%
  );
  border: 1px solid rgba(30, 102, 73, 0.2);
}

.qm-course-included li.is-in .qm-icon {
  color: #1E6649;
  background: rgba(30, 102, 73, 0.15);
  border: 1.5px solid rgba(30, 102, 73, 0.3);
}

.qm-course-included li.is-in .qm-label {
  color: #1a3d2e;
}

/* ─────────────────────────────────────────────────────────
   ✗ NOT INCLUDED – subtle red/pink tint
   ───────────────────────────────────────────────────────── */
.qm-course-included li.is-out {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 240, 240, 0.6) 100%
  );
  border: 1.5px dashed rgba(180, 100, 100, 0.25);
}

.qm-course-included li.is-out .qm-icon {
  color: #9f5656;
  background: rgba(180, 100, 100, 0.1);
  border: 1.5px solid rgba(180, 100, 100, 0.25);
}

.qm-course-included li.is-out .qm-label {
  color: #5c4a4a;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .qm-course-included.qm-cols-2,
  .qm-course-included.qm-cols-3,
  .qm-course-included.qm-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .qm-course-included li {
    min-height: 44px;
    padding: 9px 12px;
  }
  
  .qm-course-included.qm-featured li {
    min-height: 48px;
    padding: 12px 14px;
  }
}
/* ─────────────────────────────────────────────────────────
   Course Stats Row [qimah_course_stats]
   ───────────────────────────────────────────────────────── */
.qm-stats-row {
  display: flex;
  justify-content: flex-end;
  gap: 48px;
  padding: 16px 0;
  direction: rtl;
}

.qm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qm-stat-value {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.qm-stat-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
  .qm-stats-row {
    justify-content: center;
    gap: 40px;
  }
  
  .qm-stat-value {
    font-size: 28px;
  }
}