/**
 * Cart Component CSS - Premium Styles với Hiệu ứng & Màu sắc đầy đủ
 * Tập trung styles cho cart page, sử dụng CSS variables từ variables.css
 */

/* ==========================================================================
   Cart Color Variables - Premium Colors
   ========================================================================== */
:root {
    --cart-primary: #3b82f6;
    --cart-primary-hover: #2563eb;
    --cart-secondary: #60a5fa;
    --cart-success: #10b981;
    --cart-warning: #f59e0b;
    --cart-danger: #ef4444;
    --cart-info: #06b6d4;

    --cart-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --cart-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --cart-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Cart Item - Premium Hover Effects
   ========================================================================== */
.cart-item {
    position: relative;
    border-radius: 0.75rem;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* NO overflow:hidden — breaks position:fixed tooltips inside */
}

.cart-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: rgba(249, 250, 251, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.cart-item:hover {
    background: #f9fafb;
    /* NO transform — creates containing block that breaks position:fixed tooltips */
    box-shadow: var(--cart-shadow-sm);
    border-color: #e5e7eb;
}

.cart-item:hover::before {
    opacity: 1;
}

.cart-item>* {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Cart Buttons - Premium Styles với Màu sắc đầy đủ
   ========================================================================== */

/* Quantity Buttons */
.cart-item button[class*="js-decrease-quantity"],
.cart-item button[class*="js-increase-quantity"] {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.cart-item button[class*="js-decrease-quantity"]:hover,
.cart-item button[class*="js-increase-quantity"]:hover {
    background: #e5e7eb;
    color: #374151;
    transform: scale(1.05);
}

.cart-item button[class*="js-decrease-quantity"]:active,
.cart-item button[class*="js-increase-quantity"]:active {
    transform: scale(0.95);
}

/* Remove Button */
.cart-item button[class*="js-remove-item"] {
    transition: all 0.2s ease;
    position: relative;
}

.cart-item button[class*="js-remove-item"]:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.1);
}

.cart-item button[class*="js-remove-item"]:active {
    transform: scale(0.95) rotate(0deg);
}

/* ==========================================================================
   Quantity Input - Enhanced Styling
   ========================================================================== */
.cart-quantity-input {
    width: var(--cart-quantity-input-width, 64px);
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: all 0.2s ease;
    border-color: #d1d5db;
}

.cart-quantity-input:focus {
    border-color: var(--cart-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.cart-quantity-input:hover {
    border-color: var(--cart-primary-hover);
}

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

/* ==========================================================================
   Carousel Card - Consistent width
   ========================================================================== */
.cart-carousel-card {
    width: var(--cart-carousel-card-width, calc((100% - 36px) / 4));
    min-width: var(--cart-carousel-card-min-width, 150px);
}

/* ==========================================================================
   Carousel Container - Hidden scrollbar
   ========================================================================== */
.cart-carousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Smooth scrolling for all breakpoints */
}

.cart-carousel::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   Plan Selector - Native appearance removed
   ========================================================================== */
.cart-plan-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    transition: all 0.2s ease;
    border-color: #d1d5db;
}

.cart-plan-selector:hover {
    border-color: var(--cart-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.05);
}

.cart-plan-selector:focus {
    border-color: var(--cart-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* ==========================================================================
   Responsive Carousel - Mobile shows exactly 2 cards
   ========================================================================== */

/* Mobile (< 640px) - Show exactly 2 cards per view */
@media (max-width: 639px) {
    .cart-carousel-card {
        /* 2 cards with 12px gap: (100% - 12px) / 2 = 50% - 6px each */
        width: calc(50% - 6px) !important;
        min-width: 0 !important;
        flex-shrink: 0;
        scroll-snap-align: start;
        /* Removed scroll-snap-stop: always - causes jerky scrolling */
    }

    .cart-carousel {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* Smooth native scrolling */
        scroll-padding: 0;
    }

    /* ========== Mobile-only: Hide certain text elements ========== */

    /* Hide "Số lượng:" label on mobile */
    .cart-quantity-label {
        display: none !important;
    }

    /* Hide "Đang giảm giá" text on mobile, keep discount badge */
    .cart-sale-text {
        display: none !important;
    }

    /* Hide desktop total price on mobile */
    .cart-total-desktop {
        display: none !important;
    }

    /* Plan row: flex layout on mobile for plan + total price side by side */
    .cart-plan-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* Cô lập line-through chỉ cho giá cũ (dùng pseudo-element, không bleed sang badge) */
.cart-price-old {
    display: inline-block;
    position: relative;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.cart-price-old::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

/* Badge giảm giá (-15%) — không gạch ngang, override mọi rule khác */
.cart-discount-badge,
.js-item-price-container .cart-discount-badge {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    display: inline-block;
}

.cart-discount-badge::after {
    display: none !important;
}

/* Desktop (>= 640px) - Hide mobile-only elements */
@media (min-width: 640px) {
    .cart-total-mobile {
        display: none !important;
    }

    /* Plan row: default block display on desktop */
    .cart-plan-row {
        display: block;
    }
}

/* ==========================================================================
   Mobile Sticky Checkout Bar
   - Fixed bottom bar for mobile/tablet checkout
   - Shows when main order button is scrolled out of view
   - Hidden on desktop (lg:hidden in Tailwind)
   - z-index: 1040 (below header 1050, above base content)
   ========================================================================== */

#mobile-sticky-checkout {
    /* Shadow for elevation */
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1),
        0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Visible state - slide up into view */
#mobile-sticky-checkout.is-visible {
    transform: translateY(0) !important;
}

/* Safe area padding for iPhones with home indicator (notch) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-sticky-checkout-inner {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* Add padding to main content when sticky bar is visible on mobile/tablet */
/* This prevents content from being hidden behind the sticky bar */
@media (max-width: 1023px) {
    body.has-sticky-checkout main {
        padding-bottom: 80px;
    }
}

/* ==========================================================================
   Cart Product Image - Hover Effects
   ========================================================================== */
.cart-item a[href*="product"] img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-item a[href*="product"]:hover img {
    transform: scale(1.1) rotate(2deg);
}

.cart-item a[href*="product"] {
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: var(--cart-shadow-sm);
    transition: box-shadow 0.3s ease;
}

.cart-item a[href*="product"]:hover {
    box-shadow: var(--cart-shadow-md);
}

/* ==========================================================================
   Cart Price Display - Color Coding
   ========================================================================== */
.cart-item .js-item-total-price,
.cart-item .js-item-total-price-mobile {
    color: var(--cart-primary);
    font-weight: 600;
    transition: all 0.2s ease;
}

.cart-item:hover .js-item-total-price,
.cart-item:hover .js-item-total-price-mobile {
    color: var(--cart-primary-hover);
}

.cart-item .js-item-unit-price {
    color: var(--cart-primary);
    transition: color 0.2s ease;
}

.cart-item:hover .js-item-unit-price {
    color: var(--cart-primary-hover);
}

/* Discount Badge */
.cart-item .bg-red-500 {
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);
}


/* ==========================================================================
   Cart Plan Selector - Enhanced Dropdown
   ========================================================================== */
.cart-plan-selector {
    background: white;
    cursor: pointer;
}

.cart-plan-selector:hover {
    background: #f9fafb;
}

.cart-plan-selector:focus {
    background: white;
}

/* ==========================================================================
   Cart Warning/Alert Messages - Color Variants
   ========================================================================== */
.cart-item .bg-yellow-50 {
    border-color: rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   Cart Link Hover Effects
   ========================================================================== */
.cart-item a[href*="product"] h3 {
    transition: all 0.2s ease;
}

.cart-item a[href*="product"]:hover h3 {
    color: var(--cart-primary);
}

/* ==========================================================================
   Cart Promo Countdown - Animated
   ========================================================================== */
.cart-item .promo-countdown {
    animation: pulse 2s ease-in-out infinite;
}

.cart-item .promo-countdown svg {
    animation: spin-slow 3s linear infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Cart Empty State (if exists)
   ========================================================================== */
.cart-empty {
    background: #f9fafb;
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
}

/* ==========================================================================
   Cart Loading States
   ========================================================================== */
.cart-item.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.cart-item.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--cart-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Cart Widget (Navigation) - Premium Styles
   ========================================================================== */
.cart-nav-link {
    position: relative;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.cart-nav-link:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
}

.cart-nav-link svg {
    transition: transform 0.3s ease;
}

.cart-nav-link:hover svg {
    transform: scale(1.1) rotate(-5deg);
}

/* Cart Count Badge */
#cart-count {
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.cart-nav-link:hover #cart-count {
    transform: scale(1.1);
}

/* ==========================================================================
   Checkout Buttons - Premium Styles với Màu sắc đầy đủ
   ========================================================================== */
button[data-checkout-url],
button[class*="checkout"],
a[href*="checkout"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button[data-checkout-url]:hover,
button[class*="checkout"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--cart-shadow-md);
    filter: brightness(1.1);
}

button[data-checkout-url]:active,
button[class*="checkout"]:active {
    transform: translateY(0);
}

/* Primary Checkout Button - keep Tailwind bg-blue-600 */
button[data-checkout-url].bg-blue-600:hover,
button[class*="checkout"].bg-blue-600:hover {
    filter: brightness(1.1);
}

/* Success/Confirm Button */
button.bg-green-600:hover,
button.bg-green-500:hover {
    filter: brightness(1.1);
}

/* ==========================================================================
   Cart Total Section - Enhanced Styling
   ========================================================================== */
#cart-total {
    color: var(--cart-primary);
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    position: relative;
}

#cart-total::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cart-primary);
    transition: width 0.3s ease;
}

#cart-total:hover::after {
    width: 100%;
}

/* ==========================================================================
   Coupon Discount - Animated Highlight
   ========================================================================== */
#coupon-discount-row {
    background: rgba(16, 185, 129, 0.08);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--cart-success);
}

#coupon-discount-amount {
    font-weight: 700;
    color: var(--cart-success);
}

/* ==========================================================================
   Savings Highlight
   ========================================================================== */
#savings-highlight {
    font-weight: 700;
    position: relative;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

#savings-highlight span {
    color: var(--cart-success);
}

/* ==========================================================================
   Cart Summary Card - Enhanced
   ========================================================================== */
.bg-white.shadow.rounded-lg {
    transition: all 0.3s ease;
}

.bg-white.shadow.rounded-lg:hover {
    box-shadow: var(--cart-shadow-md);
}

/* ==========================================================================
   Responsive Enhancements
   ========================================================================== */
@media (max-width: 639px) {
    .cart-item {
        border-radius: 0.5rem;
    }

    .cart-item:hover {
        transform: translateY(-1px);
    }

    #cart-count {
        font-size: 0.625rem;
        width: 1.125rem;
        height: 1.125rem;
    }

    button[data-checkout-url]:hover {
        transform: translateY(-1px);
    }
}

/* ==========================================================================
   Cart Page Layout — Responsive Rules
   (Moved from inline <style> in cart_detail.html for CSP compliance)
   ========================================================================== */
@media (min-width: 1024px) {
    #mobile-sticky-checkout {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .sidebar-checkout-buttons {
        display: none !important;
    }

    .sidebar-total-section {
        display: none !important;
    }

    #savings-highlight {
        display: none !important;
    }

    .cart-page-wrapper {
        padding-bottom: 0 !important;
    }

    .cart-page-wrapper .lg\:col-span-1 {
        margin-bottom: 0 !important;
    }

    .cart-page-wrapper .lg\:col-span-1>div {
        padding-bottom: 0.5rem !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 639px) {
    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: inline !important;
    }
}

@media (min-width: 640px) {
    .mobile-show {
        display: none !important;
    }
}
}