/* The embeddable gift-card form. The atelier's palette, as the mails use it. */
:root {
  --green: #2E6B5E;
  --green-dark: #1F4E45;
  --paper: #FFFFFF;
  --sand: #F4F1E8;
  --line: #E3DDCF;
  --ink: #33352F;
  --muted: #8A8A82;
  --error: #B3261E;
  --focus: #BFE0D6;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.gc { max-width: 640px; margin: 0 auto; padding: 16px; }

.gc-title {
  margin: 0 0 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  color: var(--green-dark);
}

.gc-lead { margin: 0 0 20px; color: var(--ink); }

.gc-field { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }

.gc-field legend, .gc-label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-weight: bold;
  color: var(--green-dark);
}

.gc-label { margin-top: 10px; }

.gc-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.gc-input:focus, .gc-button:focus-visible, .gc-chip:focus-within, .gc-template:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.gc-input[aria-invalid="true"] { border-color: var(--error); }

.gc-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.gc-hint:empty { display: none; }

.gc-error { margin: 4px 0 0; font-size: 14px; color: var(--error); }
.gc-error:empty { display: none; }
.gc-error-form { margin: 0 0 12px; }

.gc-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.gc-template {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--sand);
  cursor: pointer;
}

.gc-template img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gc-template span { display: block; padding: 6px 2px 2px; font-size: 14px; text-align: center; }
.gc-template:has(input:checked) { border-color: var(--green); background: #E8F1EE; }

.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.gc-chip {
  position: relative;
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--sand);
  cursor: pointer;
  font-weight: bold;
}

.gc-chip:has(input:checked) { border-color: var(--green); background: var(--green); color: #FFFFFF; }

/* Visually hidden radio inside a clickable label: still focusable and announced. */
.gc-template input, .gc-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.gc-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.gc-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.gc-check a { color: var(--green); }

.gc-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gc-captcha { margin: 0 0 14px; min-height: 0; }

.gc-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.gc-button {
  flex: 1 1 200px;
  border: 0;
  border-radius: 8px;
  padding: 14px 20px;
  background: var(--green);
  color: #FFFFFF;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.gc-button:hover { background: var(--green-dark); }
.gc-button[disabled] { opacity: 0.6; cursor: progress; }

.gc-button-secondary {
  background: var(--paper);
  color: var(--green);
  border: 2px solid var(--green);
}

.gc-button-secondary:hover { background: var(--sand); }

.gc-preview { margin: 20px 0 0; }
.gc-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.gc-preview figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }

.gc-done p { margin: 0 0 12px; }