/* =============================================================================
   Tarweig AI Chat Widget — Stylesheet v2.0.0
   Refactored: removed ~1000 redundant !important, merged dark-mode selectors,
   used CSS custom properties to eliminate all duplication.
   Design: unchanged.
   ============================================================================= */

/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */

:root {
  --tw-primary:       var(--brand-primary, var(--btn-primary-bg, #8a1538));
  --tw-primary-hover: var(--btn-primary-hover-bg, #a01845);
  --tw-primary-dark:  var(--btn-primary-hover-bg, #e44343);
  --tw-primary-rgb:   138, 20, 56;

  /* Light mode defaults (WHMCS Lagom variable → fallback) */
  --tw-bg:         var(--card-bg, #ffffff);
  --tw-text:       var(--table-td-font-color, #17191c);
  --tw-subtext:    var(--price-title-color, #64748b);
  --tw-border:     var(--table-border-color, #dee0e3);
  --tw-msg-bg:     var(--table-bg-accent, #f4f5f7);
  --tw-bot-bg:     var(--card-bg, #ffffff);
  --tw-bot-text:   var(--table-td-font-color, #17191c);
  --tw-bot-border: var(--table-border-color, #dee0e3);
  --tw-card-bg:    var(--card-bg, #ffffff);
  --tw-pill-bg:    var(--table-bg-accent, #f1f5f9);
  --tw-input-bg:   var(--table-bg-accent, #f8fafc);
  --tw-shadow:     var(--table-container-box-shadow, 0 16px 36px -10px rgba(0,0,0,0.15));
  --tw-header-bg:  var(--card-bg, #ffffff);
}

/* Dark mode: single place to override all tokens */
body.lagom-dark-mode, body.dark-mode,
html[data-theme="dark"],
.tw-ai-window.tw-dark-mode,
.tw-dark-mode {
  --tw-bg:         var(--dropdown-collapse-bg, #1e1e1e);
  --tw-text:       #f1f5f9;
  --tw-subtext:    #94a3b8;
  --tw-border:     rgba(255,255,255,0.12);
  --tw-msg-bg:     var(--dropdown-collapse-bg, #1a1a1a);
  --tw-bot-bg:     #2a2a2a;
  --tw-bot-text:   #f1f5f9;
  --tw-bot-border: rgba(255,255,255,0.1);
  --tw-card-bg:    #2a2a2a;
  --tw-pill-bg:    rgba(255,255,255,0.06);
  --tw-input-bg:   rgba(255,255,255,0.04);
  --tw-shadow:     0 16px 36px -10px rgba(0,0,0,0.4);
  --tw-header-bg:  #1e1e1e;
}

/* Light mode explicit overrides */
body.theme-light, body.light-mode, html[data-theme="light"],
.tw-ai-window.tw-light-mode {
  --tw-bg:         #ffffff;
  --tw-msg-bg:     #f8fafc;
  --tw-bot-bg:     #ffffff;
  --tw-bot-text:   #1e293b;
  --tw-bot-border: #e2e8f0;
  --tw-subtext:    #64748b;
  --tw-input-bg:   #f8fafc;
  --tw-border:     #e2e8f0;
  --tw-header-bg:  #ffffff;
}


/* ── 2. Floating Container & Launcher ─────────────────────────────────────── */

.tw-floating-ai-container {
  position: fixed;
  bottom: 25px;
  z-index: 99998;
}

.tw-floating_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.tw-contact_icon {
  background-color: var(--brand-primary);
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 var(--brand-primary);
  animation: tw-pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  transition: transform 300ms ease-in-out;
  cursor: pointer;
}

.tw-contact_icon.tw-no-pulse {
  animation: none;
  box-shadow: 0 4px 15px rgba(var(--tw-primary-rgb), 0.35);
}

.tw-contact_icon:hover { transform: scale(1.08); }

.tw-contact_icon svg {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.tw-text_icon {
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--text-heading-color, #1e293b);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  width: 100%;
  display: block;
}

@keyframes tw-pulsing {
  to { box-shadow: 0 0 0 30px rgba(var(--tw-primary-rgb), 0); }
}


/* ── 3. Proactive Bubble ──────────────────────────────────────────────────── */

.tw-proactive-bubble {
  position: fixed;
  bottom: 110px;
  z-index: 10002;
  background: #ffffff;
  border-radius: 18px;
  padding: 12px 15px;
  box-shadow: 0 14px 35px -6px rgba(var(--tw-primary-rgb), 0.18),
              0 2px 8px rgba(0,0,0,0.08);
  border: 1.5px solid rgba(var(--tw-primary-rgb), 0.2);
  width: 245px;
  max-width: calc(100vw - 40px);
  cursor: pointer;
  display: none;
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  direction: inherit;
  font-family: inherit;
}

.tw-proactive-bubble::before {
  content: '';
  position: absolute;
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #ffffff;
  filter: drop-shadow(0 2px 1px rgba(var(--tw-primary-rgb), 0.15));
}

.tw-proactive-bubble.tw-show {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: tw-proactive-float 4s ease-in-out infinite alternate;
}

@keyframes tw-proactive-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.tw-proactive-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.tw-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2.5px rgba(16,185,129,0.25);
  display: inline-block;
  animation: tw-dot-pulse 2s infinite;
}

@keyframes tw-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(16,185,129,0);   }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}

.tw-proactive-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.2px;
}

.tw-proactive-text {
  font-size: 12px;
  color: #1e293b;
  line-height: 1.45;
  font-weight: 600;
}

.tw-proactive-close {
  position: absolute;
  top: 7px;
  background: rgba(0,0,0,0.04);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: bold;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.tw-proactive-close:hover {
  background: #e11d48;
  color: #ffffff !important;
}


/* ── 4. Chat Window ───────────────────────────────────────────────────────── */

.tw-ai-window {
  position: fixed;
  bottom: 110px;
  z-index: 10001;
  width: 410px;
  max-width: calc(100vw - 30px);
  height: 640px;
  max-height: calc(100vh - 120px);
  background: var(--tw-bg);
  color: var(--tw-text);
  border-radius: 24px;
  box-shadow: var(--tw-shadow);
  border: 1px solid var(--tw-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  direction: inherit;
  font-family: inherit;
}

.tw-ai-window.tw-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* WHMCS Lagom-specific variable bindings (overrides :root defaults) */
.tw-ai-window {
  background: var(--card-bg, var(--tw-bg)) !important;
  color: var(--table-td-font-color, var(--tw-text)) !important;
  border-color: var(--table-border-color, var(--tw-border)) !important;
  box-shadow: var(--table-container-box-shadow, var(--tw-shadow)) !important;
}


/* ── 5. Header ────────────────────────────────────────────────────────────── */

.tw-ai-header {
  flex-shrink: 0 !important;
  background: var(--card-bg, var(--tw-header-bg));
  padding: 9px 16px;
  color: var(--tw-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--table-border-color, var(--tw-border));
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  font-family: inherit;
  position: relative;
  box-sizing: border-box;
}

.tw-ai-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tw-ai-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--tw-primary-rgb), 0.2);
  flex-shrink: 0;
}

.tw-ai-avatar svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: #ffffff;
}

.tw-ai-header-title {
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--table-td-font-color, var(--tw-text));
  font-family: inherit;
}

.tw-ai-header-sub {
  font-size: 10.5px;
  color: var(--price-title-color, var(--tw-subtext));
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  margin-top: 1px;
}

.tw-ai-online-dot {
  width: 6.5px;
  height: 6.5px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}

.tw-ai-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.tw-ai-close-btn,
.tw-ai-dropdown-btn,
.tw-ai-menu-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
  font-family: inherit;
  border: 1px solid var(--table-border-color, rgba(0,0,0,0.08));
  background: var(--btn-light-bg, rgba(0,0,0,0.05));
  color: var(--table-td-font-color, #475569);
}

.tw-ai-close-btn:hover,
.tw-ai-dropdown-btn:hover,
.tw-ai-menu-btn:hover {
  background: var(--brand-primary);
  color: #ffffff !important;
  border-color: var(--brand-primary);
  transform: scale(1.06);
}

.tw-ai-dropdown-btn svg,
.tw-ai-menu-btn svg {
  fill: currentColor;
  transition: fill 0.2s ease;
}


/* ── 6. Dropdown Menu ─────────────────────────────────────────────────────── */

.tw-ai-dropdown {
  position: absolute;
  top: 44px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--table-border-color, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  min-width: 160px;
  z-index: 1000;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.tw-ai-dropdown.tw-open { display: flex; }

.tw-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--table-td-font-color, #334155);
  transition: all 0.15s ease;
  background: transparent;
  border: none;
  width: 100%;
  text-align: inherit;
  font-family: inherit;
}

.tw-dropdown-item svg { flex-shrink: 0; color: var(--tw-subtext); }

.tw-dropdown-item:hover {
  background: rgba(var(--tw-primary-rgb), 0.07);
  color: var(--brand-primary);
}

.tw-dropdown-item:hover svg { color: var(--brand-primary); }


/* ── 7. Messages Area ─────────────────────────────────────────────────────── */

.tw-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--table-bg-accent, var(--tw-msg-bg));
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

.tw-ai-messages::-webkit-scrollbar { width: 6px; }
.tw-ai-messages::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
.tw-ai-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.05);
}
.tw-ai-messages::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* Dark mode scrollbar */
body.lagom-dark-mode .tw-ai-messages,
body.dark-mode .tw-ai-messages,
html[data-theme="dark"] .tw-ai-messages,
.tw-dark-mode .tw-ai-messages {
  scrollbar-color: rgba(255,255,255,0.32) transparent;
}

body.lagom-dark-mode .tw-ai-messages::-webkit-scrollbar-thumb,
body.dark-mode .tw-ai-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .tw-ai-messages::-webkit-scrollbar-thumb,
.tw-dark-mode .tw-ai-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.32);
}

body.lagom-dark-mode .tw-ai-messages::-webkit-scrollbar-thumb:hover,
body.dark-mode .tw-ai-messages::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .tw-ai-messages::-webkit-scrollbar-thumb:hover,
.tw-dark-mode .tw-ai-messages::-webkit-scrollbar-thumb:hover {
  background: var(--tw-primary-dark);
}


/* ── 8. Message Bubbles ───────────────────────────────────────────────────── */

.tw-ai-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  animation: tw-msg-in 0.25s cubic-bezier(0.16,1,0.3,1) both;
  direction: inherit;
  font-family: inherit;
  box-sizing: border-box;
}

@keyframes tw-msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.tw-ai-msg.tw-bot {
  align-self: flex-start;
  background: var(--card-bg, var(--tw-bot-bg));
  color: var(--table-td-font-color, var(--tw-bot-text));
  border: 1px solid var(--table-border-color, var(--tw-bot-border));
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tw-ai-msg.tw-user {
  align-self: flex-end;
  background: var(--brand-primary);
  color: #ffffff !important;
  border-radius: 16px 4px 16px 16px;
  box-shadow: 0 3px 12px rgba(var(--tw-primary-rgb), 0.25);
}

.tw-ai-msg a { color: var(--brand-primary); text-decoration: underline; }
.tw-ai-msg.tw-user a { color: rgba(255,255,255,0.9); }
.tw-ai-msg strong { font-weight: 700; }
.tw-ai-msg code { font-size: 12px; background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }

/* Message timestamp */
.tw-msg-time {
  font-size: 9.5px;
  color: var(--tw-subtext);
  margin-top: 3px;
  opacity: 0.75;
  display: block;
  text-align: end;
}


/* ── 9. Typing Indicator ──────────────────────────────────────────────────── */

.tw-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--card-bg, var(--tw-bot-bg));
  border: 1px solid var(--table-border-color, var(--tw-bot-border));
  border-radius: 4px 16px 16px 16px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tw-typing-dot {
  width: 7px;
  height: 7px;
  background: var(--tw-subtext);
  border-radius: 50%;
  animation: tw-typing-bounce 1.2s infinite;
}

.tw-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.tw-typing-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes tw-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}


/* ── 10. Feedback Bar ─────────────────────────────────────────────────────── */

.tw-feedback-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px 8px;
  margin-top: 8px;
  gap: 6px;
  direction: inherit;
  box-sizing: border-box;
}

.tw-feedback-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tw-feedback-label.success { color: #16a34a; font-weight: 700; }
.tw-feedback-label.review  { color: #e11d48; font-weight: 700; }

.tw-feedback-actions { display: flex; align-items: center; gap: 4px; }

.tw-feedback-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.tw-feedback-btn:hover         { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.tw-feedback-btn.tw-btn-up:hover   { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.tw-feedback-btn.tw-btn-down:hover { border-color: #f43f5e; color: #e11d48; background: #fff1f2; }
.tw-feedback-btn.active-up         { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.tw-feedback-btn.active-down       { background: #ffe4e6; border-color: #f43f5e; color: #be123c; }

.tw-feedback-bar.voted .tw-feedback-btn:not(.active-up):not(.active-down) {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}


/* ── 11. QR / Invoice Card ───────────────────────────────────────────────── */

.tw-invoice-card {
  background: var(--tw-card-bg);
  color: var(--tw-text);
  border: 1px solid var(--tw-border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.12);
  margin-top: 8px;
  direction: inherit;
  font-family: inherit;
}

.tw-qr-method-tabs {
  display: flex;
  background: var(--tw-pill-bg);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 10px;
  gap: 4px;
}

.tw-qr-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tw-subtext);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tw-qr-tab-btn.active {
  background: var(--tw-bg);
  color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.tw-inv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--tw-border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.tw-inv-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.tw-inv-badge.paid   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.tw-inv-badge.unpaid { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }

.tw-inv-amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--brand-primary);
  line-height: 1;
}

.tw-inv-label {
  font-size: 10.5px;
  color: var(--tw-subtext);
  margin-bottom: 4px;
}

.tw-qr-img-wrapper {
  text-align: center;
  padding: 8px 0;
}

.tw-qr-img-wrapper img {
  width: 130px;
  height: 130px;
  border-radius: 12px;
  border: 1px solid var(--tw-border);
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.tw-qr-img-wrapper img:hover { transform: scale(1.04); }

.tw-qr-account-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-subtext);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* QR Zoom Modal */
.tw-qr-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.tw-qr-modal.tw-show { display: flex; }

.tw-qr-modal-content {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  position: relative;
}

.tw-qr-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tw-qr-modal-close:hover { background: #e11d48; color: #fff; }

.tw-qr-modal-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 14px;
}

.tw-qr-modal #twQrModalImg {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.tw-qr-modal-hint { font-size: 11px; color: #94a3b8; margin-top: 10px; }


/* ── 12. Product Cards & Slider ───────────────────────────────────────────── */

.tw-pkg-slider-wrapper { width: 100%; margin: 2px 0; position: relative; }

.tw-pkg-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 2px;
  padding: 0 6px;
}

.tw-slider-nav-btn {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--table-border-color, #cbd5e1);
  color: var(--brand-primary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.tw-slider-nav-btn:hover {
  background: var(--brand-primary);
  color: #ffffff !important;
  border-color: var(--brand-primary);
  transform: scale(1.08);
}

body.lagom-dark-mode .tw-slider-nav-btn,
body.dark-mode .tw-slider-nav-btn,
html[data-theme="dark"] .tw-slider-nav-btn,
.tw-dark-mode .tw-slider-nav-btn {
  background: #242424;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.18);
}

.tw-slider-dots { display: flex; gap: 5px; align-items: center; }

.tw-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tw-slider-dot.active {
  background: var(--brand-primary);
  width: 16px;
  border-radius: 8px;
}

.tw-pkg-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 0 4px;
  scrollbar-width: none;
}

.tw-pkg-slider::-webkit-scrollbar { display: none; }

.tw-pkg-card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  background: var(--tw-card-bg);
  color: var(--tw-text);
  border: 1.5px solid var(--tw-border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
}

.tw-pkg-card.popular {
  border-color: var(--brand-primary);
  box-shadow: 0 6px 20px rgba(var(--tw-primary-rgb), 0.12);
}

.tw-pkg-card.tw-compact-card {
  padding: 12px 14px;
  justify-content: flex-start;
  gap: 6px;
}

.tw-pkg-badge {
  position: absolute;
  top: -10px;
  background: var(--brand-primary);
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 2;
  letter-spacing: 0.3px;
}

.tw-pkg-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--tw-text);
  margin-bottom: 2px;
}

.tw-pkg-price {
  font-size: 22px;
  font-weight: 900;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 2px;
}

.tw-pkg-price-sub {
  font-size: 10px;
  color: var(--tw-subtext);
  margin-bottom: 8px;
}

.tw-pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-pkg-features li {
  font-size: 11.5px;
  color: var(--tw-text);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.4;
}


.tw-pkg-btn {
  background: var(--brand-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.tw-pkg-btn span { background: transparent; border: none; padding: 0; color: inherit; }

.tw-pkg-btn:hover {
  background: var(--tw-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--tw-primary-rgb), 0.32);
}


/* ── 13. Domain Availability Card ─────────────────────────────────────────── */

.tw-domain-top-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.tw-domain-top-badge.available   { background: rgba(16,185,129,0.12); color: #065f46; border: 1px solid rgba(16,185,129,0.3); }
.tw-domain-top-badge.unavailable { background: rgba(239,68,68,0.1);   color: #991b1b; border: 1px solid rgba(239,68,68,0.25); }

.tw-domain-capsule-card {
  background: rgba(16,185,129,0.06);
  border: 1.5px solid rgba(16,185,129,0.35);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 6px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 3px 10px rgba(16,185,129,0.08);
  width: 100%;
  box-sizing: border-box;
}

.tw-domain-capsule-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(16,185,129,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.tw-domain-capsule-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
}


/* ── 14. Quick Reply Chips ─────────────────────────────────────────────────── */

.tw-quick-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.tw-quick-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  outline: none;
  text-decoration: none !important;
}

.tw-quick-chip:hover {
  background: var(--brand-primary);
  color: #ffffff !important;
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--tw-primary-rgb), 0.2);
}

body.lagom-dark-mode .tw-quick-chip,
body.dark-mode .tw-quick-chip,
html[data-theme="dark"] .tw-quick-chip,
.tw-dark-mode .tw-quick-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #f8fafc;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

body.lagom-dark-mode .tw-quick-chip:hover,
body.dark-mode .tw-quick-chip:hover,
html[data-theme="dark"] .tw-quick-chip:hover,
.tw-dark-mode .tw-quick-chip:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff !important;
}


/* ── 15. Order Drawer ─────────────────────────────────────────────────────── */

.tw-order-drawer {
  background: var(--tw-bg);
  border-top: 1px solid var(--tw-border);
  padding: 16px;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.tw-order-drawer.tw-open { display: flex; }

.tw-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--tw-border);
  border-radius: 4px;
  margin: 0 auto 8px;
}

.tw-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tw-drawer-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--tw-text);
}

.tw-drawer-close {
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 12px;
  color: var(--tw-subtext);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tw-drawer-close:hover { background: #e11d48; color: #fff; }

.tw-drawer-body { display: flex; flex-direction: column; gap: 10px; }

.tw-domain-segmented-control {
  display: flex;
  background: var(--tw-pill-bg);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.tw-segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tw-subtext);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.tw-segment-btn.active {
  background: var(--tw-bg);
  color: var(--brand-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.tw-field-group { display: flex; flex-direction: column; gap: 5px; }

.tw-field-group label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tw-subtext);
}

.tw-domain-capsule-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tw-capsule-input {
  flex: 1;
  border: 1.5px solid var(--tw-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--tw-input-bg);
  color: var(--tw-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.tw-capsule-input:focus { border-color: var(--brand-primary); }

.tw-capsule-select {
  border: 1.5px solid var(--tw-border);
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
  background: var(--tw-input-bg);
  color: var(--tw-text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  min-width: 80px;
}

.tw-drawer-submit-btn {
  background: var(--brand-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  transition: all 0.2s ease;
  font-family: inherit;
}

.tw-drawer-submit-btn:hover {
  background: var(--tw-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--tw-primary-rgb), 0.3);
}


/* ── 16. Footer / Input ───────────────────────────────────────────────────── */

.tw-ai-footer {
  padding: 8px 12px !important;
  background: var(--card-bg, #ffffff) !important;
  border-top: 1px solid var(--tw-border, rgba(0, 0, 0, 0.08)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

.tw-ai-input-wrapper {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1.5px solid var(--tw-border, #dee0e3) !important;
  border-radius: 24px !important;
  padding: 2px 2px 2px 14px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

[dir="rtl"] .tw-ai-input-wrapper,
.tw-rtl .tw-ai-input-wrapper {
  padding: 3px 12px 3px 4px !important;
}

.tw-ai-input-wrapper:focus-within {
  border-color: var(--brand-primary, #8a1438) !important;
  box-shadow: 0 0 0 3px rgba(138, 20, 56, 0.1) !important;
}

#twAiInput,
#twAiInput:focus,
#twAiInput:active,
.tw-ai-window input#twAiInput,
.tw-ai-window .tw-ai-input,
input.tw-ai-input {
  flex: 1 !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  color: var(--tw-text, #17191c) !important;
  font-family: inherit !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.tw-ai-send-btn {
  background: var(--brand-primary, #8a1438) !important;
  border: none !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 3px 10px rgba(138, 20, 56, 0.25) !important;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s !important;
}

.tw-ai-send-btn:hover {
  transform: scale(1.08);
  background: var(--tw-primary-hover);
  box-shadow: 0 4px 14px rgba(var(--tw-primary-rgb), 0.35);
}

.tw-ai-send-btn svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
  display: block;
  margin: auto;
  flex-shrink: 0;
}


/* ── 17. Service / Invoice / Abandoned Cart Chips ─────────────────────────── */

.tw-service-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tw-pill-bg);
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 11.5px;
  gap: 6px;
  margin-bottom: 4px;
}

.tw-service-pill-name { font-weight: 700; color: var(--tw-text); }
.tw-service-pill-date { color: var(--tw-subtext); font-size: 10.5px; }

.tw-service-pill-link {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-primary);
  text-decoration: none !important;
  white-space: nowrap;
}


/* ── 18. RTL / Arabic Support ─────────────────────────────────────────────── */

.tw-rtl,
[dir="rtl"] .tw-ai-window,
[dir="rtl"] .tw-floating_btn,
[dir="rtl"] .tw-proactive-bubble {
  direction: rtl;
}

/* RTL: msg alignment flip */
.tw-ai-window.tw-rtl .tw-ai-msg.tw-bot,
[dir="rtl"] .tw-ai-window .tw-ai-msg.tw-bot { align-self: flex-end; }

.tw-ai-window.tw-rtl .tw-ai-msg.tw-user,
[dir="rtl"] .tw-ai-window .tw-ai-msg.tw-user { align-self: flex-start; }

/* RTL: send arrow flip */
.tw-ai-window.tw-rtl .tw-ai-send-btn svg,
[dir="rtl"] .tw-ai-window .tw-ai-send-btn svg { transform: scaleX(-1); }

/* RTL: badge position flip */
.tw-ai-window.tw-rtl .tw-pkg-badge,
.tw-ai-window.tw-rtl .tw-domain-top-badge,
[dir="rtl"] .tw-pkg-badge,
[dir="rtl"] .tw-domain-top-badge { left: 16px; right: auto; }

/* RTL: dropdown position flip */
.tw-ai-window.tw-rtl .tw-ai-dropdown,
[dir="rtl"] .tw-ai-dropdown { left: 0; right: auto; }

/* RTL: input padding flip */
.tw-ai-window.tw-rtl .tw-ai-input-wrapper,
[dir="rtl"] .tw-ai-input-wrapper { padding: 2px 14px 2px 2px !important; }


/* ── 19. Responsive / Mobile ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  .tw-ai-window {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .tw-floating-ai-container { bottom: 16px; }
  .tw-proactive-bubble { width: 210px; }
}


/* ── 20. WHMCS Admin Panel Styles ─────────────────────────────────────────── */

.twdc-scoped-wrapper .twdc-about-panel { border-radius: 8px; overflow: hidden; }
.twdc-scoped-wrapper .twdc-about-panel-heading { background: linear-gradient(90deg, #8a1438 0%, #c0392b 100%); }
.twdc-scoped-wrapper .twdc-about-panel-title { color: #ffffff; font-weight: 700; }
.twdc-scoped-wrapper .twdc-addon-info-table td { padding: 10px 14px; vertical-align: middle; }
.twdc-scoped-wrapper .twdc-addon-info-label { width: 220px; background: #fafafa; font-weight: 600; color: #374151; }
.twdc-scoped-wrapper .twdc-stat-panel .panel-body { border-top: 3px solid #8a1438; }
.twdc-scoped-wrapper .twdc-stat-panel-body { padding: 14px; }


/* ── 21. Domain List (TLD grid) ───────────────────────────────────────────── */

.tw-domain-list-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0;
  box-sizing: border-box;
}

.tw-domain-item {
  position: relative;
  background: var(--tw-card-bg);
  border: 1.5px solid var(--tw-border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.tw-domain-item.popular-item {
  border-color: var(--brand-primary);
  margin-top: 6px;
}

.tw-domain-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-domain-name,
.tw-domain-ext {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--tw-text);
  letter-spacing: 0.5px;
}

.tw-domain-tld {
  font-weight: 700;
  font-size: 12px;
  color: var(--tw-subtext);
}

.tw-domain-center {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.tw-domain-price {
  font-weight: 800;
  font-size: 13px;
  color: var(--brand-primary);
}

.tw-domain-period {
  font-size: 10px;
  color: var(--tw-subtext);
}

.tw-domain-desc {
  font-size: 11px;
  color: var(--tw-subtext);
  margin-top: 2px;
  line-height: 1.4;
}

.tw-domain-buy-btn {
  background: var(--brand-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 16px;
  padding: 5.5px 11px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2.5px 7px rgba(var(--tw-primary-rgb), 0.18);
  transition: all 0.2s ease;
  outline: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.tw-domain-buy-btn:hover {
  background: var(--tw-primary-hover);
  transform: translateY(-1px);
}

.tw-domain-card-fullwidth {
  background: var(--card-bg, #ffffff);
  border: 1.5px solid var(--table-border-color, #dee0e3);
  color: var(--table-td-font-color, #17191c);
}

/* Dark mode: domain text overrides */
body.lagom-dark-mode .tw-domain-tld,
body.dark-mode .tw-domain-tld,
html[data-theme="dark"] .tw-domain-tld,
.tw-dark-mode .tw-domain-tld,
body.lagom-dark-mode .tw-domain-name,
body.dark-mode .tw-domain-name,
html[data-theme="dark"] .tw-domain-name,
.tw-dark-mode .tw-domain-name { color: #ffffff; }

body.lagom-dark-mode .tw-domain-desc,
body.dark-mode .tw-domain-desc,
html[data-theme="dark"] .tw-domain-desc,
.tw-dark-mode .tw-domain-desc { color: #cbd5e1; }


/* ── 22. Full-width Bot Message ────────────────────────────────────────────── */

.tw-ai-msg.tw-bot-fullwidth,
.tw-ai-msg.tw-bot.tw-bot-fullwidth {
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  align-self: center !important;
}


/* ── 23. Invoice Detail Styles ─────────────────────────────────────────────── */

.tw-inv-number {
  font-size: 14px;
  font-weight: 800;
  color: var(--tw-text);
  margin-top: 2px;
}

.tw-inv-date {
  font-size: 11.5px;
  color: var(--tw-subtext);
  margin-bottom: 10px;
}

.tw-inv-status-bar {
  font-size: 11px;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 7px 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* QR section (payment methods panel) */
.tw-inv-qr-section {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--tw-pill-bg);
  border: 1px dashed var(--tw-border);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
}

.tw-inv-qr-section.tw-qr-hidden { display: none; }

.tw-inv-qr-box {
  text-align: center;
  flex-shrink: 0;
}

.tw-inv-qr-img {
  width: 125px;
  height: 125px;
  object-fit: contain;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  display: block;
  margin: 0 auto 3px;
  background: #ffffff;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.tw-inv-qr-img:hover { transform: scale(1.05); }

.tw-inv-qr-sub {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
}

.tw-inv-methods {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tw-method-item {
  font-size: 11px;
  color: #334155;
}

.tw-method-title {
  display: block;
  font-weight: 700;
  font-size: 11px;
  color: var(--brand-primary);
}

.tw-method-desc {
  font-size: 10.5px;
  color: #64748b;
  display: block;
  margin-top: 3px;
  line-height: 1.35;
}

/* Payment buttons */
.tw-pay-btn-wrapper {
  margin: 8px 0 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.tw-pay-btn,
.tw-pay-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--brand-primary);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 5.5px 10px;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(var(--tw-primary-rgb), 0.2);
  flex-shrink: 0;
}

.tw-pay-btn:hover,
.tw-ai-msg a.tw-pay-btn:hover {
  background: var(--tw-primary-hover);
  transform: translateY(-1px);
  color: #ffffff !important;
  text-decoration: none !important;
}


/* ── 24. Typing Dots (alternative style) ─────────────────────────────────── */

.tw-typing-msg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px;
  background: var(--tw-bot-bg);
  border: 1px solid var(--tw-bot-border);
  width: fit-content;
  min-width: 60px;
  border-radius: 4px 16px 16px 16px;
}

.tw-dot {
  width: 7px;
  height: 7px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: inline-block;
  animation: twDotPulse 1.4s infinite ease-in-out both;
}

.tw-dot:nth-child(1) { animation-delay: -0.32s; }
.tw-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes twDotPulse {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* Pending/amber pulse dot (e.g. invoice pending status) */
.tw-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245,158,11,0.7);
  animation: tw-status-pulse 1.4s infinite;
  flex-shrink: 0;
}

@keyframes tw-status-pulse {
  to { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}


/* ── 25. Product Card — WHMCS Variable Bindings ───────────────────────────── */

/* Ensures pkg card text inherits WHMCS Lagom theme colors */
.tw-pkg-title,
.tw-pkg-price,
.tw-pkg-price bdi {
  color: var(--table-td-font-color, #17191c);
}

.tw-pkg-features,
.tw-pkg-feature-item,
.tw-pkg-card li,
.tw-pkg-card span {
  color: var(--price-title-color, #5e636e);
}

.tw-pkg-recommendation {
  font-size: 11px;
  color: var(--price-title-color, #64748b);
  font-style: italic;
  margin-top: 4px;
}

/* Dark mode pkg text */
body.lagom-dark-mode .tw-pkg-title,
body.dark-mode .tw-pkg-title,
html[data-theme="dark"] .tw-pkg-title,
.tw-dark-mode .tw-pkg-title,
body.lagom-dark-mode .tw-pkg-price,
body.dark-mode .tw-pkg-price,
html[data-theme="dark"] .tw-pkg-price,
.tw-dark-mode .tw-pkg-price { color: #f1f5f9; }

body.lagom-dark-mode .tw-pkg-recommendation,
body.dark-mode .tw-pkg-recommendation,
html[data-theme="dark"] .tw-pkg-recommendation,
.tw-dark-mode .tw-pkg-recommendation { color: #cbd5e1; }

body.lagom-dark-mode .tw-pkg-features,
body.dark-mode .tw-pkg-features,
html[data-theme="dark"] .tw-pkg-features,
.tw-dark-mode .tw-pkg-features,
body.lagom-dark-mode .tw-pkg-feature-item,
body.dark-mode .tw-pkg-feature-item,
html[data-theme="dark"] .tw-pkg-feature-item,
.tw-dark-mode .tw-pkg-feature-item { color: #cbd5e1; }


/* ── 26. Active States & WHMCS Dropdown Bindings ──────────────────────────── */

/* Active dropdown toggle button */
.tw-ai-dropdown-btn.tw-active,
.tw-ai-dropdown.tw-active { display: flex; }

.tw-ai-dropdown-btn.tw-active {
  background: var(--tw-primary-dark);
  color: #ffffff !important;
  border-color: var(--tw-primary-dark);
  transform: scale(1.06);
}

/* WHMCS Lagom-scoped: dropdown uses native WHMCS variables */
.tw-ai-dropdown {
  background: var(--dropdown-bg, var(--card-bg, #ffffff));
  border-color: var(--dropdown-divider-bg, #dee0e3);
  color: var(--dropdown-link-color, #17191c);
  box-shadow: var(--dropdown-box-shadow, 0 8px 40px rgba(0,0,0,0.24));
}

.tw-dropdown-item { color: var(--dropdown-link-color, #17191c); }

/* WHMCS Lagom chip bindings */
.tw-quick-chip {
  background: var(--card-bg, #ffffff);
  border-color: var(--table-border-color, #dee0e3);
  color: var(--table-td-font-color, #17191c);
}

.tw-quick-chip:hover {
  background: var(--btn-primary-hover-bg, var(--brand-primary));
  border-color: var(--btn-primary-hover-border, var(--brand-primary));
  color: #ffffff !important;
}

/* Slider nav WHMCS bindings */
.tw-slider-nav-btn {
  background: var(--btn-light-bg, rgba(255,255,255,0.08));
  color: var(--table-td-font-color, #17191c);
  border-color: var(--table-border-color, #dee0e3);
}

.tw-slider-dot { background: var(--table-border-color, #cbd5e1); }


/* ── 27. Legacy Variable Aliases (backward compat with JS inline styles) ── */
/* JS uses --tw-brand-color, --tw-ai-subtext, --tw-ai-text, --tw-ai-card-bg  */
/* Map them to the new token names so no JS changes are needed               */

:root {
  --tw-brand-color:  var(--btn-primary-bg, #8a1538);
  --tw-brand-dark:   var(--btn-primary-hover-bg, #e44343);
  --tw-ai-text:      var(--table-td-font-color, #17191c);
  --tw-ai-subtext:   var(--price-title-color, #64748b);
  --tw-ai-card-bg:   var(--card-bg, #ffffff);
  --tw-ai-bg:        var(--card-bg, #ffffff);
  --tw-ai-border:    var(--table-border-color, #dee0e3);
  --tw-ai-header-bg: var(--card-bg, #ffffff);
  --tw-ai-messages-bg:    var(--table-bg-accent, #f4f5f7);
  --tw-ai-msg-bot-bg:     var(--card-bg, #ffffff);
  --tw-ai-msg-bot-text:   var(--table-td-font-color, #17191c);
  --tw-ai-msg-bot-border: var(--table-border-color, #dee0e3);
  --tw-ai-pill-bg:   var(--table-bg-accent, #f1f5f9);
  --tw-ai-shadow:    var(--table-container-box-shadow, 0 16px 36px -10px rgba(0,0,0,0.15));
}

body.lagom-dark-mode, body.dark-mode,
html[data-theme="dark"],
.tw-ai-window.tw-dark-mode,
.tw-dark-mode {
  --tw-brand-color:  #e44343;
  --tw-ai-text:      #f1f5f9;
  --tw-ai-subtext:   #94a3b8;
  --tw-ai-card-bg:   #2a2a2a;
  --tw-ai-bg:        var(--dropdown-collapse-bg, #1e1e1e);
  --tw-ai-border:    rgba(255,255,255,0.12);
  --tw-ai-header-bg: #1e1e1e;
  --tw-ai-messages-bg:    var(--dropdown-collapse-bg, #1a1a1a);
  --tw-ai-msg-bot-bg:     #2a2a2a;
  --tw-ai-msg-bot-text:   #f1f5f9;
  --tw-ai-msg-bot-border: rgba(255,255,255,0.1);
  --tw-ai-pill-bg:   rgba(255,255,255,0.06);
  --tw-ai-shadow:    0 16px 36px -10px rgba(0,0,0,0.4);
}


/* ── 28. Badge & Card overflow fix ─────────────────────────────────────────── */
/* Popular badge needs to overflow the card top edge */

.tw-pkg-card {
  overflow: visible;  /* allow badge to overflow the top */
}

.tw-pkg-card.popular {
  margin-top: 14px;   /* make room for the overflowing badge */
}

/* Badge horizontal position (RTL: right side, LTR: left side) */
.tw-pkg-badge {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

[dir="rtl"] .tw-pkg-badge,
.tw-ai-window.tw-rtl .tw-pkg-badge {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* pkg-btn: ensure text + SVG align properly */
.tw-pkg-btn {
  line-height: 1.3;
  white-space: nowrap;
}

.tw-pkg-btn span {
  display: inline;
  vertical-align: middle;
}

.tw-pkg-btn svg {
  vertical-align: middle;
  flex-shrink: 0;
}

/* "عرض باقي النطاقات" ghost button — keep it visible on dark bg */
a.tw-pkg-btn[style*="rgba(138"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* ── 29. Button Color Enforcement (WHMCS anchor override) ───────────────────
   WHMCS Lagom injects color on <a> tags globally.
   Force white text on all .tw-pkg-btn solid buttons.               */

.tw-pkg-btn,
.tw-pkg-btn:link,
.tw-pkg-btn:visited,
.tw-pkg-btn:hover,
.tw-pkg-btn:active,
.tw-pkg-btn:focus,
a.tw-pkg-btn,
a.tw-pkg-btn:link,
a.tw-pkg-btn:visited,
a.tw-pkg-btn:hover,
button.tw-pkg-btn {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* "عرض باقي النطاقات" ghost link — brand color text, not white */
a.tw-pkg-btn[style*="rgba(138"] {
  color: var(--tw-brand-color) !important;
}

a.tw-pkg-btn[style*="rgba(138"] span {
  color: var(--tw-brand-color) !important;
}

/* Dark mode: ghost button text stays readable */
body.lagom-dark-mode a.tw-pkg-btn[style*="rgba(138"],
body.dark-mode a.tw-pkg-btn[style*="rgba(138"],
html[data-theme="dark"] a.tw-pkg-btn[style*="rgba(138"],
.tw-dark-mode a.tw-pkg-btn[style*="rgba(138"] {
  color: #f87171 !important;
  border-color: #f87171 !important;
  background: rgba(248,113,113,0.08) !important;
}

/* Span inside any btn inherits color cleanly */
.tw-pkg-btn > span {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  display: inline !important;
}

/* domain-capsule-btn also needs white text enforcement */
.tw-domain-capsule-btn,
.tw-domain-capsule-btn:link,
.tw-domain-capsule-btn:visited,
.tw-domain-capsule-btn:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* QR modal trigger images */
.tw-inv-qr-img {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}


/* ── 30. Input Area — Seamless footer blend ─────────────────────────────────
   Make the input wrapper match the footer background exactly
   so they read as one unified light strip at the bottom.           */

.tw-ai-footer {
  background: var(--card-bg, #ffffff) !important;
  padding: 8px 10px !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.tw-ai-input-wrapper {
  /* Remove the separate input box background — inherit footer color */
  background: transparent !important;
  border: 1.5px solid var(--tw-border, #dee0e3) !important;
  box-shadow: none !important;
}

.tw-ai-input-wrapper:focus-within {
  background: transparent !important;
  border-color: var(--tw-primary, #8a1538) !important;
  box-shadow: 0 0 0 3px rgba(138, 21, 56, 0.08) !important;
}

/* Dark mode: footer and input stay in sync */
body.lagom-dark-mode .tw-ai-footer,
body.dark-mode .tw-ai-footer,
html[data-theme=dark] .tw-ai-footer,
.tw-dark-mode .tw-ai-footer {
  background: var(--dropdown-collapse-bg, #1e1e1e) !important;
}

body.lagom-dark-mode .tw-ai-input-wrapper,
body.dark-mode .tw-ai-input-wrapper,
html[data-theme=dark] .tw-ai-input-wrapper,
.tw-dark-mode .tw-ai-input-wrapper {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.lagom-dark-mode .tw-ai-input-wrapper:focus-within,
body.dark-mode .tw-ai-input-wrapper:focus-within,
html[data-theme=dark] .tw-ai-input-wrapper:focus-within,
.tw-dark-mode .tw-ai-input-wrapper:focus-within {
  border-color: var(--tw-brand-color, #e44343) !important;
  box-shadow: 0 0 0 3px rgba(228, 67, 67, 0.12) !important;
}


/* ── 31. Input element — force transparent background ───────────────────────
   WHMCS Lagom resets all input[type=text] to background: #fff.
   We must override this specifically for our chat input.            */

#twAiInput,
#twAiInput:focus,
#twAiInput:active,
.tw-ai-window #twAiInput,
.tw-ai-window .tw-ai-input {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}


/* ── 32. Package card fixes ─────────────────────────────────────────────────
   1. Remove ::before checkmark — SVG check is already in JS (TW_CHECK_SVG)
   2. Shrink the period-text (شهرياً / سنة / yr) inside .tw-pkg-price       */

.tw-pkg-features li::before {
  content: none !important; /* The green SVG check in JS handles this */
  display: none !important;
}

/* شهرياً / / yr text inside price row */
.tw-pkg-price span,
.tw-pkg-price > span {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tw-subtext, #64748b) !important;
  opacity: 0.85;
  vertical-align: baseline;
  margin-inline-start: 2px;
}


/* ── 33. Header ↔ Footer color sync + Proactive bubble fix ─────────────────

   A. Header must match footer in both light & dark mode.
   B. Proactive bubble: position anchor near launcher + fix RTL arrow.     */

/* A. Header = same background as Footer (light mode) */
.tw-ai-header {
  flex-shrink: 0 !important;
  background: var(--card-bg, #ffffff) !important;
}

/* A. Dark mode: Header matches Footer dark background */
body.lagom-dark-mode .tw-ai-header,
body.dark-mode .tw-ai-header,
html[data-theme=dark] .tw-ai-header,
.tw-dark-mode .tw-ai-header {
  flex-shrink: 0 !important;
  background: var(--dropdown-collapse-bg, #1e1e1e) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* ─── B. Proactive bubble — RTL position & arrow ────────────────────────── */

/* Default (LTR): bubble anchors near launcher on the right side */
.tw-proactive-bubble {
  right: 20px !important;
  left: auto !important;
}

/* ::before arrow — points DOWN toward the launcher (bottom-right) */
.tw-proactive-bubble::before {
  right: 30px !important;
  left: auto !important;
  bottom: -9px !important;
  top: auto !important;
}

/* RTL Arabic: bubble near launcher on the LEFT side (إن كان الزر على اليسار) */
.tw-ai-window.tw-rtl ~ .tw-proactive-bubble,
body[dir=rtl] .tw-proactive-bubble,
[dir=rtl] .tw-proactive-bubble {
  right: auto !important;
  left: 20px !important;
}

body[dir=rtl] .tw-proactive-bubble::before,
[dir=rtl] .tw-proactive-bubble::before {
  left: 30px !important;
  right: auto !important;
}

/* Dark mode proactive */
body.lagom-dark-mode .tw-proactive-bubble,
body.dark-mode .tw-proactive-bubble,
html[data-theme=dark] .tw-proactive-bubble,
.tw-dark-mode .tw-proactive-bubble {
  background: var(--dropdown-collapse-bg, #1e1e1e) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #f1f5f9 !important;
}

body.lagom-dark-mode .tw-proactive-bubble::before,
body.dark-mode .tw-proactive-bubble::before,
html[data-theme=dark] .tw-proactive-bubble::before {
  border-top-color: var(--dropdown-collapse-bg, #1e1e1e) !important;
}


/* ── 33-B. Proactive bubble — position correction ───────────────────────────
   Default widget position = bottom-LEFT (from admin settings).
   Proactive bubble must follow the container which is fixed at left: 35px.
   The bubble is inside .tw-floating-ai-container so position:fixed
   and left/right are relative to viewport, not container.
   We override the wrong 'right: 20px' from section 33 above.          */

.tw-proactive-bubble {
  left: 20px !important;
  right: auto !important;
}

.tw-proactive-bubble::before {
  left: 22px !important;
  right: auto !important;
}

/* If admin sets bottom-right, JS adds class tw-position-right to container */
.tw-floating-ai-container.tw-position-right .tw-proactive-bubble,
.tw-position-right .tw-proactive-bubble {
  right: 20px !important;
  left: auto !important;
}

.tw-floating-ai-container.tw-position-right .tw-proactive-bubble::before,
.tw-position-right .tw-proactive-bubble::before {
  right: 22px !important;
  left: auto !important;
}


/* ── 34. Store Page Compatibility Fix ───────────────────────────────────────
   WHMCS Store pages (/store/*) use a different template; the inline <style>
   from widget.php may not inject correctly. Add fallback defaults in CSS
   so the widget positions itself even if positionRule is not applied.     */

.tw-floating-ai-container {
  bottom: 25px !important;
  position: fixed !important;
  z-index: 99998 !important;
}

/* QR Modal — extra enforcement for store pages */
.tw-qr-modal {
  display: none !important;
}

.tw-qr-modal.tw-show {
  display: flex !important;
}

/* Prevent store page CSS from unsetting widget visibility */
.tw-floating-ai-container,
.tw-floating-ai-container * {
  box-sizing: border-box;
}


/* ── 35. Position classes for container (replaces inline style) ─────────────
   Works on all WHMCS page types including /store/* pages.                */

.tw-floating-ai-container.tw-pos-right {
  right: 35px !important;
  left: auto !important;
}

/* Ensure QR modal stays hidden unless explicitly shown — store page fix */
#twQrModal {
  display: none !important;
}

#twQrModal.tw-show {
  display: flex !important;
}


/* ── 36. Bot Message Background + Package Card Spacing ──────────────────────

   A. Bot bubble: give it a distinct background in both light & dark mode
      so it doesn't blend into the chat area background.

   B. Package card: add breathing room between title / price / features.  */

/* A. Bot message — light mode: subtle off-white warm tint */
.tw-ai-msg.tw-bot {
  background: #f0f2f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  color: #1a1a2e !important;
}

/* A. Dark mode bot message — darker than chat bg */
body.lagom-dark-mode .tw-ai-msg.tw-bot,
body.dark-mode .tw-ai-msg.tw-bot,
html[data-theme=dark] .tw-ai-msg.tw-bot,
.tw-dark-mode .tw-ai-msg.tw-bot {
  background: #2a2d35 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

/* A. Chat messages area background (light) */
.tw-ai-messages {
  background: #ffffff !important;
}

/* A. Chat messages area background (dark) */
body.lagom-dark-mode .tw-ai-messages,
body.dark-mode .tw-ai-messages,
html[data-theme=dark] .tw-ai-messages,
.tw-dark-mode .tw-ai-messages {
  background: #1a1d23 !important;
}

/* A. User message stays primary color — unchanged */
.tw-ai-msg.tw-user {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  border: none !important;
}

/* ─── B. Package card internal spacing ─────────────────────────────────── */

/* Inner div that wraps title + price + features */
.tw-pkg-card > div:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-pkg-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

.tw-pkg-price {
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}

.tw-pkg-features {
  margin-bottom: 10px !important;
  gap: 5px !important;
}

.tw-pkg-features li {
  gap: 6px !important;
  padding: 1px 0 !important;
  line-height: 1.4 !important;
}

/* Space between features list and order button */
.tw-pkg-card .tw-pkg-btn {
  margin-top: 8px !important;
}


/* ── 37. Bot Message — Brand-aligned colors ─────────────────────────────────
   Light: pure white card + subtle brand-red border
   Dark:  deep dark card + subtle white border
   Replaces section 36 bot colors.                                         */

.tw-ai-msg.tw-bot {
  background: #ffffff !important;
  border: 1.5px solid rgba(138, 21, 56, 0.18) !important;
  color: #1a1a2e !important;
  box-shadow: 0 2px 10px rgba(138, 21, 56, 0.06) !important;
}

/* Dark mode: deep charcoal + soft white border */
body.lagom-dark-mode .tw-ai-msg.tw-bot,
body.dark-mode .tw-ai-msg.tw-bot,
html[data-theme=dark] .tw-ai-msg.tw-bot,
.tw-dark-mode .tw-ai-msg.tw-bot {
  background: #1e2028 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Chat area bg — light: very light gray so white bot bubble pops */
.tw-ai-messages {
  background: #f5f7fa !important;
}

/* Dark: near-black so the dark bot bubble is distinguishable */
body.lagom-dark-mode .tw-ai-messages,
body.dark-mode .tw-ai-messages,
html[data-theme=dark] .tw-ai-messages,
.tw-dark-mode .tw-ai-messages {
  background: #13151a !important;
}



/* ── 38. Dynamic Language Position (Arabic = Left, English = Right) ───────── */
.tw-floating-ai-container {
  position: fixed !important;
  bottom: 25px !important;
  z-index: 99998 !important;
}

/* Left position (Arabic / RTL) */
.tw-floating-ai-container.tw-pos-left,
.tw-ai-window.tw-pos-left {
  left: 35px !important;
  right: auto !important;
}

.tw-floating-ai-container.tw-pos-left .tw-proactive-bubble,
.tw-pos-left .tw-proactive-bubble {
  left: 20px !important;
  right: auto !important;
}

.tw-floating-ai-container.tw-pos-left .tw-proactive-bubble::before,
.tw-pos-left .tw-proactive-bubble::before {
  left: 22px !important;
  right: auto !important;
}

/* Right position (English / LTR) */
.tw-floating-ai-container.tw-pos-right,
.tw-ai-window.tw-pos-right {
  right: 35px !important;
  left: auto !important;
}

.tw-floating-ai-container.tw-pos-right .tw-proactive-bubble,
.tw-pos-right .tw-proactive-bubble {
  right: 20px !important;
  left: auto !important;
}

.tw-floating-ai-container.tw-pos-right .tw-proactive-bubble::before,
.tw-pos-right .tw-proactive-bubble::before {
  right: 22px !important;
  left: auto !important;
}

/* ── 39. Proactive Bubble Header & Close Button Alignment (LTR/RTL) ────── */
.tw-proactive-bubble {
  box-sizing: border-box !important;
}

/* LTR (English) Default */
.tw-proactive-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  padding-right: 22px !important;
  padding-left: 0 !important;
}

.tw-proactive-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 2 !important;
}

.tw-proactive-text {
  text-align: left;
}

/* RTL (Arabic / tw-pos-left) */
body[dir="rtl"] .tw-proactive-header,
[dir="rtl"] .tw-proactive-header,
.tw-rtl .tw-proactive-header,
.tw-pos-left .tw-proactive-header {
  padding-left: 22px !important;
  padding-right: 0 !important;
}

body[dir="rtl"] .tw-proactive-close,
[dir="rtl"] .tw-proactive-close,
.tw-rtl .tw-proactive-close,
.tw-pos-left .tw-proactive-close {
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
}

body[dir="rtl"] .tw-proactive-text,
[dir="rtl"] .tw-proactive-text,
.tw-rtl .tw-proactive-text,
.tw-pos-left .tw-proactive-text {
  text-align: right;
}

/* ── 40. Proactive Bubble — Dark Mode (Lagom html.lagom-dark-mode) ─────── */
html.lagom-dark-mode .tw-proactive-bubble,
html[data-theme="dark"] .tw-proactive-bubble,
body.lagom-dark-mode .tw-proactive-bubble,
body.dark-mode .tw-proactive-bubble,
.tw-dark-mode .tw-proactive-bubble {
  background: #1e2028 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 14px 35px -6px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25) !important;
}

html.lagom-dark-mode .tw-proactive-bubble::before,
html[data-theme="dark"] .tw-proactive-bubble::before,
body.lagom-dark-mode .tw-proactive-bubble::before,
body.dark-mode .tw-proactive-bubble::before,
.tw-dark-mode .tw-proactive-bubble::before {
  border-top-color: #1e2028 !important;
}

html.lagom-dark-mode .tw-proactive-text,
html[data-theme="dark"] .tw-proactive-text,
body.lagom-dark-mode .tw-proactive-text,
body.dark-mode .tw-proactive-text,
.tw-dark-mode .tw-proactive-text {
  color: #cbd5e1 !important;
}

html.lagom-dark-mode .tw-proactive-close,
html[data-theme="dark"] .tw-proactive-close,
body.lagom-dark-mode .tw-proactive-close,
body.dark-mode .tw-proactive-close,
.tw-dark-mode .tw-proactive-close {
  background: rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
}


/* ── 41. Dropdown Menu — LTR/RTL Position & Width Fix ──────────────────────
   Default (LTR / English): dropdown opens from the RIGHT side of the button
   RTL (Arabic):            dropdown opens from the LEFT side                */

/* LTR default — right-align to header actions */
.tw-ai-dropdown {
  right: 0 !important;
  left: auto !important;
  min-width: 180px !important;
  white-space: nowrap !important;
}

/* RTL override */
.tw-ai-window.tw-rtl .tw-ai-dropdown,
[dir=rtl] .tw-ai-dropdown,
.tw-pos-left .tw-ai-dropdown {
  left: 0 !important;
  right: auto !important;
}

/* Dropdown item text — no truncation */
.tw-dropdown-item {
  white-space: nowrap !important;
}


/* ── 42. Feedback Bar — Dark Mode ───────────────────────────────────────── */
html.lagom-dark-mode .tw-feedback-bar,
html[data-theme='dark'] .tw-feedback-bar,
body.lagom-dark-mode .tw-feedback-bar,
body.dark-mode .tw-feedback-bar,
.tw-dark-mode .tw-feedback-bar {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html.lagom-dark-mode .tw-feedback-label,
html[data-theme='dark'] .tw-feedback-label,
body.lagom-dark-mode .tw-feedback-label,
body.dark-mode .tw-feedback-label,
.tw-dark-mode .tw-feedback-label {
  color: #94a3b8 !important;
}

html.lagom-dark-mode .tw-feedback-btn,
html[data-theme='dark'] .tw-feedback-btn,
body.lagom-dark-mode .tw-feedback-btn,
body.dark-mode .tw-feedback-btn,
.tw-dark-mode .tw-feedback-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #94a3b8 !important;
}

html.lagom-dark-mode .tw-feedback-btn.tw-btn-up:hover,
body.lagom-dark-mode .tw-feedback-btn.tw-btn-up:hover,
body.dark-mode .tw-feedback-btn.tw-btn-up:hover,
.tw-dark-mode .tw-feedback-btn.tw-btn-up:hover {
  background: rgba(34,197,94,0.15) !important;
  border-color: #22c55e !important;
  color: #4ade80 !important;
}

html.lagom-dark-mode .tw-feedback-btn.tw-btn-down:hover,
body.lagom-dark-mode .tw-feedback-btn.tw-btn-down:hover,
body.dark-mode .tw-feedback-btn.tw-btn-down:hover,
.tw-dark-mode .tw-feedback-btn.tw-btn-down:hover {
  background: rgba(244,63,94,0.15) !important;
  border-color: #f43f5e !important;
  color: #fb7185 !important;
}

/* ── 43. AI Domain Brainstormer Spinner ───────────────────────────────────── */
@keyframes twSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── 44. Interactive Hosting Advisor (Native Bot Bubble - Spacious & Larger Fonts) ──── */

.tw-quiz-box {
  width: 265px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  padding: 4px 0 2px 0 !important;
}

.twq-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.twq-header-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--brand-primary, #8a1438) !important;
  letter-spacing: -0.1px !important;
}

.twq-step-badge {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--tw-subtext, #64748b) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 2px 8px !important;
  border-radius: 9px !important;
}

.twq-progress-bar {
  width: 100% !important;
  height: 4px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.twq-progress-fill {
  height: 100% !important;
  background: var(--brand-primary, #8a1438) !important;
  border-radius: 4px !important;
  transition: width 0.35s ease !important;
}

.twq-q {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tw-text, #17191c) !important;
  margin-bottom: 11px !important;
  line-height: 1.45 !important;
}

.twq-q-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 11px !important;
}

.twq-back-btn {
  background: rgba(100, 116, 139, 0.08) !important;
  border: 1px solid rgba(100, 116, 139, 0.18) !important;
  color: var(--tw-subtext, #64748b) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}

.twq-back-btn:hover {
  background: rgba(100, 116, 139, 0.14) !important;
}

.twq-tiles {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.twq-tile {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

body.lagom-dark-mode .twq-tile,
body.dark-mode .twq-tile,
html[data-theme="dark"] .twq-tile,
.tw-dark-mode .twq-tile {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.twq-tile:hover {
  border-color: var(--brand-primary, #8a1438) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.lagom-dark-mode .twq-tile:hover,
body.dark-mode .twq-tile:hover,
html[data-theme="dark"] .twq-tile:hover,
.tw-dark-mode .twq-tile:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.twq-tile-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

.twq-tile-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.twq-tile-label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--tw-text, #17191c) !important;
  line-height: 1.35 !important;
}

.twq-tile-sub {
  font-size: 10px !important;
  color: var(--tw-subtext, #64748b) !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

.twq-tile-arrow {
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
}

.twq-loading {
  text-align: center !important;
  padding: 18px 0 !important;
}

.twq-spinner {
  width: 26px !important;
  height: 26px !important;
  border: 2.5px solid rgba(138, 20, 56, 0.15) !important;
  border-top-color: var(--brand-primary, #8a1438) !important;
  border-radius: 50% !important;
  animation: twSpin 0.7s linear infinite !important;
  margin: 0 auto 9px auto !important;
}

.twq-loading-text {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tw-subtext, #64748b) !important;
}

/* ── Quiz Result Card Redesign ─────────────────────────────────────────── */
.twq-result {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.twq-result-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2px !important;
}

.twq-result-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.2px !important;
}

.twq-restart-btn {
  background: rgba(100, 116, 139, 0.08) !important;
  border: 1px solid rgba(100, 116, 139, 0.18) !important;
  color: var(--tw-subtext, #64748b) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}

.twq-restart-btn:hover {
  background: rgba(100, 116, 139, 0.14) !important;
}

.twq-pkg-card {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.03) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  border-radius: 14px !important;
  padding: 14px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.twq-pkg-type {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #059669 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  opacity: 0.9 !important;
}

.twq-pkg-name {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--tw-text, #1e293b) !important;
  margin-bottom: 6px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
}

.twq-pkg-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.twq-pkg-price-num {
  font-size: 25px !important;
  font-weight: 900 !important;
  color: #059669 !important;
  line-height: 1 !important;
}

.twq-pkg-price-sym {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #059669 !important;
  line-height: 1 !important;
}

.twq-pkg-price-period {
  font-size: 11px !important;
  color: var(--tw-subtext, #64748b) !important;
  font-weight: 600 !important;
  margin-right: 2px !important;
}

.twq-pkg-feats {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7.5px !important;
}

.twq-pkg-feats li {
  font-size: 12px !important;
  color: var(--tw-text, #334155) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

.twq-feat-check {
  color: #10b981 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.twq-order-btn {
  width: 100% !important;
  background: var(--brand-primary, #8a1438) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(138, 20, 56, 0.28) !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.2px !important;
}

.twq-order-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(138, 20, 56, 0.38) !important;
  opacity: 0.95 !important;
}