/* Shared stylesheet for registration-blood-donation.html and
  thank-you-blood-donation.html — keeps both pages visually identical.
  Edit colors/spacing here once and both pages pick it up. */


:root {
 --red: #d81010;
 --red-dark: #b30d0d;
 --red-50: #fef2f2;
 --red-100: #fee2e2;
 --ink: #1a1a1a;
 --muted: #6b7280;
 --border: #fef2f2;
 --radius-lg: 20px;
 --radius-md: 14px;
 --radius-sm: 10px;
 --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08);
}
* { box-sizing: border-box; }
body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background: #fffbfb;
 color: var(--ink);
 -webkit-font-smoothing: antialiased;
}


/* ---------- Page shell ---------- */
.page {
 display: flex;
 justify-content: center;
 padding: 16px;
 background:
   radial-gradient(560px circle at 20% 0%, rgba(216, 16, 16, 0.05), transparent 60%),
   radial-gradient(480px circle at 100% 30%, rgba(216, 16, 16, 0.04), transparent 55%);
}
/* Normal page: scrolls, content starts near the top (registration page) */
.page--scroll { padding-top: 36px; }
/* Single-screen page: card is vertically centered and fits on one screen
  when there's room, but if content is taller than the viewport the whole
  PAGE scrolls (not a scrollbar trapped inside the card) — thank-you page */
.page--fit { min-height: 100vh; align-items: center; }


.card {
 position: relative;
 width: 100%;
 max-width: 560px;
 overflow: hidden;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-card);
 padding: clamp(16px, 3vh, 36px) 24px clamp(14px, 2.5vh, 28px);
 text-align: center;
}
.card::before {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
 background: linear-gradient(90deg, var(--red), #ff6b6b);
}


.eyebrow {
 display: inline-block;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--red);
 background: var(--red-50);
 border: 1px solid var(--red-100);
 padding: 5px 12px;
 border-radius: 999px;
 margin-bottom: clamp(8px, 1.5vh, 16px);
}


/* Success checkmark (thank-you page only) */
.check {
 width: clamp(40px, 6vh, 60px);
 height: clamp(40px, 6vh, 60px);
 margin: 0 auto clamp(10px, 1.5vh, 18px);
 border-radius: 50%;
 background: #16a34a;
 display: flex;
 align-items: center;
 justify-content: center;
}
.check svg { width: 45%; height: 45%; }


h1 {
 font-size: clamp(18px, 2.6vh, 23px);
 letter-spacing: -0.01em;
 margin: 0 0 clamp(6px, 1vh, 10px);
 color: var(--ink);
}
.subtitle {
 font-size: 14.5px;
 color: var(--muted);
 line-height: 1.5;
 margin: 0 0 clamp(12px, 2vh, 26px);
}


/* Highlighted callout, e.g. "check your phone" notice
  (thank-you-blood-donation-v2.html) */
.notice {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 text-align: left;
 background: var(--red-50);
 border: 1px solid var(--red-100);
 border-radius: var(--radius-md);
 padding: clamp(12px, 2vh, 16px);
 margin: 0 0 clamp(14px, 2.5vh, 26px);
}
.notice-icon {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--red);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.notice-icon svg { width: 16px; height: 16px; }
.notice p {
 margin: 0;
 padding-top: 4px;
 font-size: 13.5px;
 color: #374151;
 line-height: 1.5;
}
.notice strong { color: var(--ink); }


/* Hero flyer image */
.flyer {
 width: 100%;
 border-radius: var(--radius-md);
 display: block;
 margin: 0 0 clamp(10px, 2vh, 22px);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* On single-screen pages, cap its height instead of letting it dictate
  the page's height (thank-you page) */
.flyer--fit {
 max-height: 26vh;
 width: auto;
 max-width: 100%;
 margin-left: auto;
 margin-right: auto;
}


.trust-row {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 6px 18px;
 margin: 0 0 clamp(10px, 2vh, 24px);
 padding: 0;
 list-style: none;
}
.trust-row li {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 12.5px;
 color: #374151;
 font-weight: 500;
}
.trust-row svg { width: 14px; height: 14px; flex-shrink: 0; }


.details {
 text-align: left;
 background: var(--red-50);
 border: 1px solid var(--red-100);
 border-radius: var(--radius-md);
 padding: clamp(10px, 2vh, 16px);
 margin: 0 0 clamp(14px, 2.5vh, 28px);
}
.detail-row {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 font-size: 13.5px;
 color: #374151;
 line-height: 1.4;
}
.detail-row + .detail-row { margin-top: clamp(6px, 1.5vh, 12px); }
.detail-icon {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: #fff;
 border: 1px solid var(--red-100);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.detail-icon svg { width: 14px; height: 14px; }
.detail-row span.text { padding-top: 5px; }


/* Collapsible "View Camp Details" disclosure — keeps venue + instructions
  out of the way until the visitor asks for them, so the Share button is
  reachable without scrolling (thank-you-blood-donation-v2.html) */
.more-details {
 border-top: 1px dashed var(--border);
 padding-top: clamp(10px, 2vh, 18px);
 margin-top: clamp(2px, 0.5vh, 6px);
 text-align: left;
}
.more-details summary {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 width: fit-content;
 margin: 0 auto;
 cursor: pointer;
 list-style: none;
 font-size: 12.5px;
 font-weight: 700;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 color: var(--red);
 background: var(--red-50);
 border: 1px solid var(--red-100);
 border-radius: 999px;
 padding: 8px 16px;
 transition: background 0.15s ease, border-color 0.15s ease;
}
.more-details summary:hover { background: var(--red-100); border-color: var(--red); }
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::marker { content: ""; }
.more-details .chevron { width: 14px; height: 14px; transition: transform 0.2s ease; }
.more-details[open] .chevron { transform: rotate(180deg); }
.more-details-body { padding-top: clamp(12px, 2vh, 18px); }


/* Highlighted venue variant of .details, with a "Get Directions" button
  (thank-you-blood-donation-v2.html) */
.details--venue {
 position: relative;
 border-color: var(--red-100);
 border-left: 4px solid var(--red);
 box-shadow: 0 6px 20px rgba(216, 16, 16, 0.12);
}
.details--venue .eyebrow {
 margin-bottom: clamp(8px, 1.5vh, 12px);
}
.directions-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-top: clamp(10px, 2vh, 14px);
 padding: 9px 16px;
 border-radius: 999px;
 background: var(--red);
 color: #fff;
 font-size: 12.5px;
 font-weight: 700;
 text-decoration: none;
 box-shadow: 0 4px 14px rgba(216, 16, 16, 0.3);
 transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.directions-link:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 18px rgba(216, 16, 16, 0.4);
}
.directions-link svg { width: 13px; height: 13px; stroke: #fff; }


/* Pre-donation checklist (thank-you-blood-donation-v2.html) */
.instructions { margin: 0 0 clamp(14px, 2.5vh, 28px); text-align: left; }
.instructions .eyebrow { display: block; text-align: center; margin-left: auto; margin-right: auto; width: fit-content; }
.checklist {
 list-style: none;
 margin: clamp(10px, 2vh, 14px) 0 0;
 padding: 0;
}
.checklist li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 13.5px;
 color: #374151;
 line-height: 1.4;
}
.checklist li + li { margin-top: clamp(6px, 1.5vh, 10px); }
.checklist svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }


/* ---------- Registration form section (registration page only) ---------- */
.form-section {
 border-top: 1px dashed var(--border);
 padding-top: clamp(12px, 2.5vh, 26px);
 text-align: left;
}
.form-section h2 { font-size: 16px; margin: 0 0 6px; text-align: center; }
.form-section .form-note {
 font-size: 12.5px;
 color: var(--muted);
 text-align: center;
 margin: 0 0 clamp(10px, 2vh, 18px);
}
.form-wrap {
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 4px;
 background: #fafafa;
}
.form-wrap iframe { width: 100%; border: none; border-radius: 10px; display: block; }


/* ---------- Share section + popup (thank-you page only) ---------- */
.share-section {
 border-top: 1px dashed var(--border);
 padding-top: clamp(12px, 2.5vh, 26px);
}
.share-section h2 { font-size: 16px; margin: 0 0 6px; }
.share-section p {
 font-size: 13.5px;
 color: var(--muted);
 line-height: 1.5;
 margin: 0 0 clamp(10px, 2vh, 18px);
}
.share-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 height: clamp(44px, 6.5vh, 52px);
 border-radius: var(--radius-md);
 border: none;
 cursor: pointer;
 background: var(--red);
 color: #fff;
 font-size: 15px;
 font-weight: 600;
 font-family: inherit;
 box-shadow: 0 6px 18px rgba(216, 16, 16, 0.3);
 transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.share-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(216, 16, 16, 0.4); }
.share-cta svg { width: 20px; height: 20px; flex-shrink: 0; }


.share-backdrop {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 align-items: center;
 justify-content: center;
 padding: 20px;
}
.share-backdrop.open { display: flex; }
.share-panel {
 width: 100%;
 max-width: 360px;
 background: #fff;
 border-radius: 18px;
 padding: 20px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.share-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 14px;
}
.share-head h3 { margin: 0; font-size: 16px; }
.close-btn {
 background: none;
 border: none;
 font-size: 20px;
 line-height: 1;
 cursor: pointer;
 color: var(--muted);
 padding: 4px;
}
.icon-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin-bottom: 14px;
}
.icon-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 6px 2px;
 border-radius: var(--radius-sm);
 transition: background 0.15s ease;
}
.icon-btn:hover { background: #f3f4f6; }
.icon-btn span { font-size: 11px; color: #374151; }
.icon-circle {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.icon-circle svg { width: 20px; height: 20px; fill: #fff; }
.native-btn {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: var(--ink);
 color: #fff;
 border: none;
 border-radius: var(--radius-sm);
 padding: 11px;
 font-size: 13.5px;
 font-weight: 600;
 cursor: pointer;
 font-family: inherit;
}
.tip {
 font-size: 11px;
 color: var(--muted);
 line-height: 1.5;
 margin: 12px 0 0;
}


.limit-modal p { font-size: 13.5px; color: #374151; line-height: 1.55; margin: 0 0 16px; }
.limit-actions { display: flex; gap: 8px; }
.limit-actions button {
 flex: 1;
 border: none;
 border-radius: var(--radius-sm);
 padding: 10px;
 font-size: 12.5px;
 font-weight: 600;
 cursor: pointer;
 font-family: inherit;
}
.limit-actions .primary { background: var(--red); color: #fff; }
.limit-actions .secondary { background: #f3f4f6; color: var(--ink); }


/* ---------- Footer (registration page only — thank-you page removed its footer) ---------- */
.site-footer {
 margin-top: 32px;
 padding: 24px 16px 40px;
 text-align: center;
}
.site-footer .org { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.site-footer .addr {
 font-size: 12px;
 color: var(--muted);
 line-height: 1.6;
 max-width: 420px;
 margin: 0 auto;
}
.site-footer .tagline {
 font-size: 11.5px;
 color: var(--red);
 font-weight: 600;
 margin-top: 10px;
}