/*
Theme Name: Hessencial Tema
Theme URI: http://example.com/hessencial-tema
Author: Gaminza
Author URI: https://gaminza.com/
Description: Tema personalizado para Hessencial Camisetas
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hessencial-tema
Tags: woocommerce, e-commerce
*/

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;

    --card: 0 0% 98%;
    --card-foreground: 0 0% 0%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;

    --primary: 211 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 0%;

    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;

    --accent: 211 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 211 100% 50%;

    --radius: 0.75rem;

    /* Apple-inspired colors */
    --apple-blue: 211 100% 50%;
    --apple-gray: 0 0% 56%;
    --apple-gray-light: 0 0% 86%;
    --apple-black: 0 0% 0%;
    --apple-white: 0 0% 100%;

    /* Subtle gradients */
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 100%) 100%);
    --gradient-section: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px -2px hsl(0 0% 0% / 0.08);
    --shadow-md: 0 8px 24px -8px hsl(0 0% 0% / 0.12);
    --shadow-lg: 0 16px 48px -16px hsl(0 0% 0% / 0.15);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset for fixed header + breathing room */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes accordion-down {
    from {
        height: 0;
    }

    to {
        height: var(--radix-accordion-content-height);
    }
}

@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height);
    }

    to {
        height: 0;
    }
}

/* WooCommerce Compatibility Styles */
.woocommerce-cart-form button[name="update_cart"] {
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: opacity 0.2s;
}

.woocommerce-cart-form button[name="update_cart"]:hover {
    opacity: 0.9;
}

.woocommerce-message {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
}

.woocommerce-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
}

.single_add_to_cart_button {
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
    padding: 0.75rem 2.5rem;
    border-radius: 9999px;
    font-weight: 500;
    transition: opacity 0.2s;
    height: 3rem;
    font-size: 1rem;
    cursor: pointer;
}

.single_add_to_cart_button:hover {
    opacity: 0.9;
}

.single_add_to_cart_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variations Form Reset (Table to Div-like behavior) */
.variations {
    width: 100%;
    margin-bottom: 2rem;
    border-spacing: 0;
    border-collapse: collapse;
    display: block;
    /* Treat table as block */
}

.variations tbody,
.variations tr {
    display: block;
    /* Treat rows as block */
    width: 100%;
}

.variations th.label {
    display: none;
    /* We hide labels as our JS generates better ones */
}

.variations td.value {
    display: block;
    width: 100%;
    padding: 0 0 1rem 0;
    vertical-align: top;
    border: none;
}

/* Cleanup standard WP hooks */
.reset_variations {
    display: inline-block;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-decoration: underline;
    margin-top: 0.5rem;
    visibility: hidden;
    /* WC toggles this, but we style it nicely */
}

/* Quantity Input Styling Update */
.quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    padding: 0.25rem;
    background: transparent;
    height: 3rem;
    min-width: 140px;
    justify-content: space-between;
}

.quantity input.qty {
    width: 3rem;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 500;
    font-size: 1.125rem;
    color: hsl(var(--foreground));
    padding: 0;
    pointer-events: none;
    /* User clicks buttons */
}

.quantity-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quantity-btn:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

/* Hide number spinners */
.quantity input[type=number]::-webkit-inner-spin-button,
.quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Notices */
.woocommerce-notices-wrapper {
    margin-bottom: 2rem;
}

/* Swatch Styles */
.hessencial-swatch-container {
    margin-bottom: 1.5rem;
}

.swatch-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.swatch-title {
    font-weight: 600;
    font-size: 1rem;
    color: hsl(var(--foreground));
}

.swatch-value {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    font-weight: 400;
}

.swatch-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.swatch-btn {
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
}

.swatch-color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.5);
    /* Subtle inner border */
}

.swatch-color.selected {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 3px hsl(var(--foreground));
    transform: scale(1.1);
}

.swatch-color:hover:not(.selected) {
    transform: scale(1.1);
}

.swatch-text {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swatch-text.selected {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border-color: hsl(var(--foreground));
}

.swatch-text:hover:not(.selected) {
    border-color: hsl(var(--foreground));
}

/* Hide default select but keep accessible if needed (JS handles hide, but just in case) */
/* Hide default select but keep accessible if needed (JS handles hide, but just in case) */
.variations select {
    /* visibility: hidden; position: absolute; */
}

/* Cart Specific Quantity Override */
.woocommerce-cart .quantity {
    height: 2.25rem !important;
    /* h-9 matches Tailwind class */
    min-width: 90px !important;
    padding: 0 0.125rem !important;
    border-color: hsl(var(--border));
}

.woocommerce-cart .quantity-btn {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 1rem !important;
}

.woocommerce-cart .quantity input.qty {
    width: 2rem !important;
    font-size: 0.9375rem !important;
    /* 15px */
    height: 100% !important;
}

/* Ensure remove button doesn't have default styling issues */
.woocommerce-cart .product-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkout Button Styling */
.woocommerce-cart .wc-proceed-to-checkout {
    padding-top: 1rem;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background-color: #0066FF !important;
    color: white !important;
    border-radius: 9999px !important;
    /* Pill shape to match quantity/swatches */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
    text-transform: none;
    /* Removing default uppercase if any */
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background-color: #0052cc !important;
    transform: translateY(-1px);
}

/* Animation Utilities */
.hover\:pause-animation:hover {
    animation-play-state: paused;
}

/* Hide shipping calculator on product page */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto,
.containerCalculator {
    display: none !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}