/* ============================================================
   SA — المملكة العربية السعودية
   风格: 沙漠金 / 绿 + 几何菱形纹 (diamond lattice, 暖沙底)
   RTL: html[dir="rtl"] 下镜像
   无 @import / 无外链字体
   ============================================================ */

:root {
  --brand: #006c35;          /* 沙特绿 */
  --brand2: #c8a24b;        /* 沙漠金 */
  --brand3: #0a8a4a;
  --bg: #f5efe0;
  --card: #fffdf6;
  --ink: #22301f;
}

body {
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', sans-serif;
  background: #ece3cd;
  color: var(--ink);
}
.app { background: var(--bg); }

/* 国旗色条: 绿 + 米白 */
.flagstrip {
  height: 6px;
  background: linear-gradient(to right, #006c35 0 55%, #c8a24b 55% 70%, #fffdf6 70% 100%);
}

/* 头部: 绿底 + 菱形暗纹 */
.appbar {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #006c35 0%, #0a8a4a 60%, #004d26 100%);
  border-radius: 0 0 26px 26px;
}
.appbar .brand .logo { border-radius: 8px; background: rgba(200,162,75,.25); }
.appbar .iconbtn { border-radius: 10px; }

/* 余额卡 */
.wallet-card {
  background: rgba(0,77,38,.35);
  border: 1px solid rgba(200,162,75,.45);
  border-radius: 16px;
}
.wallet-card .acts a { color: #006c35; border-radius: 999px; }

/* 卡片: 暖沙圆角 + 菱形角标 */
.card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid #e7dcc0;
  box-shadow: 0 2px 10px rgba(34,48,31,.07);
  position: relative;
}
.card::before {
  content: "";
  position: absolute; top: 12px; inset-inline-start: 12px;
  width: 8px; height: 8px;
  background: var(--brand2);
  transform: rotate(45deg);
  opacity: .8;
}

/* 按钮: 绿金渐变 */
.btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #006c35, #c8a24b);
  box-shadow: 0 4px 14px rgba(0,108,53,.28);
}
.btn.secondary { background: #ece3cd; color: #22301f; }

/* 促销横幅: 金色 */
.promo {
  border-radius: 16px;
  background: linear-gradient(120deg, #c8a24b 0%, #e0c078 100%);
  box-shadow: 0 6px 18px rgba(200,162,75,.4);
}

/* chips: 绿边胶囊 */
.chip { border-radius: 999px; border-color: #d8cba4; color: var(--brand); background: #fffdf6; }

/* 分类宫格 */
.cat {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid #e7dcc0;
}
.cat .nm { color: var(--ink); }

/* stats 条 */
.stats {
  background: linear-gradient(135deg, #006c35, #c8a24b);
  border-radius: 14px;
}

/* badge */
.badge { background: var(--card); border-radius: 12px; border: 1px solid #e7dcc0; }
.badge .b-t { color: var(--ink); }

/* howto 序号: 绿圆 */
.howto .n { background: var(--brand); color: #fffdf6; }

.price { color: var(--brand); }

/* Tabbar */
.tabbar { background: var(--card); border-top: 1px solid #e7dcc0; }
.tabbar a.on { color: var(--brand); }
.tabbar a.on .ic { filter: none; }

/* ============================================================
   RTL 镜像 (SA)
   ============================================================ */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] .stats div { border-right: none; border-left: 1px solid rgba(255,255,255,.25); }
html[dir="rtl"] .stats div:last-child { border-left: none; }
html[dir="rtl"] .appbar .row { flex-direction: row-reverse; }
html[dir="rtl"] .wallet-card .acts { flex-direction: row-reverse; }
html[dir="rtl"] .tabbar { flex-direction: row-reverse; }
html[dir="rtl"] .wa-fab { left: auto; right: 50%; transform: translateX(calc(50% - 140px)); }
@media (max-width: 520px) {
  html[dir="rtl"] .wa-fab { right: auto; left: 16px; transform: translateX(-50%); }
}