/* Path: public/assets/shop-share.css
   Shop share landing page (rendered by the shopSharePage function behind the
   /shop/** rewrite). Kept as a static file so the page can run under a strict
   `style-src 'self'` CSP — no inline styles. Palette mirrors assets/styles.css. */

:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #183025;
  --muted: #60746b;
  --line: #e3eadf;
  --primary: #1fa463;
  --primary-dark: #16814d;
  --primary-soft: #e8f7ef;
  /* Text-safe shades (WCAG AA 4.5:1). Measured 2026-09-14: white on
     --primary is only 3.21:1 and --accent on white 2.20:1, so neither may
     carry text. --primary-dark with white = 4.90:1, --primary-deep = 7.12:1. */
  --primary-deep: #11653c;
  --accent: #f59a23;
  --accent-text: #a25f07;
  --shadow: 0 14px 34px rgba(25, 55, 35, 0.1);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px 16px 12px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai",
    "Noto Sans", Arial, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.share-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.shop-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
}

h1 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  line-height: 1.35;
}

h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}

.shop-rating {
  margin: 0 0 8px;
  color: var(--accent-text); /* 5.03:1 on white (--accent was 2.20:1) */
  font-weight: 700;
}

.shop-description {
  margin: 0 0 10px;
  color: var(--text);
}

/* Shop closed its รับออเดอร์ toggle — link still works, expectation set. */
.shop-paused {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff2df;
  color: #975a1a; /* 5.01:1 on #fff2df (#a3611c was 4.44:1) */
  font-weight: 600;
  font-size: 0.92rem;
}

.shop-meta {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.cta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
}

/* White text needs the darker green: 4.90:1 here, 3.21:1 on --primary. */
.btn-primary {
  background: var(--primary-dark);
  color: #ffffff;
}

.btn-primary:active {
  background: var(--primary-deep); /* pressed: still darker, 7.12:1 */
}

.btn-store {
  background: var(--primary-soft);
  color: var(--primary-deep); /* 6.43:1 on --primary-soft (was 4.43:1) */
  border: 1px solid var(--line);
}

.cta-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.share-footer {
  margin-top: 18px;
  padding: 8px 0 16px;
  text-align: center;
  font-size: 0.85rem;
}

.share-footer a {
  color: var(--muted);
  text-decoration: none;
}

/* ---- /order/{area} landing (public/order/*.html) ------------------------
   Static page that reuses the card shell above. Additive classes only — the
   shop share page never uses them. Here the store buttons are the PRIMARY
   action (most visitors don't have the app yet) and "open app" is secondary,
   the reverse of the shop share page. */

.order-hero {
  text-align: center;
}

.order-logo {
  display: block;
  width: 190px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 12px;
}

.order-lead {
  margin: 0 0 16px;
  color: var(--muted);
}

.order-facts {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--primary-soft);
}

.order-facts div {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.92rem;
}

.order-facts dt {
  flex: 0 0 5em;
  margin: 0;
  color: var(--muted);
}

.order-facts dd {
  margin: 0;
  font-weight: 600;
}

.btn-secondary {
  background: var(--surface);
  color: var(--primary-dark);
  border: 1px solid var(--primary);
}

.order-open-app {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.order-footer-note {
  margin: 0 0 6px;
  color: var(--muted);
}