/* =========================================================
   Ask Balqees - website.css (CLEAN)
   - نفس التصميم الحالي
   - بدون تكرار
   - مرتب (Tokens -> Base -> Layout -> Components -> Pages)
========================================================= */

/* =========================
   THEME TOKENS
========================= */
:root{
  --bg:#f5f2f7;
  --card:#ffffff;
  --ink:#2c2a33;
  --muted:#8b8696;
  --brand:#4a2a63;
  --brand-2:#5a3378;
  --accent:#f2c84b;
  --stroke:#efe8f3;
  --shadow:0 10px 22px rgba(20,10,30,.08);
  --radius:18px;
  --radius-lg:18px;
  --container:430px;


.ub{display:flex;align-items:center;gap:10px;min-width:0}
.ub__ava{width:36px;height:36px;border-radius:999px;object-fit:cover;background:#eee;border:1px solid rgba(0,0,0,.08)}
.ub__txt{min-width:0}
.ub__name{font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.ub__title{margin-top:2px;font-size:12px;font-weight:900;color:#6b5a78;line-height:1.1}
/* ===== User Title (centralized) ===== */
.user__title{
  font-size:12px;
  font-weight:900;
  margin-top:2px;
}

/* === FIX like / dislike buttons (remove box & bg) === */
.q-card__meta .meta-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* لو في متصفح حاط outline */
.q-card__meta .meta-btn:focus,
.q-card__meta .meta-btn:active{
  outline: none !important;
  background: transparent !important;
}
/* === Fix user row (avatar on the right in RTL) === */
.user.user--right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction: row-reverse; /* ✅ يحل مشكلة انعكاس الاسم والصورة */
  min-width:0;
}
.user__avatar--img img{ display:block; }

/* === Profile click effect === */
.user[data-profile-url]:not([data-profile-url=""]){
  cursor:pointer;
  border-radius:14px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.user[data-profile-url]:not([data-profile-url=""]):hover{
  background: rgba(75,42,99,.06);
}
.user[data-profile-url]:not([data-profile-url=""]).is-profile-click{
  background: rgba(75,42,99,.14);
  transform: scale(1.035);
  box-shadow: 0 10px 18px rgba(75,42,99,.12);
}
.user[data-profile-url]:not([data-profile-url=""]).is-profile-click .user__avatar--img img{
  transform: scale(1.12);
}
.user__avatar--img img{
  transition: transform .18s ease;
}

/* === Like/Dislike pop === */
.meta-btn.js-like:active,
.meta-btn.js-dislike:active{ transform: scale(1.18); }
.meta-btn.js-like,
.meta-btn.js-dislike{ transition: transform .12s ease, filter .12s ease; }
.meta-btn.js-like:active{ filter: brightness(1.15); }
.meta-btn.js-dislike:active{ filter: brightness(1.05); }

/* Levels */
.user__title[data-level="new"]{
  color:#8b8b8b;
}

.user__title[data-level="active"]{
  color:#6a4b8a;
}

.user__title[data-level="silver"]{
  color:#9aa0a6;
}

.user__title[data-level="gold"]{
  color:#d4af37;
}

  /* ✅ مهم للـ composer فوق الفوتر */
  --footer-h:78px;
}

.qfilter{
  margin: 12px auto 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.qfilter-form{ display:block; }
.qfilter-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:10px;
}

.qfilter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 140px;
}

.qfilter-grow{ flex: 1 1 240px; }

.qfilter-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.68);
}

.qfilter-input,
.qfilter-select{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  outline: none;
  background: #fff;
}

.qfilter-input:focus,
.qfilter-select:focus{
  border-color: rgba(123,57,251,.55);
  box-shadow: 0 0 0 4px rgba(123,57,251,.12);
}

.qfilter-date{ min-width: 160px; }

.qfilter-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.qfilter-btn{
  height: 46px;
  border-radius: 16px;
  padding: 0 16px;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
}

.qfilter-apply{
  background: #4b2b63;
  color: #fff;
  border-color: rgba(0,0,0,.0);
  flex: 1 1 220px;
}

.qfilter-reset{
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.75);
}

@media (max-width: 520px){
  .qfilter-row{ gap:8px; }
  .qfilter-field{ min-width: 46%; }
  .qfilter-grow{ flex: 1 1 100%; }
  .qfilter-date{ min-width: 46%; }
}

/* =========================
   Questions Filter (Mobile First)
========================= */
.q-filter{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:12px;
  margin:12px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.q-filter .qf-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.q-filter .qf-row .full{
  grid-column: 1 / -1;
}

.q-filter label{
  display:block;
  font-weight:800;
  margin:0 0 6px;
  color:#3a2a55;
  font-size:14px;
}

.q-filter select,
.q-filter input{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  padding:0 12px;
  background:#f7f7fb;
  outline:none;
}

.q-filter .qf-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.q-filter .btn-filter{
  flex:1;
  height:44px;
  border-radius:14px;
  border:0;
  background:#4b2a6b;
  color:#fff;
  font-weight:900;
}

.q-filter .btn-reset{
  width:110px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  font-weight:900;
}

@media (min-width: 900px){
  .q-filter .qf-row{
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
  .q-filter .qf-row .full{ grid-column:auto; }
}

.myq-view-box {
  background:#f7f7fb;
  border-radius:14px;
  padding:14px;
  line-height:1.9;
  font-size:15px;
}

.myq-actions {
  display:flex;
  gap:10px;
  margin-top:12px;
}

.myq-actions button {
  height:38px;
  padding:0 16px;
  border-radius:10px;
  font-weight:700;
}

.myq-delete {
  border:1px solid #f1bcbc;
  color:#8a1f1f;
  background:#fff;
}


/* =========================
   ASK PAGE — APP LOOK
========================= */
.ask-page{
  padding-top:14px;
  padding-bottom:18px;
}

.ask-card{
  max-width: 420px;
  margin: 10px auto 0;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(20,10,30,.10);
  padding: 18px 16px;
  backdrop-filter: blur(6px);
}

.ask-head{ text-align:center; margin-bottom:14px; }
.ask-title{
  margin:0;
  font-size:26px;
  
  color:var(--brand);
  letter-spacing:.2px;
}
.ask-sub{
  margin-top:8px;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  line-height:1.6;
}

.ask-form{ display:grid; gap:12px; }

.ask-form .lbl{
  
  color:#2c2a33;
  margin:0;
}

.ask-form .inp{
  height:52px;
  border-radius:16px;
  border:1px solid rgba(74,42,99,.12);
  background:#fbf7ff;
  padding:0 14px;
  
  transition: .15s ease;
}
.ask-form .inp:focus{
  outline:none;
  border-color: rgba(74,42,99,.35);
  box-shadow: 0 0 0 4px rgba(74,42,99,.08);
}

.ask-form .inp-textarea{
  height:160px;
  padding:12px 14px;
  line-height:1.9;
  resize:none;
}

.ask-form .inp-select{
  appearance:none;
  -webkit-appearance:none;
  padding-inline:14px 44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%234a2a63' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  background-size:20px;
}

.anon{
  display:flex;
  align-items:center;
  gap:10px;
  
  color:#3b2a4a;
  background:#f7f3fb;
  border:1px solid rgba(74,42,99,.10);
  padding:10px 12px;
  border-radius:16px;
}

.ask-form .btn-auth{
  height:54px;
  border-radius:18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 28px rgba(74,42,99,.18);
  font-size:16px;
}
.ask-form .btn-auth:active{ transform: translateY(1px); }

.ask-back{
  display:block;
  text-align:center;
  margin-top:8px;
  
  color:var(--brand);
  text-decoration:none;
  opacity:.9;
}
.ask-back:hover{ opacity:1; text-decoration:underline; }

/* خلفية لطيفة للصفحة (بدون مبالغة) */
body{
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(74,42,99,.08), transparent 60%),
    var(--bg);
}
/* =========================
   Ask Question Page
========================= */
.ask-page{padding-top:12px;padding-bottom:18px}
.ask-card{background:#fff;border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.ask-h{margin:0;font-size:18px;color:var(--brand);font-weight:900}
.ask-sub{margin-top:6px;color:var(--muted);font-weight:800;font-size:13px}

.ask-lbl{margin:12px 0 6px;display:block}
.ask-inp{width:100%;min-height:46px;border-radius:14px;border:1px solid var(--stroke);padding:0 12px;font-weight:800;font-family:inherit;outline:none;background:#fff}
.ask-textarea{height:140px;padding-top:10px}

.ask-check{display:flex;gap:10px;align-items:center;margin-top:10px;font-weight:900}
.ask-btn{margin-top:12px;width:100%;height:48px;border:0;border-radius:16px;background:var(--brand);color:#fff;cursor:pointer}

.ask-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ask-ghost{border:1px solid var(--stroke);background:#fff;border-radius:14px;padding:10px 14px;cursor:pointer;text-decoration:none;color:#2c2a33}

.ask-ok{background:#f3fff7;border:1px solid #c9f2d8;color:#1c6b3a;border-radius:14px;padding:10px 12px;margin-top:12px}
.ask-err{background:#fff4f4;border:1px solid #ffd0d0;color:#8a1f1f;border-radius:14px;padding:10px 12px;margin-top:12px}
.ask-mt12{margin-top:12px}
.ask-err-list{margin:6px 0 0;padding:0 18px}

/* =========================
   FONT: TAJAWAL (fallback)
   (موجود عندك Google Fonts بالرأس، هذا احتياط فقط)
========================= */
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:400;
  src:url('https://fonts.gstatic.com/s/tajawal/v11/Iura6YBj_oCad4k1nzSBC45I.woff2') format('woff2');
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:700;
  src:url('https://fonts.gstatic.com/s/tajawal/v11/Iura6YBj_oCad4k1nzSBC45I.woff2') format('woff2');
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box;font-family:inherit}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:'Tajawal', system-ui,-apple-system,"Segoe UI",Tahoma,Arial !important;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:0 !important;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* =========================
   CONTAINER
========================= */
.container{
  max-width:var(--container)!important;
  margin:0 auto!important;
  padding:5px 5px 0;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position:sticky;top:0;z-index:10;
  background:#fff;
  border-bottom:1px solid var(--stroke);
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;
}
.icon-btn{
  width:52px;height:52px;border:0;border-radius:16px;
  background:transparent;display:grid;place-items:center;cursor:pointer;
}
.icon-btn svg{width:28px;height:28px;fill:var(--brand)}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{height:60px}
.brand__text{text-align:center;line-height:1.05}
.brand__ar{font-weight:800;font-size:13px;color:var(--brand)}
.brand__en{font-weight:700;font-size:12px;color:var(--muted)}

/* =========================
   SIDE MENU
========================= */
.side-menu{position:fixed;inset:0;pointer-events:none;z-index:9999}
.side-menu__panel{
  position:absolute;top:0;right:0;height:100%;width:min(320px,85vw);
  background:#fff;border-left:1px solid var(--stroke);
  transform:translateX(110%);transition:.25s ease;
  padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.18);
  border-top-left-radius:18px;border-bottom-left-radius:18px;
}
.side-menu__backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:.25s ease;z-index:9998
}
.side-menu.is-open{pointer-events:auto}
.side-menu.is-open .side-menu__panel{transform:translateX(0)}
.side-menu__backdrop.is-open{opacity:1;pointer-events:auto}
.side-menu__close{
  width:42px;height:42px;border:0;border-radius:12px;
  background:#f3ecf7;font-size:24px;cursor:pointer
}
.side-menu__link{
  display:block;padding:12px 10px;margin-top:10px;
  border-radius:14px;background:#fbf7ff;font-weight:800;color:var(--brand)
}

/* =========================
   SLIDER
========================= */
.slider{ margin-top:10px; }
.slider__stage{
  position:relative;
  height:190px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.04);
}
.slider__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(100%);
  animation: slideFade var(--dur) infinite;
  will-change:transform,opacity;
  display:block;
}
.slider__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slider__slide--single{
  position:relative !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
@keyframes slideFade{
  0%{opacity:0;transform:translateX(100%)}
  10%{opacity:1;transform:translateX(0)}
  80%{opacity:1;transform:translateX(0)}
  90%{opacity:0;transform:translateX(-100%)}
  100%{opacity:0;transform:translateX(-100%)}
}

/* =========================
   SECTIONS
========================= */
.section{ margin-top:10px; }
.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.section__head h2{
  margin:6px 0;
  font-size:17px;
  color:var(--brand);
}
.link{font-size:13px;color:var(--muted)}

/* =========================
   FEATURED GRID
========================= */
.cards-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:380px){
  .cards-row{grid-template-columns:1fr}
}

/* =========================
   USER + AVATAR (APP-LIKE)
========================= */
.user--right{display:flex;align-items:center;gap:10px;flex-direction:row-reverse}

.user__name{
  font-weight:900 !important;
  font-size:15px !important;
  color:var(--brand) !important;
}

.user__avatar,
.user-avatar{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 44px !important;
}
.user__avatar img,
.user-avatar img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:50% 40% !important; /* يطلع الوجه */
  border-radius:10px !important;
}
@media (max-width:600px){
  .user__avatar img,
  .user-avatar img{
    object-position:50% 45% !important;
  }
}

/* =========================
   BADGE
========================= */
.badge{
  background:#f2e9f7;
  color:#4a2a63;
  font-size:13px;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(74,42,99,.10);
}
.badge--soft{background:#f1eaf7}

/* =========================
   QUESTION CARD (Home)
========================= */
.q-card-link{display:block;text-decoration:none;color:inherit}

.q-card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  box-shadow:0 4px 12px rgba(20,10,30,.06);
  padding:12px;
}
.q-card--featured{
  background:#fbf5e8;
  border:2px solid rgba(242,200,75,.75);
}
.q-card--wide{margin-bottom:10px}

/* اذا فيه عناوين قديمة داخل الكرت */
.q-card h3,
.q-card h4{display:none !important;}

.q-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.q-card__text{
  margin:6px 0;
  font-size:16px;
  line-height:1.9;
  color:#2f2a3b;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.meta-btn {

  font-size: 15px;
}

.q-card__meta{
  direction:rtl;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  color:var(--muted);
  border-top:1px solid rgba(0,0,0,.06);
  padding-top:8px;
  margin-top:8px;
}
.q-card__meta .meta{display:flex;align-items:center;gap:6px}
.q-card__meta svg{width:25px;height:25px;fill:var(--muted)}
/* =========================
   BOTTOM NAV
========================= */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  height: var(--footer-h);
  background: var(--brand); /* خلفية الناف بار */
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px 14px;
}

/* 1. الأيقونات العادية (Home, Categories, Profile) */
.bottom-nav__item {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  position: relative;
}

.bottom-nav__item img {
  width: 22px; height: 22px; /* حجم صغير للأيقونات العادية */
  object-fit: contain;
}

/* 2. أيقونة الزائد (Plus) المتميزة */
.bottom-nav__item--plus {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
}

.bottom-nav__item--plus img {
}

/* 3. أيقونة الذكاء الاصطناعي (AI) - الحجم المختلف تماماً */
.bottom-nav__ai {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.bottom-nav__ai img {
  /* 1. الحجم الأساسي */
  width: 56px; 
  height: auto; /* تم إبقاء height auto للحفاظ على التناسب */

  /* 2. الرفع للأعلى */
  margin-bottom: 20px; /* تم زيادة القيمة لضمان بروزها فوق الشريط */
  position: relative;
  z-index: 10;

  /* 3. تأثير الحركة (7 ثوانٍ إجمالي: 2 حركة + 5 توقف) */
  animation: zoomWithPause 7s infinite ease-in-out;

  /* 4. جماليات (ظل بسيط) */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* تعريف الحركة (تعديل النسب لضمان توقف 5 ثوانٍ دقيق) */
@keyframes zoomWithPause {
  0% { transform: scale(1); }
  14% { transform: scale(1.25); } /* ذروة التكبير */
  28% { transform: scale(1); }    /* العودة للحجم الطبيعي عند الثانية 2 */
  100% { transform: scale(1); }   /* البقاء ثابتاً حتى الثانية 7 (5 ثوانٍ توقف) */
}


/* =========================
   PAGE SPACER
========================= */
.page-end-spacer{height:140px}

/* =========================
   AI FRAME
========================= */
.ai-frame{
  height: calc(100vh - 60px - var(--footer-h) - 24px);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.ai-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================================================
   PAGES
========================================================= */

/* =========================
   Categories Page
========================= */
.cats-page{padding-top:12px}
.cats-head{margin-bottom:10px}
.cats-title{
  margin:0;
  color:var(--brand);
  font-size:20px;
  
}

.cats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding-bottom:6px;
}
.cat-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.cat-card__img{
  width:100%;
  height:120px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.cat-card__img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cat-card__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:34px;
  color:var(--brand);
  background:linear-gradient(180deg,#fff, #f7f3fb);
}
.cat-card__name{
  font-size:18px;
  
  color:#2c2a33;
  text-align:center;
}
@media (max-width: 380px){
  .cats-grid{grid-template-columns:1fr}
}

/* =========================
   Auth Pages (Edit / Password)
========================= */
.auth-page{padding-top:12px;padding-bottom:18px}

.auth-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px
}
.h{margin:0;font-size:18px;color:var(--brand);font-weight:900}
.sub{margin-top:6px;color:var(--muted);font-weight:800;font-size:13px}
.lbl{margin:12px 0 6px;display:block}

.inp{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid var(--stroke);
  padding:0 12px;
  font-weight:800;
  font-family:inherit;
  outline:none
}
.inp-textarea{height:90px;padding-top:10px}

.btn-auth{
  margin-top:12px;
  width:100%;
  height:48px;
  border:0;
  border-radius:16px;
  background:var(--brand);
  color:#fff;
  
  cursor:pointer
}

.btn-ghost{
  border:1px solid var(--stroke);
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  
  cursor:pointer;
  text-decoration:none;
  color:#2c2a33
}

.auth-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.err{
  background:#fff4f4;
  border:1px solid #ffd0d0;
  color:#8a1f1f;
  border-radius:14px;
  padding:10px 12px;
  font-weight:800
}
.ok{
  background:#f3fff7;
  border:1px solid #c9f2d8;
  color:#1c6b3a;
  border-radius:14px;
  padding:10px 12px;
  font-weight:800
}
.auth-msg{margin-top:12px}
.err-list{margin:6px 0 0;padding:0 18px}
.mt-12{margin-top:12px}

/* =========================
   Me Page
========================= */
.me-page{padding-top:12px;padding-bottom:18px}

.me-card{background:#fff;border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.me-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.me-name{font-size:18px;color:var(--brand)}
.me-meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-weight:800;font-size:13px}
.me-avatar img{width:68px;height:68px;border-radius:999px;object-fit:cover;border:1px solid var(--stroke);background:#fff}

.avatar-form{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.avatar-hint{margin-top:8px;color:var(--muted);font-weight:800;font-size:12px}

.alert-ok{background:#f3fff7;border:1px solid #c9f2d8;color:#1c6b3a;border-radius:14px;padding:10px 12px;margin-bottom:10px}
.alert-err{background:#fff4f4;border:1px solid #ffd0d0;color:#8a1f1f;border-radius:14px;padding:10px 12px;margin-bottom:10px}

.kpis{margin-top:12px;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px}
@media (max-width: 900px){.kpis{grid-template-columns:repeat(2, minmax(0,1fr))}}
.kpi{background:#fff;border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);padding:10px;text-align:center}
.kpi-num{font-size:18px;color:#2c2a33}
.kpi-label{font-size:12px;color:var(--muted);margin-top:2px}

.tabs{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.tab{border:1px solid var(--stroke);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}
.tab.is-active{background:var(--brand);color:#fff;border-color:transparent}

.panel{display:none;margin-top:12px;background:#fff;border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.panel.is-active{display:block}
.panel-head{color:#2c2a33;margin-bottom:10px}

.list{display:grid;gap:10px}
.row{display:block;text-decoration:none;background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:10px 12px;transition:transform .15s ease}
.row:hover{transform:translateY(-1px)}
.row-title{color:#2c2a33;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row-meta{margin-top:4px;color:var(--muted);font-weight:800;font-size:12px;display:flex;gap:8px;flex-wrap:wrap}

.empty{background:#fff9e8;border:1px solid #ffe1a5;color:#7a5a00;border-radius:14px;padding:10px 12px;font-weight:900}
.settings{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary-lite{background:var(--brand);color:#fff;border-color:transparent}
.note{margin-top:12px;color:var(--muted);font-weight:800;font-size:12px}

/* =========================
   Question Page (Answers)
========================= */
.qwrap{padding:14px}

.qcard,.acard{
  background:#fff;border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.05);
  padding:14px;margin-bottom:12px
}
.qtop,.atop{
  display:flex;justify-content:space-between;align-items:center;
  flex-direction:row-reverse
}
.user{display:flex;gap:10px;align-items:center;flex-direction:row-reverse}
.avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:#eee}
.avatar img{width:100%;height:100%;object-fit:cover}
.uname{font-weight:900}
.qtext{margin-top:10px;font-size:18px;line-height:1.8}
.qmeta{display:flex;gap:14px;color:#666;margin-top:10px}

.answers-head{
  display:flex;justify-content:space-between;align-items:center;
  margin:16px 0
}
.acount{
  background:#f3ecfa;border-radius:999px;
  padding:6px 12px;font-weight:900
}
.abody{margin-top:8px;line-height:1.8}
.adate{font-size:12px;color:#888}
.empty{text-align:center;color:#888;padding:30px}

/* ✅ composer ثابت فوق الفوتر */
.composer{
  position:fixed;
  left:0;right:0;
  bottom: calc(var(--footer-h, 78px) + 8px);
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  padding:10px 12px;
  z-index:50;
}
.composer__row{
  max-width:900px;margin:0 auto;
  display:flex;gap:10px;
  flex-direction:row-reverse;
  align-items:center;
}
.composer__input{
  flex:1;min-height:44px;max-height:120px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:14px;
  padding:10px;
  resize:vertical;
}
.composer__btn{
  background:#0f1b2b;color:#fff;
  border:0;border-radius:14px;
  height:44px;
  padding:0 18px;
  cursor:pointer;
}
.composer__hint{
  max-width:900px;margin:6px auto 0;
  color:#b42318;font-size:12px;
}
.composer__login{
  max-width:900px;margin:0 auto;
  text-align:center;
}
.composer__login a{color:var(--brand);text-decoration:underline}

/* مساحة آمنة لآخر الردود */
.page-safe{
  height: calc(160px + var(--footer-h, 78px));
}



/* ===== iOS Minimal Footer ===== */

/* الشريط السفلي */
.bottom-nav,
.app-footer,
.mobile-footer{
  height: 50px !important;
  padding: 4px 0 !important;
}

/* الأيقونات */
.bottom-nav a,
.app-footer a{
  padding: 2px 0 !important;
  font-size: 11px;
}

/* صورة الأفاتار */
.bottom-nav img{

}

/* إزالة أي ارتفاع زائد */
footer{
  min-height: unset !important;
  padding: 4px 0 !important;
}

/* إزالة الفراغ قبل الفوتر */
.page-end-spacer{
  display: none !important;
}

/* تأكيد عدم وجود حجز مساحة زيادة */
body{
  padding-bottom: 52px !important;
}



.bottom-nav__item--plus {

  height: 50px;
  border-radius: 0px;

}


.bottom-nav img[src*="balqees"]{
  width: 56px !important;
  height: 56px !important;
  transform: translateY(-10px);
}