/* NIHAO secondary storefront skin. Load after the page's existing styles. */
body.storefront-body.nihao-ui {
  --nihao-paper: #f7f6f3;
  --nihao-surface: #fff;
  --nihao-ink: #252426;
  --nihao-muted: #6d6965;
  --nihao-line: #e7e3df;
  --nihao-red: #a62932;
  --nihao-red-deep: #87252d;
  background: radial-gradient(ellipse at 78% 0, rgba(166, 41, 50, .055), transparent 32%), var(--nihao-paper);
  color: var(--nihao-ink);
}

/* Sign-in unavailable state remains visible and readable. */
body.storefront-body.nihao-ui .account-auth-main,
body.storefront-body.nihao-ui .member-main { background: transparent; }
body.storefront-body.nihao-ui .account-auth-hero .auth-promise { color: var(--nihao-ink); }
body.storefront-body.nihao-ui .account-auth-hero .auth-promise > span,
body.storefront-body.nihao-ui .account-auth-hero .auth-promise b { color: var(--nihao-red-deep); }
body.storefront-body.nihao-ui .account-auth-hero .auth-promise p { color: var(--nihao-muted); }
body.storefront-body.nihao-ui .account-auth-hero .auth-card {
  color: var(--nihao-ink);
  background: var(--nihao-surface);
  border-color: var(--nihao-line);
  box-shadow: 0 18px 42px rgba(24, 20, 18, .09);
}
body.storefront-body.nihao-ui .account-auth-hero .auth-heading-unavailable h2 { color: var(--nihao-ink); }
body.storefront-body.nihao-ui .account-auth-hero .auth-heading-unavailable p { color: var(--nihao-muted); }
body.storefront-body.nihao-ui .account-auth-hero .member-whatsapp-cta {
  color: #fff;
  background: linear-gradient(115deg,#252426,#3b292d);
  box-shadow: 0 9px 20px rgba(169, 34, 40, .19);
}

/* Help center: warm surfaces, clear separators, red primary action. */
body.storefront-body.nihao-ui .hc2-page { --hc2-ink: var(--nihao-ink); --hc2-muted: var(--nihao-muted); --hc2-gold: var(--nihao-red-deep); --hc2-line: var(--nihao-line); --hc2-cream: var(--nihao-paper); }
body.storefront-body.nihao-ui .hc2-page .hc2-header { border-color: var(--nihao-line); background: rgba(255,255,255,.92); }
body.storefront-body.nihao-ui .hc2-page .hc2-button-primary {
  color: #fff;
  border-color: var(--nihao-red-deep);
  background: linear-gradient(115deg,#252426,#3b292d);
  box-shadow: 0 5px 15px #25242610;
}
body.storefront-body.nihao-ui .hc2-page .hc2-topic,
body.storefront-body.nihao-ui .hc2-page .hc2-no-results,
body.storefront-body.nihao-ui .hc2-page .hc2-search-box { color: var(--nihao-ink); border-color: var(--nihao-line); background: var(--nihao-surface); box-shadow: 0 8px 22px rgba(24,20,18,.045); }
body.storefront-body.nihao-ui .hc2-page .hc2-contact { color: var(--nihao-ink); border-color: #ead0ce; background: linear-gradient(110deg, #fff, #fcf2f1); }

/* Empty cart: neutral card and red shopping action. */
body.storefront-body.nihao-ui .cart2-page { color: var(--nihao-ink); }
body.storefront-body.nihao-ui .cart2-page .cart2-title p:not(.cart2-kicker),
body.storefront-body.nihao-ui .cart2-page .cart2-empty p { color: var(--nihao-muted); }
body.storefront-body.nihao-ui .cart2-page .cart2-empty {
  color: var(--nihao-ink);
  border-color: var(--nihao-line);
  background: var(--nihao-surface);
  box-shadow: 0 14px 34px rgba(24,20,18,.055);
}
body.storefront-body.nihao-ui .cart2-page .cart2-empty > span { color: var(--nihao-red-deep); border-color: #efd6d4; background: #fff5f4; }
body.storefront-body.nihao-ui .cart2-page .cart2-empty .cart2-primary {
  color: #fff;
  border-color: var(--nihao-red-deep);
  background: linear-gradient(115deg,#252426,#3b292d);
  box-shadow: 0 3px 8px #2524260a;
}

/* Membership information uses the existing single panel and action geometry. */
body.storefront-body.nihao-ui[data-nihao-page="membership"] .store-main > .panel {
  color: var(--nihao-ink);
  border: 1px solid var(--nihao-line);
  background: var(--nihao-surface);
  box-shadow: 0 15px 38px rgba(24,20,18,.055);
}
body.storefront-body.nihao-ui[data-nihao-page="membership"] .store-main > .panel > p:first-child { color: var(--nihao-red-deep) !important; }
body.storefront-body.nihao-ui[data-nihao-page="membership"] .store-main > .panel [role="status"] { color: var(--nihao-ink); border-color: #efd6d4; background: #fff5f4; }
body.storefront-body.nihao-ui[data-nihao-page="membership"] .store-main > .panel .button { color: #fff; border-color: var(--nihao-red-deep); background: var(--nihao-red); }
body.storefront-body.nihao-ui[data-nihao-page="membership"] .store-main > .panel .button.ghost { color: var(--nihao-ink); border-color: var(--nihao-line); background: #fff; }

/* Rewards surfaces only. The wheel rotor, pointer, segment art and dimensions are untouched. */
body.storefront-body.nihao-ui.reward-celebration { color: var(--nihao-ink); background: var(--nihao-paper); }
body.storefront-body.nihao-ui .opening-rewards { color: var(--nihao-ink); }
body.storefront-body.nihao-ui .opening-rewards .reward-eyebrow,
body.storefront-body.nihao-ui .opening-rewards .reward-section-head > a,
body.storefront-body.nihao-ui .opening-rewards .reward-result-link { color: var(--nihao-red-deep); }
body.storefront-body.nihao-ui .opening-rewards .reward-intro,
body.storefront-body.nihao-ui .opening-rewards .reward-credit-note { color: var(--nihao-muted); }
body.storefront-body.nihao-ui .opening-rewards .reward-prize-card,
body.storefront-body.nihao-ui .opening-rewards .reward-history,
body.storefront-body.nihao-ui .opening-rewards .reward-how { color: var(--nihao-ink); border-color: var(--nihao-line); background: var(--nihao-surface); }
body.storefront-body.nihao-ui .opening-rewards .reward-primary,
body.storefront-body.nihao-ui .opening-rewards .reward-secondary { color: #fff; border-color: var(--nihao-red-deep); background: var(--nihao-red); }
body.storefront-body.nihao-ui .opening-rewards .reward-primary:disabled { color: #716c68 !important; border-color: #ded9d4; background: #e8e5e2; box-shadow: none; }
body.storefront-body.nihao-ui .opening-rewards .reward-notice { color: var(--nihao-ink); border-color: #efd6d4; background: #fff5f4; }

/* Top-up information and form: retain dimensions and all browser validation states. */
body.storefront-body.nihao-ui .topup-header { border-color: var(--nihao-line); background: rgba(255,255,255,.94); }
body.storefront-body.nihao-ui .topup-brand,
body.storefront-body.nihao-ui .topup-brand strong span { color: var(--nihao-ink); }
body.storefront-body.nihao-ui .topup-header nav a.active { color: var(--nihao-red-deep); background: #fff3f2; }
body.storefront-body.nihao-ui .topup-page .topup-hero { color: var(--nihao-ink); border: 1px solid var(--nihao-line); background: radial-gradient(ellipse at 86% 12%, rgba(166,41,50,.075), transparent 35%), linear-gradient(135deg, #fff, #f5f3f1); box-shadow: 0 18px 44px rgba(24,20,18,.07); }
body.storefront-body.nihao-ui .topup-page .topup-hero aside { color: var(--nihao-ink); border-color: var(--nihao-line); background: rgba(255,255,255,.78); }
body.storefront-body.nihao-ui .topup-page .topup-hero aside p,
body.storefront-body.nihao-ui .topup-page .topup-form-card header p { color: var(--nihao-muted); }
body.storefront-body.nihao-ui .topup-page .topup-form-card,
body.storefront-body.nihao-ui .topup-page .topup-ltt-card { color: var(--nihao-ink); border-color: var(--nihao-line); background: var(--nihao-surface); box-shadow: 0 12px 30px rgba(24,20,18,.05); }
body.storefront-body.nihao-ui .topup-page .topup-form-card header > small { color: #fff; background: var(--nihao-red); }
body.storefront-body.nihao-ui .topup-page .topup-quick-form button { color: #fff; border-color: var(--nihao-red-deep); background: var(--nihao-red); }
body.storefront-body.nihao-ui .topup-page .topup-provider-status { color: var(--nihao-ink); border-color: var(--nihao-line); background: #faf9f7; }
body.storefront-body.nihao-ui .topup-page .topup-signin { color: var(--nihao-ink); border: 1px solid var(--nihao-line); background: #f7f5f3; }
body.storefront-body.nihao-ui .topup-page .topup-process { color: #fff; border-color: #242323; background: linear-gradient(145deg, #191919, #343130); }
body.storefront-body.nihao-ui .topup-page .topup-confirm button[data-confirm-submit] { color: #fff; border-color: var(--nihao-red-deep); background: var(--nihao-red); }

@media (prefers-reduced-motion: no-preference) {
  body.storefront-body.nihao-ui .hc2-page .hc2-button-primary,
  body.storefront-body.nihao-ui .cart2-page .cart2-empty .cart2-primary,
  body.storefront-body.nihao-ui .account-auth-hero .member-whatsapp-cta,
  body.storefront-body.nihao-ui .topup-page .topup-quick-form button { transition: background-color .18s ease, box-shadow .18s ease; }
}

/* Arabic login override: brand-storefront.css applies an older, higher-priority gold hero. */
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero {
  color: #fff;
  background: radial-gradient(ellipse at 82% 12%, rgba(166,41,50,.24), transparent 34%), linear-gradient(132deg, var(--nihao-ink) 0%, #302326 54%, var(--nihao-red-deep) 112%) !important;
  box-shadow: 0 22px 55px rgba(37,36,38,.16) !important;
}
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .auth-promise > span { color: #fff !important; }
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .auth-promise h1 { color: #fff !important; }
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .auth-promise p { color: rgba(255,255,255,.82) !important; }
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .auth-promise b { color: #fff !important; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .member-whatsapp-cta {
  color: #fff !important;
  background: linear-gradient(118deg, var(--nihao-ink), var(--nihao-red-deep)) !important;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 9px 20px rgba(135,37,45,.24);
}
body.storefront-body.nihao-ui.immersive-account .account-auth-main .account-auth-hero .member-whatsapp-cta :is(strong,span) { color: #fff !important; -webkit-text-fill-color: #fff; }

/* Arabic help-center order card: remove the legacy gold card and heavy icon tile. */
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: radial-gradient(ellipse at 92% 5%, rgba(166,41,50,.28), transparent 48%), linear-gradient(138deg, var(--nihao-ink), #302326 62%, var(--nihao-red-deep)) !important;
  box-shadow: 0 16px 32px rgba(37,36,38,.14) !important;
}
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card :is(h2,p,li) { color: rgba(255,255,255,.9); }
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card .hc2-order-kicker,
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card > a,
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card .hc2-checklist li > span { color: #fff !important; }
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-card > a { border-color: rgba(255,255,255,.2); }
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-symbol {
  color: var(--nihao-ink) !important;
  border: 1px solid #ddd9d4;
  background: #f1f0ee !important;
  box-shadow: none !important;
}
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-symbol .hc2-icon,
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-symbol img { filter: grayscale(1); }
body.storefront-body.nihao-ui.immersive-help-center .hc2-page .hc2-order-symbol > span {
  color: var(--nihao-ink) !important;
  border: 1px solid #d8d4d0 !important;
  background: #fff !important;
}

/* The top-up hero inherits a route-level gold rule from brand-storefront.css. */
body.storefront-body.nihao-ui.immersive-topup > .immersive-main > .topup-page > .topup-hero {
  color: #fff !important;
  background: radial-gradient(ellipse at 86% 7%, rgba(166,41,50,.32), transparent 40%), linear-gradient(132deg, var(--nihao-ink) 0%, #302326 57%, var(--nihao-red-deep) 118%) !important;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 48px rgba(37,36,38,.19) !important;
}
body.storefront-body.nihao-ui.immersive-topup > .immersive-main > .topup-page > .topup-hero :is(h1,p,small,strong,b,span) { color: #fff !important; }
body.storefront-body.nihao-ui.immersive-topup > .immersive-main > .topup-page > .topup-hero :is(aside,.topup-trust span) {
  border-color: rgba(255,255,255,.24);
  background-color: rgba(255,255,255,.08);
}