/* * swal_theme.css — tema do SweetAlert2 adaptado ao MultiVendas. * * Faz os popups seguirem: * - a cor da loja (--brand-primary / --brand-secondary, definidas em html.brand-scope) * - o tema claro/escuro do lojista (body[data-store-theme]) * * O SweetAlert injeta o popup dentro do , entao os seletores * body[data-store-theme="dark"] .swal2-* funcionam normalmente. * * Carregado pelo include components/design_system/swal_assets.html. */ /* ========================================================================== Base — tema claro (padrao) ========================================================================== */ .swal2-popup.mv-swal { border-radius: 0.75rem; /* igual ao commerce-dashboard-card (rounded-xl) */ border: 1px solid var(--dashboard-line, #e5edf5); background: #ffffff; color: var(--dashboard-body, #475569); box-shadow: rgba(50, 50, 93, 0.12) 0 18px 40px -16px; font-family: inherit; } .swal2-popup.mv-swal .swal2-title { color: var(--dashboard-heading, #061b31); font-weight: 700; } .swal2-popup.mv-swal .swal2-html-container { color: var(--dashboard-body, #475569); } /* Botao principal — sempre na cor da loja */ .swal2-popup.mv-swal .swal2-confirm.swal2-styled { background-color: var(--brand-primary, #f97316) !important; border-radius: 0.5rem; font-weight: 600; box-shadow: none; } .swal2-popup.mv-swal .swal2-confirm.swal2-styled:hover { background-color: var(--brand-secondary, #ea580c) !important; } .swal2-popup.mv-swal .swal2-confirm.swal2-styled:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #f97316) 35%, transparent) !important; } /* Botao secundario / cancelar — superficie neutra */ .swal2-popup.mv-swal .swal2-cancel.swal2-styled { background-color: #f1f5f9 !important; color: #334155 !important; border-radius: 0.5rem; font-weight: 600; box-shadow: none; } .swal2-popup.mv-swal .swal2-cancel.swal2-styled:hover { background-color: #e2e8f0 !important; } /* Botao de negar (ex: acao destrutiva) — vermelho fixo */ .swal2-popup.mv-swal .swal2-deny.swal2-styled { border-radius: 0.5rem; font-weight: 600; box-shadow: none; } /* ========================================================================== Tema escuro — body[data-store-theme="dark"] ========================================================================== */ body[data-store-theme="dark"] .swal2-popup.mv-swal { border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(135deg, #111c33 0%, #0c1730 100%); color: rgba(226, 232, 240, 0.82); box-shadow: rgba(2, 6, 23, 0.45) 0 24px 48px -18px; } body[data-store-theme="dark"] .swal2-popup.mv-swal .swal2-title { color: #f8fafc; } body[data-store-theme="dark"] .swal2-popup.mv-swal .swal2-html-container { color: rgba(226, 232, 240, 0.78); } body[data-store-theme="dark"] .swal2-popup.mv-swal .swal2-cancel.swal2-styled { background-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } body[data-store-theme="dark"] .swal2-popup.mv-swal .swal2-cancel.swal2-styled:hover { background-color: rgba(255, 255, 255, 0.14) !important; } /* ========================================================================== Bloco de ajuda reutilizavel dentro do popup (.mv-swal-help) Usado para instrucoes passo-a-passo (ex: erro de permissao do Instagram). ========================================================================== */ .mv-swal-help { border-radius: 0.5rem; border: 1px solid #fcd9a8; background: #fff8ed; color: #92400e; padding: 0.85rem 1rem; text-align: left; font-size: 0.82rem; line-height: 1.5; margin-top: 0.25rem; } .mv-swal-help strong { font-weight: 700; } .mv-swal-help ol { margin: 0.4rem 0 0.75rem; padding-left: 1.1rem; list-style: decimal; } .mv-swal-help ol li { margin-bottom: 0.2rem; } .mv-swal-help .mv-swal-help__action { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 0.5rem; background: var(--brand-primary, #f97316); color: #ffffff; padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600; text-decoration: none; } .mv-swal-help .mv-swal-help__action:hover { background: var(--brand-secondary, #ea580c); } /* Bloco de detalhe tecnico (mensagem de erro crua) */ .mv-swal-detail { border-radius: 0.5rem; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; padding: 0.75rem 0.9rem; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.45; word-break: break-word; } body[data-store-theme="dark"] .mv-swal-help { border-color: rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.10); color: #fcd9a8; } body[data-store-theme="dark"] .mv-swal-detail { border-color: rgba(248, 113, 113, 0.28); background: rgba(248, 113, 113, 0.10); color: #fca5a5; }