/* ===================================================
   إضافات الميزات (Auth, Admin, Chatbot)
   =================================================== */

/* ========================
   1. مودال المصادقة (Auth Modal)
   =================================================== */
.auth-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 14, 29, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-modal-content {
  background: var(--surface-card);
  width: 100%; max-width: 440px;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(201,168,76,0.3);
  overflow: hidden;
  position: relative;
  animation: bounceIn 0.4s ease both;
}
.auth-close {
  position: absolute; top: 15px; left: 15px;
  background: rgba(26,46,90,0.08); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; color: var(--text-secondary);
  font-size: 1.2rem; transition: background 0.3s;
}
.auth-close:hover { background: rgba(239,68,68,0.1); color: var(--danger); }

.auth-header { padding: 30px 30px 20px; text-align: center; }
.auth-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--primary); margin-bottom: 5px; }
.auth-sub { font-size: 0.85rem; color: var(--text-muted); }

.auth-tabs {
  display: flex; border-bottom: 2px solid rgba(26,46,90,0.08);
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1; text-align: center; padding: 12px;
  font-family: var(--font-heading); font-weight: 700;
  cursor: pointer; color: var(--text-muted);
  border-bottom: 3px solid transparent; transition: all 0.3s;
}
.auth-tab.active { color: var(--primary); border-bottom-color: var(--accent); background: rgba(201,168,76,0.05); }

.auth-body { padding: 0 30px 30px; }
.auth-form-area { display: none; }

/* ========================
   2. الشات بوت (Chatbot Widget)
   =================================================== */
.chatbot-widget {
  position: fixed; bottom: 30px; right: 30px;
  z-index: 9999;
}
.chatbot-toggle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; cursor: pointer;
  box-shadow: var(--shadow-lg); transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.chatbot-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-acc); }

.chatbot-window {
  position: absolute; bottom: 75px; right: 0;
  width: 350px; background: var(--surface-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2xl); border: 1px solid rgba(26,46,90,0.1);
  overflow: hidden; display: flex; flex-direction: column;
  transform-origin: bottom right; transition: all 0.3s;
}
.chatbot-window.hidden { transform: scale(0); opacity: 0; pointer-events: none; }

.chatbot-header {
  background: var(--grad-primary); padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  color: white; font-family: var(--font-heading); font-weight: 700;
}
.chatbot-close { background: none; border: none; color: white; cursor: pointer; font-size: 1.2rem; }

.chatbot-messages {
  height: 380px; padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 15px;
  background: var(--surface);
}
.chat-msg { display: flex; max-width: 85%; }
.chat-ai { align-self: flex-start; }
.chat-user { align-self: flex-end; }
.chat-bubble {
  padding: 10px 14px; border-radius: var(--r-md);
  font-size: 0.9rem; line-height: 1.5;
}
.chat-ai .chat-bubble { background: white; color: var(--text-primary); border: 1px solid rgba(26,46,90,0.08); border-top-right-radius: 2px; }
.chat-user .chat-bubble { background: var(--primary-light); color: white; border-top-left-radius: 2px; }

.chatbot-input-area {
  display: flex; padding: 12px; background: white; border-top: 1px solid rgba(26,46,90,0.08);
}
.chatbot-input-area input {
  flex: 1; border: 1px solid rgba(26,46,90,0.1);
  border-radius: var(--r-full); padding: 8px 15px; outline: none;
  font-family: var(--font-body);
}
.chatbot-input-area input:focus { border-color: var(--accent); }
.chatbot-input-area button {
  background: var(--accent); color: var(--primary-dark);
  border: none; border-radius: var(--r-full); padding: 0 15px;
  margin-right: 8px; font-family: var(--font-heading); font-weight: 700; cursor: pointer;
}

@media (max-width: 500px) {
  .chatbot-widget { bottom: 15px; right: 15px; }
  .chatbot-window { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; bottom: 0; right: 0; }
  .chatbot-messages { flex: 1; height: auto; }
}

/* ========================
   3. لوحة تحكم الأدمن
   =================================================== */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.admin-table th { background: rgba(26,46,90,0.04); padding: 12px 15px; text-align: right; font-family: var(--font-heading); }
.admin-table td { padding: 12px 15px; border-bottom: 1px solid rgba(26,46,90,0.05); }