/* WooCommerce Custom Styles for SCode Theme */

/* WooCommerce Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    @apply bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4;
}

.woocommerce-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.woocommerce-info {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

/* WooCommerce Buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors;
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
    @apply bg-orange-500 hover:bg-orange-600;
}

.woocommerce .button.checkout,
.woocommerce button.button.checkout,
.woocommerce input.button.checkout,
.woocommerce a.button.checkout {
    @apply bg-green-500 hover:bg-green-600;
}

/* WooCommerce Forms */
.woocommerce .form-row {
    @apply mb-4;
}

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

.woocommerce .form-row input[type="text"],
.woocommerce .form-row input[type="email"],
.woocommerce .form-row input[type="tel"],
.woocommerce .form-row input[type="password"],
.woocommerce .form-row input[type="number"],
.woocommerce .form-row select,
.woocommerce .form-row textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.woocommerce .form-row.woocommerce-validated input.input-text {
    @apply border-green-500;
}

.woocommerce .form-row.woocommerce-invalid input.input-text {
    @apply border-red-500;
}

/* WooCommerce Tables */
.woocommerce table.shop_table {
    @apply w-full border-collapse border border-gray-300;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    @apply border border-gray-300 px-4 py-2 text-left;
}

.woocommerce table.shop_table th {
    @apply bg-gray-100 font-semibold;
}

.woocommerce table.shop_table tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.woocommerce table.shop_table tbody tr:hover {
    @apply bg-blue-50;
}

/* WooCommerce Cart */
.woocommerce .cart .cart_item {
    @apply border-b border-gray-200 py-4;
}

.woocommerce .cart .product-thumbnail img {
    @apply w-16 h-16 object-cover rounded;
}

.woocommerce .cart .product-name a {
    @apply text-blue-600 hover:text-blue-800;
}

.woocommerce .cart .product-price {
    @apply font-semibold text-gray-900;
}

.woocommerce .cart .product-quantity input {
    @apply w-16 text-center;
}

.woocommerce .cart .product-subtotal {
    @apply font-semibold text-gray-900;
}

.woocommerce .cart .remove {
    @apply text-red-500 hover:text-red-700;
}

/* WooCommerce Checkout */
.woocommerce .checkout .col2-set {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.woocommerce .checkout .col-1,
.woocommerce .checkout .col-2 {
    @apply space-y-6;
}

.woocommerce .checkout .woocommerce-billing-fields h3,
.woocommerce .checkout .woocommerce-shipping-fields h3 {
    @apply text-lg font-semibold text-gray-900 mb-4;
}

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

.woocommerce .checkout .woocommerce-checkout-review-order h3 {
    @apply text-lg font-semibold text-gray-900 mb-4;
}

.woocommerce .checkout .woocommerce-checkout-review-order-table {
    @apply w-full;
}

.woocommerce .checkout .woocommerce-checkout-review-order-table th,
.woocommerce .checkout .woocommerce-checkout-review-order-table td {
    @apply py-2 text-left;
}

.woocommerce .checkout .woocommerce-checkout-review-order-table th {
    @apply font-semibold text-gray-700;
}

.woocommerce .checkout .woocommerce-checkout-review-order-table .order-total {
    @apply border-t border-gray-300 font-bold text-lg;
}

/* WooCommerce Products */
.woocommerce .products {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.woocommerce .product {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow;
}

.woocommerce .product .woocommerce-loop-product__title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.woocommerce .product .price {
    @apply text-xl font-bold text-red-600 mb-2;
}

.woocommerce .product .price del {
    @apply text-gray-500 text-sm;
}

.woocommerce .product .price ins {
    @apply text-red-600 no-underline;
}

.woocommerce .product .woocommerce-loop-product__link {
    @apply block;
}

.woocommerce .product .woocommerce-loop-product__link img {
    @apply w-full h-48 object-cover;
}

.woocommerce .product .woocommerce-loop-product__link:hover img {
    @apply transform scale-105 transition-transform;
}

/* WooCommerce Single Product */
.woocommerce .single-product .product {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.woocommerce .single-product .product .woocommerce-product-gallery {
    @apply space-y-4;
}

.woocommerce .single-product .product .woocommerce-product-gallery img {
    @apply w-full h-auto rounded-lg;
}

.woocommerce .single-product .product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    @apply block;
}

.woocommerce .single-product .product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    @apply w-full h-96 object-cover;
}

.woocommerce .single-product .product .woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) {
    @apply w-20 h-20;
}

.woocommerce .single-product .product .summary {
    @apply space-y-6;
}

.woocommerce .single-product .product .summary .product_title {
    @apply text-3xl font-bold text-gray-900;
}

.woocommerce .single-product .product .summary .price {
    @apply text-2xl font-bold text-red-600;
}

.woocommerce .single-product .product .summary .woocommerce-product-rating {
    @apply flex items-center space-x-2;
}

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

.woocommerce .single-product .product .summary .woocommerce-product-rating .woocommerce-review-link {
    @apply text-sm text-gray-500;
}

.woocommerce .single-product .product .summary .woocommerce-product-details__short-description {
    @apply text-gray-600;
}

.woocommerce .single-product .product .summary .cart {
    @apply space-y-4;
}

.woocommerce .single-product .product .summary .cart .quantity {
    @apply flex items-center space-x-2;
}

.woocommerce .single-product .product .summary .cart .quantity input {
    @apply w-20 text-center;
}

.woocommerce .single-product .product .summary .cart .single_add_to_cart_button {
    @apply w-full;
}

/* WooCommerce Reviews */
.woocommerce .woocommerce-reviews {
    @apply space-y-6;
}

.woocommerce .woocommerce-reviews .woocommerce-reviews-title {
    @apply text-2xl font-bold text-gray-900;
}

.woocommerce .woocommerce-reviews .commentlist {
    @apply space-y-4;
}

.woocommerce .woocommerce-reviews .commentlist .comment {
    @apply bg-gray-50 p-4 rounded-lg;
}

.woocommerce .woocommerce-reviews .commentlist .comment .comment-text {
    @apply space-y-2;
}

.woocommerce .woocommerce-reviews .commentlist .comment .comment-text .meta {
    @apply text-sm text-gray-500;
}

.woocommerce .woocommerce-reviews .commentlist .comment .comment-text .description {
    @apply text-gray-700;
}

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

/* WooCommerce Pagination */
.woocommerce .woocommerce-pagination {
    @apply flex justify-center space-x-2;
}

.woocommerce .woocommerce-pagination .page-numbers {
    @apply px-3 py-2 border border-gray-300 rounded hover:bg-gray-50;
}

.woocommerce .woocommerce-pagination .page-numbers.current {
    @apply bg-blue-500 text-white border-blue-500;
}

.woocommerce .woocommerce-pagination .page-numbers:hover {
    @apply bg-blue-50;
}

/* WooCommerce Notices */
.woocommerce .woocommerce-notices-wrapper {
    @apply mb-6;
}

.woocommerce .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error {
    @apply mb-4;
}

/* WooCommerce Loading States */
.woocommerce .loading {
    @apply opacity-50 pointer-events-none;
}

.woocommerce .spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
}

/* WooCommerce Responsive */
@media (max-width: 768px) {
    .woocommerce .checkout .col2-set {
        @apply grid-cols-1;
    }
    
    .woocommerce .single-product .product {
        @apply grid-cols-1;
    }
    
    .woocommerce .products {
        @apply grid-cols-1 md:grid-cols-2;
    }
    
    .woocommerce table.shop_table {
        @apply text-sm;
    }
    
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        @apply px-2 py-1;
    }
}

/* WooCommerce Custom Overrides */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    @apply hidden;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    @apply pl-4;
}

/* WooCommerce Cart Empty */
.woocommerce .cart-empty {
    @apply text-center py-12;
}

.woocommerce .cart-empty .woocommerce-info {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

/* WooCommerce Checkout Success */
.woocommerce .woocommerce-order {
    @apply space-y-6;
}

.woocommerce .woocommerce-order .woocommerce-order-details {
    @apply bg-gray-50 p-6 rounded-lg;
}

.woocommerce .woocommerce-order .woocommerce-order-details h2 {
    @apply text-xl font-semibold text-gray-900 mb-4;
}

.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-table {
    @apply w-full;
}

.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-table th,
.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-table td {
    @apply py-2 text-left border-b border-gray-200;
}

.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-table th {
    @apply font-semibold text-gray-700;
}

.woocommerce .woocommerce-order .woocommerce-order-details .woocommerce-table .order-total {
    @apply font-bold text-lg;
}