/* =============================================================
   Megaplasti – Orçamento via WhatsApp  |  orcamento.css
   Paleta: Navy #0B1C3D, Azul médio #1E3A6E, Branco, Cinza leve
============================================================= */

/* ---------- Variáveis ---------- */
:root {
  --qpwp-navy:     #0B1C3D;
  --qpwp-blue:     #1E3A6E;
  --qpwp-accent:   #2563EB;
  --qpwp-green:    #25D366;
  --qpwp-red:      #DC2626;
  --qpwp-gray-100: #F3F4F6;
  --qpwp-gray-200: #E5E7EB;
  --qpwp-gray-400: #9CA3AF;
  --qpwp-gray-600: #4B5563;
  --qpwp-white:    #FFFFFF;
  --qpwp-radius:   10px;
  --qpwp-shadow:   0 8px 32px rgba(11, 28, 61, 0.22);
  --qpwp-transition: .22s cubic-bezier(.4,0,.2,1);

  /* Cores personalizáveis via painel (WP Admin › Configurações › Orçamento WhatsApp) */
  --qpwp-color-title:       var(--qpwp-navy);
  --qpwp-color-text:        var(--qpwp-gray-600);
  --qpwp-color-header-bg:   var(--qpwp-navy);
  --qpwp-color-header-text: var(--qpwp-white);
  --qpwp-color-button-bg:   var(--qpwp-navy);
  --qpwp-color-button-text: var(--qpwp-white);
  --qpwp-color-whatsapp-btn: var(--qpwp-green);
  --qpwp-color-clear-btn:    var(--qpwp-gray-400);
}

/* ---------- Botão "Adicionar ao Orçamento" ---------- */
.qpwp-btn-add {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--qpwp-color-button-bg);
  color:           var(--qpwp-color-button-text);
  border:          none;
  border-radius:   var(--qpwp-radius);
  padding:         14px 28px;
  font-family:     inherit;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  .08em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      background var(--qpwp-transition), transform var(--qpwp-transition);
  position:        relative;
  overflow:        hidden;
}
.qpwp-btn-add::after {
  content:   '';
  position:  absolute;
  inset:     0;
  background:rgba(255,255,255,.08);
  opacity:   0;
  transition:opacity var(--qpwp-transition);
}
.qpwp-btn-add:hover {
  filter:     brightness(1.15);
  transform:  translateY(-1px);
}
.qpwp-btn-add:hover::after { opacity: 1; }
.qpwp-btn-add:active       { filter: brightness(0.88); transform: translateY(0); }

/* Estado "adicionado" */
.qpwp-btn-add.qpwp-added {
  background: #15803D;
}
.qpwp-btn-add.qpwp-added .qpwp-btn-icon::before { content: '✓ '; }

/* ---------- FAB flutuante ---------- */
.qpwp-fab {
  position:      fixed;
  bottom:        28px;
  right:         28px;
  z-index:       9990;
  width:         58px;
  height:        58px;
  border-radius: 50%;
  background:    var(--qpwp-color-button-bg);
  color:         var(--qpwp-color-button-text);
  border:        none;
  cursor:        pointer;
  box-shadow:    var(--qpwp-shadow);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    transform var(--qpwp-transition), filter var(--qpwp-transition);
}
.qpwp-fab svg { width: 24px; height: 24px; }
.qpwp-fab:hover { filter: brightness(1.15); transform: scale(1.08); }
.qpwp-fab:active { filter: brightness(0.85); transform: scale(0.95); }

.qpwp-fab-count {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  min-width:   20px;
  height:      20px;
  border-radius:10px;
  background:  #DC2626;
  color:       #fff;
  font-size:   11px;
  font-weight: 700;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0 4px;
  line-height: 1;
  box-shadow:  0 2px 6px rgba(0,0,0,.25);
  transition:  transform .15s ease;
}
.qpwp-fab-count.qpwp-bounce {
  animation: mpoBounce .35s ease;
}
@keyframes mpoBounce {
  0%  { transform: scale(1); }
  40% { transform: scale(1.5); }
  100%{ transform: scale(1); }
}

/* Ocultar FAB quando contador é 0 */
.qpwp-fab[data-empty="true"] {
  opacity:    0;
  pointer-events: none;
  transform:  scale(.7);
}

/* ---------- Overlay ---------- */
.qpwp-overlay {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: rgba(11, 28, 61, .55);
  backdrop-filter: blur(3px);
  opacity:    0;
  visibility: hidden;
  transition: opacity var(--qpwp-transition), visibility var(--qpwp-transition);
}
.qpwp-overlay.qpwp-open {
  opacity:    1;
  visibility: visible;
}

/* ---------- Drawer ---------- */
.qpwp-drawer {
  position:   absolute;
  top:        0;
  right:      0;
  bottom:     0;
  width:      min(480px, 100vw);
  background: var(--qpwp-white);
  display:    flex;
  flex-direction: column;
  box-shadow: var(--qpwp-shadow);
  transform:  translateX(100%);
  transition: transform var(--qpwp-transition);
}
.qpwp-overlay.qpwp-open .qpwp-drawer {
  transform: translateX(0);
}

/* Header */
.qpwp-drawer-header {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding:        20px 24px;
  border-bottom:  1px solid var(--qpwp-gray-200);
  background:     var(--qpwp-color-header-bg);
  color:          var(--qpwp-color-header-text);
  flex-shrink:    0;
}
.qpwp-drawer-title {
  font-size:   18px;
  font-weight: 700;
  margin:      0;
  color:       var(--qpwp-color-header-text);
  letter-spacing: .02em;
}
.qpwp-drawer-close {
  width:      36px;
  height:     36px;
  border:     none;
  background: rgba(255,255,255,.12);
  color:      var(--qpwp-color-header-text);
  border-radius: 6px;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: background var(--qpwp-transition);
}
.qpwp-drawer-close:hover { background: rgba(255,255,255,.25); }
.qpwp-drawer-close svg   { width: 18px; height: 18px; }

/* Body (lista de itens) */
.qpwp-drawer-body {
  flex:       1;
  overflow-y: auto;
  padding:    16px;
  display:    flex;
  flex-direction: column;
  gap:        10px;
}
.qpwp-drawer-body::-webkit-scrollbar { width: 4px; }
.qpwp-drawer-body::-webkit-scrollbar-thumb { background: var(--qpwp-gray-200); border-radius: 4px; }

/* Estado vazio */
.qpwp-drawer-empty {
  display:        none;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  flex:           1;
  gap:            16px;
  color:          var(--qpwp-gray-400);
  padding:        40px 24px;
}
.qpwp-drawer-empty svg { width: 56px; height: 56px; opacity: .4; }
.qpwp-drawer-empty p   { font-size: 15px; margin: 0; text-align: center; }

/* Item do orçamento */
.qpwp-item {
  display:       grid;
  grid-template-columns: 56px 1fr auto;
  align-items:   center;
  gap:           12px;
  background:    var(--qpwp-gray-100);
  border-radius: 8px;
  padding:       10px 12px;
  animation:     mpoSlideIn .2s ease;
}
@keyframes mpoSlideIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.qpwp-item-thumb {
  width:        56px;
  height:       56px;
  border-radius:6px;
  object-fit:   cover;
  background:   var(--qpwp-gray-200);
  flex-shrink:  0;
}
.qpwp-item-thumb-placeholder {
  width:       56px;
  height:      56px;
  border-radius:6px;
  background:  var(--qpwp-gray-200);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--qpwp-gray-400);
  font-size:   22px;
  flex-shrink: 0;
}
.qpwp-item-info {
  min-width: 0;
}
.qpwp-item-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--qpwp-color-title);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  margin:      0 0 6px;
}
.qpwp-item-qty-wrap {
  display:    flex;
  align-items:center;
  gap:        6px;
}
.qpwp-qty-btn {
  width:      26px;
  height:     26px;
  border:     1px solid var(--qpwp-gray-200);
  background: var(--qpwp-white);
  border-radius: 4px;
  cursor:     pointer;
  font-size:  14px;
  font-weight:700;
  display:    flex;
  align-items:center;
  justify-content:center;
  color:      var(--qpwp-blue);
  transition: border-color var(--qpwp-transition), background var(--qpwp-transition);
  flex-shrink:0;
  padding:    0;
  line-height:1;
}
.qpwp-qty-btn:hover { border-color: var(--qpwp-blue); background: #EFF6FF; }

.qpwp-qty-input {
  width:       46px;
  height:      26px;
  text-align:  center;
  border:      1px solid var(--qpwp-gray-200);
  border-radius:4px;
  font-size:   13px;
  font-weight: 700;
  color:       var(--qpwp-navy);
  padding:     0;
  -moz-appearance: textfield;
}
.qpwp-qty-input::-webkit-outer-spin-button,
.qpwp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qpwp-qty-input:focus { outline: 2px solid var(--qpwp-accent); border-color: transparent; }

.qpwp-item-qty-label {
  font-size: 11px;
  color:     var(--qpwp-gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.qpwp-item-remove {
  width:      32px;
  height:     32px;
  border:     none;
  background: transparent;
  color:      var(--qpwp-gray-400);
  cursor:     pointer;
  border-radius:6px;
  display:    flex;
  align-items:center;
  justify-content:center;
  transition: color var(--qpwp-transition), background var(--qpwp-transition);
  flex-shrink:0;
  padding:    0;
}
.qpwp-item-remove:hover { color: var(--qpwp-red); background: #FEF2F2; }
.qpwp-item-remove svg { width: 16px; height: 16px; }

/* Footer */
.qpwp-drawer-footer {
  padding:      16px;
  border-top:   1px solid var(--qpwp-gray-200);
  flex-shrink:  0;
  display:      flex;
  flex-direction:column;
  gap:          10px;
}

/* Campos do cliente */
.qpwp-customer-fields {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.qpwp-customer-fields label {
  font-size:   12px;
  font-weight: 600;
  color:       var(--qpwp-color-text);
  text-transform: uppercase;
  letter-spacing:.04em;
}
.qpwp-customer-fields label span { color: var(--qpwp-red); }
.qpwp-customer-fields input,
.qpwp-customer-fields textarea {
  width:        100%;
  border:       1px solid var(--qpwp-gray-200);
  border-radius:6px;
  padding:      8px 12px;
  font-family:  inherit;
  font-size:    14px;
  color:        var(--qpwp-navy);
  background:   var(--qpwp-gray-100);
  box-sizing:   border-box;
  resize:       vertical;
  transition:   border-color var(--qpwp-transition);
}
.qpwp-customer-fields input:focus,
.qpwp-customer-fields textarea:focus {
  outline:      2px solid var(--qpwp-accent);
  border-color: transparent;
  background:   var(--qpwp-white);
}

/* Botão WhatsApp */
.qpwp-btn-whatsapp {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
  background:     var(--qpwp-color-whatsapp-btn);
  color:          var(--qpwp-white);
  border:         none;
  border-radius:  var(--qpwp-radius);
  padding:        14px 24px;
  font-family:    inherit;
  font-size:      15px;
  font-weight:    700;
  cursor:         pointer;
  transition:     filter var(--qpwp-transition), transform var(--qpwp-transition);
  width:          100%;
}
.qpwp-btn-whatsapp svg { width: 22px; height: 22px; flex-shrink: 0; }
.qpwp-btn-whatsapp:hover  { filter: brightness(1.12); transform: translateY(-1px); }
.qpwp-btn-whatsapp:active { filter: brightness(0.88); transform: translateY(0); }

/* Botão limpar */
.qpwp-btn-clear {
  background:  transparent;
  border:      1px solid var(--qpwp-color-clear-btn);
  color:       var(--qpwp-color-clear-btn);
  border-radius: var(--qpwp-radius);
  padding:     10px;
  font-family: inherit;
  font-size:   13px;
  cursor:      pointer;
  width:       100%;
  transition:  border-color var(--qpwp-transition), color var(--qpwp-transition);
}
.qpwp-btn-clear:hover {
  filter: brightness(0.8);
}
.qpwp-btn-clear:active {
  filter: brightness(0.65);
}

/* ---------- Responsivo ---------- */
@media (max-width: 520px) {
  .qpwp-fab  { bottom: 20px; right: 16px; }
  .qpwp-drawer { width: 100vw; }
  .qpwp-drawer-body { padding: 12px; }
}

/* ---------- Acessibilidade: reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .qpwp-fab, .qpwp-overlay, .qpwp-drawer, .qpwp-item,
  .qpwp-btn-add, .qpwp-btn-whatsapp, .qpwp-btn-clear { transition: none; animation: none; }
}