/*
Theme Name: Zenvora
Description: Main Stylesheet (Modern CSS with Variables)
Struktur File:
CSS Variables (Root & Dark Mode)
Base & Utility Overrides
Components (Product Card, Hover Effects)
Single Product (Gallery, Swatches, Layouts)
Animations
*/

/* STREAMING_CHUNK:Defining CSS Variables for Theming and Dark Mode... */
:root {
    /* Brand Colors */
    --zenvora-primary: #0d6efd;
    --zenvora-primary-rgb: 13, 110, 253;
    --zenvora-secondary: #6c757d;

    /* Backgrounds & Surfaces */
    --zenvora-bg-body: #f8f9fa;
    --zenvora-bg-surface: #ffffff;
    --zenvora-border-color: rgba(0, 0, 0, 0.08);

    /* Typography */
    --zenvora-text-main: #212529;
    --zenvora-text-muted: #6c757d;

    /* Shadows */
    --zenvora-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --zenvora-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    --zenvora-shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.12);

    /* Transitions */
    --zenvora-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --zenvora-transition-smooth: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);


}

/*
Dark Mode Preparation
Sesuai standar Bootstrap 5.3+, kita gunakan atribut data-bs-theme
*/
[data-bs-theme="dark"] {
    --zenvora-bg-body: #121212;
    --zenvora-bg-surface: #1e1e1e;
    --zenvora-border-color: rgba(255, 255, 255, 0.1);
    --zenvora-text-main: #f8f9fa;
    --zenvora-text-muted: #adb5bd;
    --zenvora-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    --zenvora-shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.6);
}

/* STREAMING_CHUNK:Setting up base overrides and global utilities... */
body {
    background-color: var(--zenvora-bg-body);
    color: var(--zenvora-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bg-white,
.card {
    background-color: var(--zenvora-bg-surface) !important;
}

.text-dark {
    color: var(--zenvora-text-main) !important;
}

.text-muted,
.text-secondary {
    color: var(--zenvora-text-muted) !important;
}

.border,
.border-top,
.border-bottom {
    border-color: var(--zenvora-border-color) !important;
}

/* Custom Utilities */
.transition-all {
    transition: all var(--zenvora-transition-smooth);
}

.border-transparent {
    border-color: transparent !important;
}

.opacity-0 {
    opacity: 0;
}

.hover-opacity-100:hover {
    opacity: 1 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.z-index-2 {
    z-index: 2;
}

/* STREAMING_CHUNK:Styling the Product Card and Hover Animations... */
/* Card Dasar */
.zenvora-product-card {
    border: 1px solid var(--zenvora-border-color);
    box-shadow: var(--zenvora-shadow-sm);
    will-change: transform, box-shadow;
}

/* Animasi Hover Lift (Mengambang) */
.hover-lift {
    transition: transform var(--zenvora-transition-smooth), box-shadow var(--zenvora-transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--zenvora-shadow-hover) !important;
    border-color: transparent;
}

/* Image Swap (Gambar Kedua) */
.zenvora-secondary-img {
    /* Opacity awal 0 (diatur via inline class), kita set transition di sini */
    transition: opacity var(--zenvora-transition-smooth), transform 0.6s ease;
}

/* Efek Zoom pelan saat gambar di hover */
.zenvora-product-img-wrapper img {
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity var(--zenvora-transition-smooth);
}

.zenvora-product-img-wrapper:hover img {
    transform: scale(1.05);
}

/* Tampilkan gambar kedua saat wrapper di-hover */
.zenvora-product-card:hover .zenvora-secondary-img {
    opacity: 1 !important;
}

/* Hover Actions (Add to Cart / Quickview) */
.zenvora-product-actions {
    /* Sembunyikan ke bawah secara default */
    transform: translate(-50%, 20px);
    transition: transform var(--zenvora-transition-smooth), opacity var(--zenvora-transition-fast);
}

.zenvora-product-card:hover .zenvora-product-actions {
    /* Muncul ke posisi semula */
    transform: translate(-50%, -10px);
    opacity: 1;
}

/* Tombol Aksi di dalam Card */
.zenvora-cart-btn,
.zenvora-quickview-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--zenvora-text-main);
    background-color: var(--zenvora-bg-surface);
    transition: all 0.2s ease;
}

.zenvora-cart-btn:hover,
.zenvora-quickview-btn:hover {
    background-color: var(--zenvora-primary);
    color: #fff !important;
    transform: scale(1.1);
}

/* STREAMING_CHUNK:Styling the Single Product elements (Gallery, Swatches, Layout)... */
/* Hapus border biru default saat fokus di tombol swatch */
.zenvora-swatch-btn:focus,
.zenvora-swatch-btn:active {
    box-shadow: none !important;
    outline: none;
}

.zenvora-swatch-btn {
    min-width: 44px;
    height: 38px;
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--zenvora-transition-fast);
}

.zenvora-swatch-btn.btn-primary {
    box-shadow: 0 4px 10px rgba(var(--zenvora-primary-rgb), 0.3);
}

/* Galeri Utama & Lightbox */
.zenvora-lightbox-btn {
    background-color: var(--zenvora-bg-surface);
    color: var(--zenvora-text-main);
    width: 36px;
    height: 36px;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--zenvora-transition-fast);
}

.zenvora-main-image-wrapper:hover .zenvora-lightbox-btn {
    opacity: 1;
    transform: scale(1);
}

.zenvora-lightbox-btn:hover {
    background-color: var(--zenvora-text);
}

.zenvora-product-slider .zenvora-product-card {
    width: 100%;
}

/* STREAMING_CHUNK:Styling the Shop Sidebar and WooCommerce Widgets... */
.zenvora-shop-sidebar .widget ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.zenvora-shop-sidebar .widget ul li {
    padding: 0.5rem 0;
    color: var(--zenvora-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--zenvora-border-color);
}

.zenvora-shop-sidebar .widget ul li:last-child {
    border-bottom: none;
}

.zenvora-shop-sidebar .widget ul li a {
    color: var(--zenvora-text-main);
    text-decoration: none;
    transition: color var(--zenvora-transition-fast);
}

.zenvora-shop-sidebar .widget ul li a:hover {
    color: var(--zenvora-primary);
}

/* Fix untuk jumlah item (count) bawaan WooCommerce */
.zenvora-shop-sidebar .widget ul li .count {
    font-size: 0.75rem;
    background-color: var(--zenvora-border-color);
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    color: var(--zenvora-text-main);
}