/* ==========================================================================
   Nachd IT — brand theme layer (loaded after style.css, overrides it)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand palette taken from the Nachd IT logo (navy mark + charcoal wordmark) */
  --color-primary: #163A63;
  --color-primary-light: #2C6CA8;
  --color-secondary: #0B1C30;
  --gradient-primary: linear-gradient(90deg, #163A63 0%, #2C6CA8 100%);
  --gradient-reverse: linear-gradient(90deg, #2C6CA8 0%, #163A63 100%);
  --gradient-secondary: linear-gradient(0deg, #0B1C30 0%, #163A63 100%);
  --color-border: #D7E2EE;
  --color-title: #26262C;
  --color-body-1: #444B57;
  --color-gray: #F4F7FA;
}

/* Arabic typography — Cairo reads far better than Sora/Manrope for Arabic glyphs */
body[dir="rtl"] {
  --font-primary: "Cairo", sans-serif;
  --font-secondary: "Cairo", sans-serif;
}

/* ---- Language switcher ---- */
.lang-switcher { position: relative; margin-inline-end: 14px; }
.lang-switcher .lang-current {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-border, #D7E2EE);
  border-radius: 100px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--color-title);
  cursor: pointer; background: #fff; transition: var(--transition);
}
.lang-switcher .lang-current:hover { border-color: var(--color-primary); }
.lang-switcher .lang-current svg { width: 10px; height: 10px; transition: var(--transition); }
.lang-switcher.open .lang-current svg { transform: rotate(180deg); }
.lang-switcher .lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  background: #fff; border: 1px solid var(--color-border, #D7E2EE);
  border-radius: 12px; padding: 6px; min-width: 150px;
  box-shadow: 0 16px 40px rgba(11, 28, 48, 0.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: var(--transition); z-index: 999;
}
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switcher .lang-menu button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 10px; border: none; background: transparent;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--color-title);
  cursor: pointer; text-align: start;
}
.lang-switcher .lang-menu button:hover { background: var(--color-gray, #F4F7FA); }
.lang-switcher .lang-menu button.active { color: var(--color-primary); font-weight: 700; }
.lang-switcher .lang-menu button .code { opacity: .55; font-weight: 500; font-size: 12px; }

/* ---- Sectors strip (replaces fake client logos with honest sector chips) ---- */
.rts-sectors-area { padding: 40px 0; border-bottom: 1px solid var(--color-border, #D7E2EE); }
.rts-sectors-area .desc { text-align: center; font-weight: 600; color: var(--color-title); margin-bottom: 22px; }
.sectors-inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; padding: 0; margin: 0;
}
.sectors-inner li { display: flex; }
.sectors-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  background: var(--color-gray, #F4F7FA); border: 1px solid var(--color-border, #D7E2EE);
  font-size: 14px; font-weight: 600; color: var(--color-title);
  cursor: pointer; transition: var(--transition);
}
.sectors-chip i { color: var(--color-primary); font-size: 14px; transition: var(--transition); }
.sectors-chip:hover { border-color: var(--color-primary); }
.sectors-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.sectors-chip.active i { color: #fff; }

/* ---- Hero video background ---- */
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rts-banner-area-one.has-video-bg::after { opacity: 0.55; }

/* ---- Tech badges row (SaaS / ERP / LMS / PWA / Cloud) — sits on the dark hero gradient ---- */
.tech-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.tech-badges span {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

/* ---- Module / product cards (LMS modules grid) ---- */
.module-card {
  height: 100%; padding: 32px 26px; border-radius: 16px;
  background: #fff; border: 1px solid var(--color-border, #D7E2EE);
  transition: var(--transition);
}
.module-card:hover { border-color: var(--color-primary); box-shadow: 0 20px 44px rgba(11, 28, 48, 0.10); transform: translateY(-4px); }
.module-card .icon {
  width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-primary); color: #fff; font-size: 22px; margin-bottom: 20px;
}
.module-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--color-title); }
.module-card p { font-size: 15px; line-height: 1.7; color: var(--color-body-1); margin: 0; }

/* ---- Partners / logos wall (chips in #sectors select the visible panel) ---- */
.partners-panels { margin-top: 28px; }
.partners-panel { display: none; flex-wrap: wrap; justify-content: center; gap: 20px; }
.partners-panel.active { display: flex; }
.partner-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 190px; padding: 22px 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--color-border, #D7E2EE); transition: var(--transition);
}
.partner-logo:hover { border-color: var(--color-primary); box-shadow: 0 16px 34px rgba(11, 28, 48, 0.10); transform: translateY(-3px); }
.partner-logo img { height: 64px; max-width: 100%; object-fit: contain; }
.partner-logo span { font-size: 12.5px; font-weight: 600; color: var(--color-body-1); text-align: center; line-height: 1.4; }

/* ---- Placeholder callout (used for testimonial / contact placeholders) ---- */
.content-placeholder-note {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: #B4680C; background: rgba(255, 176, 32, 0.12); border: 1px dashed #E2A23D;
  padding: 4px 10px; border-radius: 6px;
}

/* ---- Chatbot widget ---- */
.nachd-chat-toggle {
  position: fixed; inset-inline-end: 26px; bottom: 26px; z-index: 1000;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gradient-primary); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(11, 28, 48, 0.28);
  transition: var(--transition);
}
.nachd-chat-toggle:hover { transform: translateY(-3px); }
.nachd-chat-window {
  position: fixed; inset-inline-end: 26px; bottom: 98px; z-index: 1000;
  width: 340px; max-width: calc(100vw - 40px); max-height: 460px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 28, 48, 0.28);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: var(--transition);
}
.nachd-chat-window.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nachd-chat-header {
  background: var(--gradient-primary); color: #fff; padding: 16px 18px;
  display: flex; align-items: center; gap: 10px;
}
.nachd-chat-header img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 4px; }
.nachd-chat-header .title { font-size: 15px; font-weight: 700; margin: 0; color: #fff; }
.nachd-chat-header .subtitle { font-size: 12px; opacity: .85; margin: 0; color: #fff; }
.nachd-chat-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--color-gray, #F4F7FA); font-size: 13.5px;
}
.nachd-chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; line-height: 1.6; }
.nachd-chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--color-border, #D7E2EE); border-start-start-radius: 4px; }
.nachd-chat-msg.user { align-self: flex-end; background: var(--color-primary); color: #fff; border-start-end-radius: 4px; }
.nachd-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; background: var(--color-gray, #F4F7FA); }
.nachd-chat-quick button {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 100px;
  background: #fff; border: 1px solid var(--color-border, #D7E2EE); color: var(--color-primary); cursor: pointer;
}
.nachd-chat-quick button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.nachd-chat-foot { display: flex; padding: 10px; gap: 8px; border-top: 1px solid var(--color-border, #D7E2EE); background: #fff; }
.nachd-chat-foot input {
  flex: 1; border: 1px solid var(--color-border, #D7E2EE); border-radius: 100px; padding: 9px 14px; font-size: 13px; outline: none;
}
.nachd-chat-foot button {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--color-primary); color: #fff; cursor: pointer; flex-shrink: 0;
}

/* Small helpers */
.badge-soon { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: rgba(22,58,99,.1); color: var(--color-primary); vertical-align: middle; }

@media (max-width: 575px) {
  .nachd-chat-window { inset-inline-end: 12px; width: calc(100vw - 24px); bottom: 88px; }
  .nachd-chat-toggle { inset-inline-end: 16px; bottom: 16px; }
}