/* ============================================================
   Nehebkau  –  RTL.CSS
   RTL layout overrides + language-switcher button
   Applied via [dir="rtl"] selector so it never touches LTR
   ============================================================ */

/* ── Google Font: Cairo (Arabic-friendly geometric sans) ──
   Loaded non-blocking via <link> in HTML; defined here as
   the fallback stack for RTL mode.                          */
[dir="rtl"] body {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ===========================================================
   LANGUAGE-SWITCHER BUTTON  (shared across all pages)
   =========================================================== */
.lang-switcher {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 10000;
}

.lang-btn {
  background : rgba(0, 0, 0, 0.75);
  border     : 2px solid #ffd700;
  color      : #ffd700;
  font-family: 'Cinzel', 'Cairo', 'Inter', serif;
  font-size  : 0.9rem;
  padding    : 8px 18px;
  border-radius: 25px;
  cursor     : pointer;
  letter-spacing: 0.5px;
  transition : all 0.3s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow : 0 0 8px rgba(255, 215, 0, 0.3);
}

.lang-btn:hover {
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.7);
  transform : scale(1.05);
}

/* In RTL mode keep the button accessible on the opposite side */
[dir="rtl"] .lang-switcher {
  right: auto;
  left : 15px;
}

/* ===========================================================
   SHARED RTL TEXT ALIGNMENT
   =========================================================== */

/* Default text to start-edge in RTL */
[dir="rtl"] p,
[dir="rtl"] h3 {
  text-align: right;
}

/* Elements that should stay centred regardless of direction */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .header,
[dir="rtl"] .highlight,
[dir="rtl"] .cta-section,
[dir="rtl"] .feature-card,
[dir="rtl"] .current-effect,
[dir="rtl"] .tagline,
[dir="rtl"] .subtitle {
  text-align: center;
}

/* Tech-content strong titles stay centered in RTL (icon on right, text centered) */
[dir="rtl"] .tech-content strong {
  text-align: right;
}

/* ===========================================================
   INDEX PAGE  –  RTL
   =========================================================== */
[dir="rtl"] .main-tagline,
[dir="rtl"] .feature-line,
[dir="rtl"] .subtitle {
  text-align: center;
}

/* ===========================================================
   PRODUCT PAGE  –  RTL
   =========================================================== */

/* Tech-feature rows: icon flips to the right */
[dir="rtl"] .tech-feature {
  flex-direction: row-reverse;
}

[dir="rtl"] .tech-icon {
  margin-right: 0;
  margin-left : 15px;
}

[dir="rtl"] .tech-feature:hover {
  transform: translateX(-5px);   /* slide left on hover in RTL */
}

/* Revert for small screens (column layout) */
@media (max-width: 768px) {
  [dir="rtl"] .tech-feature {
    flex-direction: column;
  }
  [dir="rtl"] .tech-icon {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sections keep their own border regardless of direction */
[dir="rtl"] .section {
  text-align: right;
}

[dir="rtl"] .section h2 {
  text-align: center;
}

/* ===========================================================
   3D DEMO PAGE  –  RTL
   =========================================================== */

/* Flip the two-column layout so controls appear on the left */
[dir="rtl"] .container {
  direction: rtl;
}

/* Border moves to the right side of the controls panel */
[dir="rtl"] #controls-panel {
  border-left : none;
  border-right: 3px solid #ffd700;
  text-align  : right;
}

@media (max-width: 768px) {
  [dir="rtl"] #controls-panel {
    border-right: none;
    border-top  : 3px solid #ffd700;
  }
}

/* Effect buttons: hover slides in from the right */
[dir="rtl"] .effect-btn:hover {
  transform: translateX(-3px);
}

/* Slider value floats to the left in RTL */
[dir="rtl"] .slider-group label span {
  float: left;
}

/* Labels in controls panel */
[dir="rtl"] .slider-group label,
[dir="rtl"] .hdri-section label {
  text-align: right;
}

/* Select boxes */
[dir="rtl"] select {
  font-family   : 'Cairo', Tahoma, Arial, sans-serif;
  text-align     : right;
  text-align-last: right;
  direction      : rtl;
}

[dir="rtl"] .toggle-btn,
[dir="rtl"] .effect-btn,
[dir="rtl"] .effect-count {
  font-family: 'Cairo', Tahoma, Arial, sans-serif;
}

/* WhatsApp floating CTA on demo page */
[dir="rtl"] .whatsapp-cta-wrap {
  left : auto;
  right: 20px;
}

/* ===========================================================
   MISC UTILITY
   =========================================================== */

/* Ensure fixed-position decorative LED strips stay correct */
[dir="rtl"] .led-strip.left  { left : 0; right: auto; }
[dir="rtl"] .led-strip.right { right: 0; left : auto; }


/* Mobile stability */
html, body {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

/* Hero mobile spacing */
.hero {
  padding: 60px 20px 40px;
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 16px 30px;
  }
}