/* =====================================================================
   Donate page — replica do donate/page.tsx (Next.js → HTML/CSS estático)
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #232323;
  background: #fff;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, body *:not(em):not(i):not(address):not(cite):not(dfn) {
  font-style: normal;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- HEADER ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
}
.site-header .back-btn {
  position: absolute;
  left: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232323;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.logo-svg { display: block; }

/* ---------- LAYOUT ---------- */
.donate-main { min-height: 100vh; background: #fff; }
.donate-container {
  max-width: 512px;
  margin: 0 auto;
  padding: 24px 16px 144px;
}

/* ---------- TITLES ---------- */
.campaign-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  text-align: center;
}
.remaining-line {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
}
.remaining-line .remaining-amt { color: #012D19; }
.irs-line {
  font-size: 14px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
.section-title-sm {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
}

/* ---------- PRESET GRID ---------- */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.preset-btn {
  position: relative;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #232323;
  padding: 12px 4px;
  min-height: 64px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.preset-btn:hover { border-color: #012D19; }
.preset-btn.is-selected {
  background: #012D19;
  border-color: #012D19;
  color: #fff;
}
.preset-btn .amt {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}
.preset-btn .suggested {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #4A9D44;
}
.preset-btn.is-selected .suggested { color: #ccf88e; }

/* ---------- TOGGLE: One-time / Monthly ---------- */
.toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ececec;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 14px;
}
.toggle-btn {
  border: 0;
  background: transparent;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.toggle-btn.active {
  background: #012D19;
  color: #acf86c;
}
.heart-pulse {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: heartbeat 1.3s ease-in-out infinite;
}
.heart-pulse svg { width: 100%; height: 100%; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.4); }
  50%      { transform: scale(0.92); }
  75%      { transform: scale(1.2); }
}

/* ---------- CTA monthly impact ---------- */
.cta-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 18px;
}
.cta-text {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  flex: 0 1 auto;
  max-width: 280px;
  font-weight: 500;
  margin: 0;
  /* sweep verde animado pelo texto */
  background: linear-gradient(
    100deg,
    #1a1a1a 0%,
    #1a1a1a 38%,
    #4ade80 50%,
    #1a1a1a 62%,
    #1a1a1a 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: greenSweep 2.8s linear infinite;
}
@keyframes greenSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.cta-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -4px;
  animation: arrowFloat 2s ease-in-out infinite;
}
@keyframes arrowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---------- DONOR NOTIFICATION ---------- */
.donor-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 20px;
  transition: opacity .35s ease;
}
.donor-toast .info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #232323;
}
.donor-toast .close {
  color: #999;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}
.donor-toast .close:hover { color: #232323; }
.donor-toast.is-hidden { display: none; }

/* ---------- TIP SECTION ---------- */
.tip-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #6f6f6f;
  margin: 0 0 20px;
}
.tip-desc .platform { text-decoration: underline; cursor: pointer; }

.tip-pill-wrap { text-align: center; margin-bottom: 16px; }
.tip-pill {
  display: inline-block;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #232323;
}

.tip-slider-wrap {
  position: relative;
  height: 24px;
  margin-bottom: 12px;
}
.tip-slider-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 2px dashed #ccc;
}
.tip-slider-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 2px dashed #012D19;
  pointer-events: none;
}
.tip-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: transparent;
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0; right: 0;
  z-index: 2;
  margin: 0;
}
.tip-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #012D19;
  cursor: pointer;
  border: none;
}
.tip-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #012D19;
  cursor: pointer;
  border: none;
}

.custom-tip-row { text-align: center; margin-bottom: 24px; }
.custom-tip-toggle {
  font-size: 14px;
  color: #232323;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.custom-tip-input {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #232323;
  outline: 0;
  margin-top: 12px;
}
.custom-tip-input:focus { border-color: #012D19; }
.custom-tip-input::placeholder { color: #bbb; }

.thanks-banner {
  background: #e8fcd8;
  border-radius: 12px;
  padding: 16px 24px;
  text-align: center;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  color: #012D19;
}

/* ---------- ANONYMOUS CHECKBOX ---------- */
.anon-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}
.anon-row .box {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.anon-row .checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid #888;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anon-row.is-checked .checkbox { border-color: #012D19; }
.anon-row .label {
  font-size: 14px;
  color: #232323;
  line-height: 1.4;
}
.anon-row .info-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #999;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ---------- SUMMARY ---------- */
.summary { margin-bottom: 24px; }
.summary .title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}
.summary .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #232323;
  margin-bottom: 8px;
}
.summary .row.total {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0;
}
.summary hr {
  border: 0;
  border-top: 1px solid #d8d8d8;
  margin: 4px 0 12px;
}

/* ---------- PRIMARY CTA ---------- */
.cta-primary {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  background: #ccf88e;
  color: #012D19;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  margin-bottom: 16px;
  transition: filter .15s;
}
.cta-primary:hover { filter: brightness(.95); }

.legal-text {
  font-size: 12px;
  color: #6f6f6f;
  line-height: 1.6;
  margin: 0 0 24px;
}
.legal-text span { text-decoration: underline; cursor: pointer; }

/* ---------- GUARANTEE ---------- */
.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}
.guarantee .icon { flex-shrink: 0; }
.guarantee .title {
  font-size: 14px;
  font-weight: 700;
  color: #232323;
  margin: 0 0 4px;
}
.guarantee .desc {
  font-size: 14px;
  color: #6f6f6f;
  line-height: 1.55;
  margin: 0;
}
.guarantee .desc span { text-decoration: underline; cursor: pointer; }

/* ---------- PAYMENT MODAL (popup central com backdrop escuro) ---------- */
body.no-scroll { overflow: hidden; }

.payment-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.payment-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 501;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.payment-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.payment-modal-inner {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  -webkit-overflow-scrolling: touch;
  transform: translateY(20px);
  transition: transform .25s ease;
}
.payment-modal.is-open .payment-modal-inner {
  transform: translateY(0);
}
.payment-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #232323;
  margin: 0 0 20px;
  text-align: center;
  padding-right: 32px;
}
.payment-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #232323;
  border-radius: 50%;
  transition: background-color .15s;
}
.payment-close:hover { background: #f5f5f5; }

@media (max-width: 480px) {
  .payment-modal { padding: 0; align-items: flex-end; }
  .payment-modal-inner {
    max-width: 100%;
    max-height: 95vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 24px 20px 28px;
  }
}

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.method-btn {
  height: 88px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: box-shadow .15s, border-color .15s;
  padding: 0;
}
.method-btn img {
  height: 56px;
  width: auto;
  user-select: none;
  pointer-events: none;
}
.method-btn.is-selected {
  border: 2px solid #012D19;
  box-shadow: 0 0 0 3px rgba(1, 45, 25, 0.15);
}

.form-fields { display: flex; flex-direction: column; gap: 12px; }
.field-input {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: #232323;
  outline: 0;
  background: #fff;
  transition: border-color .15s;
}
.field-input:focus { border-color: #012D19; }
.field-input::placeholder { color: #bbb; }

.phone-field {
  display: flex;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s;
}
.phone-field:focus-within { border-color: #012D19; }
.phone-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
  border-right: 1px solid #d8d8d8;
  font-size: 14px;
  color: #6f6f6f;
  user-select: none;
}
.phone-prefix .pt { font-weight: 500; }
.phone-field input {
  flex: 1;
  border: 0;
  padding: 14px 16px;
  font-size: 14px;
  color: #232323;
  outline: 0;
  background: transparent;
}
.phone-field input::placeholder { color: #bbb; }

.error-msg {
  color: #e23434;
  font-size: 14px;
  margin: 12px 0 0;
}

.cta-dark {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  background: #012D19;
  color: #ccf88e;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity .15s;
}
.cta-dark:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- COOUD EMBED (step-2) ---------- */
.payment-step-2 { margin-top: 4px; }
.cooud-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin-bottom: 10px;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cooud-back-btn:hover { color: #012D19; }
.cooud-step-summary {
  font-size: 14px;
  color: #555;
  margin: 0 0 14px;
}
.cooud-step-summary strong { color: #111; font-weight: 700; }
.cooud-payment-element {
  min-height: 220px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

/* ---------- PROVISÓRIO: iframe embed checkout.cooud.com ---------- */
.payment-modal.is-embed-mode .payment-modal-inner {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}
.payment-modal.is-embed-mode .payment-modal-title,
.payment-modal.is-embed-mode > .payment-modal-inner > .legal-text { display: none; }
.payment-modal.is-embed-mode .payment-close {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  z-index: 2;
}
.payment-step-embed {
  width: 100%;
  height: 78vh;
  min-height: 520px;
  background: #fff;
}
#cooud-checkout-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: #fff;
}
@media (max-width: 480px) {
  .payment-step-embed { height: calc(100vh - 80px); min-height: 0; }
  .payment-modal.is-embed-mode .payment-modal-inner { border-radius: 16px 16px 0 0; }
  #cooud-checkout-iframe { border-radius: 16px 16px 0 0; }
}

/* ---------- STICKY BOTTOM CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  padding: 12px 16px 16px;
  transition: transform .3s ease;
  transform: translateY(120%);
  border-top: 1px solid #ebebeb;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .cta-primary { margin: 0; max-width: 512px; margin: 0 auto; display: block; }

/* ---------- LOADING OVERLAY ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.loading-overlay.is-visible { display: flex; }
.loading-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 384px;
  width: 100%;
  text-align: center;
}
.loading-spinner {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 3px solid #012D19;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-card .title {
  color: #012D19;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.loading-card .sub {
  font-size: 14px;
  color: #6f6f6f;
  margin: 0;
}

/* ---------- CURRENCY MODAL ---------- */
.currency-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.currency-backdrop.is-open { display: block; }
.currency-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 401;
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
}
.currency-modal.is-open { display: block; }
.currency-modal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
.currency-modal .head .title { font-size: 18px; font-weight: 700; color: #232323; }
.currency-modal .head .close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #232323; background: transparent; border: 0; cursor: pointer;
}
.currency-modal .opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color .15s;
}
.currency-modal .opt:hover { background: #f5f5f5; }
.currency-modal .opt .left { display: flex; align-items: center; gap: 12px; }
.currency-modal .opt .name { font-size: 16px; font-weight: 600; color: #232323; }

/* ---------- PAGAMENTO / STATUS PAGE ---------- */
/* Mesma família visual da página /donate: fundo branco, cartão centrado
   max-width 512, paleta da marca (#012D19 / #4A9D44 / #ccf88e / #232323 / #6f6f6f). */
.status-main {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 96px;
  min-height: calc(100vh - 65px);
}
.status-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #ebebeb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 32px 24px;
  max-width: 512px;
  width: 100%;
  text-align: center;
}
.status-card.pending { text-align: left; }
.status-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: #232323;
  margin: 0 0 8px;
  line-height: 1.25;
}
.status-card > p { color: #6f6f6f; margin: 0 0 16px; line-height: 1.55; font-size: 14px; }
.status-card .center { text-align: center; }
.status-card .amount-strong { font-weight: 700; color: #012D19; }

.status-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #012D19;
  color: #ccf88e;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  transition: filter .15s;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
}
.status-link:hover { filter: brightness(.92); }
.status-link.ghost {
  border: 1px solid #ebebeb;
  background: transparent;
  color: #232323;
}
.status-link.ghost:hover { background: #f5f5f5; filter: none; }

.status-info-box {
  background: #f5f9f0;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(74, 157, 68, 0.25);
  text-align: center;
  margin-bottom: 20px;
}
.status-info-box .icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: #012D19;
}
.status-info-box h3 {
  font-weight: 700;
  color: #232323;
  margin: 0 0 8px;
  font-size: 16px;
}
.status-info-box p {
  font-size: 14px;
  color: #4b5e52;
  line-height: 1.55;
  margin: 0;
}

.ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid #ebebeb;
  margin-bottom: 10px;
  text-align: left;
}
.ref-row .label { font-size: 12px; color: #6f6f6f; margin: 0 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.ref-row .value { font-weight: 700; color: #012D19; font-size: 18px; margin: 0; font-variant-numeric: tabular-nums; }
.ref-row .copy-btn {
  color: #6f6f6f;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background-color .15s, color .15s;
}
.ref-row .copy-btn:hover { color: #012D19; background: #f5f5f5; }

.amber-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px;
  margin-top: 16px;
}
.amber-box p { font-size: 13px; color: #92400e; margin: 0; text-align: center; }

.polling-line {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #6f6f6f;
}
.polling-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4A9D44;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.cancel-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #6f6f6f;
  margin-top: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cancel-link:hover { color: #232323; }

/* --- Mini-resumo da campanha no topo do cartão de status (contexto) --- */
.status-campaign {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 20px;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background: #fafafa;
  text-align: left;
}
.status-campaign .badge {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #ccf88e;
  color: #012D19;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.status-campaign .meta { flex: 1; min-width: 0; }
.status-campaign .meta .title {
  font-size: 13px; color: #6f6f6f; margin: 0; line-height: 1.2;
}
.status-campaign .meta .name {
  font-size: 14px; font-weight: 700; color: #232323; margin: 2px 0 0; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.text-success { color: #4A9D44; }
.text-danger { color: #ef4444; }

.shimmer {
  background: linear-gradient(90deg, #6f6f6f 0%, #232323 50%, #6f6f6f 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- TIPOGRAFIA ----------
   Sem @font-face — system font stack. Bullet-proof. */