/* ═══════════════════════════════════════════════════════════════
   ShowApp — Luma-inspired design system
   Light, airy, modern. Mesh gradients, pill buttons, soft shadows.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:       #f8f7f5;
  --white:    #ffffff;
  --surface:  #ffffff;
  --border:   rgba(0,0,0,.08);
  --border2:  rgba(0,0,0,.13);
  --ink:      #111111;
  --ink2:     #444444;
  --muted:    #888888;
  --muted2:   #bbbbbb;

  /* Gradient palette — warm purple→pink→peach like Luma */
  --g1: #a78bfa;   /* violet */
  --g2: #f472b6;   /* pink */
  --g3: #fb923c;   /* peach */
  --g4: #34d399;   /* mint */

  --grad: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #fb923c 100%);
  --grad-soft: linear-gradient(135deg, rgba(167,139,250,.12) 0%, rgba(244,114,182,.12) 50%, rgba(251,146,60,.12) 100%);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Mesh gradient blobs — Luma signature */
.mesh-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.mesh-bg::before {
  content: '';
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.18) 0%, transparent 70%);
  top: -200px; left: -150px;
}
.mesh-bg::after {
  content: '';
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,114,182,.14) 0%, transparent 70%);
  bottom: -150px; right: -100px;
}
.mesh-blob {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,146,60,.1) 0%, transparent 70%);
  top: 40%; left: 60%;
}

/* ── Layout ─────────────────────────────────────────────── */
.center-wrap {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 20px;
  width: 100%; max-width: 480px; margin: 0 auto;
}

/* ── Typography ─────────────────────────────────────────── */
.h1    { font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--ink); letter-spacing: -.5px; }
.h2    { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.h3    { font-size: 17px; font-weight: 600; color: var(--ink); }
.label { font-size: 12px; font-weight: 600; color: var(--ink2); letter-spacing: .02em; }
.small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mono  { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .06em; }

/* ── Brand / Logo ───────────────────────────────────────── */
.brand-top { text-align: center; margin-bottom: 32px; }

/* ── Logo — Luma-style Inter wordmark ── */
.logo {
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none; line-height: 1;
}
.logo-icon { display: none; }
.logo-text {
  display: flex; flex-direction: column; line-height: 1;
}
.logo-text .logo-name {
  font-family: 'Inter', sans-serif;
  font-size: 30px; font-weight: 900; letter-spacing: -1.5px;
  -webkit-text-fill-color: unset;
  background: none;
}
.logo-text .logo-name .logo-show { color: #1a1a1a; }
.logo-text .logo-name .logo-app  { color: #999999; }
.logo-text .logo-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: #bbb;
  -webkit-text-fill-color: #bbb; margin-top: 4px;
}
.tagline {
  font-size: 13px; color: var(--muted); margin-top: 10px;
  font-style: italic; font-weight: 400;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.card-header { margin-bottom: 24px; }

/* Gradient top stripe on card */
.card-accent::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  border-radius: var(--radius-pill); text-decoration: none;
  transition: all .18s ease; padding: 13px 28px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.btn-primary:hover { background: #222; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.btn-primary:active { transform: translateY(0); }

.btn-gradient {
  background: var(--grad); color: #fff;
  box-shadow: 0 2px 12px rgba(167,139,250,.4);
}
.btn-gradient:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(167,139,250,.5); }

.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--border2);
}
.btn-outline:hover { border-color: var(--ink); background: rgba(0,0,0,.02); }

.btn-ghost {
  background: rgba(0,0,0,.04); color: var(--ink2);
  border: none;
}
.btn-ghost:hover { background: rgba(0,0,0,.07); }

.btn-full  { width: 100%; }
.btn-sm    { padding: 8px 18px; font-size: 13px; }
.btn-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* ── Inputs ─────────────────────────────────────────────── */
.input {
  width: 100%;
  background: rgba(0,0,0,.03);
  border: 1.5px solid var(--border);
  color: var(--ink);
  padding: 13px 16px;
  font-size: 15px; border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400;
  outline: none; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; color-scheme: light;
  min-height: 50px; box-sizing: border-box;
}
/* Fix iOS datetime-local clipping */
input[type="datetime-local"].input {
  min-height: 50px;
  line-height: 1.4;
  padding-top: 14px;
  padding-bottom: 14px;
}
.input:focus {
  border-color: var(--g1);
  box-shadow: 0 0 0 3px rgba(167,139,250,.15);
  background: var(--white);
}
.input:hover:not(:focus) { border-color: var(--border2); }
.input::placeholder { color: var(--muted2); }

/* ── Form ───────────────────────────────────────────────── */
.form-stack  { display: flex; flex-direction: column; gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.error-text  { font-size: 12px; color: #ef4444; margin-top: 4px; }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint-text   { font-size: 13px; color: var(--muted); text-align: center; margin-top: 20px; line-height: 1.7; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert       { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 18px; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

/* ── Tags / Pills ───────────────────────────────────────── */
.tag       { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: .02em; }
.tag-live  { background: rgba(167,139,250,.12); color: #7c3aed; border: 1px solid rgba(167,139,250,.25); }
.tag-green { background: rgba(52,211,153,.12); color: #059669; border: 1px solid rgba(52,211,153,.25); }
.tag-gold  { background: rgba(251,191,36,.12); color: #d97706; border: 1px solid rgba(251,191,36,.25); }
.tag-muted { background: rgba(0,0,0,.05); color: var(--muted); border: 1px solid var(--border); }

/* ── Info box ───────────────────────────────────────────── */
.info-box {
  background: rgba(167,139,250,.06); border: 1px solid rgba(167,139,250,.2);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; color: var(--ink2); line-height: 1.6; margin-bottom: 16px;
}

/* ── Share / Link ───────────────────────────────────────── */
.link-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.03); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; width: 100%;
}
.link-text {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--ink2); flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.share-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 20px; width: 100%;
}
.share-btn {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; transition: all .18s; color: inherit;
  box-shadow: var(--shadow-sm);
}
.share-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.share-btn-wa   { border-color: rgba(37,211,102,.35); background: rgba(37,211,102,.04); }
.share-btn-wa:hover   { border-color: #25d366; background: rgba(37,211,102,.08); }
.share-btn-imsg { border-color: rgba(52,199,89,.35); background: rgba(52,199,89,.04); }
.share-btn-imsg:hover { border-color: #34c759; background: rgba(52,199,89,.08); }
.share-btn-mail { border-color: rgba(0,122,255,.25); background: rgba(0,122,255,.03); }
.share-btn-mail:hover { border-color: #007aff; background: rgba(0,122,255,.07); }
.share-btn-copy { border-color: var(--border2); }
.share-btn-copy:hover { border-color: var(--ink); background: rgba(0,0,0,.03); }
.share-icon       { font-size: 26px; line-height: 1; }
.share-icon-img   { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.share-label      { font-size: 11px; font-weight: 600; color: var(--ink2); letter-spacing: .01em; }

/* ── Choice cards ───────────────────────────────────────── */
.choice-card {
  cursor: pointer; background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 16px; transition: all .18s;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm);
}
.choice-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border2); }
.choice-yes { border-color: rgba(167,139,250,.3); }
.choice-yes:hover { border-color: var(--g1) !important; box-shadow: 0 4px 16px rgba(167,139,250,.15) !important; }
.choice-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-soft); border: 1.5px solid rgba(167,139,250,.2);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.choice-body  { flex: 1; min-width: 0; }
.choice-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.choice-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.choice-arrow { color: var(--muted2); font-size: 18px; flex-shrink: 0; transition: transform .18s, color .18s; }
.choice-card:hover .choice-arrow { transform: translateX(3px); color: var(--ink); }
.choice-yes:hover .choice-arrow  { color: var(--g1); }

/* ── Event info tile ────────────────────────────────────── */
.event-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: rgba(0,0,0,.03); border: 1px solid var(--border);
  margin-bottom: 8px;
}
.event-tile-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--white); box-shadow: var(--shadow-sm);
}
.event-tile-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.event-tile-value { font-size: 14px; font-weight: 500; color: var(--ink); }

/* ── Live dot ───────────────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px; background: #22c55e;
  border-radius: 50%; animation: pulse 1.5s infinite;
  flex-shrink: 0; display: inline-block;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

/* ── Gradient badge ─────────────────────────────────────── */
.grad-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 18px;
  font-size: 28px; box-shadow: 0 4px 20px rgba(167,139,250,.35);
}

/* ── Divider ────────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.anim-up  { animation: fadeUp .48s cubic-bezier(.22,1,.36,1) both; }
.d1 { animation-delay:.06s; } .d2 { animation-delay:.12s; }
.d3 { animation-delay:.18s; } .d4 { animation-delay:.24s; }
.d5 { animation-delay:.30s; }

/* ── Autocomplete override ──────────────────────────────── */
.pac-container {
  background: var(--white) !important; border: 1.5px solid var(--border) !important;
  border-top: none !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important;
  box-shadow: var(--shadow-md) !important; overflow: hidden !important;
}
.pac-item { padding: 10px 16px !important; color: var(--ink2) !important; border-top: 1px solid var(--border) !important; cursor: pointer !important; transition: background .12s !important; }
.pac-item:hover, .pac-item-selected { background: var(--bg) !important; }
.pac-item-query { color: var(--ink) !important; font-weight: 600 !important; }
.pac-matched    { color: var(--g1) !important; }
.pac-icon       { display: none !important; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .center-wrap { padding: 32px 16px; }
  .card { padding: 24px 18px; border-radius: var(--radius-md); }
  .h1   { font-size: 26px; }
  .share-grid { grid-template-columns: repeat(2,1fr); }
  .field-row  { grid-template-columns: 1fr; }
}