/* Right-to-left mirror of chatbot.css, generated by tools/i18n/build.py with RTLCSS (rtlcss@4.3.0). Edit chatbot.css and rebuild - not this file. */
/* ==========================================================================
   Msindaha — Chat widget
   Loaded on every page alongside css/theme-modern.css, so brand custom
   properties (--primary, --secondary, --tm-radius-*, --tm-shadow-*,
   --tm-gradient-*, --tm-ease) are already defined at :root and used
   directly here to keep the widget visually part of the same design system
   instead of its own disconnected palette.
   ========================================================================== */

/* ======= Panel shell ======= */
/* Open/close is opacity + transform + visibility driven (not display:
   none/flex toggling) so it can actually transition smoothly both ways —
   chatbot.js only ever adds/removes the .show class now. visibility is
   delayed on the way out (transition-delay) so the panel stays interactive
   until the fade/scale finishes, and un-delayed on the way in so it's
   immediately visible as the animation starts. */
#chatbot {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 372px;
  max-height: 480px;
  background: linear-gradient(-180deg, rgba(255, 255, 255, 0.94), rgba(233, 240, 248, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 51, 102, 0.14);
  border-top: 3px solid var(--accent, #fca311);
  border-radius: 20px;
  box-shadow: 0 20px 46px -12px rgba(0, 51, 102, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #333;
  z-index: 1500;
  transform-origin: bottom left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(26px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 0.32s var(--tm-ease, ease),
    transform 0.32s var(--tm-ease, ease),
    visibility 0s linear 0.32s,
    width 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;
}

#chatbot.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.32s var(--tm-ease, ease),
    transform 0.32s var(--tm-ease, ease),
    visibility 0s linear 0s,
    width 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;
}

#chatbot.fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  bottom: 0 !important;
  left: 0 !important;
  border-radius: 0 !important;
}

/* ======= Header — solid brand band, full-bleed to the panel's rounded top ======= */
#chatbotHeader,
#chatbot > div:first-child {
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  color: #fff;
  padding: 14px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
  user-select: none;
  cursor: default;
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Soft decorative glow in the corner — purely visual depth, doesn't
   affect layout or interaction */
#chatbotHeader::before,
#chatbot > div:first-child::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -15%;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}

#chatbotHeader .controls,
#chatbot > div:first-child > div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
}

/* عنوان الشات مع الصورة */
#chatbotTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}

/* White badge behind the logo mark, ringed in the brand gold accent so it
   reads clearly on the dark header regardless of the artwork's own colors.
   The <img> carries class="h-12 w-auto" — dead Tailwind-style markup
   except .w-auto, which IS a real Bootstrap utility in style.css
   ("width: auto !important"). That overrode this box's width while height
   stayed fixed, stretching the "circle" into an oval — !important here
   beats it back and aspect-ratio/flex-shrink lock the box square even if
   the flex row tries to squeeze it. */
#chatbotTitle img {
  height: 36px !important;
  width: 36px !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  border: 2px solid var(--accent, #fca311);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Name + live-status line, built by chatbot.js's enhanceChrome() so the
   plain "<span>Msindaha Assistant</span>" markup (shared verbatim across
   every page) gains a second, smaller status row without touching HTML */
.chatbot-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.chatbot-name {
  white-space: nowrap;
}

.chatbot-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.chatbot-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.25);
  flex-shrink: 0;
}

#chatbotTitle span {
  white-space: nowrap;
}

/* ======= Header icon buttons (back / fullscreen) ======= */
/* #backButton hides its trailing "Back" text node (no wrapping span to
   target) via font-size:0 on the button, then restores a real size on the
   icon via a child selector. That breaks the moment the Font Awesome JS
   kit loaded for the chatbot (font-awesome/6.4.0/js/all.min.js) swaps the
   <i class="fas fa-arrow-left"> for an inline <svg> — the old "#backButton
   i" rule only ever matched the <i> tag, so once it's replaced the icon
   silently inherits font-size:0 from the button and renders invisible
   (exactly why the icon disappeared while #fullscreenToggle, which sets
   its own real font-size directly with no child-selector trick, kept
   working). Fixed by also matching the SVG FA's kit substitutes, and by
   giving the icon an explicit pixel size instead of only an em value tied
   to a font-size that might be zero. */
#backButton {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0; /* collapses the trailing "Back" text node — icon-only, like the reference's minimal header controls */
  cursor: pointer;
  user-select: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s var(--tm-ease, ease), background-color 0.25s var(--tm-ease, ease);
}

#backButton.hidden {
  display: none;
}

#backButton:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

#backButton i,
#backButton svg {
  font-size: 0.95rem !important;
  width: 15px !important;
  height: 15px !important;
  display: inline-block;
}

#fullscreenToggle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
  user-select: none;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fullscreenToggle:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

/* Minimize — built by chatbot.js's enhanceChrome(), sits next to expand so
   the header carries its own close control like the reference design */
#minimizeButton {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s var(--tm-ease, ease), background-color 0.25s var(--tm-ease, ease);
}

#minimizeButton:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

#minimizeButton i,
#minimizeButton svg {
  font-size: 0.8rem !important;
  width: 13px !important;
  height: 13px !important;
  display: inline-block;
}

/* ======= Content area ======= */
#chatbotContent {
  flex-grow: 1;
  padding: 18px 16px;
  overflow-y: auto;
  background: linear-gradient(-180deg, #e9f0f8 0%, #f4f7fb 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  font-size: 14px;
  color: #374151;
  word-wrap: break-word;
}

#chatbotContent > * {
  margin-bottom: 0;
}

/* chatbot.js creates this wrapper with the .opt-btn / .opt-btn.in classes
   defined below — laid out as wrapped inline chips (row + wrap) rather
   than one full-width bar per option, matching the quick-reply-chip
   pattern of modern chat widgets. */
#options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

/* ======= Scrollbar ======= */
#chatbotContent::-webkit-scrollbar {
  width: 8px;
}

#chatbotContent::-webkit-scrollbar-track {
  background: transparent;
}

#chatbotContent::-webkit-scrollbar-thumb {
  background-color: rgba(120, 130, 140, 0.35);
  border-radius: 4px;
}

#chatbotContent:hover::-webkit-scrollbar-thumb {
  background-color: rgba(120, 130, 140, 0.55);
}

/* ======= Message bubbles ======= */
/* Every bubble (bot or user) fades and slides in as it's appended —
   replaces the old one-off "tilt" wobble that only ever played on the
   very first message and read as a glitch more than a design choice. */
.msg {
  max-width: 82%;
  padding: 10px 15px;
  border-radius: 20px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.08);
  user-select: text;
  animation: msgIn 0.3s var(--tm-ease, ease) both;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bot-msg {
  background: #ffffff;
  border: 1px solid rgba(0, 51, 102, 0.08);
  color: #1c2b3a;
  align-self: flex-start;
  border-bottom-right-radius: 6px;
}

.user-msg {
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  color: #fff;
  align-self: flex-end;
  border-bottom-left-radius: 4px;
  box-shadow: var(--tm-shadow-sm);
}

/* Welcome card — the greeting is always the first message appended after
   content is cleared (openChat/goBack both do content.innerHTML = ""), so
   this reliably targets just that bubble: wider, more padded, no bubble
   "tail", reading as a distinct welcome panel rather than a chat reply. */
#chatbotContent > .msg.bot-msg:first-child {
  align-self: stretch;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: var(--tm-radius-lg, 18px);
  background: linear-gradient(-180deg, #ffffff, #f6f9fc);
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: 0 8px 20px -8px rgba(0, 51, 102, 0.2);
}

/* ======= Typing effect ======= */
.typing-text {
  display: inline-block;
  white-space: pre-wrap;
}

.cursor {
  display: inline-block;
  animation: blink 1.1s steps(2, start) infinite;
  font-weight: 600;
  color: var(--primary, #003366);
  margin-right: 2px;
  user-select: none;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ======= "Typing…" indicator bubble =======
   Styled as its own small bot-msg-like bubble (rounded, shadowed,
   left-aligned) rather than three bare dots floating in the transcript,
   so it reads as part of the same message-bubble language. */
.typing-dots {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 4px;
  padding: 13px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 51, 102, 0.08);
  border-radius: 20px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.08);
  animation: msgIn 0.25s var(--tm-ease, ease) both;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  background: var(--primary, #003366);
  border-radius: 50%;
  opacity: 0.3;
  animation: typing-dots 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dots {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* ==========================================================================
   Option / quick-reply buttons
   --------------------------------------------------------------------------
   chatbot.js assigns each button a different pastel utility class
   (bg-indigo-100, bg-green-100, bg-purple-100, …). chatbot.js now emits
   plain, purpose-named classes (.opt-btn for quick-reply chips, .bot-link-btn
   for the in-message "View Full Page" / "Learn More" CTA) instead, so every
   option reads as one consistent, professional style.
   ========================================================================== */
#options button,
.bot-link-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--primary, #003366);
  border: 1.5px solid var(--primary, #003366);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 51, 102, 0.06);
  transition:
    background-color 0.25s var(--tm-ease, ease),
    color 0.25s var(--tm-ease, ease),
    box-shadow 0.25s var(--tm-ease, ease),
    transform 0.2s var(--tm-ease, ease);
}

#options button i,
.bot-link-btn i {
  flex-shrink: 0;
  font-size: 12px;
  color: inherit;
}

.bot-link-btn {
  margin-top: 8px;
}

/* Quick-reply chips animate in one by one as chatbot.js appends them,
   instead of appearing all at once */
.opt-btn {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s var(--tm-ease, ease),
    transform 0.35s var(--tm-ease, ease),
    background-color 0.25s var(--tm-ease, ease),
    color 0.25s var(--tm-ease, ease),
    box-shadow 0.25s var(--tm-ease, ease);
}
.opt-btn.in {
  opacity: 1;
  transform: translateY(0);
}

#options button:hover,
.bot-link-btn:hover {
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--tm-shadow-sm);
  transform: translateY(-2px);
}

#options button:active,
.bot-link-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 51, 102, 0.1);
}

#options button:focus-visible,
.bot-link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.35);
}

/* ==========================================================================
   Main-menu grid — the top-level 8-option menu only (showMainOptions()
   passes 'main-menu-grid' as renderOptions()'s containerClass). Every other
   renderOptions() call (services submenu, etc.) has no such class, so it
   keeps the plain quick-reply-chip styling above untouched.
   ========================================================================== */
#options.main-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

#options.main-menu-grid button {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.08);
  border-radius: var(--tm-radius-md, 14px);
  padding: 12px 10px;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: normal;
  box-shadow: 0 3px 12px -4px rgba(0, 51, 102, 0.14);
}

#options.main-menu-grid button i {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  color: #fff;
  font-size: 13px;
}

#options.main-menu-grid button:hover {
  background: #fff;
  color: var(--primary, #003366);
  border-color: rgba(0, 51, 102, 0.2);
  box-shadow: 0 8px 18px -6px rgba(0, 51, 102, 0.22);
  transform: translateY(-2px);
}

/* ==========================================================================
   About-us / contact-details info panels
   --------------------------------------------------------------------------
   The "About Us" and "Contact Us" sections build a plain
   <div class="mt-2 text-sm space-y-1"><p><b>…</b></p>…</div> and insert it
   directly as a sibling of the .msg bubbles (content.insertAdjacentHTML),
   not inside a bubble — with zero rules for it, this rendered as bare
   unstyled text floating in the chat, inconsistent with every other message.
   ========================================================================== */
#chatbotContent > div.mt-2 {
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1c2b3a;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.06);
}
#chatbotContent > div.mt-2 p {
  margin: 0 0 8px;
}
#chatbotContent > div.mt-2 p:last-child {
  margin-bottom: 0;
}
#chatbotContent > div.mt-2 b {
  color: var(--primary, #003366);
}

/* ==========================================================================
   In-chat tax calculator embed
   ========================================================================== */
#calculator {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.1);
  border-radius: var(--tm-radius-md, 14px);
  padding: 14px;
  box-shadow: var(--tm-shadow-sm);
}

#calculator h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary, #003366);
  margin: 0 0 4px;
}

#calculator label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #4b5563;
}

#calculator input,
#calculator select {
  border: 1px solid #d8dee6;
  border-radius: 10px;
  padding: 8px 10px;
  width: 100%;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#calculator input:focus,
#calculator select:focus {
  border-color: var(--primary, #003366);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
  outline: none;
}

#calculator button {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#calculator button:hover {
  transform: translateY(-1px);
  box-shadow: var(--tm-shadow-sm);
}

#calcBtn {
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  color: #fff;
}

#langBtn {
  background: #eef1f5;
  color: #374151;
}

#langBtn:hover {
  background: #e2e6ec;
}

/* calculate() only ever calls resultsDiv.classList.remove("hidden") — the
   div's initial markup already carries class="hidden mt-2 text-sm", but
   with no Tailwind loaded that class did nothing. Harmless in practice
   (the div is empty until calculate() runs), but scoped here for
   correctness rather than relying on that coincidence. */
#results.hidden {
  display: none;
}
#results {
  background: linear-gradient(-135deg, #eef4fa 0%, #e3ecf7 100%);
  border: 1px solid rgba(0, 51, 102, 0.12);
  border-radius: 10px;
  padding: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #1c2b3a;
}

#calculator.lang-ar {
  font-family: "Cairo", sans-serif;
}

#calculator.lang-en {
  font-family: "Roboto", sans-serif;
}

/* ======= Footer credit line ======= */
#chatbotFooter {
  flex-shrink: 0;
  padding: 8px 14px 10px;
  font-size: 11.5px;
  color: #6b7280;
  text-align: center;
  border-top: 1px solid rgba(0, 51, 102, 0.08);
  background: #fff;
  line-height: 1.4;
}

#chatbotFooter span {
  color: var(--primary, #003366);
  font-weight: 600;
}

/* ======= Toggle button ======= */
#chatbotToggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: var(--tm-gradient-primary, linear-gradient(-135deg, #003366, #1a4f8b));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0, 51, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  user-select: none;
  padding: 0;
  overflow: visible; /* keeps the online-status dot visible outside the circle */
}

#chatbotToggle:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 34px -8px rgba(0, 51, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

#chatbotToggle img {
  height: 34px;
  width: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
}

/* ======= Online-status dot ======= */
#chatbotToggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  background: #35d07f;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.55);
  animation: statusPulse 2.4s ease-out infinite;
}

@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

/* ======= Responsive ======= */
@media (max-width: 400px) {
  #chatbot {
    width: 90vw;
    max-height: 70vh;
    font-size: 13px;
  }
  #chatbotToggle {
    width: 48px;
    height: 48px;
  }
  #chatbotToggle img {
    height: 32px;
    width: 32px;
  }
  #chatbotTitle {
    font-size: 0.95rem;
  }
  #chatbotContent {
    font-size: 12px;
    gap: 8px;
  }
  #options.main-menu-grid button {
    font-size: 11.5px;
    padding: 10px 8px;
  }
  #options.main-menu-grid button i {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}