/* ===================================================================== Ragazzo Control Panel® · Widget "Fale Conosco" — skin DashLite (v2) Componente global e agnóstico a tema: escopo próprio em .wc-contact (é injetado tanto dentro de .wc-shop quanto no , conforme o tema). Reaproveita os controles de formulário do DashLite (.form-control etc.) e o acento do tema via var(--bs-primary). Carregado depois do dashlite.css. ===================================================================== */ .wc-contact { --wcct-primary: var(--wc-widget-accent, var(--bs-primary, #0fac81)); --wcct-primary-rgb: var(--wc-widget-accent-rgb, var(--bs-primary-rgb, 15, 172, 129)); --wcct-head: #243245; --wcct-text: #526484; --wcct-muted: #8094ae; --wcct-border: var(--wc-widget-border, #e5e9f2); position: fixed; inset: 0; z-index: 11000; display: none; padding: 1rem; overflow-y: auto; background: rgba(16, 25, 36, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* ---- Caixa ---- */ .wc-contact-dialog { width: 540px; max-width: calc(100vw - 2rem); margin: 7vh auto 2rem; } .wc-contact-content { position: relative; background: #fff; border-radius: .9rem; box-shadow: 0 24px 60px rgba(16, 25, 36, .3); overflow: hidden; animation: wc-contact-rise .3s cubic-bezier(.2, .7, .2, 1); } @keyframes wc-contact-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---- Botão fechar ---- */ .wc-contact-close { position: absolute; top: .85rem; right: .85rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; font-size: 1.15rem; text-decoration: none; background: rgba(255, 255, 255, .18); transition: background .2s ease, transform .2s ease; } .wc-contact-close:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); color: #fff; } /* ---- Cabeçalho com acento do tema ---- */ .wc-contact-head { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; color: #fff; background: linear-gradient(135deg, var(--wcct-primary), rgba(var(--wcct-primary-rgb), .82)); } .wc-contact-head-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 1.5rem; } .wc-contact-title { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .wc-contact-sub { margin: .2rem 0 0; color: rgba(255, 255, 255, .88); font-size: .85rem; line-height: 1.4; } /* ---- Corpo / formulário ---- */ .wc-contact-body { padding: 1.5rem 1.75rem 1.75rem; } .wc-contact .form-label { color: var(--wcct-head); font-weight: 600; } .wc-contact .form-group { margin-bottom: 0; } .wc-contact .no-resize { resize: none; } .wc-contact .btn-primary { --bs-btn-bg: var(--wcct-primary); --bs-btn-border-color: var(--wcct-primary); --bs-btn-hover-bg: rgba(var(--wcct-primary-rgb), .9); --bs-btn-hover-border-color: rgba(var(--wcct-primary-rgb), .9); } .wc-contact .jwc_contact_submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; } /* ---- Estado de carregando do botão ---- */ .wc-contact .wc-contact-spinner { display: none; } .wc-contact .jwc_contact_submit.is-loading .wc-contact-btn-label { display: none; } .wc-contact .jwc_contact_submit.is-loading .wc-contact-spinner { display: inline-block; } /* ---- Alerta de erro (estilo DashLite alert danger) ---- */ .wc-contact-alert { display: none; margin-bottom: 1.25rem; padding: .85rem 1rem; border-radius: .5rem; background: #fceced; border: 1px solid #f8cdd0; color: #c4304a; font-size: .85rem; line-height: 1.45; } .wc-contact-alert p { margin: 0; } /* ---- Estado de sucesso ---- */ .wc-contact-success { display: none; text-align: center; padding: .5rem 0 .25rem; } .wc-contact-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; font-size: 2rem; color: #fff; background: var(--wcct-primary); box-shadow: 0 10px 24px rgba(var(--wcct-primary-rgb), .4); } .wc-contact-success-title { margin: 0 0 .5rem; color: var(--wcct-head); font-size: 1.2rem; font-weight: 700; } .wc-contact-success p { margin: 0 0 .5rem; color: var(--wcct-text); font-size: .92rem; line-height: 1.55; } .wc-contact-success-sign { color: var(--wcct-muted); } .wc-contact-success .btn { margin-top: 1rem; } /* ---- Responsivo ---- */ @media (max-width: 575.98px) { .wc-contact-dialog { margin: 0 auto; min-height: 100%; display: flex; align-items: flex-end; } .wc-contact-content { width: 100%; border-radius: .9rem .9rem 0 0; animation-name: wc-contact-rise-sheet; } .wc-contact-head { padding: 1.25rem 1.25rem; } .wc-contact-body { padding: 1.25rem; } @keyframes wc-contact-rise-sheet { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { .wc-contact-content { animation: none; } .wc-contact-close:hover { transform: none; } }