@font-face {
  font-family: "MiSans Thai";
  src: url("/assets/fonts/MiSansThai-Regular.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MiSans Thai";
  src: url("/assets/fonts/MiSansThai-SemiBold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --coral: #ff8a80;
  --coral-strong: #ff5252;
  --sky: #e6f4fe;
  --ink: #1f2933;
  --muted: #5b6672;
  --line: #e3e8ee;
  --max-width: 1040px;
}

/* The hidden attribute must win over a class's own display, or a hidden
   badge (e.g. the shop page's "not open for orders yet") shows anyway. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "MiSans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #ffffff;
}

a {
  color: var(--coral);
}

header {
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links a {
  margin-left: 24px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
}

.nav-links a:hover {
  color: var(--ink);
}

.hero {
  background: linear-gradient(180deg, var(--sky) 0%, #ffffff 100%);
  padding: 64px 24px 56px;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.hero-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: block;
}

.hero h1 {
  font-size: clamp(28px, 6vw, 42px);
  overflow-wrap: anywhere;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.hero p.lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 28px;
}

.hero p.lead-big {
  font-size: 23px;
  max-width: 700px;
}

/* Thai has no spaces between words, so the browser can break a line in the
   middle of one; each phrase stays on one line and lines break between them. */
.phrase {
  display: inline-block;
}

.hero p.shop-offer {
  white-space: pre-line;
  font-size: 19px;
  font-weight: 700;
  color: var(--coral-strong);
  margin: -12px auto 28px;
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.shop-photo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.download-block {
  margin-top: 28px;
}

.download-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}

@media (max-width: 600px) {
  .nav {
    padding: 16px;
    gap: 12px;
  }

  .nav-links a {
    margin-left: 14px;
    font-size: 14px;
  }

  .hero {
    padding: 32px 16px 40px;
  }

  .hero p.lead {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .hero p.lead-big {
    font-size: 18px;
  }

  .shop-photo {
    max-width: 200px;
    border-radius: 14px;
  }

  /* Stacked buttons share one width instead of each hugging its label. */
  .cta-row .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.btn-primary {
  background: var(--coral);
  color: var(--ink);
}

.btn-secondary {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px;
}

section + section {
  margin-top: 56px;
}

h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.section-sub {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.card > .badge {
  align-self: flex-start;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 0 auto 12px;
  display: block;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* Pushed to the bottom of the card, so the store badges line up across
   cards whatever the length of the text above. */
.card-links {
  display: flex;
  gap: 10px 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}




.badge {
  display: inline-block;
  background: var(--coral);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.feature-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
}

.feature-list li {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
}

.feature-list li::marker {
  color: var(--coral);
}

.feature-list li:last-child {
  margin-bottom: 0;
}

footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px;
  margin-top: 40px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
}

.footer-links a {
  margin-left: 18px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--ink);
}

.policy h1 {
  font-size: 34px;
  margin-bottom: 4px;
}

.policy .updated {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 40px;
}

.policy h2 {
  font-size: 21px;
  margin-top: 40px;
}

.policy p, .policy li {
  color: var(--muted);
  font-size: 15.5px;
}

.policy ul {
  padding-left: 22px;
}

.policy strong {
  color: var(--ink);
}

/* Read-only shop menu on the shop page (shop.html). */
.menu {
  max-width: 720px;
  padding-top: 8px;
}

.menu-title {
  margin: 0 0 4px;
}

.menu-section-title {
  font-size: 19px;
  margin: 28px 0 8px;
}

.dish {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.dish-sold-out {
  opacity: 0.5;
}

.dish-photo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 12px;
}

.dish-info {
  flex: 1;
  min-width: 0;
}

.dish-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dish-description {
  color: var(--muted);
  font-size: 14px;
}

.dish-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.dish-price {
  color: var(--muted);
}

.dish-tag {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  padding: 1px 8px;
  border-radius: 8px;
}

.dish-tag-recommended {
  background: var(--coral);
}

.dish-tag-best {
  background: #99acff;
}

.menu-note {
  margin: 24px 0 0;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 600px) {
  .menu {
    padding: 8px 16px 32px;
  }
}


/* Claim page (claim.html): the waiting count, the big shop code and the
   three steps, for an owner reading them off their phone at the stall. */
.claim-waiting {
  font-size: 20px;
  font-weight: 700;
  color: var(--coral-strong);
  margin: -12px auto 24px;
}

.claim-code {
  margin: 0 auto 24px;
}

.claim-code-label {
  color: var(--muted);
  font-size: 15px;
}

.claim-code-value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.claim-steps {
  text-align: left;
  max-width: 320px;
  margin: 28px auto 0;
  padding-left: 22px;
  font-size: 17px;
}

/* A shop that hasn't joined yet, on the shop page (shop.html). */
.shop-not-joined {
  display: inline-block;
  font-weight: 700;
  color: var(--muted);
  background: var(--sky);
  padding: 4px 12px;
  border-radius: 8px;
  margin: -8px auto 24px;
}

/* The official store badges (Apple's and Google's artwork, unaltered, in
   Thai). Both are drawn at the same width, so they line up when stacked
   (the artwork can't be stretched, so their heights differ by a few px).
   Google's PNG carries clear space above and below its artwork (29px of
   250 each side), trimmed here with a negative margin. */
.store-badge {
  display: inline-block;
  line-height: 0;
}

.store-badge img {
  display: block;
  width: 152px;
  height: auto;
}

.store-badge-play img {
  margin: -6.8px 0;
}

/* The "order on the web" button next to the badges: same width as a badge, a
   height between the two badges' (45px and 51px). Wraps onto its own row
   under them. */
.web-order-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 48px;
  padding: 0 8px;
  white-space: nowrap;
}

/* The customer card has the web button under its badges, so the merchant and
   rider cards reserve an empty row of the same size: all three cards' store
   badges then sit on the same line. Only while the cards share a row: two
   per row from 588px (merchant is next to customer), three from 868px. */
@media (min-width: 588px) {
  .reserve-web-row::after {
    content: "";
    width: 152px;
    height: 48px;
  }
}

@media (min-width: 868px) {
  .reserve-web-row-3col::after {
    content: "";
    width: 152px;
    height: 48px;
  }
}