/* =========================================================================
   Wallet Cashback — styles
   Design tokens are taken from the Figma (Wallet-Cashback, node 2886:4642).
   Layout is a single, natural-height flow: no 100vh, no internal scroll
   containers. This is required so the page can be embedded in a native
   WebView that is sized to the reported content height (see js/height-bridge.js).
   ========================================================================= */

/* Brand display font (proprietary). Only the ExtraBlack weight (usWeightClass 1000) is bundled, so
   it gets a dedicated family applied just to the banner headline (see .banner__headline). It is
   intentionally NOT named "JET Sans" — that family is in the global --font stack, and with a single
   weight the browser's nearest-weight matching would route all body text through this heavy file.
   Add more weights (and switch to the "JET Sans" name) to widen brand coverage across the page. */
@font-face {
  font-family: "JET Sans Display";
  src: url("../assets/fonts/JETSans-ExtraBlack.ttf") format("truetype");
  /* JET Sans ExtraBlack is usWeightClass 1000 — the exact weight the Figma headline specifies. */
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
}

/* Takeaway Sans (proprietary) — the body/UI brand font. It heads the global --font stack, so these
   two weights drive all non-headline text (subtitle, section titles, tile labels, search, empty).
   Regular = 400, Bold = 700 (weight classes verified from the source OTFs). */
@font-face {
  font-family: "Takeaway Sans";
  src: url("../assets/fonts/TakeawaySans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Takeaway Sans";
  src: url("../assets/fonts/TakeawaySans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --bg: #fcfcfc;                 /* background/background-default */
  --container: #ffffff;          /* container/container-default */
  --divider: #efedea;            /* top strip + section dividers */
  --tile-border: #f0ece6;        /* borders/border-default */
  --logo-border: #dbd9d7;        /* borders/border-strong */
  --search-border: #e7e2da;      /* search bar border */
  --content: #242e30;            /* content/content-default */
  --placeholder: #68797d;        /* content/content-placeholder */
  --brand: #f36805;              /* content/content-brand */

  /* Radii */
  --radius-tile: 12px;
  --radius-pill: 38px;
  --radius-circle: 1000px;

  /* Sizing */
  --logo-size: 56px;
  --page-pad: 16px;
  --gap-section: 24px;
  --gap-tiles: 8px;

  /* Elevation (Light Theme / elevation-below-20) */
  --shadow-tile: 0 4px 3px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.04),
    0 3px 2px rgba(0, 0, 0, 0.04);

  /* Typography. Takeaway Sans / JET Sans are the brand fonts (proprietary);
     Assistant + system fonts are the fallback stack. */
  --font: "Takeaway Sans", "JET Sans", "Assistant", "Rubik", system-ui,
    -apple-system, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: auto; /* never 100% / 100vh — the document must be free to grow */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--content);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; /* native host owns the scroll */
}

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

input {
  font-family: inherit;
}

/* Reset default heading/paragraph margins so flex `gap` fully controls spacing
   (otherwise the banner headline/subtitle drift apart). */
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Elements below set display:flex/grid, which would otherwise beat the browser's
   default [hidden]{display:none}. Force hidden to win so search filtering (which
   toggles the `hidden` attribute on tiles/sections) actually hides them. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- layout */
.page {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.page__topline {
  height: 4px;
  width: 100%;
  background: var(--divider);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  padding: var(--page-pad) var(--page-pad) 24px;
}

/* ---------------------------------------------------------------- banner */
.banner {
  position: relative;
  /* Fixed 73px text region (Figma): headline pinned to the top, subtitle to the bottom, so the
     subtitle lands ~20px above the search bar. The illustration is positioned absolutely so it can
     overlap and bleed without adding to this height. */
  min-height: 73px;
  display: flex;
  flex-direction: column;
}

/* DOM order is [text, illustration]. With flexbox this puts the text on the
   reading-start side (right in RTL, left in LTR) and the artwork opposite,
   mirroring the design automatically per language. */
.banner__text {
  flex: 1; /* fill the 73px banner; the text group sits at the bottom so the subtitle lands ~20px
              above the search and the headline aligns with the badge, as in the design */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start; /* hug the reading-start edge (same side as titles) */
  text-align: start;
  /* No gap between headline and subtitle — the design relies on the lines' own line-height only. */
}

.banner__headline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--content);
  /* Hero "10% הנחה" line — Figma (node 2886:4642): JET Sans, weight 1000, line-height 90%, tabular
     lining numerals, ligatures off. The discount value/unit + title spans inherit these; only
     font-size differs. The brand font falls back to the base stack if the face fails to load. */
  font-family: "JET Sans Display", var(--font);
  font-weight: 1000;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
}

/* "10%": a big value with a smaller "%" unit, baseline-aligned (Figma: value 40px, unit 28px).
   direction: ltr keeps the value before the unit ("10%", not "%10") inside the RTL banner. */
.banner__discount {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
}

.banner__discount-value {
  font-size: 40px;
}

.banner__discount-unit {
  font-size: 28px;
}

.banner__title {
  font-size: 28px;
}

.banner__subtitle {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--content);
}

/* Single flattened illustration exported from Figma (hexagon "%" + confetti + dolly), positioned
   absolutely so it overlays and bleeds without adding to the banner height. */
.banner__art {
  position: absolute;
  top: -18px; /* bleeds up slightly so the confetti reaches the top edge, as in the design */
  left: 0; /* reading-end side in RTL (physical left); flipped for LTR below */
  width: 160px; /* the export's natural 1x size (481x336 @3x) — matches the Figma illustration */
  pointer-events: none;
  user-select: none;
}

/* Mirror the whole illustration in LTR so it sits opposite the copy and the confetti fans toward it. */
[dir="ltr"] .banner__art {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

.banner__art-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------- search bar */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--container);
  border: 1px solid var(--search-border);
  border-radius: var(--radius-pill);
}

.searchbar__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--content);
  font-size: 14px;
  line-height: 20px;
  text-align: start;
}

.searchbar__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* --------------------------------------------------------------- sections */
.sections {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--content);
  text-align: start;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-tiles);
}

/* ------------------------------------------------------------------ tile */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--container);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-tile);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tile__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logo-size);
  height: calc(var(--logo-size) + 1px);
  padding: 4px;
  background: var(--tile-logo-bg, #fff);
  border: 1px solid var(--logo-border);
  border-radius: var(--radius-circle);
  overflow: hidden;
}

/* "cover" tiles fill the circle edge-to-edge (full-bleed colored logos). */
.tile__logo-wrap--cover {
  padding: 0;
}

.tile__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile__logo-wrap--cover .tile__logo {
  object-fit: cover;
}

.tile__name {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  color: var(--content);
  word-break: break-word;
}

/* --------------------------------------------------------- empty results */
.empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--placeholder);
  font-size: 14px;
}

.empty[hidden] {
  display: none;
}

/* ------------------------------------------------------------- skeleton */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

.skeleton > *,
.skeleton__grid span {
  background: linear-gradient(90deg, #f0ece6 25%, #f7f4ef 37%, #f0ece6 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
}

.skeleton__banner {
  height: 88px;
}
.skeleton__search {
  height: 40px;
  border-radius: var(--radius-pill);
}
.skeleton__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-tiles);
}
.skeleton__grid span {
  height: 104px;
  border-radius: var(--radius-tile);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ---------------------------------------------- dev-only language toggle */
.lang-toggle {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--tile-border);
  border-radius: 999px;
  box-shadow: var(--shadow-tile);
}

.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--placeholder);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--content);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton > *,
  .skeleton__grid span {
    animation: none;
  }
}