/*
Theme Name: Astra WP Premium Child
Theme URI: https://wppremium.com.br/
Description: Child theme do Astra com identidade visual da WP Premium (dark mode, gradiente ciano→roxo, fontes Syne + DM Sans).
Author: WP Premium
Author URI: https://wppremium.com.br/
Template: astra
Version: 1.0.0
Text Domain: astra-wppremium
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ============================================================
   Variáveis CSS — paleta WP Premium (HSL como no Lovable)
   ============================================================ */
:root {
    --wpp-bg:           hsl(224 30% 6%);
    --wpp-bg-2:         hsl(224 25% 9%);
    --wpp-fg:           hsl(210 40% 97%);
    --wpp-muted:        hsl(224 20% 14%);
    --wpp-muted-fg:     hsl(215 20% 60%);
    --wpp-border:       hsl(224 20% 16%);
    --wpp-primary:      hsl(185 85% 55%);
    --wpp-primary-fg:   hsl(224 30% 6%);
    --wpp-secondary:    hsl(270 60% 55%);
    --wpp-radius:       0.75rem;

    --wpp-gradient-primary: linear-gradient(135deg, hsl(185 85% 55%), hsl(270 60% 55%));
    --wpp-gradient-card:    linear-gradient(145deg, hsl(224 25% 10%), hsl(224 20% 8%));
    --wpp-gradient-hero:    linear-gradient(135deg, hsl(224 30% 6%) 0%, hsl(270 40% 10%) 100%);
    --wpp-glow-primary:     0 0 40px hsl(185 85% 55% / 0.35);
    --wpp-shadow-card:      0 8px 32px hsl(224 30% 2% / 0.6);
}

/* ============================================================
   Reset visual e tipografia global
   ============================================================ */
body,
.ast-container {
    background: var(--wpp-bg) !important;
    color: var(--wpp-fg) !important;
    font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.wp-block-heading {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800;
    color: var(--wpp-fg);
    letter-spacing: -0.01em;
}

a { color: var(--wpp-primary); }
a:hover { color: var(--wpp-secondary); }

p { color: var(--wpp-muted-fg); }

/* Texto com gradiente (use a classe .wpp-gradient-text) */
.wpp-gradient-text {
    background: var(--wpp-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   Header / Navbar — glassmorphism dark
   ============================================================ */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
    background: hsl(224 25% 9% / 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(224 20% 16% / 0.5);
}

.main-header-menu a,
.ast-builder-menu .menu-item > a {
    color: var(--wpp-muted-fg) !important;
    font-size: 14px;
    transition: color .2s ease;
}
.main-header-menu a:hover,
.ast-builder-menu .menu-item > a:hover {
    color: var(--wpp-fg) !important;
}

.site-title a {
    background: var(--wpp-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

/* ============================================================
   Botões — gradiente com glow
   ============================================================ */
.wp-block-button__link,
.ast-custom-button,
button.button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: var(--wpp-gradient-primary) !important;
    color: var(--wpp-primary-fg) !important;
    border: none !important;
    border-radius: var(--wpp-radius) !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    box-shadow: var(--wpp-glow-primary);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 60px hsl(185 85% 55% / 0.55);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--wpp-fg) !important;
    border: 1px solid hsl(224 20% 16% / 0.8) !important;
    box-shadow: none;
}

/* ============================================================
   Cards (produtos, blocos, etc.)
   ============================================================ */
.wpp-card,
.woocommerce ul.products li.product,
.wp-block-group.is-style-wpp-card {
    background: var(--wpp-gradient-card) !important;
    border: 1px solid var(--wpp-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--wpp-shadow-card);
    padding: 1.5rem;
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.wpp-card:hover,
.woocommerce ul.products li.product:hover {
    box-shadow: var(--wpp-glow-primary);
    border-color: hsl(185 85% 55% / 0.4);
    transform: translateY(-2px);
}

/* Glass utility (Hero/Navbar badges, etc.) */
.wpp-glass {
    background: hsl(224 25% 9% / 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(224 20% 16% / 0.5);
}

/* ============================================================
   WooCommerce — produtos
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: 'Syne', sans-serif !important;
    color: var(--wpp-fg) !important;
    font-weight: 700;
    font-size: 1.1rem;
}

.woocommerce ul.products li.product .price,
.woocommerce span.price,
.woocommerce-Price-amount {
    background: var(--wpp-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-family: 'Syne', sans-serif !important;
}

.woocommerce ul.products li.product .price del {
    color: var(--wpp-muted-fg) !important;
    -webkit-text-fill-color: var(--wpp-muted-fg) !important;
    background: none !important;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: .5rem;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    background: var(--wpp-gradient-primary) !important;
    color: var(--wpp-primary-fg) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 700;
    font-size: 12px;
}

/* Página do produto individual */
.woocommerce div.product .product_title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--wpp-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--wpp-muted);
    border: 1px solid var(--wpp-border);
    border-radius: var(--wpp-radius) var(--wpp-radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--wpp-gradient-card);
}

/* Cart, checkout, account */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce form,
.woocommerce-account .woocommerce {
    background: var(--wpp-bg-2);
    border: 1px solid var(--wpp-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.woocommerce table.shop_table {
    background: transparent;
    border: 1px solid var(--wpp-border);
}

.woocommerce .quantity .qty,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background: var(--wpp-muted) !important;
    border: 1px solid var(--wpp-border) !important;
    color: var(--wpp-fg) !important;
    border-radius: 0.5rem !important;
}

.woocommerce-info,
.woocommerce-message {
    background: hsl(185 85% 55% / 0.08) !important;
    border-top: 3px solid var(--wpp-primary) !important;
    color: var(--wpp-fg) !important;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer,
.ast-footer-overlay {
    background: hsl(224 20% 14% / 0.2) !important;
    border-top: 1px solid var(--wpp-border) !important;
    color: var(--wpp-muted-fg);
}
.site-footer a { color: var(--wpp-muted-fg); }
.site-footer a:hover { color: var(--wpp-fg); }

/* ============================================================
   Helpers
   ============================================================ */
.wpp-section { padding: 6rem 1rem; }
.wpp-section--muted { background: hsl(224 20% 14% / 0.3); }
.wpp-container { max-width: 1280px; margin-inline: auto; }

.wpp-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: hsl(185 85% 55% / 0.1);
    color: var(--wpp-primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Selection */
::selection {
    background: var(--wpp-primary);
    color: var(--wpp-primary-fg);
}