/**
 * Tailwind WooCommerce CSS
 * WooCommerce templates converted to Tailwind CSS
 * 
 * @package SCode_Theme
 * @since 2.2.0
 */

/* Import Tailwind base, components, and utilities */
@import 'tailwind.css';

/* WooCommerce Product Styles */
.woocommerce {
    @apply text-gray-900;
}

.woocommerce-page {
    @apply bg-gray-50 min-h-screen;
}

/* Product Grid */
.woocommerce ul.products {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 list-none p-0 m-0;
}

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

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

.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    @apply w-full h-48 object-cover;
}

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

.woocommerce ul.products li.product .price {
    @apply text-xl font-bold text-red-600 mb-4 px-4;
}

.woocommerce ul.products li.product .price del {
    @apply text-gray-500 text-sm font-normal;
}

.woocommerce ul.products li.product .price ins {
    @apply no-underline;
}

.woocommerce ul.products li.product .button {
    @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 mx-4 mb-4 inline-block;
}

/* Single Product Page */
.woocommerce div.product {
    @apply bg-white rounded-lg shadow-lg overflow-hidden;
}

.woocommerce div.product .woocommerce-product-gallery {
    @apply relative;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    @apply relative;
}

.woocommerce div.product .woocommerce-product-gallery__image {
    @apply block;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    @apply w-full h-auto;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
    @apply absolute top-4 right-4 bg-white bg-opacity-80 hover:bg-opacity-100 p-2 rounded-full shadow-md transition-all duration-200;
}

.woocommerce div.product .summary {
    @apply p-6;
}

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

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

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

.woocommerce div.product .summary .cart {
    @apply mb-6;
}

.woocommerce div.product .summary .quantity {
    @apply inline-block mr-4;
}

.woocommerce div.product .summary .quantity .qty {
    @apply w-20 px-3 py-2 border border-gray-300 rounded-md text-center;
}

.woocommerce div.product .summary .single_add_to_cart_button {
    @apply bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-md font-medium transition-colors duration-200;
}

.woocommerce div.product .summary .single_add_to_cart_button:disabled {
    @apply bg-gray-400 cursor-not-allowed;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs {
    @apply flex border-b border-gray-200 mb-6 list-none p-0 m-0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    @apply mr-1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    @apply block px-6 py-3 text-gray-600 hover:text-red-600 border-b-2 border-transparent hover:border-red-600 transition-colors duration-200;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
    @apply p-6 bg-gray-50 rounded-lg;
}

/* Cart Page */
.woocommerce-cart .woocommerce {
    @apply max-w-6xl mx-auto px-4 py-8;
}

.woocommerce-cart .woocommerce table.cart {
    @apply w-full bg-white rounded-lg shadow-md overflow-hidden;
}

.woocommerce-cart .woocommerce table.cart thead th {
    @apply bg-gray-50 px-6 py-4 text-left text-sm font-semibold text-gray-900 border-b border-gray-200;
}

.woocommerce-cart .woocommerce table.cart tbody td {
    @apply px-6 py-4 border-b border-gray-200;
}

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

.woocommerce-cart .woocommerce table.cart tbody td.product-name {
    @apply font-medium text-gray-900;
}

.woocommerce-cart .woocommerce table.cart tbody td.product-price {
    @apply text-red-600 font-semibold;
}

.woocommerce-cart .woocommerce table.cart tbody td.product-quantity .quantity {
    @apply flex items-center space-x-2;
}

.woocommerce-cart .woocommerce table.cart tbody td.product-quantity .qty {
    @apply w-16 px-2 py-1 border border-gray-300 rounded text-center;
}

.woocommerce-cart .woocommerce table.cart tbody td.product-remove .remove {
    @apply text-red-500 hover:text-red-700 text-lg;
}

.woocommerce-cart .woocommerce .cart-collaterals {
    @apply mt-8;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
    @apply bg-white rounded-lg shadow-md p-6;
}

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

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table {
    @apply w-full;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table th {
    @apply text-left py-2 text-gray-600;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table td {
    @apply text-right py-2 font-semibold;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .order-total td {
    @apply text-lg font-bold text-red-600 border-t border-gray-200 pt-4;
}

.woocommerce-cart .woocommerce .cart-collaterals .wc-proceed-to-checkout {
    @apply mt-6;
}

.woocommerce-cart .woocommerce .cart-collaterals .wc-proceed-to-checkout .checkout-button {
    @apply w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-md font-medium transition-colors duration-200;
}

/* Checkout Page */
.woocommerce-checkout .woocommerce {
    @apply max-w-6xl mx-auto px-4 py-8;
}

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

.woocommerce-checkout .woocommerce .woocommerce-checkout .col-1,
.woocommerce-checkout .woocommerce .woocommerce-checkout .col-2 {
    @apply bg-white rounded-lg shadow-md p-6;
}

.woocommerce-checkout .woocommerce .woocommerce-checkout h3 {
    @apply text-xl font-bold text-gray-900 mb-4;
}

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

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

.woocommerce-checkout .woocommerce .woocommerce-checkout .form-row input,
.woocommerce-checkout .woocommerce .woocommerce-checkout .form-row select,
.woocommerce-checkout .woocommerce .woocommerce-checkout .form-row textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500;
}

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

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

.woocommerce-checkout .woocommerce .woocommerce-checkout .place-order {
    @apply mt-6;
}

.woocommerce-checkout .woocommerce .woocommerce-checkout .place-order .button {
    @apply w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-md font-medium transition-colors duration-200;
}

/* My Account Page */
.woocommerce-account .woocommerce {
    @apply max-w-4xl mx-auto px-4 py-8;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
    @apply bg-white rounded-lg shadow-md p-6 mb-8;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
    @apply list-none p-0 m-0;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
    @apply mb-2;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
    @apply block px-4 py-2 text-gray-600 hover:text-red-600 hover:bg-gray-50 rounded-md transition-colors duration-200;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
    @apply text-red-600 bg-red-50;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    @apply bg-white rounded-lg shadow-md p-6;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content h3 {
    @apply text-xl font-bold text-gray-900 mb-4;
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    @apply p-4 rounded-md mb-4;
}

.woocommerce .woocommerce-message {
    @apply bg-green-50 border border-green-200 text-green-800;
}

.woocommerce .woocommerce-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800;
}

.woocommerce .woocommerce-error {
    @apply bg-red-50 border border-red-200 text-red-800;
}

/* Buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    @apply bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    @apply bg-red-700;
}

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

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

.woocommerce .form-row input,
.woocommerce .form-row select,
.woocommerce .form-row textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500;
}

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

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

/* Responsive Design */
@media (max-width: 768px) {
    .woocommerce ul.products {
        @apply grid-cols-1 sm:grid-cols-2;
    }
    
    .woocommerce-checkout .woocommerce .woocommerce-checkout {
        @apply grid-cols-1;
    }
    
    .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
        @apply mb-4;
    }
    
    .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
        @apply flex flex-wrap gap-2;
    }
    
    .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
        @apply mb-0;
    }
    
    .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
        @apply px-3 py-1 text-sm;
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products {
        @apply grid-cols-1;
    }
    
    .woocommerce-cart .woocommerce table.cart {
        @apply text-sm;
    }
    
    .woocommerce-cart .woocommerce table.cart thead th,
    .woocommerce-cart .woocommerce table.cart tbody td {
        @apply px-3 py-2;
    }
}