/* ================================================================
   mobile-fonts.css — Ritnow site-wide typography
   ----------------------------------------------------------------
   Loaded AFTER every page's own stylesheet so these rules win the
   cascade without needing !important. Gives the whole app the
   rounded, tightly-tracked look used by Swiggy/Zomato on mobile:
   a Poppins-based type stack, smaller/denser base sizes, and a
   mobile-first size drop under 420px (small phones).
   Uses the SAME class names already shared across every
   restaurant page (topbar-title, product-name, product-price,
   product-qty, nutrition, toggle-btn, sectionToggle, etc.) so one
   file styles every page without touching each page's own CSS.
   ================================================================ */

:root{
  --rn-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html, body{
  font-family: var(--rn-font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, p, span, small, h1, h2, h3, h4, h5, h6, input, button, a{
  font-family: var(--rn-font);
}

/* ── Top bar / page titles ── */
.topbar-title{
  font-family: var(--rn-font);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.1px;
}

/* ── Category / veg-nonveg-drinks toggle pills ── */
.toggle-btn{
  font-family: var(--rn-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1px;
}

/* ── Collapsible section headers (Chinese, Burgers, Momos...) ── */
.sectionToggle{
  font-family: var(--rn-font);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.15px;
}

/* ── Product cards ── */
.product-name{
  font-family: var(--rn-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
}
.product-qty{
  font-family: var(--rn-font);
  font-weight: 400;
  font-size: 11.5px;
  color: #7a7a7a;
}
.product-price{
  font-family: var(--rn-font);
  font-weight: 700;
  font-size: 13.5px;
}
.nutrition{
  font-family: var(--rn-font);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.35;
  color: #6b6b6b;
}
.price-compare,
.price-compare .pc-our,
.price-compare .pc-other{
  font-family: var(--rn-font);
  font-size: 10.5px;
}
.price-compare .pc-our{ font-weight: 600; color: #1a7f37; }
.price-compare .pc-other{ font-weight: 400; color: #9a9a9a; }

/* ── Cart +/- controls ── */
.station_cart{ font-family: var(--rn-font); }
.station_cart button{ font-family: var(--rn-font); font-weight: 700; }
.station_cart span{ font-family: var(--rn-font); font-weight: 600; font-size: 12px; }

/* ── Index page restaurant cards ── */
.restaurant-name{ font-family: var(--rn-font); font-weight: 700; font-size: 14.5px; }
.reviews{ font-family: var(--rn-font); font-weight: 400; font-size: 11.5px; }
.section-title{ font-family: var(--rn-font); font-weight: 700; font-size: 15.5px; }
.assure-badge, .offer-badge, .time-badge, .tag{ font-family: var(--rn-font); font-weight: 600; font-size: 10.5px; }
.motm-item span{ font-family: var(--rn-font); font-weight: 500; font-size: 11px; }

/* ── Search page ── */
.rg-name{ font-family: var(--rn-font); font-weight: 700; font-size: 14px; }
#sp-input, #menuSearch{ font-family: var(--rn-font); font-size: 13.5px; }

/* ── Bottom tab bar / buttons generally ── */
.tab-btn{ font-family: var(--rn-font); font-weight: 600; font-size: 12px; }
button{ font-family: var(--rn-font); }

/* ================================================================
   MOBILE BREAKPOINT — Swiggy/Zomato style tighter, smaller type
   on small phones (most traffic on this app is mobile).
   ================================================================ */
@media (max-width: 420px){
  .topbar-title{ font-size: 15.5px; }
  .toggle-btn{ font-size: 12px; }
  .sectionToggle{ font-size: 13px; }
  .product-name{ font-size: 13px; }
  .product-qty{ font-size: 11px; }
  .product-price{ font-size: 13px; }
  .nutrition{ font-size: 10.5px; }
  .price-compare, .price-compare .pc-our, .price-compare .pc-other{ font-size: 10px; }
  .restaurant-name{ font-size: 14px; }
  .reviews{ font-size: 11px; }
  .section-title{ font-size: 15px; }
}

@media (max-width: 360px){
  .topbar-title{ font-size: 15px; }
  .product-name{ font-size: 12.5px; }
  .product-price{ font-size: 12.5px; }
  .sectionToggle{ font-size: 12.5px; }
}