/* Variáveis comuns — accent vem de checkout.php inline --checkout-accent */
.checkout-root {
    --chk-radius: 12px;
    --chk-card-bg: #ffffff;
    --chk-card-border: rgba(15, 23, 42, 0.08);
    --chk-card-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    --chk-muted: #64748b;
    --chk-heading: #0f172a;
}

.checkout-root.checkout-theme-classic {
    /* Usa backgroundColor do produto no body */
}

/* Cartpanda SaaS: branco, grade sutil, cards flutuantes (cor de destaque = accent do produto) */
.checkout-root.checkout-theme-cartpanda {
    background-color: #f8fafc !important;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        radial-gradient(ellipse 65% 45% at 20% 15%, rgba(37, 99, 235, 0.06), transparent 55%),
        radial-gradient(ellipse 55% 40% at 88% 72%, rgba(59, 130, 246, 0.05), transparent 50%) !important;
    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100% !important;
}
.checkout-root.checkout-theme-cartpanda .chk-panel,
.checkout-root.checkout-theme-cartpanda .chk-panel-soft {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 20px 40px -12px rgba(15, 23, 42, 0.1) !important;
    border-radius: 1rem !important;
    color: #0f172a !important;
}
.checkout-root.checkout-theme-cartpanda .chk-panel h1,
.checkout-root.checkout-theme-cartpanda .chk-panel h2,
.checkout-root.checkout-theme-cartpanda .chk-panel .text-gray-800 {
    color: #0f172a !important;
}
.checkout-root.checkout-theme-cartpanda .chk-panel .text-gray-700,
.checkout-root.checkout-theme-cartpanda .chk-panel label.text-gray-700 {
    color: #334155 !important;
}
.checkout-root.checkout-theme-cartpanda .chk-panel .border-gray-200,
.checkout-root.checkout-theme-cartpanda hr.border-gray-200 {
    border-color: #e2e8f0 !important;
}
.checkout-root.checkout-theme-cartpanda .chk-panel .checkout-input,
.checkout-root.checkout-theme-cartpanda .chk-panel input,
.checkout-root.checkout-theme-cartpanda .chk-panel select,
.checkout-root.checkout-theme-cartpanda .chk-panel textarea {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
.checkout-root.checkout-theme-cartpanda #mobile-footer {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.06) !important;
}

.checkout-root.checkout-theme-cartpanda #checkout-page-scope .payment-method-card.chk-panel-soft {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
.checkout-root.checkout-theme-cartpanda #checkout-page-scope .payment-method-card .text-gray-800 {
    color: #0f172a !important;
}

/* Kirvano-like: branco puro, sombras leves, tipografia clean */
.checkout-root.checkout-theme-kirvano {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}
.checkout-root.checkout-theme-kirvano .chk-panel,
.checkout-root.checkout-theme-kirvano .chk-panel-soft {
    background: #ffffff !important;
    border: 1px solid #e8edf3 !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
    border-radius: 1.25rem !important;
}

/* Cakto-like: quente, cantos bem redondos */
.checkout-root.checkout-theme-cakto {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 35%, #fef3c7 100%) !important;
}
.checkout-root.checkout-theme-cakto .chk-panel,
.checkout-root.checkout-theme-cakto .chk-panel-soft {
    background: #ffffff !important;
    border: 2px solid rgba(251, 146, 60, 0.25) !important;
    box-shadow: 0 16px 48px rgba(234, 88, 12, 0.12) !important;
    border-radius: 1.5rem !important;
}

/* Futurista: mesh escuro + vidro + brilho no accent */
.checkout-root.checkout-theme-futura {
    background: radial-gradient(ellipse 120% 80% at 20% 0%, rgba(99, 102, 241, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 100% 30%, rgba(16, 185, 129, 0.2) 0%, transparent 45%),
        linear-gradient(180deg, #050508 0%, #0c0f18 50%, #06080f 100%) !important;
}
.checkout-root.checkout-theme-futura .chk-panel,
.checkout-root.checkout-theme-futura .chk-panel-soft {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--checkout-accent, #6366f1) 18%, transparent) !important;
    border-radius: 1.25rem !important;
    color: #e2e8f0 !important;
}
.checkout-root.checkout-theme-futura .chk-panel h1,
.checkout-root.checkout-theme-futura .chk-panel h2,
.checkout-root.checkout-theme-futura .chk-panel .text-gray-800 {
    color: #f8fafc !important;
}
.checkout-root.checkout-theme-futura .chk-panel .text-gray-700,
.checkout-root.checkout-theme-futura .chk-panel label.text-gray-700 {
    color: #cbd5e1 !important;
}
.checkout-root.checkout-theme-futura .chk-panel .border-gray-200,
.checkout-root.checkout-theme-futura hr.border-gray-200 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.checkout-root.checkout-theme-futura .chk-panel .checkout-input,
.checkout-root.checkout-theme-futura .chk-panel input,
.checkout-root.checkout-theme-futura .chk-panel select,
.checkout-root.checkout-theme-futura .chk-panel textarea {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}
.checkout-root.checkout-theme-futura #mobile-footer {
    background: rgba(12, 15, 24, 0.92) !important;
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.checkout-root.checkout-theme-futura #checkout-page-scope .payment-method-card.chk-panel-soft {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px);
}
.checkout-root.checkout-theme-futura #checkout-page-scope .payment-method-card .text-gray-800 {
    color: #f1f5f9 !important;
}