/* ==========================================================================
   Yogi Indische Lieferservice — Design Tokens
   ========================================================================== */
:root {
  --primary-green: #00644B; /* Deep Cardamom Green — header, hero, main nav */
  --cta-red: #E14B26;       /* Tandoor Spice Red — order buttons, cart badges */
  --cta-red-hover: #c43b1a;
  --accent-gold: #F7C42D;   /* Saffron Gold — star ratings, popular badges */
  --bg-cream: #EBE1CB;      /* Warm Basmati Cream — global body background */
  --card-white: #FEFEFE;    /* Off-white — containers, cards, review cards */

  --font-heading: "Outfit", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-cream);
  color: #2a2a2a;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--primary-green);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Order Section / UpMenu Container
   The widget IS the app shell — full viewport height, edge-to-edge, no
   surrounding chrome, so it reads as a native app rather than a website.
   ========================================================================== */
main {
  height: 100%;
}

#upmenu-container {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background-color: var(--card-white);
}

#upmenu-container iframe {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  border: none;
  display: block;
}

/* ==========================================================================
   iOS PWA Install Banner (floating bottom modal, hidden by default)
   ========================================================================== */
.ios-install-banner {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  background-color: var(--card-white);
  color: #2a2a2a;
  border-radius: 14px;
  padding: 1rem 2.75rem 1rem 1rem;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
}

.ios-install-banner.is-visible {
  display: flex;
  align-items: center;
}

.ios-install-banner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ios-install-banner__close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #777;
  cursor: pointer;
  padding: 0.25rem;
}

@media (min-width: 480px) {
  .ios-install-banner {
    max-width: 380px;
    left: auto;
  }
}

/* ==========================================================================
   UpMenu Widget — Brand Overrides
   Force embedded UpMenu elements to adopt the Yogi brand system.
   ========================================================================== */

/* Typography — everything inside the UpMenu container uses our body font */
#upmenu-container,
#upmenu-container * {
  font-family: var(--font-body) !important;
}

/* Primary action buttons (Add to cart, Checkout, etc.) */
#upmenu-container .upmenu-btn-primary,
#upmenu-container .upmenu-cart-checkout {
  background-color: var(--cta-red) !important;
  color: var(--card-white) !important;
  border-radius: 8px !important;
  border: none !important;
  transition: background-color 0.2s ease;
}

#upmenu-container .upmenu-btn-primary:hover,
#upmenu-container .upmenu-cart-checkout:hover {
  background-color: var(--cta-red-hover) !important;
}

/* Category links / navigation pills */
#upmenu-container .upmenu-category-link.active,
#upmenu-container .upmenu-nav-pill.active {
  background-color: var(--primary-green) !important;
  color: var(--card-white) !important;
}

/* Prices & badges */
#upmenu-container .upmenu-price,
#upmenu-container .upmenu-badge {
  color: var(--accent-gold) !important;
}

#upmenu-container .upmenu-badge--popular {
  background-color: var(--primary-green) !important;
  color: var(--card-white) !important;
}