/* ============================================================
   India (IN) Theme — Saffron / White / Green / Deep Blue
   Inspired by Indian flag + Red Fort arched architecture
   ============================================================ */

:root {
  --brand:    #FF6F00;   /* संत्री saffron orange */
  --brand2:  #138808;   /* हरा flag green */
  --brand3:  #0F4C81;   /* गहरा नीला chakra blue */
  --bg:       #FFF8F0;   /* warm cream */
  --card:     #FFFFFF;
  --ink:      #2A1810;
  --price:    #C0392B;
}

body {
  background: var(--bg);
  font-family: 'Noto Sans Devanagari', 'Mukta', 'Segoe UI', 'Roboto', sans-serif;
  color: var(--ink);
}

/* Flag strip: saffron / white / green tricolor */
.flagstrip {
  height: 6px !important;
  background: linear-gradient(to right,
    #FF9933 0%, #FF9933 33.3%,
    #FFFFFF 33.3%, #FFFFFF 66.6%,
    #138808 66.6%, #138808 100%) !important;
}

/* App bar — deep blue gradient with saffron accent */
.appbar {
  background: linear-gradient(135deg, #0F4C81 0%, #138808 55%, #FF6F00 100%) !important;
  border-bottom: 3px solid #FF9933;
  box-shadow: 0 4px 14px rgba(15,76,129,.25);
}
.appbar .brand { color: #fff; }
.appbar .brand .logo {
  background: rgba(255,255,255,.25);
  border: 1.5px solid rgba(255,255,255,.4);
}

/* Wallet card — arched top (Red Fort Mughal arch feel) */
.wallet-card {
  background: linear-gradient(135deg, #0F4C81 0%, #138808 100%) !important;
  border-top-left-radius: 50px 20px;   /* arched top edge */
  border-top-right-radius: 50px 20px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 6px 18px rgba(19,136,8,.25);
}
.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);
}

/* Cards — arched top corners, saffron shadow */
.card, .badge, .chips span {
  border-radius: 14px;
}
.badge {
  background: var(--card);
  border-top: 3px solid #FF9933;
  box-shadow: 0 3px 10px rgba(255,111,0,.08);
}
.badge .b-t { color: var(--brand3); }

/* Chips — saffron outline */
.chips span {
  border: 1.5px solid #FF9933 !important;
  color: var(--brand) !important;
  background: #FFF3E6 !important;
  border-radius: 20px !important;
  font-weight: 700;
}
.chips span.on, .chips span.active {
  background: linear-gradient(135deg, #FF6F00, #FF9933) !important;
  color: #fff !important;
}

/* Stats strip — tricolor gradient */
.stats {
  background: linear-gradient(135deg, #FF6F00 0%, #FF9933 50%, #138808 100%) !important;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(255,111,0,.2);
}

/* Buttons */
.btn, button, .field input[type=submit], a.button {
  border-radius: 12px;
}
.btn-primary, .field input[type=submit] {
  background: linear-gradient(135deg, #FF6F00, #FF9933) !important;
  border: none;
  box-shadow: 0 4px 12px rgba(255,111,0,.3);
}

/* Price — deep saffron-red */
.price { color: var(--price) !important; }

/* Tab bar — white with blue active */
.tabbar {
  background: #fff;
  border-top: 2px solid #FF9933;
  box-shadow: 0 -3px 10px rgba(15,76,129,.08);
}
.tabbar a.on { color: var(--brand3) !important; }

/* How-to step circles — saffron */
.howto .n {
  background: linear-gradient(135deg, #FF6F00, #FF9933) !important;
  box-shadow: 0 2px 6px rgba(255,111,0,.3);
}

/* Links */
a { color: var(--brand3); }

/* Arched container divider feel on main content */
.container { padding-top: 8px; }