/* ============================================================
   Visal Ecom — Frontend CSS v1.8
   KHÔNG có style mặc định cho button — tất cả inject từ PHP
   ============================================================ */

/* ── Price shortcode ──────────────────────────────────────────────────────── */
.visal-price { font-weight: 600; }
.visal-price--sale del.visal-price__regular { color: #999; text-decoration: line-through; margin-right: 4px; }
.visal-price--sale ins.visal-price__sale    { text-decoration: none; color: #e44; }

/* ── Badge / Subtitle ─────────────────────────────────────────────────────── */
.visal-badge    { display: inline-block; padding: 2px 10px; background: #111; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 3px; }
.visal-subtitle { color: #666; font-size: .9em; }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.visal-gallery      { display: flex; flex-wrap: wrap; gap: 8px; }
.visal-gallery__img { display: block; max-width: 100%; height: auto; }

/* ── Cart count badge ─────────────────────────────────────────────────────── */
.visal-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: #e44; color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; }

/* ── Disabled states ──────────────────────────────────────────────────────── */
.visal-btn--disabled,
.visal-btn--out-of-stock { opacity: .4 !important; cursor: not-allowed !important; }

/* ============================================================
   CART ITEMS — [visal_cart_items]
   ============================================================ */

.visal-cart-list { width: 100%; }

.visal-cart-empty {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    color: #575757;
    padding: 24px 0;
    text-align: center;
}

.visal-cart-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    padding: 24px;
    border-top: 1px solid #121212;
}

.visal-cart-item__thumb {
    width: 120px;
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 4px;
    display: block;
}

.visal-cart-item__thumb--placeholder {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: 4px;
}

.visal-cart-item__body {
    flex: 1;
    min-width: 0;
    padding-right: 36px;
}

.visal-cart-item__title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #FFFFFF;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.visal-cart-item__excerpt {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #575757;
    margin: 0 0 32px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.visal-cart-item__price {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #FFFFFF;
    margin: 0;
}

/* ── Trash button — reset hoàn toàn khỏi Elementor ───────────────────────── */
button.visal-cart-item__remove,
button.visal-cart-item__remove:hover,
button.visal-cart-item__remove:focus,
button.visal-cart-item__remove:active,
[type=button].visal-cart-item__remove,
[type=submit].visal-cart-item__remove {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 24px !important;
    height: 24px !important;
    min-height: unset !important;
    line-height: 1 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    transition: opacity .15s !important;
}
button.visal-cart-item__remove:hover { opacity: 1 !important; }

/* ── Cart total ───────────────────────────────────────────────────────────── */
.visal-cart-total { font-weight: 700; font-size: 1.1em; }

/* ── Fallback popup ───────────────────────────────────────────────────────── */
.visal-cart-popup        { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .2s; }
.visal-cart-popup--open  { opacity: 1; pointer-events: auto; }

/* ── Cart list: min/max height + custom scrollbar ──────────────────────────── */
.visal-cart-list,
#visal-cart-items {
    min-height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Firefox */
.visal-cart-list,
#visal-cart-items {
    scrollbar-width: auto;
    scrollbar-color: #2a2a2a #121212;
}

/* Chrome, Edge, Safari */
.visal-cart-list::-webkit-scrollbar,
#visal-cart-items::-webkit-scrollbar {
    width: 44px;
}
.visal-cart-list::-webkit-scrollbar-track,
#visal-cart-items::-webkit-scrollbar-track {
    background: #121212;
    border-radius: 999px;
}
.visal-cart-list::-webkit-scrollbar-thumb,
#visal-cart-items::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 999px;
    border: 16px solid #121212;
}
.visal-cart-list::-webkit-scrollbar-thumb:hover,
#visal-cart-items::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* ── Dim Add to Cart button khi sản phẩm đã trong giỏ ───────────────────── */
.visal-btn.visal-add-to-cart.visal-btn--in-cart {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* ── Category filter badges [visal_category_filter] ─────────────────────── */
.visal-cat-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Mobile — scroll ngang */
@media (max-width: 767px) {
    .visal-cat-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .visal-cat-filter::-webkit-scrollbar {
        display: none;
    }
    .visal-cat-filter__badge {
        flex-shrink: 0;
    }
}
.visal-cat-filter .visal-cat-filter__badge,
.visal-cat-filter button.visal-cat-filter__badge,
body .visal-cat-filter__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(128, 128, 128, 0.04) !important;
    background: #171717 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color .15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    text-align: left !important;
    font: inherit !important;
}
.visal-cat-filter .visal-cat-filter__badge:hover,
body .visal-cat-filter__badge:hover {
    border-color: rgba(128, 128, 128, 0.2) !important;
}
.visal-cat-filter .visal-cat-filter__badge.is-active,
body .visal-cat-filter__badge.is-active {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
.visal-cat-filter__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #575757;
    text-overflow: ellipsis;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.32px;
    white-space: nowrap;
    transition: color .15s ease;
}
.visal-cat-filter__count {
    color: #575757;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
    letter-spacing: -0.24px;
    white-space: nowrap;
    transition: color .15s ease;
}

/* Hover — text trắng */
.visal-cat-filter__badge:hover .visal-cat-filter__name,
.visal-cat-filter__badge:hover .visal-cat-filter__count {
    color: #F5F5F5;
}

/* Active — text trắng */
.visal-cat-filter__badge.is-active .visal-cat-filter__name,
.visal-cat-filter__badge.is-active .visal-cat-filter__count {
    color: #F5F5F5;
}