/* === Edutor Dynamic CSS === */
:root,
[data-bs-theme='light']{
  --kh-primary: #0d6efd;
  --kh-primary-rgb: 13, 110, 253;
  --kh-secondary: #6c757d;
  --kh-secondary-rgb: 108, 117, 125;
  --kh-accent: #20c997;
  --kh-accent-rgb: 32, 201, 151;
  --kh-text: #212529;
  --kh-text-rgb: 33, 37, 41;
  --kh-text-muted: #6c757d;
  --kh-heading: #111827;
  --kh-link: #0d6efd;
  --kh-link-hover: #20c997;
  --kh-bg: #ffffff;
  --kh-bg-rgb: 255, 255, 255;
  --kh-surface: #ffffff;
  --kh-border: #e5e7eb;
  --kh-border-rgb: 229, 231, 235;

  --kh-font-body: Cairo;
  --kh-font-heading: Tajawal;
  --kh-body-fs: 16px;
  --kh-body-lh: 1.5;
  --kh-body-fw: 400;
  --kh-body-ls: 0px;
  --kh-heading-fw: 400;
  --kh-heading-ls: 0px;

  --kh-radius-sm: 6px;
  --kh-radius-md: 10px;
  --kh-radius-lg: 14px;
  --kh-container: 1400px;

  --kh-btn-fw: 600;
  --kh-btn-py: 12px;
  --kh-btn-px: 18px;

  --kh-input-h: 44px;
  --kh-input-px: 12px;
  --kh-input-bw: 1px;

  --kh-footer-bg: #0f172a;
  --kh-footer-text: #e2e8f0;
  --kh-footer-heading: #ffffff;
  --kh-footer-link: #93c5fd;
  --kh-footer-link-hover: #ffffff;
  --kh-footer-divider: rgba(255,255,255,.12);
  --kh-footer-radius: 12px;

  --kh-shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --kh-shadow-blog: 0 10px 24px rgba(0,0,0,.07);

  /* Bootstrap runtime variables - Light */
  --bs-primary: var(--kh-primary);
  --bs-primary-rgb: var(--kh-primary-rgb);
  --bs-secondary: var(--kh-secondary);
  --bs-secondary-rgb: var(--kh-secondary-rgb);
  --bs-body-color: var(--kh-text);
  --bs-body-color-rgb: var(--kh-text-rgb);
  --bs-body-bg: var(--kh-bg);
  --bs-body-bg-rgb: var(--kh-bg-rgb);
  --bs-heading-color: var(--kh-heading);
  --bs-link-color: var(--kh-link);
  --bs-link-hover-color: var(--kh-link-hover);
  --bs-border-color: var(--kh-border);
  --bs-border-radius-sm: var(--kh-radius-sm);
  --bs-border-radius: var(--kh-radius-md);
  --bs-border-radius-lg: var(--kh-radius-lg);
}

:root,
[data-bs-theme='light']{
  --e-global-color-primary: var(--kh-primary);
  --e-global-color-secondary: var(--kh-secondary);
  --e-global-color-text: var(--kh-text);
  --e-global-color-accent: var(--kh-accent);

  --e-global-typography-primary-font-family: var(--kh-font-heading);
  --e-global-typography-secondary-font-family: var(--kh-font-body);
  --e-global-typography-text-font-family: var(--kh-font-body);
  --e-global-typography-accent-font-family: var(--kh-font-heading);
}

[data-bs-theme='dark']{
  --e-global-color-primary: #60a5fa;
  --e-global-color-secondary: #6c757d;
  --e-global-color-text: #e5e7eb;
  --e-global-color-accent: #34d399;

  --e-global-typography-primary-font-family: Tajawal;
  --e-global-typography-secondary-font-family: Cairo;
  --e-global-typography-text-font-family: Cairo;
  --e-global-typography-accent-font-family: Tajawal;
}

[data-bs-theme='dark']{
  color-scheme: dark;

  --kh-primary: #60a5fa;
  --kh-primary-rgb: 96, 165, 250;
  --kh-accent: #34d399;
  --kh-accent-rgb: 52, 211, 153;
  --kh-text: #e5e7eb;
  --kh-text-rgb: 229, 231, 235;
  --kh-text-muted: #e5e7eb;
  --kh-heading: #e5e7eb;
  --kh-link: #60a5fa;
  --kh-link-hover: #34d399;
  --kh-bg: #0b1220;
  --kh-bg-rgb: 11, 18, 32;
  --kh-surface: #0b1220;
  --kh-border: #495057;
  --kh-border-rgb: 73, 80, 87;

  /* Bootstrap runtime variables - Dark */
  --bs-primary: var(--kh-primary);
  --bs-primary-rgb: var(--kh-primary-rgb);
  --bs-body-color: var(--kh-text);
  --bs-body-color-rgb: var(--kh-text-rgb);
  --bs-body-bg: var(--kh-bg);
  --bs-body-bg-rgb: var(--kh-bg-rgb);
  --bs-heading-color: var(--kh-heading);
  --bs-link-color: var(--kh-link);
  --bs-link-hover-color: var(--kh-link-hover);
  --bs-border-color: var(--kh-border);
  --bs-border-color-translucent: rgba(255,255,255,.15);
}

html, body{direction:rtl;}

body{
  color: var(--kh-text);
  background-color: var(--kh-bg);
  font-family: var(--kh-font-body);
  font-size: var(--kh-body-fs);
  line-height: var(--kh-body-lh);
  font-weight: var(--kh-body-fw);
  letter-spacing: var(--kh-body-ls);
}

.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  max-width: var(--kh-container);
}

h1,h2,h3,h4,h5,h6,
.heading-font{
  font-family: var(--kh-font-heading);
  color: var(--kh-heading);
  font-weight: var(--kh-heading-fw);
  letter-spacing: var(--kh-heading-ls);
}

p, li, span, .text-body{
  color: inherit;
}

.text-muted,
.text-secondary{
  color: var(--kh-text-muted) !important;
}

a{
  color: var(--kh-link);
  text-decoration-color: rgba(var(--kh-primary-rgb), .35);
}

a:hover,
a:focus{
  color: var(--kh-link-hover);
  text-decoration-color: currentColor;
}

/* Buttons */
.btn-primary,
.button-theme,
.elementor-button{
  --bs-btn-bg: var(--kh-primary);
  --bs-btn-border-color: var(--kh-primary);
  --bs-btn-hover-bg: var(--kh-accent);
  --bs-btn-hover-border-color: var(--kh-accent);
  --bs-btn-active-bg: var(--kh-accent);
  --bs-btn-active-border-color: var(--kh-accent);
  --bs-btn-focus-shadow-rgb: var(--kh-primary-rgb);
}
/*
.btn,
button,
input[type=submit],
input[type=button],
input[type=reset],
.button,
.wp-element-button,
.elementor-button,
.btn-primary,
.button-theme{
  border-radius: var(--kh-radius-md) !important;
  font-weight: var(--kh-btn-fw) !important;
  padding: var(--kh-btn-py) var(--kh-btn-px) !important;
  transition: all .2s ease;
}
*/
.btn-outline-primary{
  --bs-btn-color: var(--kh-primary);
  --bs-btn-border-color: var(--kh-primary);
  --bs-btn-hover-bg: var(--kh-primary);
  --bs-btn-hover-border-color: var(--kh-primary);
  --bs-btn-hover-color: #fff;
}

/* Forms */
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=url], input[type=tel], input[type=search], input[type=date], input[type=time],
input[type=datetime-local], select, textarea,
.form-control, .form-select, .elementor-field{
  min-height: var(--kh-input-h);
  padding-inline: var(--kh-input-px);
  border-radius: var(--kh-radius-sm);
  border-width: var(--kh-input-bw);
  border-style: solid;
  border-color: var(--kh-border);
  background-color: var(--kh-surface);
  color: var(--kh-text);
  box-shadow: none;
}

textarea,
.elementor-field-textual.elementor-field{
  min-height: calc(var(--kh-input-h) + 36px);
  padding-top: 12px;
  padding-bottom: 12px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.elementor-field:focus{
  border-color: rgba(var(--kh-primary-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--kh-primary-rgb), .18);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate,
.form-check-input[type=radio]:checked{
  background-color: var(--kh-primary);
  border-color: var(--kh-primary);
}

.form-range::-webkit-slider-thumb{ background: var(--kh-primary); }
.form-range::-moz-range-thumb{ background: var(--kh-primary); }

/* Navbar / Menus */
.navbar,
.navbar-nav{
  --bs-navbar-active-color: var(--kh-primary);
  --bs-navbar-hover-color: var(--kh-primary);
}

.navbar .nav-link.active,
.navbar .current-menu-item > a,
.navbar .current-menu-parent > a{
  color: var(--kh-primary) !important;
}

.dropdown-menu{
  background-color: var(--kh-surface);
  border-color: rgba(var(--kh-border-rgb), .6);
  border-radius: var(--kh-radius-md);
  box-shadow: var(--kh-shadow-sm);
}

.dropdown-item:hover,
.dropdown-item:focus{
  color: var(--kh-primary);
  background-color: rgba(var(--kh-primary-rgb), .08);
}

/* Cards / Widgets */
.card, .widget, .panel, .elementor-widget-container, .accordion-item,
.modal-content, .offcanvas{
  background-color: var(--kh-surface);
  border-color: rgba(var(--kh-border-rgb), .75);
  border-radius: var(--kh-radius-lg);
  box-shadow: var(--kh-shadow-sm);
}

.blog-card, .post-card{
  border-radius: 50px;
  box-shadow: var(--kh-shadow-blog);
  overflow: hidden;
}

/* Components */
.progress-bar,
.page-item.active .page-link,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--kh-primary);
  border-color: var(--kh-primary);
}

.page-link{
  color: var(--kh-primary);
}

.page-link:hover{
  color: #fff;
  background-color: var(--kh-primary);
  border-color: var(--kh-primary);
}

.accordion{
  --bs-accordion-active-bg: rgba(var(--kh-primary-rgb), .08);
  --bs-accordion-active-color: var(--kh-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--kh-primary-rgb), .15);
}

/* Footer */
.site-footer{
  background: var(--kh-footer-bg);
  color: var(--kh-footer-text);
  border-top-left-radius: var(--kh-footer-radius);
  border-top-right-radius: var(--kh-footer-radius);
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer span{
  color: var(--kh-footer-text);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6{
  color: var(--kh-footer-heading);
}

.site-footer a{
  color: var(--kh-footer-link);
}

.site-footer a:hover,
.site-footer a:focus{
  color: var(--kh-footer-link-hover);
}

.site-footer hr,
.site-footer .border-top,
.site-footer .border-bottom{
  border-color: var(--kh-footer-divider) !important;
}

[data-elementor-type] *{
  direction: rtl;
}