/* extracted */

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      background:#000;
      color:var(--text);
      font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:40px;
    }
    h1{font-size:2.5rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.04em;background-image:linear-gradient(180deg,#f8e6b0,#f2cc79,#e0a63e,#bf7d16);-webkit-background-clip:text;color:transparent}
    p{font-size:1.1rem;max-width=600px;line-height:1.5;opacity:.9}
    a.back{
      margin-top:2rem;
      display:inline-block;
      padding:.8em 1.2em;
      background:#f7c02e;
      border:1px solid #f7c02e;
      color:#3a2a00;
      border-radius:12px;
      font-weight:700;
      text-decoration:none;
    }
    a.back:hover{
      filter:brightness(1.05);
      transform:translateY(-1px);
    }

    /* Background logo on donate page */
    .bg-logo{
      position:fixed;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      /* Increase size to fill more of the page */
      width:90%;
      max-width:1000px;
      /* Make logo more visible while still subtle */
      opacity:0.25;
      pointer-events:none;
    }

    /* Donation methods */
    .donation-methods{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:16px;
      margin:32px 0;
    }
    .donation-method{
      backdrop-filter: blur(6px);
      background:rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.2);
      border-radius:14px;
      padding:16px 20px;
      min-width:200px;
      text-align:center;
      box-shadow:0 6px 18px rgba(0,0,0,.4);
    }
    .donation-method h3{
      margin-bottom:8px;
      font-size:1.2rem;
      color:#f7c02e;
      text-transform:uppercase;
    }
    .donation-method .value{
      font-size:1.4rem;
      font-weight:700;
      letter-spacing:.04em;
      color:#00d1ff;
      word-break: break-all;
    }
    .donation-method .note{
      margin-top:4px;
      font-size:.85rem;
      opacity:.8;
      color:var(--muted);
    }

    /* Tabela de valores */
    table.tiers{
      width:100%;
      max-width:600px;
      margin:0 auto;
      border-collapse:collapse;
      margin-top:32px;
    }
    table.tiers th, table.tiers td{
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.12);
    }
    table.tiers th{
      background:rgba(255,255,255,.05);
      text-transform:uppercase;
      letter-spacing:.05em;
      color:#f7c02e;
      font-size:.9rem;
    }
    table.tiers td{
      font-size:.95rem;
      opacity:.92;
    }

    /* Boxes para brindes */
    .brinde-boxes{
      display:flex;
      flex-wrap:wrap;
      justify-content:center; 
      max-width: calc(250px * 5 + 20px * 4); /* aumentar largura para acomodar mais texto */
      gap:5px;
      margin:32px 0;
    }
    @media (max-width:980px){
      .brinde-boxes{ max-width:100%; padding:0 12px }
      .brinde-item{ width:calc(50% - 20px) }
    }
    @media (max-width:520px){
      .brinde-item{ width:100% }
    }
    .brinde-item{
      width:218px; /* aumentar largura */
      height:auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      text-align:center;
      color:var(--text);
      gap:10px;
      transition: transform .12s ease;
      background:rgba(0,0,0,.35); /* fundo escuro */
      padding:15px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.1);
    }

    .box-image{
      width:200px; /* aumentar largura */
      height:300px; /* aumentar altura */
      background:#000;
border:1px solid rgba(255,255,255,.06);
      border-radius:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      transition: box-shadow .18s ease, border-color .18s ease;
      position:relative;
    }
    .box-image img{ width:100%; height:100%; object-fit:contain; display:block }
    /* overlay message follows cursor and is visible over content */
    .box-image .hover-msg {
      position:float; /* seguir viewport */
      left:50; top:0;
      transform:none;
  display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
    background:rgba(0,0,0,0.88);
      padding:.45em .8em;
      font-weight:800;
font-size:1rem;
      opacity:0;
      pointer-events:none;
      transition:opacity .08s ease, transform .06s ease;
    border-radius:8px;
      white-space:nowrap;
      z-index:9999;
      box-shadow:0 8px 24px rgba(0,0,0,0.6),0 0 12px rgba(0,150,255,0.10) inset;
      text-shadow:0 1px 2px rgba(0,0,0,0.6);
    }
    /* hover glow effect (blue) */
    .brinde-item:hover{ transform: translateY(-6px) }
    .brinde-item:hover .box-image{
      box-shadow:012px36px rgba(0,150,255,0.28),0003px rgba(0,150,255,0.08) inset;
      border-color: rgba(0,150,255,0.9);
    }

    /* Call to action button */
    .cta-button{
      display:inline-block;
      padding:.9em 1.4em;
      background:#00d1ff;
      border:1px solid #00d1ff;
      color:#00364f;
      border-radius:14px;
      font-weight:700;
      text-decoration:none;
      margin-top:12px;
    }
    .cta-button:hover{
      filter:brightness(1.05);
      transform:translateY(-1px);
    }

    /* Instruction text */
    .instructions{
      margin-top:16px;
      font-size:.95rem;
      max-width:600px;
      line-height:1.45;
      opacity:.9;
    }

    /* Gift box titles and descriptions */
    .box-title{
      font-size:1rem;
      font-weight:700;
      color:#f7c02e;
    }
    .box-desc{
      font-size:.9rem;
      line-height:1.5;
      opacity:.9;
      padding:8px;
    }

    /* Language toggle (similar to index page) */
    .lang{
      position:absolute;
      left:14px;
      top:14px;
      z-index:3;
      display:flex;
      gap:8px;
    }
    .lang button{
      background:rgba(0,0,0,.45);
      border:1px solid rgba(255,255,255,.18);
      color:var(--text);
      border-radius:12px;
      padding:8px 10px;
      cursor:pointer;
    }
    .lang button[aria-pressed="true"]{
      background:rgba(242,204,121,.15);
      border-color:rgba(242,204,121,.5);
    }

.promo-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffcc00;
  text-shadow: 0 0 8px #ff9900, 0 0 14px #ff6600;
  animation: pulseGlow 1.5s infinite ease-in-out;
  text-align: center;
}

@keyframes pulseGlow {
  0%   { text-shadow: 0 0 4px #ff9900, 0 0 10px #ff6600; }
  50%  { text-shadow: 0 0 10px #ffbb33, 0 0 20px #ff6600; }
  100% { text-shadow: 0 0 4px #ff9900, 0 0 10px #ff6600; }
}

.promo-fire {
  font-size: 24px;
  font-weight: bold;
  color: #ff4500;
  text-shadow:
    0 0 6px #ff3300,
    0 0 12px #ff6600,
    0 0 22px #ff9900,
    0 0 36px #ffcc00;
  animation: firePulse 1.2s infinite alternate;
  text-align: center;
}

@keyframes firePulse {
  from {
    text-shadow:
      0 0 4px #ff3300,
      0 0 10px #ff6600,
      0 0 16px #ff9900;
  }
  to {
    text-shadow:
      0 0 8px #ff3300,
      0 0 18px #ff6600,
      0 0 32px #ffcc00;
  }
}

.promo-neon {
  font-size: 24px;
  font-weight: bold;
  color: #ffea00;
  text-shadow: 0 0 10px #ffd500, 0 0 20px #ffba00, 0 0 30px #ff8c00;
  animation: neonBlink 0.8s infinite alternate;
  text-align: center;
}

@keyframes neonBlink {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0.2; }
  55%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Efeito de pulsar suave no botão principal */
#donate-cta {
  animation: pulse-cta 1.6s infinite;
}

@keyframes pulse-cta {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); box-shadow: 0 0 12px rgba(0, 209, 255, 0.55); }
  100% { transform: scale(1); box-shadow: none; }
}

/* =============================== */
/*  LPX DONATE – FORM PASSO 2      */
/*  Inputs alinhados + animação    */
/* =============================== */

#donate-step2 .inline-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 12px auto;
    width: 100%;
    max-width: 380px;
}

#donate-step2 label.small {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    font-size: 14px;
    text-align: left;
}

#donate-step2 .donate-input {
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 14px;
    margin-top: 4px;
}

#donate-step2 textarea.donate-input {
    height: 70px;
    resize: vertical;
}

#donate-step2 input[type="file"].donate-input {
    padding: 8px;
    background: rgba(255,255,255,0.10);
}

/* Detecção de país abaixo do telefone */
#donor-phone-country {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}

/* Animação suave quando o passo 2 aparece */
#donate-step2 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#donate-step2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Botão Enviar com estado de loading */
.lpx-modal-ui .btn-primary.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.lpx-modal-ui .btn-primary.is-loading::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    border-top-color: transparent;
    animation: lpx-spin 0.6s linear infinite;
}

@keyframes lpx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#donor-captcha-question {
    color: #ccc;
}


/* Mensagem de status/erro do formulário */
#donate-status {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

#donate-status.error {
    color: #ff8a8a;
}


/* ==== LPX v4 – layout 4x2 e cores por pack ==== */
.brinde-boxes{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:20px;
  justify-content:center;
  margin:32px auto;
  max-width:1200px;
}
@media (max-width:980px){
  .brinde-boxes{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width:600px){
  .brinde-boxes{
    grid-template-columns:1fr;
  }
}

.brinde-item{
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.35);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

/* cores por pack (título + borda) */
.brinde-item:nth-child(1){ border-color:rgba(241,196,15,0.75); }
.brinde-item:nth-child(1) .box-title{ color:#f1c40f; }

.brinde-item:nth-child(2){ border-color:rgba(46,204,113,0.75); }
.brinde-item:nth-child(2) .box-title{ color:#2ecc71; }

.brinde-item:nth-child(3){ border-color:rgba(52,152,219,0.75); }
.brinde-item:nth-child(3) .box-title{ color:#3498db; }

.brinde-item:nth-child(4){ border-color:rgba(155,89,182,0.75); }
.brinde-item:nth-child(4) .box-title{ color:#9b59b6; }

.brinde-item:nth-child(5){ border-color:rgba(230,126,34,0.75); }
.brinde-item:nth-child(5) .box-title{ color:#e67e22; }

.brinde-item:nth-child(6){ border-color:rgba(231,76,60,0.75); }
.brinde-item:nth-child(6) .box-title{ color:#e74c3c; }

.brinde-item:nth-child(7){ border-color:rgba(26,188,156,0.75); }
.brinde-item:nth-child(7) .box-title{ color:#1abc9c; }

.brinde-item:nth-child(8){ border-color:rgba(243,156,18,0.75); }
.brinde-item:nth-child(8) .box-title{ color:#f39c12; }

/* glow na borda da caixa (não no samurai) */
.brinde-item:hover{
  transform:translateY(-6px);
}
.brinde-item:nth-child(1):hover{ box-shadow:0 0 20px rgba(241,196,15,0.55); }
.brinde-item:nth-child(2):hover{ box-shadow:0 0 20px rgba(46,204,113,0.55); }
.brinde-item:nth-child(3):hover{ box-shadow:0 0 20px rgba(52,152,219,0.55); }
.brinde-item:nth-child(4):hover{ box-shadow:0 0 20px rgba(155,89,182,0.55); }
.brinde-item:nth-child(5):hover{ box-shadow:0 0 20px rgba(230,126,34,0.55); }
.brinde-item:nth-child(6):hover{ box-shadow:0 0 20px rgba(231,76,60,0.55); }
.brinde-item:nth-child(7):hover{ box-shadow:0 0 20px rgba(26,188,156,0.55); }
.brinde-item:nth-child(8):hover{ box-shadow:0 0 20px rgba(243,156,18,0.55); }

/* remove o glow azul dentro da box para não parecer efeito no item */
.brinde-item:hover .box-image{
  box-shadow:none;
  border-color:rgba(255,255,255,0.12);
}


/* ==== PAGE v6 – losango BONUS com tooltip alinhado e luz nas bordas ==== */

.box-image {
  position: relative;
}

.bonus-diamond {
  position: absolute;
  bottom: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.92);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0);
  animation: bonusDiamondPulse 3s ease-in-out infinite;
  overflow: visible;
}

.bonus-label {
  transform: rotate(-45deg);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* luz passando no contorno do losango */
.bonus-diamond::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,0.75);
  opacity:0;
  transform:translateX(-130%);
  animation:bonusDiamondSweep 3.2s linear infinite;
}

/* tooltip preso ao losango, mas texto alinhado (compensa a rotação do pai) */
.bonus-tooltip {
  position: absolute;
  bottom: 120%;
  right: -2px;
  min-width: 220px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
  text-align: left;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px) rotate(-45deg);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 40;
}

.bonus-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 16px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.97) transparent transparent transparent;
}

/* abre tooltip via hover ou clique (classe .is-open) */
.bonus-diamond:hover .bonus-tooltip,
.bonus-diamond.is-open .bonus-tooltip {
  opacity: 1;
  transform: translateY(0) rotate(-45deg);
}

/* cores por pack – losango segue a cor do pack */
.brinde-item:nth-child(1) .bonus-diamond { color: #f1c40f; }
.brinde-item:nth-child(2) .bonus-diamond { color: #2ecc71; }
.brinde-item:nth-child(3) .bonus-diamond { color: #3498db; }
.brinde-item:nth-child(4) .bonus-diamond { color: #9b59b6; }
.brinde-item:nth-child(5) .bonus-diamond { color: #e67e22; }
.brinde-item:nth-child(6) .bonus-diamond { color: #e74c3c; }
.brinde-item:nth-child(7) .bonus-diamond { color: #1abc9c; }
.brinde-item:nth-child(8) .bonus-diamond { color: #f39c12; }

/* animações */
@keyframes bonusDiamondPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0); }
  40%  { box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0); }
}

@keyframes bonusDiamondSweep{
  0%{ transform:translateX(-130%); opacity:0; }
  25%{ opacity:1; }
  50%{ opacity:1; }
  100%{ transform:translateX(130%); opacity:0; }
}