/* Shared look for the small pages (ticket, waiver, thank-you, ride share, gate, admin): the festival site's
   Cocotte headings, Poppins text and forest-green buttons. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap');
@font-face { font-family: 'Cocotte'; src: url('/fonts/cocotte.woff2') format('woff2'); font-display: swap; }
:root {
    --cream: #f6f2e7;
    --card: #fbf8f1;
    --ink: #4a2f16;
    --muted: #6b5136;
    --border: #efe7d4;
    --amber: #2f5a46; /* buttons and highlights: the festival's forest green */
    --amber-hover: #24473a;
    --blush: #f6e6df;
    --terracotta: #8f3723;
    --green: #40745a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    font-family: 'Poppins', 'Avenir Next', Avenir, Helvetica, Arial, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    padding: 32px 16px;
}
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(74, 47, 22, 0.08);
    padding: 40px 28px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.eyebrow { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 10px; }
h1, h2 { font-family: 'Cocotte', Georgia, serif; font-weight: 400; }
h1 { font-size: 2.1rem; line-height: 1.2; margin-bottom: 14px; }
.emblem { display: block; width: 130px; height: auto; margin: 0 auto 14px; }
p { color: var(--muted); }
p + p { margin-top: 12px; }
.btn {
    display: inline-block;
    background: var(--amber);
    color: #fff;
    border: 0;
    border-radius: 9999px;
    padding: 14px 30px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(47, 90, 70, 0.25);
}
.btn:hover { background: var(--amber-hover); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.btn-outline:hover { background: rgba(74, 47, 22, 0.06); }
input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
}
input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.test-badge {
    display: inline-block;
    background: var(--blush);
    color: var(--terracotta);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 14px;
}