/*
 * cart.css
 * Styles specific to the cart.html page.
 * This file should be linked after global.css in your cart.html.
 */

/* ========================================= */
/* Cart Hero Section */
/* ========================================= */

.cart-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
}

/* ========================================= */
/* Cart Content Layout */
/* ========================================= */

.cart-container {
    /* Tailwind handles grid, grid-cols-1, lg:grid-cols-3, gap-8, mx-auto, mt-8, p-8 */
}

/* Cart Items Section */
.cart-items-section {
    /* Tailwind handles bg-white, p-6, rounded-lg, shadow-md, lg:col-span-2 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Cart Summary Section */
.cart-summary-section {
    /* Tailwind handles bg-white, p-6, rounded-lg, shadow-md */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    animation-delay: 0.1s; /* Stagger after cart items section */
}

/* Animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================= */
/* Cart Item Styling */
/* ========================================= */

.cart-item {
    /* Tailwind handles flex, flex-col, md:flex-row, items-center, bg-gray-50, p-4, rounded-md, shadow-sm */
    border-left: 4px solid #3b82f6; /* Blue accent border */
}

.cart-item img {
    /* Tailwind handles w-24, h-24, object-cover, rounded-md, mr-0, md:mr-4, mb-4, md:mb-0 */
}

.cart-item h3 {
    /* Tailwind handles text-lg, font-semibold, text-gray-800 */
}

.cart-item p {
    /* Tailwind handles text-gray-600, text-sm */
}

.cart-item .item-price {
    /* Tailwind handles font-semibold */
}

.cart-item .quantity-btn {
    /* Tailwind handles px-3, py-1, bg-gray-200, text-gray-700, rounded-md, hover:bg-gray-300, transition, duration-300 */
}

.cart-item .item-quantity {
    /* Tailwind handles w-16, text-center, border, border-gray-300, rounded-md, px-2, py-1 */
    -moz-appearance: textfield; /* Hide Firefox number input arrows */
}
.cart-item .item-quantity::-webkit-outer-spin-button,
.cart-item .item-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide Chrome/Safari number input arrows */
    margin: 0;
}

.cart-item .remove-item-btn {
    /* Tailwind handles ml-4, px-3, py-1, bg-red-500, text-white, rounded-md, hover:bg-red-600, transition, duration-300 */
}

.cart-item .item-total {
    /* Tailwind handles font-bold, text-lg, text-gray-900, w-24, text-right, hidden, md:block */
}

/* ========================================= */
/* Cart Summary Styling */
/* ========================================= */

.cart-summary-section .flex.justify-between {
    /* General styling for summary rows */
}

.cart-summary-section #cart-subtotal,
.cart-summary-section #cart-shipping {
    /* Tailwind handles font-semibold, text-lg */
}

.cart-summary-section #cart-total {
    /* Tailwind handles text-xl, font-bold, text-blue-700 */
}

.cart-summary-section button {
    /* Tailwind handles w-full, px-6, py-3, bg-blue-600, text-white, font-semibold, rounded-lg, hover:bg-blue-700, transition, duration-300, shadow-md */
}

/* NEW: Simplified Two-Breakpoint Navbar Logic */
@media (min-width: 1025px) {
  .site-header .nav-links {
    display: flex !important;
  }
  .site-header .mobile-menu-toggle {
    display: none !important;
  }
  body {
    font-weight: 400;
  }
  @media (min-width: 1440px) {
    body {
      font-weight: 500;
    }
  }
  @media (min-width: 1920px) {
    body {
      font-weight: 600;
    }
  }
}

@media (max-width: 1024px) {
  .site-header .nav-links {
    display: none !important;
  }
  .site-header .mobile-menu-toggle {
    display: block !important;
    cursor: pointer;
  }
  .site-header .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0;
    z-index: 999;
  }
}