/**
 * Ultravoom WooCommerce Styles
 * 
 * Custom styles for WooCommerce pages
 */

/* ==========================================
   Shop Page / Product Archive
   ========================================== */

.woocommerce ul.products {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.woocommerce ul.products li.product a img {
    @apply w-full h-64 object-cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    @apply text-lg font-semibold text-gray-900 px-4 pt-4 m-0;
}

.woocommerce ul.products li.product .price {
    @apply text-primary font-bold px-4 py-2;
}

.woocommerce ul.products li.product .button {
    @apply bg-primary text-white px-4 py-2 mx-4 mb-4 rounded-lg inline-block transition-colors duration-300 hover:bg-primary-dark;
}

/* ==========================================
   Single Product Page
   ========================================== */

.woocommerce div.product {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.woocommerce div.product div.images {
    @apply w-full;
}

.woocommerce div.product div.images img {
    @apply w-full rounded-lg;
}

.woocommerce div.product div.summary {
    @apply w-full;
}

.woocommerce div.product .product_title {
    @apply text-3xl font-bold text-gray-900 mb-4;
}

/* Price Display - Multiple variations */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    @apply text-2xl font-bold mb-4 block;
    color: #2563eb !important;
}

.woocommerce div.product p.price .amount,
.woocommerce div.product span.price .amount {
    color: #2563eb !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    @apply text-gray-600 mb-6;
}

/* Cart Form */
.woocommerce div.product form.cart {
    @apply flex flex-wrap items-center gap-4 mb-6;
}

.woocommerce div.product form.cart .quantity {
    @apply flex items-center;
}

.woocommerce div.product form.cart .quantity input {
    @apply w-16 text-center border border-gray-300 rounded-lg py-2;
}

/* Add to Cart Button - Ensure visibility */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    @apply bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors duration-300;
    display: inline-block !important;
    visibility: visible !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    @apply bg-blue-700;
}

/* Product Meta */
.woocommerce div.product .product_meta {
    @apply text-sm text-gray-600 mt-6 pt-6 border-t border-gray-200;
}

.woocommerce div.product .product_meta > span {
    @apply block mb-2;
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs {
    @apply mt-12;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    @apply flex gap-4 border-b border-gray-200 mb-6;
    list-style: none;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    @apply pb-2 cursor-pointer;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    @apply text-gray-600 font-medium hover:text-gray-900;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    @apply text-blue-600 border-b-2 border-blue-600;
}

/* ==========================================
   Cart Page
   ========================================== */

.woocommerce-cart .woocommerce-cart-form table {
    @apply w-full border-collapse;
}

.woocommerce-cart .woocommerce-cart-form th,
.woocommerce-cart .woocommerce-cart-form td {
    @apply p-4 border-b border-gray-200 text-left;
}

.woocommerce-cart .woocommerce-cart-form th {
    @apply bg-gray-100 font-semibold;
}

.woocommerce-cart .cart_totals {
    @apply bg-gray-50 p-6 rounded-lg mt-8;
}

.woocommerce-cart .cart_totals h2 {
    @apply text-xl font-bold mb-4;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    @apply w-full bg-primary text-white py-4 rounded-lg font-semibold text-center block transition-colors duration-300 hover:bg-primary-dark;
}

/* ==========================================
   Checkout Page
   ========================================== */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
    @apply bg-white p-6 rounded-lg shadow-md mb-6;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
    @apply text-xl font-bold mb-4;
}

.woocommerce-checkout .form-row {
    @apply mb-4;
}

.woocommerce-checkout .form-row label {
    @apply block text-gray-700 font-medium mb-2;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select {
    @apply w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent;
}

.woocommerce-checkout #order_review {
    @apply bg-gray-50 p-6 rounded-lg;
}

.woocommerce-checkout #place_order {
    @apply w-full bg-primary text-white py-4 rounded-lg font-semibold text-center transition-colors duration-300 hover:bg-primary-dark;
}

/* ==========================================
   My Account Page
   ========================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
    @apply w-full lg:w-1/4 mb-6 lg:mb-0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    @apply border-b border-gray-200 last:border-b-0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    @apply block px-4 py-3 text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors duration-200;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    @apply bg-primary text-white;
}

.woocommerce-account .woocommerce-MyAccount-content {
    @apply w-full lg:w-3/4 lg:pl-8;
}

/* ==========================================
   Notices / Messages
   ========================================== */

.woocommerce-message,
.woocommerce-info {
    @apply bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 mb-6 rounded-r-lg;
}

.woocommerce-error {
    @apply bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-lg;
    list-style: none;
    padding-left: 1rem;
}

/* ==========================================
   Sale Badge
   ========================================== */

.woocommerce span.onsale {
    @apply absolute top-4 left-4 bg-red-500 text-white text-sm font-bold px-3 py-1 rounded-full z-10;
}

/* ==========================================
   Star Rating
   ========================================== */

.woocommerce .star-rating {
    @apply text-yellow-400;
}

/* ==========================================
   Responsive Adjustments
   ========================================== */

@media (max-width: 768px) {
    .woocommerce ul.products {
        @apply grid-cols-2;
    }
    
    .woocommerce div.product {
        @apply grid-cols-1;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        @apply grid-cols-1;
    }
}
/* ==========================================
   Custom Single Product Styles
   ========================================== */

/* Color swatches */
.color-option input:checked + label .rounded-full,
.color-option label:has(input:checked) .rounded-full {
    @apply border-[#9B8FD4] shadow-lg;
}

/* Ring size buttons */
.ring-size-btn {
    transition: all 0.2s ease-in-out;
}

.ring-size-btn:hover {
    transform: scale(1.05);
}

/* Coverage cards */
.coverage-card {
    transition: all 0.3s ease-in-out;
}

.coverage-radio:checked + .coverage-card {
    @apply border-[#9B8FD4] bg-[#F5F3FF];
}

/* Add to cart button animation */
.single_add_to_cart_button {
    transition: all 0.3s ease-in-out;
}

.single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(155, 143, 212, 0.3);
}

.single_add_to_cart_button:active {
    transform: translateY(0);
}

/* Payment method icons */
.payment-methods img {
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.payment-methods img:hover {
    filter: grayscale(0%);
}

/* Order summary styling */
.order-summary .order-total {
    transition: all 0.3s ease;
}

/* Product images gallery */
.woocommerce-product-gallery {
    @apply rounded-2xl overflow-hidden shadow-lg;
}

.woocommerce-product-gallery__image {
    @apply rounded-2xl;
}