/* =========================
   CSS Variables
========================= */
:root {
  /* Font Families */
  --font-sans: "Space Grotesk", "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ar: "Tajawal", "Belqees Pro", sans-serif;
  --font-ar-heading: "Belqees Pro", "Tajawal", sans-serif;

  /* Unified Typography Scale - Adjusted for 0.9rem base */
  --font-size-xs: clamp(0.675rem, 1.44vw, 0.7875rem);     /* ~10.8-12.6px */
  --font-size-sm: clamp(0.7875rem, 1.71vw, 0.9rem);      /* ~12.6-14.4px */
  --font-size-base: clamp(0.9rem, 1.98vw, 1.0125rem);    /* ~14.4-16.2px */
  --font-size-md: clamp(1.0125rem, 2.34vw, 1.125rem);    /* ~16.2-18px */
  --font-size-lg: clamp(1.125rem, 2.79vw, 1.35rem);      /* ~18-21.6px */
  --font-size-xl: clamp(1.35rem, 3.42vw, 1.8rem);        /* ~21.6-28.8px */
  --font-size-2xl: clamp(1.575rem, 4.14vw, 2.25rem);     /* ~25.2-36px */
  --font-size-3xl: clamp(1.8rem, 4.95vw, 2.7rem);        /* ~28.8-43.2px */
  --font-size-4xl: clamp(2.25rem, 5.85vw, 3.6rem);       /* ~36-57.6px */

  /* Line Heights */
  --line-height-zero: 0;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.9;

  /* Font Weights - Unified Naming Convention */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Colors - Base */
  --color-bg: rgb(21, 21, 21);
  --color-inner-bg: rgb(17, 17, 17);
  --border-5: rgba(255, 255, 255, 0.05);
  --border-10: rgba(255, 255, 255, 0.1);
  --border-20: rgba(255, 255, 255, 0.2);
  --border-40: rgba(255, 255, 255, 0.4);
  --border-60: rgba(255, 255, 255, 0.6);
  --active: rgb(0, 255, 144);
  
  /* Border Animation Colors */
  --ring-1: rgb(141, 110, 39);
  --ring-2: rgb(203, 160, 84);
  --ring-3: rgb(246, 226, 127);

  /* Border Radius System */
  --radius-xl: 50px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --card-radius: var(--radius-xl);

  /* Animations */
  --border-angle: 0deg;

  /* Container Spacing */
  --kaui-inset: 1rem;
  --kaui-bottom-extra: -0.1rem;
  --kaui-vertical-gap: 3rem;
  --header-gap-horizontal: 3.5rem;
  --header-gap-vertical: 3rem;

  /* Base Font Settings */
  --body-font-size: var(--font-size-sm);
  --link-font-size: 0.9rem;
}

/* =========================
   Base & Reset Styles
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

.line-height-zero {
  line-height: var(--line-height-zero) !important;
} 

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--body-font-size);
}

.elementor-element.brd-anim.language .elementor-button {
  aspect-ratio: 1 / 1;
  width: 37px;
  min-width: unset;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.elementor-element.brd-anim.language .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.elementor-element.brd-anim.language .elementor-button-text {
  line-height: 1;
  white-space: nowrap;
}

.btn-active{
  color: var(--active);
}

#kaui-container {
  position: absolute !important;
  inset: 
    clamp(1rem, 1.2vw, 1rem)        /* top */
    clamp(1rem, 2vw, 1.5rem)          /* right */
    clamp(2.5rem, 3vw, 3rem)          /* bottom (larger for footer) */
    clamp(1rem, 2vw, 1.5rem);         /* left */
  width: calc(100vw - (2 * clamp(1rem, 2vw, 1.5rem)));
  height: calc(100vh - (clamp(0.75rem, 1.2vw, 1rem) + clamp(2.5rem, 3vw, 3rem)));
  padding: 0rem;
  background-color: var(--color-inner-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
  /* Ensure canvas elements are contained */
  position: relative;
  z-index: 1; /* Container has positive z-index */
}

/* Scroll Container */
#kaui-content-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Ensure content is above canvases */
  z-index: 3; /* Content above everything */
}

#kaui-content-container > .e-child{
  min-height: 100%;
}

#kaui-container > .e-con-inner {
  padding-top: 0;
  padding-bottom: 0;
}

#kaui-content-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Progress Bar */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
}

#progressbar {
  width: 1%;
  height: 3px;
  background: rgb(137, 255, 241);
  transition: width 0.25s ease-out;
}

/* Frosted Glass Effect */
.frosted, header{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

header{
  position: absolute;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  top: var(--header-gap-vertical);
  left: var(--header-gap-horizontal);
  right: var(--header-gap-horizontal);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-5);
  z-index: 999;
}

footer div{
  padding: 0 !important;
}

footer {
  position: absolute;
  bottom: var(--kaui-bottom-extra);
  left: var(--header-gap-horizontal);
  right: var(--header-gap-horizontal);
  z-index: 999; 
}

/*Animated Border*/
/* Border Ring Animation */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-border {
  to { --border-angle: 360deg; }
}

/* Shared Ring Base */
.brd-anim,
.NextBlock {
  border-radius: var(--radius-xl);
  border: 1px solid ;
  overflow: hidden;
  border: 1px solid var(--border-5);
}

/* Shared Ring Background */
.brd-anim:hover,
.NextBlock {
  background:
    linear-gradient(45deg, var(--color-inner-bg), rgb(36, 67, 62) 50%, var(--color-inner-bg)) padding-box,
    conic-gradient(from var(--border-angle), var(--ring-1) 75%, var(--ring-2) 84%, var(--ring-3) 90%, var(--ring-2) 96%, var(--ring-1)) border-box;
  animation: rotate-border 4s linear infinite;
  
}

@keyframes SlideDown {
  0% { translate: 0 0; }
  50% { translate: 0 10px; }
  100% { translate: 0 0; }
}

.NextBlock{
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important;
  animation:
    SlideDown 1.2s ease-in-out infinite !important;
  will-change: translate;
}



/*Elementor Icons*/
.elementor-button-content-wrapper,
.elementor-button-icon,
.elementor-button-icon i,
.elementor-button-link svg {
  display: inline-flex;
  align-items: center;
  line-height: var(--line-height-normal);
}

.elementor-button-icon i,
.elementor-button-link svg {
  font-size:large;
  line-height: var(--line-height-normal);
}

/* === Mobile header spacing fix === */
@media (max-width: 767px) {
  :root {
    --header-gap-horizontal: 2rem;
    --header-gap-vertical: 2rem; /* ← NEW: top gap on mobile */
    --footer-gap-horizontal: 1rem;
  }

  footer {
    left: var(--footer-gap-horizontal);
    right: var(--footer-gap-horizontal);
  }

  header {
    left: var(--header-gap-horizontal);
    right: var(--header-gap-horizontal);
    top: var(--header-gap-vertical);
  }
}