/* =====================================================================
   Vulon — Notify (toasts + modal)
   ===================================================================== */

#notify-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
  max-width: 380px;
}

@media (max-width: 540px) {
  #notify-container {
    /* Respeita safe-area do device (--sat injetado pelo iOS via
       WKUserScript; env() cobre Android/PWA). Sem isso o toast fica
       sob a status bar / notch. */
    top: calc(12px + var(--sat, env(safe-area-inset-top, 0px)));
    right: 16px;
    left: 16px;
    bottom: auto;
    max-width: none;
    flex-direction: column;
  }
}

.notify-toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #1a1233;
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  min-width: 280px;
}

.notify-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.notify-toast.hiding {
  opacity: 0;
  transform: translateX(20px);
}

.notify-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.notify-body {
  flex: 1;
  min-width: 0;
}

.notify-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.notify-message {
  font-size: 0.85rem;
  line-height: 1.45;
  word-wrap: break-word;
}

.notify-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.notify-close:hover { color: #fff; }

/* Cores semanticas — borda lateral colorida + icon com a mesma cor */
.notify-success { border-left: 4px solid #2ecc71; }
.notify-success .notify-icon { color: #2ecc71; }

.notify-error   { border-left: 4px solid #ef4444; }
.notify-error   .notify-icon { color: #ef4444; }

.notify-warning { border-left: 4px solid #f59e0b; }
.notify-warning .notify-icon { color: #f59e0b; }

.notify-info    { border-left: 4px solid #7c3aed; }
.notify-info    .notify-icon { color: #bd9bff; }

@media (max-width: 540px) {
  .notify-toast {
    transform: translateY(-20px);
    min-width: 0;
  }
  .notify-toast.show   { transform: translateY(0); }
  .notify-toast.hiding { transform: translateY(-20px); }
}

/* =====================================================================
   MODAL (confirm)
   ===================================================================== */

.notify-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 31, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.notify-modal-overlay.show { opacity: 1; }
.notify-modal-overlay.hiding { opacity: 0; }

.notify-modal {
  background: #1a1233;
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 26px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  transform: scale(0.95);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.notify-modal-large {
  max-width: 720px;
}

.notify-modal-message.notify-html {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

.notify-modal-message.notify-html h2,
.notify-modal-message.notify-html h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 18px 0 8px;
  color: #fff;
}
.notify-modal-message.notify-html h3 { font-size: 0.92rem; }

.notify-modal-message.notify-html p {
  margin-bottom: 12px;
}

.notify-modal-message.notify-html ul,
.notify-modal-message.notify-html ol {
  margin: 8px 0 12px 24px;
}

.notify-modal-message.notify-html li {
  margin-bottom: 6px;
}

.notify-modal-overlay.show .notify-modal { transform: scale(1); }

.notify-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.notify-modal-message {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
}

.notify-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.notify-btn {
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}

.notify-btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.notify-btn-cancel:hover { background: rgba(255, 255, 255, 0.14); }

.notify-btn-ok {
  background: #7c3aed;
  color: #fff;
}
.notify-btn-ok:hover { filter: brightness(1.1); }

.notify-btn-danger {
  background: #dc2626;
}
.notify-btn-danger:hover { background: #b91c1c; }

@media (max-width: 540px) {
  .notify-modal-actions { flex-direction: column-reverse; }
  .notify-btn { width: 100%; }
}

/* ===================================================================
 * CardOfferPrompt — visual rico do modal "Solicite seu cartão"
 * ===================================================================
 * Renderizado dentro do .notify-modal.notify-modal-large pelo
 * CardOfferPrompt.maybeShow() (assets/js/card-offer-prompt.js).
 */
.notify-html .vco-hero {
  display: flex;
  justify-content: center;
  margin: -8px 0 16px;
}
.notify-html .vco-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(115, 0, 200, 0.45))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.notify-html .vco-lead {
  font-size: 0.92rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 18px;
  line-height: 1.45;
}
.notify-html .vco-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.notify-html .vco-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.notify-html .vco-benefits li:last-child { border-bottom: 0; }
.notify-html .vco-benefits li i {
  color: #22c55e;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 2px;
}