/*
 * Cát Vân storefront stylesheet.
 *
 * Cut from theme/assets/css/style.css. Only the @font-face URLs changed: the
 * source filenames carried spaces ("SVN-Gilroy Light.otf"), which break on
 * servers that do not URL-encode them. Design tokens, helpers and Swiper
 * overrides are byte-identical to the approved theme.
 */
/* ==========================================
   DESIGN TOKENS - ROOT VARIABLES (Màu & Font Size)
   ========================================== */

:root {
    /* Colors (Màu sắc theo Logo Cát Vân: Xanh Ngọc & Vàng Hoàng Kim) */
    --color-primary: #009444;
    /* Emerald Green từ Logo Cát Vân */
    --color-primary-hover: #007636;
    /* Darker Emerald on hover */
    --color-secondary: #C59B27;
    /* Warm Gold từ Logo Cát Vân */
    --color-secondary-hover: #a37f1d;
    /* Darker Gold on hover */
    --color-bg-dark: #030712;
    /* Deep dark background */
    --color-text-main: #ffffff;
    /* Main white text */
    --color-text-muted: rgba(255, 255, 255, 0.8);
    /* Muted text */
    --color-text-subtle: rgba(255, 255, 255, 0.6);
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-star: #C59B27;
    /* Gold star rating */

    /* Font Sizes (fz - Kích thước chữ) */
    --fz-xs: 0.75rem;
    /* 12px */
    --fz-sm: 0.875rem;
    /* 14px */
    --fz-base: 1rem;
    /* 16px */
    --fz-lg: 1.125rem;
    /* 18px */
    --fz-xl: 1.25rem;
    /* 20px */
    --fz-2xl: 1.5rem;
    /* 24px */
    --fz-3xl: 1.875rem;
    /* 30px */
    --fz-4xl: 2.25rem;
    /* 36px */
    --fz-5xl: 3rem;
    /* 48px */
    --fz-6xl: 3.75rem;
    /* 60px */
}

/* Local SVN-Gilroy Fonts */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('../fonts/svn-gilroy/svn-gilroy-black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

body {
    font-family: 'SVN-Gilroy', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Phudu', cursive, sans-serif;
}

/* Scrollbar Utility */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Slide Transition Animations */
.slide-bg {
    transition: background-image 0.8s ease-in-out;
}

.slide-content-fade {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.slide-content-fade.changing {
    opacity: 0;
    transform: translateY(15px);
}

/* High Contrast Text Shadows for Text over Images */
.text-shadow-contrast {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.text-shadow-subtle {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Active Dot Indicator */
.dot-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
}

.dot-indicator.active {
    background-color: #ffffff;
    border-color: #ffffff;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Swiper Ultra Premium Custom Pagination Bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.35);
    border: 1.5px solid rgba(197, 155, 39, 0.6);
    opacity: 1;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin: 0 5px !important;
    display: inline-block;
    flex-shrink: 0;
}

.swiper-pagination-bullet:hover {
    background: rgba(197, 155, 39, 0.7);
    transform: scale(1.2);
}

.swiper-pagination-bullet-active {
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, #C59B27 0%, #e5be53 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    transform: scale(1.35) !important;
    box-shadow: 0 0 12px rgba(197, 155, 39, 0.8);
}

/* Light Theme Swiper Bullets (for Trending Section) */
.trending-pagination .swiper-pagination-bullet {
    background: rgba(29, 70, 55, 0.2);
    border: 1.5px solid rgba(29, 70, 55, 0.4);
}

.trending-pagination .swiper-pagination-bullet:hover {
    background: rgba(0, 148, 68, 0.5);
}

.trending-pagination .swiper-pagination-bullet-active {
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, #1d4637 0%, #009444 100%) !important;
    border-radius: 50% !important;
    transform: scale(1.35) !important;
    box-shadow: 0 0 12px rgba(0, 148, 68, 0.5);
}