/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Author: Qimah
Version: 1.6.0
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;
}

/* Medium (500) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  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 + base */
body {
  font-family: var(--q-font) !important;
  overflow-x: hidden;
  background: var(--q-bg) !important;
}

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

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

/* =========================================================
 Qimah Design System - Global
========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Core variables */
  --q-primary: #1e6649;
  --q-primary-2: #4f8a87;
  --q-green: #1e6649;
  --q-green-hover: #16533b;
  --q-text: #eaf3f0;
  --q-muted: #9cb6af;
  --q-bg: #0d2119;

  /* Glass - keep low opacity for hero visibility */
  --glass-tint: rgba(8, 14, 12, 0.35);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-shadow: none;

  /* Surface hierarchy — aggressive steps for visible card lift */
  --q-surface-1: #15352b;
  --q-surface-2: #1d4c3e;
  --q-surface-3: #256557;
  --q-surface-elevated: #256557;

  /* Extended variables for component fixes */
  --q-text-secondary: #bdd4ca;
  --q-border: rgba(255, 255, 255, 0.1);
  --q-border-subtle: rgba(255, 255, 255, 0.06);
  --q-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
}

: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-text-secondary: #3d5650;
  --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;

  /* Surface hierarchy (light mode) */
  --q-surface-1: #ffffff;
  --q-surface-2: #f5f8f7;
  --q-surface-3: #edf2f0;
  --q-surface-elevated: #ffffff;

  /* Borders */
  --q-border: rgba(30, 102, 73, 0.12);
  --q-border-subtle: rgba(30, 102, 73, 0.06);
}

html, body {
  margin: 0;
  padding: 0;
  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; }

/* =========================================================
   DARK MODE: CARD FIXES (q-card)
   Turns white cards dark green so text is readable
========================================================= */
html[data-theme="dark"] .q-card {
    background-color: var(--q-surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !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 FIXES
   Global font, testimonials, focus mode dark mode
========================================================= */

/* ---------------------------------------------------------
   1. GLOBAL FONT - Force IBM Plex Sans Arabic everywhere
   Wildcard with exclusions for icon fonts
--------------------------------------------------------- */
*:not([class*="ld-icon"]):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.dashicons):not([class*="dashicons-"]):not([class*="eicon"]) {
    font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* Force LearnDash icons to use correct icon font */
[class*="ld-icon"] {
    font-family: ld-icons !important;
}

/* ---------------------------------------------------------
   1b. Replace Hello Elementor #c36 red with brand green.
   Global — buttons site-wide get green instead of red.
   Excludes plugin tab/toggle components that have their own
   hover styles (QVM tabs, leaderboard tabs, etc.).
--------------------------------------------------------- */
[type=button],
[type=submit],
button {
    border-color: #1E6649;
    color: #1E6649;
}
[type=button]:hover,
[type=button]:focus,
[type=submit]:hover,
[type=submit]:focus,
button:hover,
button:focus {
    background-color: #1E6649;
    color: #fff;
}
/* Undo green fill for plugin tab/toggle buttons on light bg.
   These <button>s have their own hover bg but no explicit color,
   so the bare button:hover { color:#fff } above turns text invisible. */
/* QVM pill nav: prevent global button:hover white text bleed.
   All pills use green text — active has light tinted bg, not solid green. */
.qvm-pill,
.qvm-pill:hover,
.qvm-pill:focus,
.qvm-pill.qvm-pill--active,
.qvm-pill.qvm-pill--active:hover,
.qvm-pill.qvm-pill--active:focus {
    background-color: transparent !important;
    color: #1E6649 !important;
}
.qvm-pill.qvm-pill--active,
.qvm-pill.qvm-pill--active:hover,
.qvm-pill.qvm-pill--active:focus {
    background-color: rgba(45, 90, 66, 0.1) !important;
}
.qvm-pill:hover:not(.qvm-pill--active) {
    background-color: rgba(30, 102, 73, 0.06) !important;
}
.q-leaderboard-tab:hover:not(.active),
.q-leaderboard-tab:focus:not(.active) {
    background-color: rgba(30, 102, 73, 0.08) !important;
    color: #1E6649 !important;
}
.q-leaderboard-tab.active:hover,
.q-leaderboard-tab.active:focus {
    background-color: var(--q-brand, #1e6649) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------
   2. TESTIMONIALS - Dark mode fix
   Card gets dark surface, text goes light (matches q-card pattern)
--------------------------------------------------------- */

html[data-theme="dark"] .elementor-testimonial {
    background: var(--q-surface-2) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: var(--q-rad) !important;
}

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__name,
html[data-theme="dark"] .elementor-testimonial .elementor-testimonial__title {
    color: var(--q-text) !important;
}


/* =========================================================
   Qimah - Saudi Riyal official symbol (SVG)
   Uses mask so the symbol inherits text color (currentColor).
   SVG inlined as data URI (zero HTTP requests)
========================================================= */

/* LearnDash: span injected by JS */
.qm-sar-symbol {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  -webkit-mask: var(--qm-sar-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62 1113.02c-20.06 44.48-33.32 92.75-38.4 143.37l424.51-90.24c20.06-44.47 33.31-92.75 38.4-143.37l-424.51 90.24Z'/%3E%3Cpath d='M1085.73 895.8c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.33v-135.2l292.27-62.11c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.27V66.13c-50.67 28.45-95.67 66.32-132.25 110.99v403.35l-132.25 28.11V0c-50.67 28.44-95.67 66.32-132.25 110.99v525.69l-295.91 62.88c-20.06 44.47-33.33 92.75-38.42 143.37l334.33-71.05v170.26l-358.3 76.14c-20.06 44.47-33.32 92.75-38.4 143.37l375.04-79.7c30.53-6.35 56.77-24.4 73.83-49.24l68.78-101.97v-.02c7.14-10.55 11.3-23.27 11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E")) no-repeat center / contain;
  mask: var(--qm-sar-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62 1113.02c-20.06 44.48-33.32 92.75-38.4 143.37l424.51-90.24c20.06-44.47 33.31-92.75 38.4-143.37l-424.51 90.24Z'/%3E%3Cpath d='M1085.73 895.8c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.33v-135.2l292.27-62.11c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.27V66.13c-50.67 28.45-95.67 66.32-132.25 110.99v403.35l-132.25 28.11V0c-50.67 28.44-95.67 66.32-132.25 110.99v525.69l-295.91 62.88c-20.06 44.47-33.33 92.75-38.42 143.37l334.33-71.05v170.26l-358.3 76.14c-20.06 44.47-33.32 92.75-38.4 143.37l375.04-79.7c30.53-6.35 56.77-24.4 73.83-49.24l68.78-101.97v-.02c7.14-10.55 11.3-23.27 11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E")) 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62 1113.02c-20.06 44.48-33.32 92.75-38.4 143.37l424.51-90.24c20.06-44.47 33.31-92.75 38.4-143.37l-424.51 90.24Z'/%3E%3Cpath d='M1085.73 895.8c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.33v-135.2l292.27-62.11c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.27V66.13c-50.67 28.45-95.67 66.32-132.25 110.99v403.35l-132.25 28.11V0c-50.67 28.44-95.67 66.32-132.25 110.99v525.69l-295.91 62.88c-20.06 44.47-33.33 92.75-38.42 143.37l334.33-71.05v170.26l-358.3 76.14c-20.06 44.47-33.32 92.75-38.4 143.37l375.04-79.7c30.53-6.35 56.77-24.4 73.83-49.24l68.78-101.97v-.02c7.14-10.55 11.3-23.27 11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E")) !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: var(--qm-sar-svg, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62 1113.02c-20.06 44.48-33.32 92.75-38.4 143.37l424.51-90.24c20.06-44.47 33.31-92.75 38.4-143.37l-424.51 90.24Z'/%3E%3Cpath d='M1085.73 895.8c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.33v-135.2l292.27-62.11c20.06-44.47 33.32-92.75 38.4-143.37l-330.68 70.27V66.13c-50.67 28.45-95.67 66.32-132.25 110.99v403.35l-132.25 28.11V0c-50.67 28.44-95.67 66.32-132.25 110.99v525.69l-295.91 62.88c-20.06 44.47-33.33 92.75-38.42 143.37l334.33-71.05v170.26l-358.3 76.14c-20.06 44.47-33.32 92.75-38.4 143.37l375.04-79.7c30.53-6.35 56.77-24.4 73.83-49.24l68.78-101.97v-.02c7.14-10.55 11.3-23.27 11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E")) !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;
}

/* =========================================================
   LIGHT & DARK MODE: Type/Toggle Button Styling
   Ensures proper contrast for toggle buttons in all modes
========================================================= */

/* ---- LIGHT MODE: Inactive type buttons ---- */
button[class*="type"]:not(.active),
button[class*="scope"]:not(.active),
button[class*="mode"]:not(.active),
[class*="btn-group"] button:not(.active),
[class*="button-group"] button:not(.active),
[class*="toggle"] button:not(.active),
[class*="switch"] button:not(.active),
[class*="segment"] button:not(.active),
[class*="modal"] button:not(.active):not([class*="primary"]):not([class*="close"]):not([class*="submit"]) {
  color: #1f302c !important;
  background-color: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
}

/* ---- LIGHT MODE: Active type buttons ---- */
button[class*="type"].active,
button[class*="scope"].active,
button[class*="mode"].active,
[class*="btn-group"] button.active,
[class*="button-group"] button.active,
[class*="toggle"] button.active,
[class*="switch"] button.active,
[class*="segment"] button.active,
[class*="modal"] button.active {
  color: #fff !important;
  background-color: #1e6649 !important;
  border-color: #1e6649 !important;
}

/* ---- LIGHT MODE: Hover state for inactive buttons ---- */
button[class*="type"]:not(.active):hover,
button[class*="scope"]:not(.active):hover,
button[class*="mode"]:not(.active):hover {
  background-color: #e5e7eb !important;
  border-color: #9ca3af !important;
}

/* ---- DARK MODE: Inactive type buttons ---- */
html[data-theme="dark"] button[class*="type"]:not(.active),
html[data-theme="dark"] button[class*="scope"]:not(.active),
html[data-theme="dark"] button[class*="mode"]:not(.active),
html[data-theme="dark"] [class*="btn-group"] button:not(.active),
html[data-theme="dark"] [class*="button-group"] button:not(.active),
html[data-theme="dark"] [class*="toggle"] button:not(.active),
html[data-theme="dark"] [class*="switch"] button:not(.active),
html[data-theme="dark"] [class*="segment"] button:not(.active),
html[data-theme="dark"] [class*="modal"] button:not(.active):not([class*="primary"]):not([class*="close"]):not([class*="submit"]) {
  color: #eaf3f0 !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ---- DARK MODE: Active type buttons ---- */
html[data-theme="dark"] button[class*="type"].active,
html[data-theme="dark"] button[class*="scope"].active,
html[data-theme="dark"] button[class*="mode"].active,
html[data-theme="dark"] [class*="btn-group"] button.active,
html[data-theme="dark"] [class*="button-group"] button.active,
html[data-theme="dark"] [class*="toggle"] button.active,
html[data-theme="dark"] [class*="switch"] button.active,
html[data-theme="dark"] [class*="segment"] button.active,
html[data-theme="dark"] [class*="modal"] button.active {
  color: #fff !important;
  background-color: #1e6649 !important;
  border-color: #34d399 !important;
}

/* ---- DARK MODE: Hover state for inactive buttons ---- */
html[data-theme="dark"] button[class*="type"]:not(.active):hover,
html[data-theme="dark"] button[class*="scope"]:not(.active):hover,
html[data-theme="dark"] button[class*="mode"]:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ---- DARK MODE: Modal close button visibility ---- */
html[data-theme="dark"] .qcal-modal-close,
html[data-theme="dark"] [class*="modal-close"],
html[data-theme="dark"] [class*="modal"] .close,
html[data-theme="dark"] [class*="modal"] button[class*="close"] {
  color: #eaf3f0 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .qcal-modal-close:hover,
html[data-theme="dark"] [class*="modal-close"]:hover,
html[data-theme="dark"] [class*="modal"] .close:hover,
html[data-theme="dark"] [class*="modal"] button[class*="close"]:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* =========================================================
   DARK MODE - Comprehensive Fixes v2.0
   Dashboard, Cards, Containers, Widgets
   (Merged from style1.css)
========================================================= */

/* ---------------------------------------------------------
   Base containers and sections
--------------------------------------------------------- */
/* White backgrounds → dark (covers #fff, #ffffff, rgb(255,255,255), rgba) */
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color: rgba(255, 255, 255"] {
  background-color: var(--q-surface-1) !important;
  background: var(--q-surface-1) !important;
}

/* Elementor child containers with explicit backgrounds (cards, CTAs) - elevated in dark mode */
/* background-color preserves URL images (globe etc); gradient kill below handles light gradients */
html[data-theme="dark"] .e-con.e-child[data-settings*='"background_background"']:not([data-settings*='"transparent"']) {
  background-color: var(--q-surface-2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Kill Elementor gradient backgrounds in dark mode — they paint light colors on top of dark bg-color */
/* Only targets containers with "gradient" in data-settings, preserves url() images (globe, hero) */
html[data-theme="dark"] .e-con[data-settings*='"gradient"'] {
  background-image: none !important;
}

/* Grid-based feature cards (e-grid children) - elevated in dark mode */
html[data-theme="dark"] .e-con.e-grid.e-child {
  background-color: var(--q-surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Features grid already has dark-friendly Elementor styling — skip generic grid darkening */
html[data-theme="dark"] #id-features-grid.e-con.e-grid.e-child {
  background-color: inherit !important;
  border: none !important;
  box-shadow: none !important;
}

/* Text inside feature cards - light colors */
html[data-theme="dark"] .e-con.e-grid.e-child .elementor-heading-title,
html[data-theme="dark"] .e-con.e-grid.e-child .elementor-heading-title a {
  color: var(--q-text) !important;
}

html[data-theme="dark"] .e-con.e-grid.e-child .elementor-widget-text-editor,
html[data-theme="dark"] .e-con.e-grid.e-child .elementor-widget-text-editor p {
  color: var(--q-text-secondary) !important;
}

/* ---------------------------------------------------------
   Widgets and Panels
--------------------------------------------------------- */
/* Generic white panels - exclude Elementor widgets (they have their own styling) */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget:not(.elementor-widget),
html[data-theme="dark"] .card:not(.elementor-element) {
  background: var(--q-surface-1) !important;
  border-color: var(--q-border) !important;
}

/* Schedule/Calendar widget */
html[data-theme="dark"] [class*="calendar"]:not([class*="navigation-link"]),
html[data-theme="dark"] [class*="schedule"],
html[data-theme="dark"] .fc,
html[data-theme="dark"] .fc-theme-standard {
  background: var(--q-surface-1) !important;
}

html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th {
  border-color: var(--q-border) !important;
}

/* ---------------------------------------------------------
   Tabs and Navigation
--------------------------------------------------------- */
html[data-theme="dark"] .ld-tabs .ld-tabs-navigation,
html[data-theme="dark"] .ld-tabs .ld-tab-buttons {
  background: var(--q-surface-1) !important;
  border-color: var(--q-border) !important;
}

html[data-theme="dark"] .ld-tabs .ld-tab-button {
  color: var(--q-muted) !important;
}

html[data-theme="dark"] .ld-tabs .ld-tab-button.ld-active,
html[data-theme="dark"] .ld-tabs .ld-tab-button:hover {
  color: var(--q-text) !important;
  background: var(--q-surface-2) !important;
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
html[data-theme="dark"] .ld-button:not(.ld-button-reverse) {
  background: var(--q-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .ld-button:not(.ld-button-reverse):hover {
  background: var(--q-green-hover) !important;
}

/* Secondary/outline buttons */
html[data-theme="dark"] .ld-button.ld-button-reverse,
html[data-theme="dark"] .ld-button-outline {
  background: transparent !important;
  border: 1px solid var(--q-border) !important;
  color: var(--q-text) !important;
}

html[data-theme="dark"] .ld-button.ld-button-reverse:hover {
  background: var(--q-surface-2) !important;
}

/* ---------------------------------------------------------
   Forms and Inputs
--------------------------------------------------------- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .elementor-field,
html[data-theme="dark"] .elementor-field-textual {
  background: var(--q-surface-2) !important;
  border-color: var(--q-border) !important;
  color: var(--q-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--q-muted) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 3px rgba(34, 117, 90, 0.2) !important;
}

/* ---------------------------------------------------------
   Tables
--------------------------------------------------------- */
html[data-theme="dark"] table,
html[data-theme="dark"] .ld-table {
  background: var(--q-surface-1) !important;
}

html[data-theme="dark"] th {
  background: var(--q-surface-2) !important;
  color: var(--q-text) !important;
  border-color: var(--q-border) !important;
}

html[data-theme="dark"] td {
  border-color: var(--q-border-subtle) !important;
  color: var(--q-text) !important;
}

html[data-theme="dark"] tr:hover td {
  background: var(--q-surface-2) !important;
}

/* ---------------------------------------------------------
   Badges and Tags
--------------------------------------------------------- */
html[data-theme="dark"] .ld-status,
html[data-theme="dark"] [class*="badge"]:not([class*="qimah-"]):not([class*="q-hero-"]):not([class*="q-popup"]):not([class*="qmc-"]):not([class*="qm-"]):not([class*="q-lp-"]),
html[data-theme="dark"] [class*="tag"] {
  background: var(--q-surface-3) !important;
  color: var(--q-text) !important;
  border: 1px solid var(--q-border) !important;
}

/* In Progress badge */
html[data-theme="dark"] .ld-status-in-progress,
html[data-theme="dark"] [class*="in-progress"] {
  background: rgba(34, 117, 90, 0.2) !important;
  color: #6ee7b7 !important;
  border-color: rgba(34, 117, 90, 0.3) !important;
}

/* Completed badge */
html[data-theme="dark"] .ld-status-complete,
html[data-theme="dark"] [class*="completed"] {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* ---------------------------------------------------------
   Modals and Overlays
--------------------------------------------------------- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] [class*="modal"] > div,
html[data-theme="dark"] [class*="popup"]:not([class*="qgami-popup"]) > div {
  background: var(--q-surface-1) !important;
  border: 1px solid var(--q-border) !important;
}

/* ---------------------------------------------------------
   Footer adjustments
--------------------------------------------------------- */
html[data-theme="dark"] footer:not(.qimah-footer):not(.qimah-cep-comment-footer),
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] #footer {
  background: var(--q-bg) !important;
  border-top: 1px solid var(--q-border) !important;
}

html[data-theme="dark"] footer:not(.qimah-footer):not(.qimah-cep-comment-footer) a,
html[data-theme="dark"] .site-footer a {
  color: var(--q-muted) !important;
}

html[data-theme="dark"] footer:not(.qimah-footer):not(.qimah-cep-comment-footer) a:hover,
html[data-theme="dark"] .site-footer a:hover {
  color: var(--q-text) !important;
}

/* Footer: payment logos & business badges keep white backgrounds (brand assets) */
html[data-theme="dark"] #footer [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] #footer [style*="background-color:#fff"],
html[data-theme="dark"] #footer [style*="background-color: #fff"],
html[data-theme="dark"] #footer [style*="background-color:#ffffff"],
html[data-theme="dark"] #footer [style*="background-color: #ffffff"],
html[data-theme="dark"] #footer [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] #footer [style*="background:#fff"],
html[data-theme="dark"] #footer [style*="background: #fff"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* ---------------------------------------------------------
   Smooth transitions for theme switch
   Targeted to visible containers only (not universal *)
--------------------------------------------------------- */
body,
.q-card,
.glass-surface,
header,
.site-footer,
.ld-focus,
.ld-focus-sidebar,
.ld-focus-main {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease;
}

/* Disable ALL transitions during theme switch to prevent fps drop */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-duration: 0s !important;
}

/* =========================================================
   Theme Wipe Transition (View Transition API)
   Circle-reveal animation when toggling dark/light mode.
   JS sets --wipe-x, --wipe-y on <html> before starting.
========================================================= */

/* Disable default cross-fade - we use a custom circle wipe.
   Direction is set dynamically by JS via view-transition-name classes. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes qimah-wipe-expand {
  from { clip-path: circle(0px at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
  to   { clip-path: circle(var(--wipe-radius, 150%) at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
}

@keyframes qimah-wipe-contract {
  from { clip-path: circle(var(--wipe-radius, 150%) at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
  to   { clip-path: circle(0px at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0s !important;
  }
}

/* =========================================================
   GLOBAL FOCUS STATES (Accessibility)
========================================================= */

/* Default focus-visible for all interactive elements */
:focus-visible {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}

/* Remove default outline, use custom */
:focus:not(:focus-visible) {
  outline: none;
}

/* Buttons get a glow effect */
button:focus-visible,
[role="button"]:focus-visible,
.ld-button:focus-visible,
.elementor-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 102, 73, 0.4);
}

/* Links get underline + subtle glow */
a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Inputs get green ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 102, 73, 0.15) !important;
}

/* Dark mode focus adjustments */
html[data-theme="dark"] :focus-visible {
  outline-color: #34d399;
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] [role="button"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.4);
}

html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2) !important;
}

/* =========================================================
   GRADIENT WAVE ANIMATIONS
========================================================= */

/* Keyframes for various gradient effects */

/* 1. Flowing Wave - horizontal movement */
@keyframes q-wave-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Pulse Wave - breathing effect */
@keyframes q-wave-pulse {
  0%, 100% {
    background-size: 200% 200%;
    background-position: 0% 50%;
  }
  50% {
    background-size: 250% 250%;
    background-position: 100% 50%;
  }
}

/* 3. Shimmer - light sweep */
@keyframes q-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 4. Aurora - smooth color shift */
@keyframes q-aurora {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* 5. Gradient Rotate */
@keyframes q-gradient-rotate {
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}

/* Utility Classes */

/* Flowing gradient background */
.q-gradient-wave {
  background: linear-gradient(
    90deg,
    var(--q-primary) 0%,
    #4f9e8a 25%,
    #34d399 50%,
    #4f9e8a 75%,
    var(--q-primary) 100%
  );
  background-size: 200% 100%;
  animation: q-wave-flow 8s ease-in-out infinite;
}

/* Subtle wave for backgrounds */
.q-gradient-wave-subtle {
  background: linear-gradient(
    135deg,
    var(--q-surface-1) 0%,
    var(--q-surface-2) 50%,
    var(--q-surface-1) 100%
  );
  background-size: 200% 200%;
  animation: q-wave-flow 12s ease-in-out infinite;
}

/* Pulsing gradient */
.q-gradient-pulse {
  background: radial-gradient(
    ellipse at center,
    var(--q-primary) 0%,
    var(--q-green-hover) 50%,
    #0d3f2d 100%
  );
  background-size: 200% 200%;
  animation: q-wave-pulse 6s ease-in-out infinite;
}

/* Shimmer effect (for loading states, buttons) */
.q-shimmer {
  position: relative;
  overflow: hidden;
}

.q-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: q-shimmer 2s ease-in-out infinite;
  pointer-events: none;
}

/* Dark mode shimmer */
html[data-theme="dark"] .q-shimmer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
}

/* Aurora gradient (hero sections, cards) */
.q-gradient-aurora {
  background: linear-gradient(
    45deg,
    var(--q-primary) 0%,
    #4f9e8a 20%,
    #34d399 40%,
    #4f9e8a 60%,
    var(--q-primary) 80%,
    #0d3f2d 100%
  );
  background-size: 300% 300%;
  animation: q-aurora 15s ease infinite;
}

/* Text with gradient wave */
.q-text-gradient-wave {
  background: linear-gradient(
    90deg,
    var(--q-primary) 0%,
    #34d399 50%,
    var(--q-primary) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: q-wave-flow 4s ease-in-out infinite;
}

/* Border gradient animation */
.q-border-gradient-wave {
  position: relative;
  background: var(--q-bg);
  border-radius: var(--q-rad);
}

.q-border-gradient-wave::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--q-primary) 0%,
    #34d399 50%,
    var(--q-primary) 100%
  );
  background-size: 200% 100%;
  animation: q-wave-flow 4s ease-in-out infinite;
  z-index: -1;
}

/* Glow pulse effect */
.q-glow-pulse {
  animation: q-glow-pulse 3s ease-in-out infinite;
}

@keyframes q-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(30, 102, 73, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(30, 102, 73, 0.6);
  }
}

html[data-theme="dark"] .q-glow-pulse {
  animation: q-glow-pulse-dark 3s ease-in-out infinite;
}

@keyframes q-glow-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.5);
  }
}

/* Skeleton loading with wave */
.q-skeleton {
  background: linear-gradient(
    90deg,
    var(--q-surface-1) 0%,
    var(--q-surface-2) 50%,
    var(--q-surface-1) 100%
  );
  background-size: 200% 100%;
  animation: q-wave-flow 1.5s ease-in-out infinite;
  border-radius: 8px;
}

html[data-theme="dark"] .q-skeleton {
  background: linear-gradient(
    90deg,
    var(--q-surface-1) 0%,
    var(--q-surface-2) 50%,
    var(--q-surface-1) 100%
  );
}

/* Reduced motion - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .q-gradient-wave,
  .q-gradient-wave-subtle,
  .q-gradient-pulse,
  .q-gradient-aurora,
  .q-text-gradient-wave,
  .q-glow-pulse,
  .q-skeleton {
    animation: none;
  }

  .q-shimmer::after,
  .q-border-gradient-wave::before {
    animation: none;
  }
}

/* =========================================================
   DARK MODE - Elementor Text Visibility Fix
   Elementor sets text colors via inline styles (e.g. color:#333).
   Without these overrides, all text is invisible on the dark bg.
   This is the root cause for homepage/general page dark mode.
========================================================= */

/* Headings - all pages */
html[data-theme="dark"] .elementor-heading-title {
    color: var(--q-text) !important;
}

/* Text editors (paragraphs) - all pages */
html[data-theme="dark"] .elementor-widget-text-editor,
html[data-theme="dark"] .elementor-widget-text-editor p,
html[data-theme="dark"] .elementor-widget-text-editor li {
    color: var(--q-text-secondary) !important;
}

/* Links inside Elementor text */
html[data-theme="dark"] .elementor-widget-text-editor a {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .elementor-widget-text-editor a:hover {
    color: #a7f3d0 !important;
}

/* Icon boxes */
html[data-theme="dark"] .elementor-icon-box-title,
html[data-theme="dark"] .elementor-icon-box-description,
html[data-theme="dark"] .elementor-icon-box-content {
    color: var(--q-text) !important;
}

/* Elementor buttons - ensure border contrast */
html[data-theme="dark"] .elementor-button:not([style*="background"]) {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---------------------------------------------------------
   Section separation - visual rhythm between page sections
   Adds subtle top border between adjacent top-level containers
--------------------------------------------------------- */
html[data-theme="dark"] .e-con.e-parent + .e-con.e-parent {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------
   Image visibility boost in dark mode
   Colored images (globe, illustrations) on dark bg lose contrast
--------------------------------------------------------- */
html[data-theme="dark"] .elementor-widget-image img {
    filter: brightness(1.12);
}

/* ---------------------------------------------------------
   Empty Cart Page — centered, branded layout
--------------------------------------------------------- */
.wc-empty-cart-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
    padding: 100px 24px 0;
}

.wc-empty-cart-message .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none !important;
    border: none !important;
    font-size: 22px;
    font-weight: 700;
    color: var(--q-text, #1f302c);
    padding: 0;
    margin: 0;
}

.wc-empty-cart-message .cart-empty::before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    margin: 24px auto 0;
    order: 1;
    background: var(--q-primary, #1E6649);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    opacity: 0.3;
}

.return-to-shop {
    text-align: center;
    padding: 0 24px 60px;
    margin-top: 24px;
}

.return-to-shop .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px !important;
    background: linear-gradient(135deg, #1E6649, #2a8a62) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: filter 0.2s;
    text-decoration: none;
}

.return-to-shop .button:hover {
    filter: brightness(1.15);
    color: #fff !important;
}

html[data-theme="dark"] .wc-empty-cart-message .cart-empty {
    color: var(--q-text, #eaf3f0);
}

html[data-theme="dark"] .wc-empty-cart-message .cart-empty::before {
    background: #34d399;
}