/**
 * WooCommerce Nhà Hàng Việt - Frontend Styles
 * Updated to match FoodSE.pl style
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap');

/* ===== CSS VARIABLES (Theme System) ===== */
:root {
    /* Colors - FoodSE.pl Style */
    --nhv-primary-color: #c16f2d;
    --nhv-primary-hover: #a85b22;
    --nhv-success-color: #4CAF50;
    --nhv-error-color: #f44336;
    --nhv-text-color: #FFFFFF;
    --nhv-text-light: #E0E0E0;
    --nhv-text-lighter: #B0B0B0;

    /* Typography - FoodSE.pl Style */
    --nhv-font-heading: 'Playfair Display', serif;
    --nhv-font-body: 'Lato', sans-serif;

    /* Borders */
    --nhv-border-color: #e5e5e5;
    --nhv-border-color-light: #f0f0f0;
    --nhv-border-color-dark: #ddd;
    --nhv-border-radius: 6px;
    --nhv-border-radius-large: 12px;

    /* Backgrounds */
    --nhv-bg-white: #fff;
    --nhv-bg-light: #f9f9f9;
    --nhv-bg-lighter: #f5f5f5;
    --nhv-bg-dark: #fcfcfc;

    /* Spacing */
    --nhv-spacing-xs: 5px;
    --nhv-spacing-sm: 10px;
    --nhv-spacing-md: 15px;
    --nhv-spacing-lg: 20px;
    --nhv-spacing-xl: 30px;

    /* Typography */
    --nhv-font-size-base: 14px;
    --nhv-font-size-large: 18px;
    --nhv-font-size-small: 13px;

    /* Shadows */
    --nhv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --nhv-shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
    --nhv-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --nhv-transition-fast: 0.2s;
    --nhv-transition-normal: 0.3s;
    --nhv-transition-slow: 0.5s;
}

/* ===== TYPOGRAPHY (FoodSE.pl Style) ===== */
.wc-nhv-menu-wrapper {
    font-family: var(--nhv-font-body);
    color: var(--nhv-text-color);
}

.wc-nhv-menu-wrapper h1,
.wc-nhv-menu-wrapper h2,
.wc-nhv-menu-wrapper h3,
.wc-nhv-menu-wrapper h4,
.wc-nhv-section-title,
.wc-nhv-product-title,
.wc-nhv-cat-title {
    font-family: var(--nhv-font-heading);
    font-style: italic;
}

/* ===== TÙY CHỌN SẢN PHẨM ===== */
.wc-nhv-tuychon-frontend {
    margin: var(--nhv-spacing-lg) 0;
    padding: var(--nhv-spacing-lg);
    background: var(--nhv-bg-light);
    border-radius: var(--nhv-border-radius-large);
    border: 1px solid var(--nhv-border-color);
}

.wc-nhv-option-group {
    margin-bottom: 20px;
}

.wc-nhv-option-group:last-child {
    margin-bottom: 0;
}

.wc-nhv-option-label {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.wc-nhv-option-label .required {
    color: #ff0000;
}

.wc-nhv-kich-co-select {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.3s;
}

.wc-nhv-kich-co-select:focus {
    border-color: var(--nhv-primary-color);
    outline: none;
}

/* Topping */
.wc-nhv-topping-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--nhv-spacing-sm);
}

.wc-nhv-topping-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--nhv-bg-white);
    border: 2px solid var(--nhv-border-color);
    border-radius: var(--nhv-border-radius);
    cursor: pointer;
    transition: all var(--nhv-transition-normal);
    font-size: var(--nhv-font-size-base);
    position: relative;
    user-select: none;
}

.wc-nhv-topping-item:hover {
    border-color: var(--nhv-primary-color);
    box-shadow: 0 2px 8px rgba(255, 133, 51, 0.1);
}

/* Hide native checkbox */
.wc-nhv-topping-item input[type="checkbox"],
.wc-nhv-topping-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Custom Checkbox */
.wc-nhv-topping-item input[type="checkbox"] + span:first-of-type::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid var(--nhv-border-color-dark);
    border-radius: 4px;
    background-color: var(--nhv-bg-white);
    transition: all var(--nhv-transition-fast);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Checked state with SVG checkmark */
.wc-nhv-topping-item input[type="checkbox"]:checked + span:first-of-type::before {
    background-color: var(--nhv-primary-color);
    border-color: var(--nhv-primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' fill='none'%3E%3Cpath fill='%23FFF' d='m6.5 12.6-6.1-6 2.2-2.2 3.9 4L13.9.9l2.2 2.2z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

/* Focus state */
.wc-nhv-topping-item input[type="checkbox"]:focus + span:first-of-type::before,
.wc-nhv-topping-item input[type="radio"]:focus + span:first-of-type::before {
    border-color: var(--nhv-primary-color);
    box-shadow: 0 0 0 3px rgba(255, 133, 51, 0.1);
}

/* Custom Radio */
.wc-nhv-topping-item input[type="radio"] + span:first-of-type::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid var(--nhv-border-color-dark);
    border-radius: 50%;
    background-color: var(--nhv-bg-white);
    transition: all var(--nhv-transition-fast);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Radio checked state with inner dot */
.wc-nhv-topping-item input[type="radio"]:checked + span:first-of-type::before {
    background-color: var(--nhv-bg-white);
    border-color: var(--nhv-primary-color);
    border-width: 6px;
}

.wc-nhv-topping-item .price {
    margin-left: auto;
    color: var(--nhv-primary-color);
    font-weight: 600;
}

/* Ghi chú */
.wc-nhv-option-group textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s;
}

.wc-nhv-option-group textarea:focus {
    border-color: #FF8533;
    outline: none;
}

/* ===== MENU NHÀ HÀNG ===== */
.wc-nhv-menu-wrapper {
    margin: 30px auto;
    max-width: 1200px;
    padding: 0 32px;
}
/* Categories Navigation - Fixed Sticky Behavior */
.wc-nhv-menu-bar-container {
    position: relative;
    z-index: 1000;
    background: var(--bg-black, #0A0A0A);
    margin-bottom: 40px;
    padding: 12px 0;  /* Giảm từ 20px xuống 12px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* When fixed by JS - IMPROVED */
.wc-nhv-menu-bar-container.is-fixed {
    /* JavaScript handles position, left, top, width, max-width, z-index */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

.wc-nhv-categories-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;  /* Giảm từ 12px xuống 10px */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 32px;  /* Tăng từ 25px lên 32px cho đồng bộ */
    scroll-behavior: auto; /* Changed to auto for instant jump in infinite loop */
    -webkit-overflow-scrolling: touch;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cloned buttons for infinite carousel - same styling as original */
.wc-nhv-cat-btn.cloned {
    pointer-events: auto;
    cursor: pointer;
}

/* Smooth transition when not jumping */
.wc-nhv-categories-nav.smooth-scroll {
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep scrolling */
.wc-nhv-categories-nav::-webkit-scrollbar {
    display: none;
}

.wc-nhv-categories-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Blur gradient effect on sides */
.wc-nhv-menu-bar-container::before,
.wc-nhv-menu-bar-container::after {
    content: '';
    position: absolute;
    top: 12px;  /* Điều chỉnh theo padding mới */
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 2;
}

.wc-nhv-menu-bar-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-black, #0A0A0A) 0%, transparent 100%);
}

.wc-nhv-menu-bar-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-black, #0A0A0A) 0%, transparent 100%);
}

.wc-nhv-cat-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 20px;  /* Giảm từ 12px 24px */
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    font-size: 14px;  /* Giảm từ 15px */
    font-weight: 600;
    font-family: var(--nhv-font-body);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--nhv-text-light);
}

.wc-nhv-cat-btn:hover {
    border-color: var(--nhv-primary-color);
    color: var(--nhv-primary-color);
    background: rgba(193, 111, 45, 0.1);
    transform: translateY(-2px);
}

.wc-nhv-cat-btn.active {
    background: var(--nhv-primary-color);
    border-color: var(--nhv-primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(193, 111, 45, 0.4);
}

.wc-nhv-cat-btn .count {
    opacity: 0.8;
    font-size: 12px;  /* Giảm từ 13px */
    margin-left: 4px;
}

/* Mobile adjustments - FIXED */
@media (max-width: 768px) {
    .wc-nhv-menu-bar-container {
        padding: 10px 0;  /* Giảm từ 15px */
        margin-left: 0;  /* Không negative margin */
        margin-right: 0;
        width: 100%;  /* 100% thay vì calc(100% + 40px) */
    }
    
    /* When sticky on mobile */
    .wc-nhv-menu-bar-container[style*="position: fixed"] {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    
    .wc-nhv-categories-nav {
        padding: 3px 15px;  /* Giảm padding */
    }
    
    .wc-nhv-cat-btn {
        padding: 8px 16px;  /* Giảm padding button */
        font-size: 13px;
    }
    
    .wc-nhv-menu-bar-container::before,
    .wc-nhv-menu-bar-container::after {
        top: 10px;
        width: 40px;  /* Giảm gradient width */
    }
}

/* Product Grid */
.wc-nhv-products-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 sản phẩm/hàng desktop */
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.wc-nhv-products-grid.col-2 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
}

.wc-nhv-products-grid.col-3 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
}

.wc-nhv-products-grid.col-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
}

/* Product Item - Vertical Layout (Default) */
.wc-nhv-product-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wc-nhv-product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    border-color: rgba(193, 111, 45, 0.5);
}

/* Product Item - Horizontal Layout */
.wc-nhv-products-grid.horizontal .wc-nhv-product-item {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-item:hover {
    transform: translateY(-4px);
    border-color: rgba(193, 111, 45, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.wc-nhv-product-image {
    position: relative;
    overflow: hidden;
    padding-top: 70%; /* Reduced from 90% - more compact like mobile */
}

.wc-nhv-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wc-nhv-product-item:hover .wc-nhv-product-image img {
    transform: scale(1.05);
}

/* Horizontal Layout - Image */
.wc-nhv-products-grid.horizontal .wc-nhv-product-image {
    flex: 0 0 130px;
    padding-top: 0;
    min-height: 130px;
    border-radius: 7px 0 0 7px;
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-image img {
    position: static;
    width: 130px;
    height: 130px;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .wc-nhv-products-grid.horizontal .wc-nhv-product-image {
        flex: 0 0 110px;
        min-height: 110px;
    }

    .wc-nhv-products-grid.horizontal .wc-nhv-product-image img {
        width: 110px;
        height: 110px;
    }
}

.wc-nhv-sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--nhv-primary-color);
    color: #fff;
    padding: 6px 14px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--nhv-font-body);
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(193, 111, 45, 0.4);
}

/* Calories Badge 🔥 - Desktop */
.wc-nhv-calories-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8533 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--nhv-font-body);
    letter-spacing: 0.3px;
    box-shadow: 0 3px 12px rgba(255, 107, 107, 0.5);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 3px 12px rgba(255, 107, 107, 0.5);
    }
    50% {
        box-shadow: 0 3px 16px rgba(255, 107, 107, 0.8);
    }
}

/* Price container - inline layout */
.wc-nhv-product-price,
.dealm__price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Giá gốc - tăng size lại */
.wc-nhv-product-price > .price,
.wc-nhv-product-price > span:not(.social-discount-box),
.dealm__price-now {
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* Social Discount Box 💰 - Compact inline với giá */
.social-discount-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #F5F5F5; /* Xám rất nhạt */
    border-radius: 6px;
    font-size: 12px; /* Tăng từ 11px */
    font-family: var(--nhv-font-body);
    transition: all 0.3s ease;
}

.social-discount-box:hover {
    background: #EFEFEF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.discount-icon {
    font-size: 13px; /* Tăng từ 12px */
    line-height: 1;
}

.discount-price {
    color: #10B981; /* Xanh lá sáng - màu tiết kiệm */
    font-weight: 700;
    font-size: 14px; /* Tăng từ 12px */
    line-height: 1;
}

.discount-text {
    color: #333333; /* Đen đậm dễ đọc */
    font-size: 11px; /* Tăng từ 10px */
    font-weight: 600;
    line-height: 1;
}

/* Social Icons - Brand Colors */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px; /* Square với bo góc nhẹ giống gốc */
    transition: all 0.2s ease;
    text-decoration: none;
}

.social-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Facebook & Instagram - Màu gốc brand chính thức */
.social-icon-fb {
    background: transparent !important;
    color: #1877F2 !important; /* Facebook Blue chính thức */
}

.social-icon-ig {
    background: transparent !important;
    color: #E4405F !important; /* Instagram Pink chính thức */
}

.social-icon-fb:hover {
    color: #0d5dbf !important; /* Facebook blue đậm hơn */
    transform: scale(1.15);
}

.social-icon-ig:hover {
    color: #c13584 !important; /* Instagram pink đậm hơn */
    transform: scale(1.15);
}

.social-icon svg {
    width: 10px;
    height: 10px;
    display: block;
    fill: currentColor !important; /* Đảm bảo SVG lấy màu từ color */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wc-nhv-product-price,
    .dealm__price {
        gap: 8px !important;
    }

    .social-discount-box {
        font-size: 11px;
        padding: 5px 8px;
        gap: 5px;
    }

    .discount-price {
        font-size: 13px;
    }

    .discount-text {
        font-size: 10px;
    }

    .social-icon {
        width: 20px;
        height: 20px;
    }

    .social-icon svg {
        width: 11px;
        height: 11px;
    }
}

.wc-nhv-product-info {
    padding: 14px; /* Reduced from 20px - more compact */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Horizontal Layout - Info */
.wc-nhv-products-grid.horizontal .wc-nhv-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
}

.wc-nhv-product-title {
    margin: 0 0 8px 0; /* Reduced from 12px */
    font-size: 19px; /* Reduced from 24px - closer to mobile */
    line-height: 1.3; /* Reduced from 1.4 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.3em * 2);
}

.wc-nhv-product-title a {
    color: var(--nhv-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.wc-nhv-product-title a:hover {
    color: var(--nhv-primary-color);
}

.wc-nhv-product-desc {
    color: var(--nhv-text-light);
    font-size: 15px; /* Reduced from 17px */
    line-height: 1.5; /* Reduced from 1.6 */
    margin-bottom: 10px; /* Reduced from 15px */
    font-family: var(--nhv-font-body);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Reduced from 3 - more compact */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 2);
}

.wc-nhv-product-price {
    font-size: 21px; /* Reduced from 26px */
    font-weight: 700;
    color: var(--nhv-primary-color);
    margin-bottom: 10px; /* Reduced from 15px */
    margin-top: auto;
    font-family: var(--nhv-font-body);
}

.wc-nhv-product-price del {
    opacity: 0.5;
    margin-right: 10px;
    font-size: 16px;
}

.wc-nhv-product-actions {
    margin-top: 0;
}

.wc-nhv-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-family: var(--nhv-font-body);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wc-nhv-btn-primary {
    background: var(--nhv-primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(193, 111, 45, 0.3);
}

.wc-nhv-btn-primary:hover {
    background: var(--nhv-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 111, 45, 0.4);
}

.wc-nhv-out-of-stock {
    display: inline-block;
    width: 100%;
    padding: 14px 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--nhv-text-lighter);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--nhv-font-body);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== UBER EATS STYLE FEATURES ===== */

/* Quick Add Button */
.wc-nhv-quick-add {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 10;
}

.wc-nhv-product-item:hover .wc-nhv-quick-add {
    opacity: 1;
    transform: scale(1);
}

.wc-nhv-quick-add:hover {
    background: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wc-nhv-quick-add svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

/* Popular Badge */
.wc-nhv-popular-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FFD700;
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--nhv-font-body);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
    z-index: 5;
}

/* Ranking Badge */
.wc-nhv-ranking-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #4CAF50;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--nhv-font-body);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    z-index: 5;
}

.wc-nhv-ranking-badge.rank-1 {
    background: #FFD700;
    color: #000;
}

.wc-nhv-ranking-badge.rank-2 {
    background: #C0C0C0;
    color: #000;
}

.wc-nhv-ranking-badge.rank-3 {
    background: #CD7F32;
    color: #fff;
}

/* Rating Display */
.wc-nhv-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--nhv-text-light);
    font-family: var(--nhv-font-body);
}

.wc-nhv-product-rating svg {
    width: 16px;
    height: 16px;
    fill: #4CAF50;
}

.wc-nhv-rating-percentage {
    font-weight: 600;
    color: #4CAF50;
}

.wc-nhv-rating-count {
    color: var(--nhv-text-lighter);
}

/* Horizontal layout adjustments for Uber Eats style */
.wc-nhv-products-grid.horizontal .wc-nhv-product-item {
    position: relative;
}

.wc-nhv-products-grid.horizontal .wc-nhv-quick-add {
    opacity: 1;
    transform: scale(1);
}

/* ===== NICE SELECT DROPDOWN STYLING ===== */

.nice-select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    border-radius: var(--nhv-border-radius, 6px);
    border: 2px solid #e5e5e5;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: auto;
    line-height: 22px;
    outline: none;
    padding: 10px 38px 10px 15px;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

.nice-select:hover {
    border-color: #FF8533;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #FF8533;
}

.nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 8px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform-origin: 66% 66%;
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
    width: 8px;
}

.nice-select.open:after {
    transform: rotate(-135deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #f6f6f6;
}

.nice-select .option.selected {
    font-weight: bold;
    background-color: #f0f0f0;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

/* Nice Select trong Modal */
.wc-nhv-product-modal .nice-select {
    border-color: #ddd;
}

.wc-nhv-product-modal .nice-select:hover,
.wc-nhv-product-modal .nice-select:active,
.wc-nhv-product-modal .nice-select.open,
.wc-nhv-product-modal .nice-select:focus {
    border-color: #FF8533;
}

/* Hide original select when Nice Select is active */
select.initialized {
    display: none !important;
}

/* ===== INLINE QUANTITY PICKER (Product Cards) ===== */

/* Quantity Picker Button Container */
.wc-nhv-product-actions .wc-nhv-quantity-picker {
    position: relative;
    display: inline-block;
    width: 100%;
}

.wc-nhv-product-actions .wc-nhv-qty-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FF8533;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto;
}

.wc-nhv-product-actions .wc-nhv-qty-button:hover {
    background: #e67625;
    transform: scale(1.05);
}

.wc-nhv-product-actions .wc-nhv-qty-button:active {
    transform: scale(0.95);
}

/* Expanding Button Container */
.wc-nhv-product-actions .wc-nhv-qty-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

.wc-nhv-product-actions .wc-nhv-quantity-picker.has-quantity .wc-nhv-qty-button {
    display: none;
}

.wc-nhv-product-actions .wc-nhv-quantity-picker.has-quantity .wc-nhv-qty-controls {
    display: flex;
    animation: expandIn 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

@keyframes expandIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Quantity Control Buttons */
.wc-nhv-qty-controls .qty-control {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FF8533;
    color: #FF8533;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-nhv-qty-controls .qty-control:hover {
    background: #FF8533;
    color: #fff;
    transform: scale(1.1);
}

.wc-nhv-qty-controls .qty-control:active {
    transform: scale(0.95);
}

/* Quantity Display */
.wc-nhv-qty-controls .qty-display {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 0 10px;
}

/* Show bin icon when quantity is 1 */
.wc-nhv-qty-controls .qty-minus.show-bin {
    background: #ff4444;
    border-color: #ff4444;
    color: #fff;
}

.wc-nhv-qty-controls .qty-minus.show-bin:hover {
    background: #cc0000;
    border-color: #cc0000;
}

/* ===== RESPONSIVE ===== */
/* Horizontal Layout - Header with name and price */
.wc-nhv-products-grid.horizontal .wc-nhv-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-title {
    margin: 0;
    flex: 1;
    font-size: 16px;
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-price {
    font-size: 16px;
    margin: 0 0 0 10px;
    white-space: nowrap;
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-desc {
    font-size: 13px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wc-nhv-products-grid.horizontal .wc-nhv-product-actions {
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
}

.wc-nhv-products-grid.horizontal .wc-nhv-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
}

/* Tablet responsive - 3 columns */
@media (min-width: 769px) and (max-width: 1024px) {
    .wc-nhv-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .wc-nhv-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }

    .wc-nhv-topping-list {
        grid-template-columns: 1fr;
    }

    .wc-nhv-categories-nav {
        justify-content: center;
    }

    .wc-nhv-products-grid.horizontal .wc-nhv-product-item {
        min-width: 320px;
    }
}

@media (max-width: 480px) {
    .wc-nhv-products-grid {
        grid-template-columns: 1fr;
    }

    .wc-nhv-products-grid.horizontal .wc-nhv-product-item {
        min-width: 250px;
    }
}

/* ===== MODAL POPUP SYSTEM ===== */

/* Loading Spinner Animation */
@keyframes wc-nhv-spinner {
    to {
        transform: rotate(360deg);
    }
}

.wc-nhv-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.wc-nhv-loading:before {
    content: "";
    animation: wc-nhv-spinner 0.8s linear infinite;
    border: 4px solid #888;
    border-radius: 50%;
    border-top-color: #eee;
    box-sizing: border-box;
    height: 24px;
    width: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
}

/* Modal Backdrop */
.wc-nhv-modal-backdrop {
    background: #000;
    opacity: 0.7;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99900;
    min-height: 360px;
}

/* Body when modal is open */
body.wc-nhv-modal-active {
    overflow: hidden !important;
    position: relative !important;
}

/* Modal Container */
.wc-nhv-product-modal {
    background: #fff;
    position: fixed;
    top: 10px;
    bottom: auto;
    left: 10px;
    right: 10px;
    height: 89%;
    width: auto;
    z-index: 100005;
    touch-action: manipulation;
    overflow: hidden;
    border-radius: 8px;
}

.wc-nhv-product-modal * {
    box-sizing: border-box;
}

/* Close Button */
.wc-nhv-product-modal .modal-close {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.wc-nhv-product-modal .modal-close:hover {
    background-color: #f5f5f5;
    transform: scale(1.1);
}

.wc-nhv-product-modal .modal-close:focus {
    outline: none;
    border: 2px solid #FF8533;
}

.wc-nhv-product-modal .modal-close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Modal Image Header */
.wc-nhv-product-modal .modal-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    width: 100%;
}

/* Product Content */
.wc-nhv-product-modal .product-content {
    max-height: calc(100% - 93px);
    overflow: auto;
    overflow-x: hidden;
}

.wc-nhv-product-modal .modal-details {
    padding: 25px 30px;
}

.wc-nhv-product-modal .product-name {
    margin: 0 0 0.6em;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.wc-nhv-product-modal .product-price {
    font-size: 1.4em;
    margin: 0.5em 0 0.8em;
    color: #FF8533;
    font-weight: 700;
}

.wc-nhv-product-modal .product-description,
.wc-nhv-product-modal .product-description-full {
    margin-bottom: 1.2em;
    line-height: 1.6;
    color: #666;
}

.wc-nhv-product-modal .product-description-full:last-child {
    margin-bottom: 0.8em;
}

.wc-nhv-product-modal .product-description-full p:last-child {
    margin-bottom: 0;
}

/* Product Options in Modal */
.wc-nhv-product-modal .product-options {
    margin-top: 1.5em;
}

.wc-nhv-product-modal .wc-nhv-option-group {
    margin-bottom: 20px;
}

.wc-nhv-product-modal .wc-nhv-option-group:last-child {
    margin-bottom: 0;
}

/* Modal Order Bar (Fixed at Bottom) */
.wc-nhv-product-modal .modal-order {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fcfcfc;
    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 93px;
    z-index: 100;
}

/* Quantity Wrapper */
.wc-nhv-product-modal .quantity-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.wc-nhv-product-modal .quantity-wrapper .qty-btn {
    background: #fff;
    border: none;
    width: 48px;
    height: 48px;
    font-size: 24px;
    line-height: 48px;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
}

.wc-nhv-product-modal .quantity-wrapper .qty-btn:hover {
    background: #f5f5f5;
    color: #FF8533;
}

.wc-nhv-product-modal .quantity-wrapper .qty {
    width: 60px;
    height: 48px;
    border: none;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    -moz-appearance: textfield;
}

.wc-nhv-product-modal .quantity-wrapper .qty::-webkit-inner-spin-button,
.wc-nhv-product-modal .quantity-wrapper .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wc-nhv-product-modal .quantity-wrapper .qty:focus {
    outline: none;
}

/* Add to Cart Button in Modal */
.wc-nhv-product-modal .btn-add-to-cart {
    flex: 1;
    background: #FF8533;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 48px;
}

.wc-nhv-product-modal .btn-add-to-cart:hover {
    background: #e67625;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 133, 51, 0.3);
}

.wc-nhv-product-modal .btn-add-to-cart:active {
    transform: translateY(0);
}

.wc-nhv-product-modal .btn-add-to-cart .total-price {
    font-weight: 700;
}

/* Out of Stock Message */
.wc-nhv-product-modal .out-of-stock-message {
    color: #d12929;
    font-weight: 600;
    font-size: 1.1em;
    text-align: center;
    flex: 1;
    margin: 0;
}

/* Modal Responsive - Desktop */
@media screen and (min-width: 768px) {
    .wc-nhv-product-modal {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 700px;
        min-width: 590px;
        max-height: 95vh;
        height: auto;
        bottom: auto;
        right: auto;
        box-shadow: 0 0 3px rgba(50, 50, 50, 0.3);
    }

    .wc-nhv-product-modal .modal-image {
        height: 300px;
    }

    .wc-nhv-product-modal .product-content {
        max-height: calc(95vh - 93px);
    }
}

/* Modal Responsive - Mobile */
@media screen and (max-width: 767px) {
    .wc-nhv-product-modal .modal-order {
        padding: 15px 20px;
        flex-wrap: wrap;
    }

    .wc-nhv-product-modal .quantity-wrapper {
        flex: 0 0 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

    .wc-nhv-product-modal .btn-add-to-cart {
        flex: 1 0 100%;
        font-size: 14px;
    }

    .wc-nhv-product-modal .modal-details {
        padding: 20px;
    }
}

@media screen and (max-width: 420px) {
    .wc-nhv-product-modal .modal-order {
        padding-left: 15px;
        padding-right: 15px;
    }

    .wc-nhv-product-modal .btn-add-to-cart {
        font-size: 13px;
        padding: 10px 16px;
    }
}

/* ===== COLOR SWATCHES OPTION TYPE ===== */
.wc-nhv-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhv-spacing-sm);
    margin-top: var(--nhv-spacing-sm);
}

.wc-nhv-color-swatch {
    position: relative;
    cursor: pointer;
}

.wc-nhv-color-swatch input[type="radio"],
.wc-nhv-color-swatch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wc-nhv-color-swatch .swatch-color {
    display: block;
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-radius: 50%;
    transition: all var(--nhv-transition-fast) ease;
    box-shadow: 0 0 0 2px var(--nhv-border-color);
    position: relative;
}

.wc-nhv-color-swatch:hover .swatch-color {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--nhv-primary-color);
}

/* Selected state with checkmark */
.wc-nhv-color-swatch input:checked + .swatch-color {
    box-shadow: 0 0 0 3px var(--nhv-primary-color);
    transform: scale(1.05);
}

.wc-nhv-color-swatch input:checked + .swatch-color::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' fill='none'%3E%3Cpath fill='%23FFF' stroke='%23333' stroke-width='1' d='m6.5 12.6-6.1-6 2.2-2.2 3.9 4L13.9.9l2.2 2.2z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Tooltip for color name */
.wc-nhv-color-swatch .swatch-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nhv-transition-fast);
    margin-bottom: 5px;
}

.wc-nhv-color-swatch:hover .swatch-tooltip {
    opacity: 1;
}

/* ===== IMAGE BUTTONS OPTION TYPE ===== */
.wc-nhv-image-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--nhv-spacing-md);
    margin-top: var(--nhv-spacing-sm);
}

.wc-nhv-image-button {
    position: relative;
    cursor: pointer;
}

.wc-nhv-image-button input[type="radio"],
.wc-nhv-image-button input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wc-nhv-image-button .button-image {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--nhv-border-radius);
    overflow: hidden;
    border: 3px solid transparent;
    transition: all var(--nhv-transition-normal) ease;
    background-color: var(--nhv-bg-lighter);
}

/* Aspect ratio support */
.wc-nhv-image-button .button-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio (square) */
}

.wc-nhv-image-button .button-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay text */
.wc-nhv-image-button .button-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    padding: 8px 6px 6px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    transition: all var(--nhv-transition-fast);
}

/* Hover effect */
.wc-nhv-image-button:hover .button-image {
    transform: translateY(-2px);
    box-shadow: var(--nhv-shadow-md);
}

.wc-nhv-image-button:hover .button-label {
    background: linear-gradient(to top, rgba(255,133,51,0.9), transparent);
}

/* Selected state */
.wc-nhv-image-button input:checked + .button-image {
    border-color: var(--nhv-primary-color);
    box-shadow: 0 0 0 2px var(--nhv-primary-color);
}

.wc-nhv-image-button input:checked + .button-image .button-label {
    background: linear-gradient(to top, var(--nhv-primary-color), transparent);
}

/* Checkmark overlay on selected */
.wc-nhv-image-button input:checked + .button-image::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--nhv-primary-color);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' fill='none'%3E%3Cpath fill='%23FFF' d='m6.5 12.6-6.1-6 2.2-2.2 3.9 4L13.9.9l2.2 2.2z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Price badge for image buttons */
.wc-nhv-image-button .button-price {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.wc-nhv-image-button input:checked + .button-image .button-price {
    background: var(--nhv-primary-color);
}

/* Focus states for accessibility */
.wc-nhv-image-button input:focus + .button-image,
.wc-nhv-color-swatch input:focus + .swatch-color {
    outline: 3px solid rgba(255,133,51,0.5);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    .wc-nhv-image-buttons {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: var(--nhv-spacing-sm);
    }

    .wc-nhv-color-swatches {
        gap: 8px;
    }

    .wc-nhv-color-swatch .swatch-color {
        width: 36px;
        height: 36px;
    }
}

/* ====================
   Hero Banner Styles (Option C: Text + Background Image)
   ==================== */
.wc-nhv-hero-banner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto 40px auto;
    padding: 0 32px;
}

/* Background image layer */
.wc-nhv-hero-background {
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark overlay */
.wc-nhv-hero-overlay {
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}

/* Content container */
.wc-nhv-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

/* Title */
.wc-nhv-hero-title {
    font-family: var(--nhv-font-heading);
    font-size: 56px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.wc-nhv-hero-subtitle {
    display: block;
    font-size: 42px;
    color: #FF8533;
    margin-top: 10px;
}

/* Description */
.wc-nhv-hero-description {
    font-family: var(--nhv-font-body);
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 0 15px 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Tagline */
.wc-nhv-hero-tagline {
    font-family: var(--nhv-font-body);
    font-size: 18px;
    font-weight: 300;
    color: #E0E0E0;
    margin: 0 0 30px 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Buttons container */
.wc-nhv-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Base button styles */
.wc-nhv-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--nhv-font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.wc-nhv-btn-hero svg {
    flex-shrink: 0;
}

/* Primary button (orange) */
.wc-nhv-btn-hero-primary {
    background: #FF8533;
    color: #FFFFFF;
    border: 2px solid #FFFFFF !important; /* White border like Zobacz Menu */
}

.wc-nhv-btn-hero-primary:hover {
    background: #FF9944;
    border: 2px solid #FFFFFF !important; /* Keep white border on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 133, 51, 0.4);
}

/* Secondary button (outline white) */
.wc-nhv-btn-hero-secondary {
    background: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.wc-nhv-btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wc-nhv-hero-banner {
        height: 400px;
    }
    
    .wc-nhv-hero-title {
        font-size: 36px;
    }
    
    .wc-nhv-hero-subtitle {
        font-size: 28px;
    }
    
    .wc-nhv-hero-description {
        font-size: 16px;
    }
    
    .wc-nhv-hero-tagline {
        font-size: 14px;
    }
    
    .wc-nhv-hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 300px;
    }
    
    .wc-nhv-btn-hero {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 15px;
    }
}
/* ====================
   Category Slider Styles
   ==================== */
.wc-nhv-category-slider-wrapper {
    margin: 40px 0;
}

.wc-nhv-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    color: #c16f2d !important; /* FOODSE logo color - updated 31/10/2025 */
}

.wc-nhv-category-slider {
    padding: 20px 0;
}

.wc-nhv-category-item {
    padding: 10px;
}

.wc-nhv-cat-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.wc-nhv-cat-link:hover {
    transform: translateY(-5px);
}

.wc-nhv-cat-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #f5f5f5;
    position: relative;
}

.wc-nhv-cat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wc-nhv-cat-link:hover .wc-nhv-cat-image img {
    transform: scale(1.1);
}

.wc-nhv-cat-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #c16f2d !important; /* FOODSE logo color - updated 31/10/2025 */
}

.wc-nhv-cat-count {
    font-size: 14px;
    color: #E0E0E0;
}

/* Category slider navigation */
.wc-nhv-category-slider .owl-nav button {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff !important;
    color: #333 !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    font-size: 20px;
    line-height: 1;
    transition: all 0.3s ease;
}

.wc-nhv-category-slider .owl-nav button:hover {
    background: var(--nhv-primary-color, #FF8533) !important;
    color: #fff !important;
}

.wc-nhv-category-slider .owl-nav .owl-prev {
    left: -20px;
}

.wc-nhv-category-slider .owl-nav .owl-next {
    right: -20px;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .wc-nhv-banner-item {
        height: 250px;
    }
    
    .wc-nhv-banner-carousel .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .wc-nhv-banner-carousel .owl-nav .owl-prev {
        left: 10px;
    }
    
    .wc-nhv-banner-carousel .owl-nav .owl-next {
        right: 10px;
    }
    
    .wc-nhv-cat-image {
        height: 150px;
    }
    
    .wc-nhv-section-title {
        font-size: 24px;
    }
    
    .wc-nhv-category-slider .owl-nav button {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .wc-nhv-banner-item {
        height: 200px;
    }
    
    .wc-nhv-category-slider .owl-nav {
        display: none;
    }
}

/* Ensure parent allows sticky positioning */
.wc-nhv-menu-wrapper {
    position: relative;
    overflow: visible !important;
}

/* Fix for theme containers that might block sticky */
.site-content,
.content-area,
main {
    overflow: visible !important;
}
/* ========================================
   Mobile Product Cards (Deals) - Optimized for ≤ 576px
   Performance-first, WCAG AA compliant
   ======================================== */

/* Card Container */
.dealm {
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease;
}

.dealm:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Media Area (4:3 ratio, 210-240px height) */
.dealm__media {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.dealm__media img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

/* Badge (top-left overlay) */
.dealm__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e11d48;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 12px;
    line-height: 1;
    z-index: 2;
}

.dealm__badge--new {
    background: #e11d48; /* red */
}

.dealm__badge--best {
    background: #111; /* black */
}

.dealm__badge--save {
    background: #2e7d32; /* green */
}

.dealm__badge--custom {
    background: #FF8533; /* orange */
}

/* Calories Badge 🔥 - Mobile */
.dealm__calories {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8533 100%);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 8px;
    line-height: 1;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.5);
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Card Body */
.dealm__body {
    padding-top: 10px;
}

/* Title (17-18px, 700, max 2 lines) */
.dealm__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dealm__title a {
    text-decoration: none;
    color: #111;
}

/* Subtitle (13-14px, muted, max 2 lines) */
.dealm__subtitle {
    margin: 0 0 8px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bullets (13-14px, max 2 items) */
.dealm__bullets {
    margin: 0 0 10px;
    padding-left: 16px;
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
}

.dealm__bullets li {
    margin: 3px 0;
}

/* Price Row - INLINE layout */
.dealm__price {
    display: flex !important;
    flex-direction: row !important;  /* ✅ NGANG, không dọc */
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 12px;
}

.dealm__price-now {
    font-size: 20px;
    font-weight: 800;
    color: #FF8533; /* Brand orange */
    line-height: 1.2;
}

.dealm__saving {
    font-size: 13px;
    color: #2e7d32;
    font-weight: 500;
}

.dealm__out-of-stock {
    font-size: 13px;
    color: #e11d48;
    font-weight: 600;
}

/* CTA Button (44-48px height, full-width) */
.dealm__cta {
    margin-top: 12px;
}

.btn {
    height: 48px;
    border-radius: 14px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 44px; /* Touch target */
}

.btn-primary {
    background: #FF8533;
    color: #fff;
}

.btn-primary:active {
    background: #e67429;
    transform: scale(0.98);
}

.btn-primary:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

/* Toast Notifications */
.dealm-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease;
    max-width: 90vw;
}

.dealm-toast--success {
    background: #2e7d32;
}

.dealm-toast--error {
    background: #e11d48;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Loading State (skeleton) */
.dealm--loading .dealm__media {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Grid Container for Mobile */
@media (max-width: 576px) {
    .wc-nhv-products-grid--mobile {
        display: block !important; /* Stack vertically */
        padding: 12px;
    }
    
    .dealm {
        max-width: 100%;
    }
}

/* Small adjustments for very small screens */
@media (max-width: 360px) {
    .dealm__media img {
        height: 200px;
    }
    
    .dealm__title {
        font-size: 16px;
    }
    
    .dealm__price-now {
        font-size: 18px;
    }
}

/* ===================================
   Hero Video Support
   =================================== */

/* Video wrapper */
.wc-nhv-hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video element */
.wc-nhv-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Adjust overlay z-index when video present */
.wc-nhv-hero-banner.has-video .wc-nhv-hero-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, 0); /* Fully transparent */
}

.wc-nhv-hero-banner.has-image .wc-nhv-hero-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, 0); /* Fully transparent */
}

/* Content always on top */
.wc-nhv-hero-banner .wc-nhv-hero-content {
    position: relative;
    z-index: 2;
}

/* Video loading state */
.wc-nhv-hero-video[poster] {
    background-size: cover;
    background-position: center;
}

/* Mobile optimization - reduce video quality/size */
@media (max-width: 768px) {
    .wc-nhv-hero-video {
        /* On mobile, video might be too heavy */
        /* Consider showing image instead via PHP mobile detection */
    }
}

/* Performance: Hardware acceleration */
.wc-nhv-hero-video,
.wc-nhv-hero-background {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* ===================================
   Phone Login Modal CSS
   =================================== */

/* Modal Overlay */
.phone-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.phone-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

/* Modal Content */
.phone-modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

/* Close Button */
.phone-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.phone-modal-close:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
}

/* Modal Title */
.phone-modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin: 0 0 10px 0;
    text-align: center;
}

.phone-modal-desc {
    font-size: 16px;
    color: #666;
    margin: 0 0 30px 0;
    text-align: center;
}

/* Steps */
.phone-step {
    display: none;
}

.phone-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Form Groups */
.phone-form-group {
    margin-bottom: 20px;
}

.phone-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

/* Phone Input Group */
.phone-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone-prefix {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    padding: 12px 15px;
    background: #f5f5f5;
    border-radius: 10px;
}

/* Inputs */
.phone-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s;
    font-family: inherit;
}

.phone-input:focus {
    outline: none;
    border-color: #FF8533;
    box-shadow: 0 0 0 4px rgba(255, 133, 51, 0.1);
}

.phone-input::placeholder {
    color: #999;
}

.phone-hint {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

/* Error Message */
.phone-error {
    background: #fee;
    color: #d00;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 15px;
}

/* Buttons */
.phone-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-top: 10px;
}

.phone-btn-primary {
    background: #FF8533;
    color: #fff;
}

.phone-btn-primary:hover {
    background: #FF9944;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 133, 51, 0.3);
}

.phone-btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.phone-btn-secondary {
    background: #f5f5f5;
    color: #666;
}

.phone-btn-secondary:hover {
    background: #e0e0e0;
}

/* Welcome Section (Step 2a) */
.phone-welcome {
    text-align: center;
    margin-bottom: 30px;
}

.phone-check-icon {
    width: 80px;
    height: 80px;
    background: #2e7d32;
    color: #fff;
    font-size: 48px;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: scaleIn 0.5s ease;
}

/* Customer Info */
.phone-customer-info {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.phone-info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.phone-info-item:last-child {
    border-bottom: none;
}

.phone-info-label {
    font-weight: 600;
    color: #666;
}

.phone-info-value {
    color: #111;
}

/* Loading */
.phone-loading {
    text-align: center;
    padding: 40px 20px;
}

.phone-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FF8533;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .phone-modal-content {
        width: 95%;
        padding: 30px 20px;
    }
    
    .phone-modal-title {
        font-size: 24px;
    }
    
    .phone-modal-desc {
        font-size: 14px;
    }
}


/* ============================================
   GOOGLE LOGIN STYLES
   ============================================ */

/* Divider between phone and Google login */
.phone-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.phone-divider span {
    background: #fff;
    padding: 0 15px;
    color: #999;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.phone-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 0;
}

/* Google Sign-In Wrapper (for official button) */
#googleSignInWrapper {
    margin-top: 10px;
}

#googleSignInWrapper > div {
    width: 100% !important;
}

/* Custom Google Button (fallback) */
.phone-btn-google {
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    color: #444;
    border: 2px solid #dadce0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: 10px;
}

.phone-btn-google:hover {
    background: #f8f9fa;
    border-color: #4285F4;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}

.phone-btn-google:disabled {
    background: #f5f5f5;
    color: #999;
    border-color: #e0e0e0;
    cursor: not-allowed;
}

.phone-btn-google svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Step 2c: Google User Form */
.phone-step-2c .phone-google-info {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
    border-left: 4px solid #4285F4;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 12px;
    text-align: center;
}

.phone-google-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    position: relative;
}

.phone-google-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phone-google-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.phone-google-name {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

.phone-google-email-display {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

/* Step 2c form styling */
.phone-step-2c .phone-form-group {
    margin-bottom: 18px;
}

.phone-step-2c .phone-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.phone-step-2c .phone-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.2s;
}

.phone-step-2c .phone-input:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.1);
}

/* Google info badge */
.phone-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.phone-google-badge svg {
    width: 16px;
    height: 16px;
}

/* Mobile responsive for Google login */
@media (max-width: 576px) {
    .phone-divider {
        margin: 20px 0;
    }

    .phone-divider span {
        font-size: 13px;
        padding: 0 10px;
    }

    .phone-btn-google {
        padding: 12px 16px;
        font-size: 15px;
        gap: 10px;
    }

    .phone-btn-google svg {
        width: 18px;
        height: 18px;
    }

    .phone-google-avatar {
        width: 70px;
        height: 70px;
    }

    .phone-google-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
        line-height: 70px;
    }

    .phone-google-name {
        font-size: 18px;
    }

    .phone-google-email-display {
        font-size: 13px;
    }
}

/* Animation for Google info appearing */
@keyframes googleInfoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.phone-google-info {
    animation: googleInfoFadeIn 0.4s ease;
}

/* ============================================
   ULTRA SLIM MENU BAR WITH LOGO
   Giống như menu chính - mỏng và có logo
   ============================================ */

/* Menu bar container - ultra slim */
.wc-nhv-menu-bar-container {
    padding: 3px 0 !important; /* Ultra slim - giống header chính */
    margin-bottom: 30px !important;
    background: var(--bg-black, #0A0A0A) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.wc-nhv-menu-bar-container.is-fixed {
    /* JavaScript handles positioning - just add padding and shadow */
    padding: 2px 0 !important; /* Even slimmer when fixed */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}

/* Inner wrapper - flexbox layout (logo + categories) */
.wc-nhv-menu-bar-inner {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

/* Logo container - fixed on left */
.wc-nhv-menu-logo {
    flex-shrink: 0 !important;
    padding: 0 16px !important;
    margin: 0 !important;
    z-index: 10 !important;
    background: var(--bg-black, #0A0A0A) !important;
}

.wc-nhv-menu-logo a {
    display: block !important;
    text-decoration: none !important;
}

.wc-nhv-logo-img {
    max-width: 100px !important; /* Smaller logo in menu bar */
    max-height: 32px !important;
    height: auto !important;
    display: block !important;
}

.wc-nhv-logo-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--primary-orange, #FF8533) !important;
    white-space: nowrap !important;
}

/* Categories wrapper - scroll container */
.wc-nhv-categories-wrapper {
    flex: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Categories navigation - horizontal scroll */
.wc-nhv-categories-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important; /* Reduced gap */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 3px 20px !important; /* Minimal padding */
    margin: 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Hide scrollbar */
.wc-nhv-categories-nav::-webkit-scrollbar {
    display: none !important;
}

.wc-nhv-categories-nav {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Gradient blur effects - adjusted for new structure */
.wc-nhv-categories-wrapper::before,
.wc-nhv-categories-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 50px !important; /* Slightly smaller gradient */
    pointer-events: none !important;
    z-index: 2 !important;
}

.wc-nhv-categories-wrapper::before {
    left: 0 !important;
    background: linear-gradient(to right, var(--bg-black, #0A0A0A) 0%, transparent 100%) !important;
}

.wc-nhv-categories-wrapper::after {
    right: 0 !important;
    background: linear-gradient(to left, var(--bg-black, #0A0A0A) 0%, transparent 100%) !important;
}

/* Category buttons - slimmer */
.wc-nhv-cat-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 16px !important; /* Reduced from 10px 20px */
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important; /* Slightly less rounded */
    font-size: 13px !important; /* Smaller font */
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: var(--text-white, #fff) !important;
}

.wc-nhv-cat-btn:hover {
    border-color: var(--primary-orange, #C16F2D) !important;
    color: var(--primary-orange, #C16F2D) !important;
    background: rgba(193, 111, 45, 0.1) !important;
    transform: translateY(-2px) !important;
}

.wc-nhv-cat-btn.active {
    background: var(--primary-orange, #C16F2D) !important;
    border-color: var(--primary-orange, #C16F2D) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(193, 111, 45, 0.4) !important;
}

.wc-nhv-cat-btn .count {
    opacity: 0.8 !important;
    font-size: 11px !important; /* Smaller count */
    margin-left: 4px !important;
}

/* ============================================
   TABLET RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .wc-nhv-menu-bar-container {
        padding: 3px 0 !important;
    }

    .wc-nhv-menu-bar-container.is-fixed {
        padding: 2px 0 !important;
    }

    .wc-nhv-menu-logo {
        padding: 0 12px !important;
    }

    .wc-nhv-logo-img {
        max-width: 90px !important;
        max-height: 30px !important;
    }

    .wc-nhv-categories-nav {
        padding: 3px 15px !important;
        gap: 6px !important;
    }

    .wc-nhv-cat-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    .wc-nhv-categories-wrapper::before,
    .wc-nhv-categories-wrapper::after {
        width: 40px !important;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Ultra slim on mobile */
    .wc-nhv-menu-bar-container {
        padding: 2px 0 !important;
        margin-bottom: 20px !important;
    }

    .wc-nhv-menu-bar-container.is-fixed {
        padding: 2px 0 !important;
    }

    .wc-nhv-menu-bar-inner {
        max-width: 100% !important;
    }

    .wc-nhv-menu-logo {
        padding: 0 10px !important;
    }

    .wc-nhv-logo-img {
        max-width: 75px !important;
        max-height: 26px !important;
    }

    .wc-nhv-logo-text {
        font-size: 14px !important;
    }

    .wc-nhv-categories-nav {
        padding: 2px 10px !important;
        gap: 6px !important;
    }

    .wc-nhv-cat-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
    }

    .wc-nhv-cat-btn .count {
        font-size: 10px !important;
    }

    .wc-nhv-categories-wrapper::before,
    .wc-nhv-categories-wrapper::after {
        width: 30px !important;
    }
}

/* ============================================
   SMALL MOBILE
   ============================================ */
@media (max-width: 480px) {
    .wc-nhv-menu-bar-container {
        padding: 2px 0 !important;
    }

    .wc-nhv-menu-logo {
        padding: 0 8px !important;
    }

    .wc-nhv-logo-img {
        max-width: 65px !important;
        max-height: 24px !important;
    }

    .wc-nhv-categories-nav {
        padding: 2px 8px !important;
    }

    .wc-nhv-cat-btn {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   ENSURE STICKY BEHAVIOR
   ============================================ */

/* Mobile override - full width on mobile */
@media (max-width: 768px) {
    .wc-nhv-menu-bar-container.is-fixed {
        left: 0 !important; /* Override desktop centering */
        transform: none !important; /* Remove transform on mobile */
        max-width: none !important; /* Full width on mobile */
    }
}

.wc-nhv-menu-bar-container.is-fixed .wc-nhv-menu-bar-inner {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Logo stays visible when scrolling */
.wc-nhv-menu-logo {
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================
   VISUAL POLISH
   ============================================ */

/* Smooth scroll snap */
.wc-nhv-categories-nav {
    scroll-snap-type: x proximity !important;
}

.wc-nhv-cat-btn {
    scroll-snap-align: start !important;
}

/* Better touch scrolling */
.wc-nhv-categories-nav {
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent text selection */
.wc-nhv-cat-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ============================================
   REMOVE OLD GRADIENT (now on wrapper)
   ============================================ */
.wc-nhv-menu-bar-container::before,
.wc-nhv-menu-bar-container::after {
    display: none !important; /* Remove old gradients */
}

/* ============================================
   HIDE LOGO IN CATEGORY MENU BAR
   Ẩn logo trong menu category để tránh duplicate logo
   ============================================ */

/* Hide logo in category menu bar */
.wc-nhv-menu-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Categories wrapper should take full width (no logo) */
.wc-nhv-categories-wrapper {
    flex: 1 !important;
    max-width: 100% !important;
}

/* Adjust categories nav padding (no logo space needed) */
.wc-nhv-categories-nav {
    padding: 3px 25px !important; /* Back to full padding */
}

/* Remove gradient offset (logo not taking space) */
.wc-nhv-categories-wrapper::before,
.wc-nhv-categories-wrapper::after {
    width: 60px !important; /* Restore original width */
}

/* Menu bar inner - only categories (no flexbox for logo) */
.wc-nhv-menu-bar-inner {
    display: block !important; /* Changed from flex */
    padding: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    .wc-nhv-categories-nav {
        padding: 3px 15px !important;
    }

    .wc-nhv-categories-wrapper::before,
    .wc-nhv-categories-wrapper::after {
        width: 40px !important;
    }
}

@media (max-width: 768px) {
    .wc-nhv-categories-nav {
        padding: 3px 15px !important;
    }

    .wc-nhv-categories-wrapper::before,
    .wc-nhv-categories-wrapper::after {
        width: 30px !important;
    }
}

/* ==========================================
   FIX HERO BUTTONS VISIBILITY
   Force buttons to display properly
   ========================================== */

/* Ensure buttons container is visible */
.wc-nhv-hero-buttons {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 30px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure individual buttons are visible */
.wc-nhv-btn-hero {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 32px !important;
    font-family: var(--nhv-font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Primary button - Orange with white border */
.wc-nhv-btn-hero-primary {
    background: #FF8533 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

.wc-nhv-btn-hero-primary:hover {
    background: #FF9944 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 133, 51, 0.4) !important;
}

/* Secondary button - White outline */
.wc-nhv-btn-hero-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

.wc-nhv-btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

/* SVG icons */
.wc-nhv-btn-hero svg {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wc-nhv-hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .wc-nhv-btn-hero {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
}

/* ========================================
   LAZY LOADING SPINNER & ANIMATIONS
   ======================================== */

/* Loading Spinner Container */
.wc-nhv-loading-spinner {
    display: none;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    margin: 40px auto;
    max-width: 1200px;
}

.wc-nhv-loading-spinner.active {
    display: block;
}

.wc-nhv-loading-spinner p {
    color: var(--nhv-text-lighter, #B0B0B0);
    font-size: 16px;
    margin-top: 20px;
    font-weight: 500;
}

/* Spinner Animation */
.wc-nhv-spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--nhv-primary-color, #c16f2d);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: wc-nhv-spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes wc-nhv-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Fade-in animation for newly loaded products */
.wc-nhv-product-item.lazy-loaded {
    animation: wc-nhv-fadeInUp 0.6s ease-out;
}

@keyframes wc-nhv-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for multiple products */
.wc-nhv-product-item.lazy-loaded:nth-child(1) {
    animation-delay: 0s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(2) {
    animation-delay: 0.05s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(3) {
    animation-delay: 0.1s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(4) {
    animation-delay: 0.15s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(5) {
    animation-delay: 0.2s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(6) {
    animation-delay: 0.25s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(7) {
    animation-delay: 0.3s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(8) {
    animation-delay: 0.35s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(9) {
    animation-delay: 0.4s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(10) {
    animation-delay: 0.45s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(11) {
    animation-delay: 0.5s;
}

.wc-nhv-product-item.lazy-loaded:nth-child(12) {
    animation-delay: 0.55s;
}

/* Lazy sentinel (invisible trigger element) */
.wc-nhv-lazy-sentinel {
    height: 1px;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

/* Mobile specific loading styles */
@media (max-width: 768px) {
    .wc-nhv-loading-spinner {
        padding: 40px 15px;
        margin: 30px auto;
    }
    
    .wc-nhv-spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .wc-nhv-loading-spinner p {
        font-size: 14px;
        margin-top: 15px;
    }
}

/* Loading state for grid */
.wc-nhv-products-grid[data-loading="true"] {
    position: relative;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}


/* ========================================
   MOBILE VIDEO AUTOPLAY (Deal Cards)
   Scroll-triggered video for [menu_nha_hang] shortcode
   ======================================== */

/* Video Container */
.dealm__video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video Element */
.dealm__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Video playing state */
.dealm__video.playing {
    opacity: 1;
}

/* Fallback Image (behind video) */
.product-image-fallback.dealm__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Play Indicator (▶ icon overlay) */
.dealm__video-wrapper .video-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hide indicator when video plays */
.dealm__video.playing + .product-image-fallback + .video-play-indicator,
.product-video-container.video-loaded .video-play-indicator {
    opacity: 0;
}

/* Ensure dealm__media link doesn't interfere */
.dealm__media {
    position: relative;
    display: block;
}

/* Aspect ratio for media area */
.dealm__media .product-video-container,
.dealm__media .dealm__video-wrapper {
    aspect-ratio: 4 / 3;
}


/* ========================================
   DESKTOP HOVER-TO-PLAY VIDEO
   Plugin shortcode integration
   ======================================== */

/* Override plugin container to match desktop grid */
.wc-nhv-product-image .product-video-container {
    position: relative;
    width: 100%;
    padding-top: 70%; /* Match product image aspect ratio */
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: #1A1A1A;
    transition: all 0.3s ease;
}

/* Video and fallback positioning */
.wc-nhv-product-image .product-video,
.wc-nhv-product-image .product-image-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.wc-nhv-product-image .product-video {
    opacity: 0; /* Hidden by default */
    z-index: 2;
}

.wc-nhv-product-image .product-image-fallback {
    opacity: 1; /* Visible by default */
    z-index: 1;
}

/* Play indicator */
.wc-nhv-product-image .video-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0.9;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Hover state - scale up indicator */
.wc-nhv-product-image .product-video-container:hover .video-play-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}

/* Desktop only effects */
@media (min-width: 769px) {
    .wc-nhv-product-image .product-video-container:hover {
        box-shadow: 0 8px 24px rgba(255, 133, 51, 0.3);
        transform: translateY(-2px);
    }
}

/* Ensure badges and buttons stay on top */
.wc-nhv-product-image .wc-nhv-sale-badge,
.wc-nhv-product-image .wc-nhv-quick-add {
    position: absolute;
    z-index: 4; /* Above video */
}

.wc-nhv-product-image .wc-nhv-sale-badge {
    top: 10px;
    left: 10px;
}

.wc-nhv-product-image .wc-nhv-quick-add {
    top: 10px;
    right: 10px;
}