/* thanks-modal.css — estils del modal d'agraïment per al navegador en
 * català. Carregat via <link> per respectar CSP estricte (style-src 'self').
 *
 * Pintat per shared/js/thanks-modal.js. La brand color del botó l'aplica
 * el JS a través de `closeBtn.style.backgroundColor = color`, perquè
 * `style-src 'self'` (sense `'unsafe-inline'`) bloqueja l'atribut HTML
 * `style="..."` però NO la manipulació programàtica de la propietat
 * `.style` del CSSStyleDeclaration des de JS. Vegeu el comentari extens
 * a thanks-modal.js per al detall complet del CSP.
 */

.thanks-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 15, 20, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: thanks-fade-in 0.18s ease-out;
}
@keyframes thanks-fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

.thanks-modal-card {
  background: #fff;
  color: #1a1a1a;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  width: min(440px, 94vw);
  padding: 1.6rem 1.8rem 1.4rem;
}
.thanks-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.thanks-modal-body {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.2rem 0;
  color: #555;
}
.thanks-modal-foot { text-align: right; }
.thanks-modal-close {
  font-size: 0.95rem;
  font-weight: 600;
  /* Fallback robust — el JS sobreescriu aquests dos colors amb el brand
   * del projecte via closeBtn.style.X = ... (vegeu thanks-modal.js). Però
   * si per qualsevol motiu el JS no executa (cache antic, navegador
   * estricte, error de càrrega), el botó SEMPRE serà visible: gris fosc
   * amb text blanc sobre la card. Així el smile mai més desapareix. */
  background: #333;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 9px 22px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.thanks-modal-close:hover { opacity: 0.9; }

@media (prefers-color-scheme: dark) {
  .thanks-modal-card { background: #1f2937; color: #f3f4f6; }
  .thanks-modal-body { color: #cbd5e1; }
}