/*
 * Página do produto — carregar DEPOIS de <%= centralcart_style %>.
 * O CSS da CentralCart costuma vir depois do nosso core e resetar <button>
 * (fundo transparente, flex em coluna, etc.), por isso estes overrides ficam aqui.
 */

/* Preço e badges — azul (#3B82F6) como na referência (tema pode forçar outra cor) */
.package-wrapper .package-price-display,
.package-wrapper #package-price,
#package-price.package-price-display {
  color: #3b82f6 !important;
}

.package-wrapper .package-discount-badge,
.package-discount-badge {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

.package-wrapper .package-stock-pill,
.package-stock-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.package-wrapper .package-delivery-pill,
.package-delivery-pill {
  background: #3b82f6 !important;
  color: #fff !important;
  border: none !important;
}

/* Botões compra — sempre UM EM CIMA DO OUTRO; pílula + primário azul + secundário outline */
.package-wrapper .package-action-stack,
.package-action-stack {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.625rem !important;
  width: 100% !important;
  margin-top: 0.25rem;
  padding: 1rem 1.125rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.package-wrapper .package-action-stack > button,
.package-action-stack > button {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.package-wrapper .package-btn-inner,
.package-action-stack .package-btn-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  width: 100%;
}

.package-wrapper .package-btn-ico,
.package-wrapper .package-btn-inner svg,
.package-action-stack .package-btn-ico,
.package-action-stack .package-btn-inner svg {
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  display: block !important;
  overflow: visible !important;
  vertical-align: middle;
}

.package-wrapper .package-action-stack button svg,
.package-wrapper .package-action-stack button .package-btn-ico,
.package-action-stack button svg,
.package-action-stack button .package-btn-ico {
  visibility: visible !important;
  opacity: 1 !important;
}

.package-wrapper .package-btn-txt,
.package-action-stack .package-btn-txt {
  font-size: 0.9375rem;
  line-height: 1.25;
}

.package-wrapper .package-btn-buy,
.package-action-stack .package-btn-buy,
button#purchase-button.package-btn-buy {
  display: block !important;
  width: 100% !important;
  padding: 0.8125rem 1.25rem;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  cursor: pointer;
  text-align: center;
  background: #3b82f6 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.package-wrapper .package-btn-buy:hover:not(:disabled),
.package-action-stack .package-btn-buy:hover:not(:disabled),
button#purchase-button.package-btn-buy:hover:not(:disabled) {
  background: #2563eb !important;
  border-color: rgba(191, 219, 254, 0.5) !important;
}

.package-wrapper .package-btn-buy:active:not(:disabled),
.package-action-stack .package-btn-buy:active:not(:disabled),
button#purchase-button.package-btn-buy:active:not(:disabled) {
  transform: translateY(1px);
}

.package-wrapper .package-btn-buy:disabled,
.package-action-stack .package-btn-buy:disabled,
button#purchase-button.package-btn-buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2) brightness(0.9);
}

.package-wrapper .package-btn-cart,
.package-action-stack .package-btn-cart,
button#add-to-cart-button.package-btn-cart {
  display: block !important;
  width: 100% !important;
  padding: 0.8125rem 1.25rem;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #e2e8f0 !important;
  cursor: pointer;
  text-align: center;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.package-wrapper .package-btn-cart:hover:not(:disabled),
.package-action-stack .package-btn-cart:hover:not(:disabled),
button#add-to-cart-button.package-btn-cart:hover:not(:disabled) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.package-wrapper .package-btn-cart:active:not(:disabled),
.package-action-stack .package-btn-cart:active:not(:disabled),
button#add-to-cart-button.package-btn-cart:active:not(:disabled) {
  transform: translateY(1px);
}

.package-wrapper .package-btn-cart:disabled,
.package-action-stack .package-btn-cart:disabled,
button#add-to-cart-button.package-btn-cart:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ========== Checkout (depois do tema CC — evita bordas “brancas” do --border) ========== */
#checkout.checkout-page .checkout-card {
  border-color: rgba(24, 42, 78, 0.92) !important;
  background: rgba(12, 22, 42, 0.45) !important;
  box-shadow: none !important;
}

#checkout.checkout-page .checkout-card > .border-b {
  border-color: rgba(30, 52, 92, 0.55) !important;
}

#checkout.checkout-page .checkout-gateway-btn {
  border-color: rgba(28, 48, 88, 0.88) !important;
  background: rgba(8, 16, 36, 0.35) !important;
}

#checkout.checkout-page .checkout-gateway-btn:hover {
  border-color: rgba(59, 130, 246, 0.22) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#checkout.checkout-page .checkout-gateway-btn[data-selected='true'] {
  border-color: rgba(59, 130, 246, 0.45) !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

#checkout.checkout-page .checkout-gateway-btn .size-10.border {
  border-color: rgba(32, 55, 98, 0.75) !important;
}

#checkout.checkout-page .checkout-promo-shell {
  border-color: rgba(24, 42, 78, 0.9) !important;
}

#checkout.checkout-page .checkout-promo-shell > .border-b {
  border-color: rgba(30, 52, 92, 0.5) !important;
}

#checkout.checkout-page .checkout-promo-card {
  border-color: rgba(26, 45, 82, 0.85) !important;
}

#checkout.checkout-page .checkout-coupon-input {
  border-color: rgba(32, 55, 98, 0.78) !important;
}

#checkout.checkout-page .checkout-pricing-summary {
  border-color: rgba(24, 42, 78, 0.92) !important;
}

#checkout.checkout-page .checkout-line-item {
  border-color: rgba(26, 45, 82, 0.88) !important;
}

#checkout.checkout-page .checkout-line-item [data-cart-action] {
  border-color: rgba(32, 55, 98, 0.72) !important;
}

#checkout.checkout-page .checkout-line-item .size-12.rounded-lg.border {
  border-color: rgba(28, 48, 88, 0.75) !important;
}

#checkout.checkout-page .checkout-line-item input[data-cart-action='input'] {
  border-color: rgba(32, 55, 98, 0.72) !important;
}

#checkout.checkout-page [role='none'].bg-border.h-px,
#checkout.checkout-page .shrink-0.bg-border.h-px {
  background-color: rgba(36, 58, 102, 0.45) !important;
}

#checkout #personal-info input[type='text']:not([hidden]),
#checkout #creditcard-form input[type='text'],
#checkout #personal-info input[type='tel'],
#checkout #phone-field-wrapper input[type='tel'],
#checkout #creditcard-form select {
  border-color: rgba(32, 55, 98, 0.78) !important;
}

/* Página PIX / pagamento (depois do tema CC) */
section.payment-page .payment-card.border {
  border-color: rgba(24, 42, 78, 0.92) !important;
}

section.payment-page .payment-qr-frame {
  border-radius: 1.25rem !important;
  overflow: hidden !important;
}

section.payment-page .payment-qr-frame.border {
  border-color: rgba(32, 55, 98, 0.78) !important;
}

section.payment-page .payment-qr-img,
section.payment-page .payment-qr-frame img {
  border-radius: 0.75rem !important;
  display: block !important;
}

section.payment-page .payment-pix-divider.border-t,
section.payment-page .payment-card .border-t {
  border-top-color: rgba(30, 52, 92, 0.55) !important;
}

section.payment-page .payment-pix-input.border,
section.payment-page .payment-card input[type='text'][readonly] {
  border-color: rgba(32, 55, 98, 0.78) !important;
}

section.payment-page .payment-help-card.border {
  border-color: rgba(24, 42, 78, 0.92) !important;
  border-left-color: rgba(59, 130, 246, 0.72) !important;
}

section.payment-page .payment-copy-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  background: #3b82f6 !important;
  color: #fff !important;
  border: 1px solid rgba(147, 197, 253, 0.4) !important;
}

section.payment-page .payment-copy-btn-inner {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  line-height: 1 !important;
}

section.payment-page .payment-copy-btn:hover:not(:disabled) {
  background: #2563eb !important;
  color: #fff !important;
}

section.payment-page .payment-copy-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  stroke: #fff !important;
}

/* Corpo do card — brilho azul (depois do tema CC) */
a.package .package-card-body {
  background:
    radial-gradient(ellipse 115% 90% at 50% -18%, rgba(59, 130, 246, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 85% 55% at 92% 88%, rgba(56, 189, 248, 0.1) 0%, transparent 48%),
    linear-gradient(180deg, rgba(12, 18, 32, 0.98) 0%, rgba(5, 8, 16, 1) 100%) !important;
}

a.package.group:hover .package-card-body {
  background:
    radial-gradient(ellipse 115% 90% at 50% -18%, rgba(59, 130, 246, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 85% 55% at 92% 88%, rgba(96, 165, 250, 0.14) 0%, transparent 48%),
    linear-gradient(180deg, rgba(14, 22, 40, 1) 0%, rgba(5, 9, 18, 1) 100%) !important;
}

/* Cards de produto — barra "Comprar agora" sólida azul (depois do tema CC) */
.btn-comprar-metallic {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3b82f6 !important;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.package.group:hover .btn-comprar-metallic {
  background: #2563eb !important;
}

.package-card-buy-placeholder {
  background: #3b82f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0.75rem !important;
}

.package.group:hover .package-card-buy-placeholder {
  background: #2563eb !important;
}

/* Estilos do botão Resgatar: bloco <style id="cc-order-redeem-fix"> no fim do layouts/layout.html */