/* Public gift-card page.
 *
 * Loaded via {% block styles %}, which base.html puts AFTER style.css — so
 * everything here can lean on that file's :root tokens without a single
 * !important. The same arrangement groups.css uses.
 *
 * Deliberately small. The form furniture (.wform__*, .form-group, .btn--orange,
 * .page-hero) is all already in style.css and is shared with the contact and
 * group-booking forms, so a gift card that needed its own version of any of it
 * would be a third place for those to drift. What is genuinely new here is the
 * amount tiles, and little else.
 */

.gc-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

/* Two columns only where there is room for the intro to sit beside the form
 * without squeezing either. Below this the intro stacks ABOVE the form, which
 * is the right order: the three-year term and "it comes to you, not to them"
 * are what someone needs to read before they start typing. */
@media (min-width: 900px) {
  .gc-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.gc-facts {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.gc-facts li {
  padding: 0 0 0 1.6rem;
  margin-bottom: 0.85rem;
  position: relative;
  line-height: 1.55;
}

.gc-facts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-teal, #0f766e);
  font-weight: 700;
}

.gc-fineprint {
  font-size: 0.9rem;
  color: var(--clr-muted, #71717a);
  line-height: 1.6;
}

.gc-panel {
  border: 1px solid var(--clr-border, #e4e4e7);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}

/* The post-payment panel. Green because it reports a payment that succeeded —
 * and note the copy it contains never claims the email has ARRIVED, only that
 * it is on its way, because at this moment the webhook may not have landed. */
.gc-panel--good {
  border-color: var(--clr-teal, #0f766e);
  background: rgba(15, 118, 110, 0.08);
}

.gc-panel--good h2 {
  margin-top: 0;
}

.gc-cancelled {
  color: var(--clr-muted, #71717a);
  margin-bottom: 1.5rem;
}

/* ---- Amount tiles ------------------------------------------------------- */
/* Real radios, restyled — not divs with click handlers. Keyboard, screen
 * readers and a JavaScript-free browser all get a working amount picker,
 * which matters on the one form here that takes money. */
.gc-amounts {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.gc-amounts legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.gc-tier {
  flex: 1 1 7rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--clr-border, #e4e4e7);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* The radio itself is kept in the layout and made invisible rather than
 * display:none — a hidden input cannot be focused, and the focus ring below is
 * what tells a keyboard user which tile they are on. */
.gc-tier input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.gc-tier:hover {
  border-color: var(--clr-teal, #0f766e);
}

.gc-tier:has(input:checked) {
  border-color: var(--clr-teal, #0f766e);
  background: rgba(15, 118, 110, 0.1);
}

.gc-tier:has(input:focus-visible) {
  outline: 3px solid var(--clr-orange, #ea580c);
  outline-offset: 2px;
}

.gc-tier__amount {
  font-weight: 600;
  font-size: 1.05rem;
}

.gc-tier--other .gc-tier__amount {
  font-size: 0.95rem;
  font-weight: 500;
}

.gc-other-label {
  display: block;
  margin-bottom: 0.35rem;
}