/* ============================================================
   Pakistan (PK) Theme — Dark Green + White + Crescent/Star
   Full RTL mirror under html[dir="rtl"]
   ============================================================ */

:root {
  --brand:    #01411C;   /* پرچم گہرا سبز */
  --brand2:  #01631C;
  --brand3:  #00A651;   /* چمکدار سبز accent */
  --bg:       #F2F8F3;
  --card:     #FFFFFF;
  --ink:      #0E1F14;
  --price:    #01411C;
}

body {
  background: var(--bg);
  font-family: 'Jameel Noori Nastaleeq', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif;
  color: var(--ink);
}

/* Flag strip: white vertical bar on left (green majority) — mirrored in RTL below */
.flagstrip {
  height: 6px !important;
  background: linear-gradient(to right,
    #FFFFFF 0%, #FFFFFF 25%,
    #01411C 25%, #01411C 100%) !important;
}

/* App bar — deep green gradient with subtle crescent shadow */
.appbar {
  background: linear-gradient(135deg, #01411C 0%, #01631C 55%, #00A651 100%) !important;
  border-bottom: 3px solid #FFFFFF;
  box-shadow: 0 4px 14px rgba(1,65,28,.3);
}
.appbar .brand { color: #fff; }
.appbar .brand .logo {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.45);
}
/* Crescent star accent on brand logo */
.appbar .brand .logo::before {
  content: "☪";
  font-size: 18px;
  color: #fff;
}

/* Wallet card — deep green */
.wallet-card {
  background: linear-gradient(135deg, #01411C 0%, #00A651 100%) !important;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(1,65,28,.3);
}
.wallet-card .acts a {
  background: #fff;
  color: var(--brand);
  border-radius: 10px;
}
.wallet-card .acts a.ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.6);
}

/* Badges — white cards with green top border */
.badge {
  background: var(--card);
  border-top: 3px solid #01411C;
  box-shadow: 0 3px 10px rgba(1,65,28,.08);
}
.badge .b-t { color: var(--brand); }

/* Chips */
.chips span {
  border: 1.5px solid #01411C !important;
  color: var(--brand) !important;
  background: #E8F5EC !important;
  border-radius: 20px !important;
  font-weight: 700;
}
.chips span.on, .chips span.active {
  background: linear-gradient(135deg, #01411C, #00A651) !important;
  color: #fff !important;
}

/* Stats strip — green gradient */
.stats {
  background: linear-gradient(135deg, #01411C 0%, #00A651 100%) !important;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(1,65,28,.25);
}

/* Buttons */
.btn-primary, .field input[type=submit] {
  background: linear-gradient(135deg, #01411C, #00A651) !important;
  border: none;
  box-shadow: 0 4px 12px rgba(1,65,28,.3);
}

.price { color: var(--price) !important; }

/* Tab bar */
.tabbar {
  background: #fff;
  border-top: 2px solid #01411C;
  box-shadow: 0 -3px 10px rgba(1,65,28,.08);
}
.tabbar a.on { color: var(--brand3) !important; }

.howto .n {
  background: linear-gradient(135deg, #01411C, #00A651) !important;
  box-shadow: 0 2px 6px rgba(1,65,28,.3);
}

a { color: var(--brand3); }

/* ============================================================
   RTL MIRROR — applies when <html dir="rtl">
   ============================================================ */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .flagstrip {
  /* white stripe moves to the RIGHT in RTL */
  background: linear-gradient(to left,
    #FFFFFF 0%, #FFFFFF 25%,
    #01411C 25%, #01411C 100%) !important;
}

html[dir="rtl"] .appbar .row,
html[dir="rtl"] .wallet-card .acts,
html[dir="rtl"] .stats,
html[dir="rtl"] .howto {
  flex-direction: row-reverse;
}

html[dir="rtl"] .tabbar {
  /* mirror tab order: first tab on the right */
  flex-direction: row-reverse;
}

html[dir="rtl"] .chips {
  flex-direction: row-reverse;
}

html[dir="rtl"] .field input,
html[dir="rtl"] textarea {
  text-align: right;
}

/* Flip directional icons (arrows → become ←) */
html[dir="rtl"] .btn.open_agent::after,
html[dir="rtl"] .btn.back_to_orders::before,
html[dir="rtl"] .btn.back_to_products::before {
  transform: scaleX(-1);
  display: inline-block;
}

/* wallet-card actions order reversed for RTL */
html[dir="rtl"] .wallet-card .acts {
  flex-direction: row-reverse;
}