/* "I will vote" image maker (/{locale}/pledge). dark.css is generated from this file too. */
.pledge-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 0 20px;border-bottom:1px solid var(--line)}
.pledge-hero>div:first-child{flex:1 1 520px;max-width:760px}
.pledge-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;margin:0 0 10px}
.pledge-lead{margin:0;font-size:16px;line-height:1.7;color:#3f3e39}
.pledge-note{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.pledge-note b{color:#3f3e39}
.pledge-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:28px;align-items:start;margin:22px 0}
.pledge-preview{position:sticky;top:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pledge-canvas-wrap{width:100%;max-width:620px;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px #0000002b;background:#ddd}
.pledge-canvas-wrap[data-size=story]{max-width:min(420px,100%)}
.pledge-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none}
.pledge-drag,.pledge-help{margin:0;font-size:12px;color:var(--muted);text-align:center}
.pledge-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.pledge-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:25px;background:#1f2a2c;color:#fff;font-size:16px;font-weight:800}
.pledge-primary:hover:not(:disabled){background:#c82e32;color:#fff}
.pledge-primary:disabled{opacity:.5}
.pledge-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:1px solid var(--line);border-radius:25px;background:#fff;font-size:15px;font-weight:700;cursor:pointer}
.pledge-secondary:hover{border-color:var(--ink)}
.pledge-controls{display:flex;flex-direction:column;gap:14px}
.pledge-controls fieldset{margin:0;padding:14px 16px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pledge-controls legend{padding:0 6px;font-size:14px;font-weight:800}
.pledge-chips,.pledge-swatches{display:flex;flex-wrap:wrap;gap:8px}
.pledge-group{margin:4px 0 6px;font-size:12px;font-weight:700;color:var(--muted)}.pledge-group~.pledge-group{margin-top:12px}
.pledge-chips label,.pledge-swatches label,.pledge-slogans label{position:relative;cursor:pointer}
.pledge-chips input,.pledge-swatches input,.pledge-slogans input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pledge-chips span,.pledge-swatches span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:21px;font-size:14px;background:#fbfaf6}
.pledge-chips input:checked+span,.pledge-swatches input:checked+span,.pledge-slogans input:checked+span{border-color:#1f2a2c;background:#1f2a2c;color:#fff}
.pledge-chips input:focus-visible+span,.pledge-swatches input:focus-visible+span,.pledge-slogans input:focus-visible+span{outline:3px solid #c82e32;outline-offset:2px}
.pledge-swatches i{width:18px;height:18px;border-radius:50%;border:1px solid #0003}
.swatch-flag i{background:linear-gradient(135deg,#f4ca2b 0 55%,#1b1b1b 55% 70%,#c82e32 70%)}
.swatch-white i{background:#fff}.swatch-black i{background:#141414}.swatch-night i{background:#1c272a}.swatch-paper i{background:#faf9f5}.swatch-sea i{background:#dfeff3}.swatch-red i{background:#c82e32}
.pledge-slogans{display:grid;gap:6px}
.pledge-slogans span{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;line-height:1.4;background:#fbfaf6}
.pledge-controls input[type=text],.pledge-controls select{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px;color:var(--ink)}
#pledge-custom{margin-top:8px}
.pledge-field{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:13px;font-weight:700}
.pledge-field:first-of-type{margin-top:4px}
.pledge-field input[type=range]{width:100%;accent-color:#c82e32;min-height:36px}
.pledge-photo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pledge-file{position:relative;overflow:hidden}.pledge-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pledge-link{min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.pledge-error{margin:0;padding:12px 14px;border-radius:10px;background:#fde8e8;color:#8b1f24;font-size:14px;line-height:1.6}
.pledge-counter{margin:8px 0 22px;padding:22px;border-radius:16px;background:#1f2a2c;color:#fff;text-align:center}
.pledge-counter h2{margin:0 0 6px;font-size:20px}
.pledge-total{margin:0 0 14px;font-size:22px;font-weight:800;color:#f4ca2b}
.pledge-counter .pledge-primary{background:#f4ca2b;color:#1b1b1b}
.pledge-counter .pledge-primary:hover:not(:disabled){background:#fff;color:#1b1b1b}
.pledge-counter .pledge-note{color:#c7d0d2;max-width:620px;margin-inline:auto}
/* Homepage invitation */
.pledge-home{margin-top:34px}
.pledge-home a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px;border-radius:16px;background:#f4ca2b;color:#1b1b1b;text-decoration:none;position:relative;overflow:hidden}
.pledge-home a:after{content:'';position:absolute;right:-40px;top:-30px;width:150px;height:150px;background:linear-gradient(135deg,transparent 0 40%,#1b1b1b 40% 55%,#c82e32 55% 72%,transparent 72%);opacity:.9}
.pledge-home svg{flex-shrink:0}
.pledge-home strong{display:block;font-size:22px}.pledge-home p{margin:4px 0 0;font-size:14px;line-height:1.5}
.pledge-home .pledge-go{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:#1b1b1b;color:#fff;font-weight:800;white-space:nowrap}
.pledge-home small{display:block;margin-top:6px;font-size:13px;font-weight:700;color:#5a4710}
@media(max-width:900px){
  /* Phones: the preview stays pinned to the top while the options scroll underneath. */
  .pledge-app{display:block;margin-top:12px}
  .pledge-preview{position:sticky;top:0;z-index:6;gap:8px;margin:0 -16px 14px;padding:10px 16px 12px;background:var(--paper);box-shadow:0 10px 18px -14px #0006}
  .pledge-canvas-wrap{max-width:min(440px,36svh);box-shadow:0 8px 20px #00000026}
  .pledge-canvas-wrap[data-size=story]{max-width:calc(36svh * .5625)}
  .pledge-buttons .pledge-primary,.pledge-buttons .pledge-secondary{min-height:44px;padding:0 18px;font-size:15px}
  .pledge-help{display:none}
}
@media(max-width:600px){
  .pledge-home a{grid-template-columns:1fr;gap:10px}
  .pledge-home svg{display:none}
  .pledge-home .pledge-go{justify-self:start}
}