/* ====== CopticAI Theme: Gold / Brown / Black ====== */
:root{
  /* لوحة ألوان */
  --ca-bg:#0b0a08;        /* خلفية الصفحة (أسود بدفء بني) */
  --ca-bg-2:#14100d;      /* بطاقات */
  --ca-bg-3:#1b140f;      /* هوفر/تفعيل */
  --ca-border:#3a2b1a;    /* حدود بنية ناعمة */
  --ca-fg:#f8f5e6;        /* نص أساسي عاجي */
  --ca-fg-dim:#e6d9b8;    /* نص ثانوي (ذهبي باهت) */
  --hint:#f4e6b6;         /* تلميحات أوضح */

  /* ذهبيات/بنّي للازرار والهايلايت */
  --gold:#d4af37;
  --gold-press:#b88a2d;
  --brown:#5a3b1a;

  /* تحكم عام */
  --accent: var(--gold);
  --accent-press: var(--gold-press);

  --sidebar-width: 300px;      /* عرض القائمة الجانبية */
  --bottom-bar-height: 64px;   /* ارتفاع الشريط السفلي إن وُجد */
  --radius: 12px;
  --shadow: 0 1px 10px #0006;
}

  /* ====== Base ====== */
  html { height: 100%; }
  body {
    min-height: 100%;
    margin: 0;
    background-color: var(--ca-bg);
    color: var(--ca-fg);
    direction: rtl;
    font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  /* ====== Donate Page Specific ====== */
  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 20px;
  }

  .content h1 {
    font-size: 2.6em;
    margin: 0;
    font-weight: bold;
    color: var(--gold);
    text-shadow: 1px 1px 6px #000;
  }

  .content p.quote {
    font-size: 1.4em;
    margin-top: 10px;
    font-style: italic;
    color: var(--hint);
  }

  .side-text {
    margin-top: 25px;
    max-width: 520px;
    background: rgba(27, 20, 15, 0.9);
    color: var(--ca-fg);
    padding: 22px;
    border-radius: 14px;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    box-shadow: var(--shadow);
  }
  @keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .side-text .buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
  }

  .side-text .buttons button {
    padding: 11px 16px;
    font-size: 1em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--accent);
    color: #21190c;
    font-weight: 700;
    transition: 0.3s;
  }
  .side-text .buttons button:hover {
    transform: translateY(-3px);
    background: linear-gradient(45deg, var(--gold), var(--gold-press));
  }

  /* Bottom Nav */
  #bottomNav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    height: 55px;
    background: var(--ca-bg-2);
    border-top: 1px solid var(--ca-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  #bottomNav .nav-link {
    color: var(--ca-fg);
    text-decoration: none;
    text-align: center;
    font-size: 0.9em;
  }
  #bottomNav .nav-link i {
    display: block;
    font-size: 1.4em;
    margin-bottom: 4px;
  }
  #bottomNav .nav-link:hover {
    color: var(--gold);
  }

  @media (max-width: 768px) {
    .side-text { width: 92%; }
    .buttons { flex-direction: column; gap: 8px; }
  }

/* حشو سفلي عند وجود شريط سفلي ثابت */
.wbb{ padding-bottom: calc(var(--bottom-bar-height) + 14px); }

/* تحذير التطوير */
.dev-warning{
  background: linear-gradient(90deg, #e6c266, #caa24a);
  color:#2b1e0e; font-weight:700;
  padding: 12px 10px; border-radius: 0 0 var(--radius) var(--radius);
  text-align: center; font-size:1.05em; box-shadow:0 1px 8px #0004; margin-bottom:10px; letter-spacing:.01em;
}

/* ====== Containers ====== */
.ca-container{
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding: 14px 16px;
}
@media (max-width: 600px){
  .ca-container{ max-width: 98vw; padding: 3vw; }
}

/* ====== Cards & Forms ====== */
.ca-card{
  background: var(--ca-bg-2);
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--ca-fg);
}
.ca-card--soft{
  background: linear-gradient(180deg, var(--ca-bg-2), var(--ca-bg));
  border: 1px solid var(--ca-border);
}

.ca-form .form-control,
.ca-form .form-select,
.ca-form input[type="text"],
.ca-form input[type="email"],
.ca-form textarea{
  background: #0f1620 !important;
  color: var(--ca-fg) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: 12px !important;
}
.ca-form .form-control:focus,
.ca-form .form-select:focus,
.ca-form input[type="text"]:focus,
.ca-form input[type="email"]:focus,
.ca-form textarea:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,175,55,.25);
  border-color: var(--gold) !important;
}

/* أزرار */
.ca-form .btn-success{
  background: var(--accent);
  border-color: var(--accent);
  color:#21190c;
  font-weight:700;
}
.ca-form .btn-success:active{ background: var(--accent-press); border-color: var(--accent-press); }
.ca-form .btn-outline-secondary{
  color: var(--ca-fg); border-color: var(--ca-border);
}
.ca-form .btn-outline-secondary:hover{
  background: var(--ca-bg-3); border-color: var(--ca-border);
}

/* نصوص مساعدة أوضح */
.hint{ color: var(--hint) !important; }
.hint-muted{ color: var(--ca-fg-dim) !important; }

/* ====== Chat UI (إن وُجدت في الصفحة) ====== */
.chat-box{
  background: #181310; border:1px solid var(--ca-border);
  border-radius: var(--radius);
  height: 58vh; min-height: 240px; max-height: 62vh;
  overflow-y: auto; display:flex; flex-direction:column;
  box-shadow: var(--shadow);
  padding: 10px;
}
.message{
  margin-bottom: 15px; line-height:1.7; white-space:normal; word-break: break-word;
  max-width: 90%; font-size: 1em; box-sizing: border-box;
}
.user{
  background: var(--gold); color: #2b1e0e; border-top-left-radius:0;
  border-radius: 9px; margin-left:auto; align-self:flex-end; padding: 9px 12px; text-align:right;
}
.ai{
  display:flex; align-items:flex-start; margin-right:auto; align-self:flex-start;
}
.ai-icon{
  width:30px; height:30px; margin-left:8px; border-radius:50%; object-fit:cover;
  flex-shrink:0; margin-top:5px; box-shadow:0 1px 6px #0007; border:1px solid var(--ca-border);
}
.ai .message-content{
  background: #231a12; color:var(--ca-fg); border-top-right-radius:0; border-radius:9px;
  padding: 9px 12px; box-sizing:border-box; flex-grow:1; text-align:right;
  border:1px solid var(--ca-border);
}

.chat-form{ display:flex; margin-top:13px; gap:8px; }
.chat-input{
  flex:1; padding:12px 8px; border-radius:6px; border:1px solid var(--ca-border); font-size:1em;
  background:#0f1620; color:#fff; outline:none;
}
.chat-send{
  padding:11px 16px; background:var(--accent); border:1px solid var(--accent); border-radius:6px; color:#21190c;
  font-weight:700; font-size:1em; cursor:pointer; transition: background-color .2s;
}
.chat-send:active{ background:var(--accent-press); border-color:var(--accent-press); }

.reset-link{ margin-top:8px; text-align:center; }
.reset-link a{ color:var(--ca-fg-dim); text-decoration:none; font-size:15px; }
.reset-link a:hover{ text-decoration:underline; }

/* Responsiveness */
@media (max-width: 600px){
  .chat-box{ height:54vh; min-height:180px; max-height:54vh; font-size:1em; padding:7px; }
  .user{ padding:8px 6px; }
  .ai .message-content{ padding:8px 6px; }
  .chat-form{ gap:6px; }
  .chat-input{ font-size:1em; padding:11px 6px; }
  .chat-send{ font-size:1em; padding:9px 13px; }
}
/*====== slidecard in privacy ====== */ 
.policy-card {
  background: linear-gradient(145deg, var(--ca-bg-2), var(--ca-bg));
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px #0005;
  transition: transform .2s, box-shadow .2s;
}

.policy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px #0007;
}

.policy-card h4 {
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.policy-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.policy-card p,
.policy-card li {
  color: var(--ca-fg);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ====== Sidebar helpers (لو احتجت) ====== */
body.sidebar-open{}

/* Legacy selectors (إن كانت مستخدمة في قوالب أخرى) */
#sidebarMenu{ right: -260px; transition: right .25s cubic-bezier(.7,1.8,.2,.9); }
#sidebarMenu.show{ right:0; }

/* --- Policy links (footer chunk) --- */
.policy-links{
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--ca-border);
}
.policy-links ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.75rem; padding:0; margin:0; }
.policy-links a{ color: var(--hint); text-decoration: none; }
.policy-links a:hover{ color: var(--gold); text-decoration: underline; }