/**
 * Quero Tudo Natural - WooCommerce Tailwind Styles
 * @package QueroTudoNatural
 */

/* ==========================================================================
   WooCommerce Shop Page
   ========================================================================== */
.woocommerce-page .woocommerce {
    @apply py-8;
}

.woocommerce .woocommerce-result-count {
    @apply text-neutral-light text-sm mb-4;
}

.woocommerce .woocommerce-ordering {
    @apply mb-6;
}

.woocommerce .woocommerce-ordering select {
    @apply px-4 py-2 border border-neutral-border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-accent/50;
}

/* Products Grid */
.woocommerce ul.products {
    @apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 !important;
}

.woocommerce ul.products li.product {
    @apply m-0 p-0 w-full float-none !important;
}

/* ==========================================================================
   Single Product
   ========================================================================== */
.woocommerce div.product {
    @apply grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12;
}

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

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

.woocommerce div.product .product_title {
    @apply text-2xl md:text-3xl font-bold text-neutral mb-4;
}

.woocommerce div.product p.price {
    @apply text-xl md:text-2xl font-bold text-secondary mb-6;
}

.woocommerce div.product p.price del {
    @apply text-neutral-lighter text-lg font-normal;
}

.woocommerce div.product p.price ins {
    @apply no-underline text-red-500;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    @apply text-neutral-light mb-6;
}

/* Gallery */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    @apply rounded-xl;
}

.woocommerce div.product div.images .flex-control-thumbs {
    @apply grid grid-cols-4 gap-2 mt-4;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    @apply rounded-lg opacity-70 transition-opacity cursor-pointer;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    @apply opacity-100;
}

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

.woocommerce .quantity .qty {
    @apply w-20 px-3 py-2 text-center border border-neutral-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent/50;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    @apply flex-1 px-8 py-3 bg-secondary text-white font-semibold rounded-full hover:bg-secondary-dark transition-colors !important;
}

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

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

.woocommerce div.product .product_meta a {
    @apply text-accent hover:underline;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs {
    @apply flex gap-2 p-0 mb-6 border-b-2 border-neutral-border list-none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    @apply hidden;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    @apply m-0 p-0 border-0 bg-transparent rounded-none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    @apply block px-6 py-3 text-neutral-light font-medium border-b-2 border-transparent -mb-0.5 transition-colors;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    @apply text-accent border-accent;
}

.woocommerce div.product .woocommerce-tabs .panel {
    @apply p-6 bg-warm-100 rounded-xl;
}

/* ==========================================================================
   Related Products
   ========================================================================== */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    @apply col-span-full mt-16;
}

.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2 {
    @apply text-2xl font-bold text-neutral mb-6;
}

/* ==========================================================================
   Cart
   ========================================================================== */
.woocommerce-cart .woocommerce {
    @apply py-8;
}

.woocommerce table.shop_table {
    @apply w-full border-collapse bg-white rounded-xl overflow-hidden shadow-soft;
}

.woocommerce table.shop_table th {
    @apply bg-warm-100 font-semibold text-neutral px-4 py-3 text-left;
}

.woocommerce table.shop_table td {
    @apply px-4 py-4 border-t border-neutral-border;
}

.woocommerce table.shop_table .product-thumbnail img {
    @apply w-20 h-20 object-contain rounded-lg;
}

.woocommerce table.shop_table .product-name a {
    @apply text-neutral font-medium hover:text-accent;
}

.woocommerce table.shop_table .product-remove a {
    @apply text-neutral-lighter hover:text-red-500 text-xl;
}

/* Cart Totals */
.woocommerce .cart-collaterals {
    @apply mt-8;
}

.woocommerce .cart_totals {
    @apply w-full max-w-md ml-auto;
}

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

.woocommerce .cart_totals table {
    @apply w-full bg-warm-100 rounded-xl overflow-hidden;
}

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

.woocommerce .wc-proceed-to-checkout a.checkout-button {
    @apply block w-full px-6 py-4 bg-secondary text-white font-semibold text-center rounded-full hover:bg-secondary-dark transition-colors mt-4 !important;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout .woocommerce {
    @apply py-8;
}

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

.woocommerce form.checkout .col2-set {
    @apply lg:col-span-2;
}

.woocommerce form.checkout #order_review_heading {
    @apply lg:col-start-3 lg:row-start-1 text-xl font-bold text-neutral mb-4;
}

.woocommerce form.checkout #order_review {
    @apply lg:col-start-3 lg:row-start-2 bg-warm-100 p-6 rounded-xl;
}

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

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

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    @apply w-full px-4 py-3 border border-neutral-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent transition-all;
}

.woocommerce form .form-row .required {
    @apply text-red-500;
}

/* Payment */
.woocommerce #payment {
    @apply bg-transparent;
}

.woocommerce #payment ul.payment_methods {
    @apply p-0 mb-6;
}

.woocommerce #payment ul.payment_methods li {
    @apply p-4 bg-white border border-neutral-border rounded-lg mb-2;
}

.woocommerce #payment #place_order {
    @apply w-full px-6 py-4 bg-secondary text-white font-bold text-lg rounded-full hover:bg-secondary-dark transition-colors !important;
}

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

/* Hide the default page title "Minha conta" */
.woocommerce-account .entry-header,
.woocommerce-account .entry-title {
    @apply !hidden;
}

/* Remove default container padding since we have our own */
.woocommerce-account .entry-content > .woocommerce {
    @apply p-0 !important;
}

.woocommerce-account .woocommerce {
    @apply py-0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    @apply w-full lg:w-64 flex-shrink-0;
}

.woocommerce-account .woocommerce-MyAccount-content {
    @apply w-full flex-1;
}

.woocommerce-MyAccount-navigation ul {
    @apply bg-warm-100 rounded-xl overflow-hidden;
}

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

.woocommerce-MyAccount-navigation ul li a {
    @apply block px-6 py-3 text-neutral hover:bg-accent hover:text-white transition-colors;
}

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

/* ==========================================================================
   Messages
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    @apply p-4 rounded-lg mb-6 border-t-0 !important;
}

.woocommerce-message {
    @apply bg-green-100 text-green-800;
}

.woocommerce-info {
    @apply bg-blue-100 text-blue-800;
}

.woocommerce-error {
    @apply bg-red-100 text-red-800;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    @apply hidden;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    @apply inline-flex items-center justify-center px-6 py-3 bg-secondary text-white font-medium rounded-full hover:bg-secondary-dark transition-colors !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    @apply bg-accent hover:bg-accent-dark !important;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb {
    @apply text-sm text-neutral-light mb-6;
}

.woocommerce .woocommerce-breadcrumb a {
    @apply text-neutral-light hover:text-accent;
}

/* ==========================================================================
   Star Rating
   ========================================================================== */
.woocommerce .star-rating {
    @apply text-yellow-400;
}

/* ==========================================================================
   Sale Badge
   ========================================================================== */
.woocommerce span.onsale {
    @apply absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs font-bold rounded-full min-w-0 min-h-0 leading-tight z-10 !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.woocommerce nav.woocommerce-pagination {
    @apply mt-8;
}

.woocommerce nav.woocommerce-pagination ul {
    @apply flex justify-center gap-2;
}

.woocommerce nav.woocommerce-pagination ul li {
    @apply border-0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    @apply flex items-center justify-center min-w-[40px] h-10 px-3 bg-white border border-neutral-border rounded-lg text-neutral hover:bg-accent hover:border-accent hover:text-white transition-colors !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    @apply bg-accent border-accent text-white !important;
}

/* ==========================================================================
   Widget Styles
   ========================================================================== */
.woocommerce .widget_price_filter .price_slider_wrapper {
    @apply pt-2;
}

.woocommerce .widget_price_filter .ui-slider {
    @apply bg-neutral-border rounded-full h-1;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    @apply bg-accent;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    @apply w-4 h-4 bg-accent rounded-full border-0 cursor-pointer -top-1.5;
}

.woocommerce .widget_price_filter .price_slider_amount {
    @apply mt-4;
}

.woocommerce .widget_price_filter .price_slider_amount .button {
    @apply text-sm px-4 py-2;
}

/* ==========================================================================
   My Account - Custom Styling
   ========================================================================== */

/* Hide default WC notices styling */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
    @apply rounded-xl border-0 flex items-center gap-3 !important;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before {
    @apply hidden !important;
}

/* Form Fields in My Account */
.woocommerce-account .woocommerce-address-fields .form-row,
.woocommerce-account .woocommerce-EditAccountForm .form-row {
    @apply mb-0 !important;
}

.woocommerce-account .form-row label {
    @apply block text-sm font-medium text-neutral mb-2 !important;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row textarea,
.woocommerce-account .form-row select {
    @apply w-full px-4 py-3 rounded-xl border-2 border-warm-200 focus:border-secondary focus:outline-none transition-colors bg-warm-50 !important;
}

.woocommerce-account .form-row .select2-container--default .select2-selection--single {
    @apply w-full px-4 py-3 rounded-xl border-2 border-warm-200 h-auto !important;
}

.woocommerce-account .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    @apply leading-normal py-0 px-0 text-neutral !important;
}

.woocommerce-account .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    @apply h-full top-0 right-3 !important;
}

/* Grid for address fields */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
    @apply grid sm:grid-cols-2 gap-6 !important;
}

/* Dashboard grid fixes */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    @apply hidden !important;
}

/* Order table in orders page */
.woocommerce-account .woocommerce-orders-table {
    @apply hidden !important;
}

/* Pagination styling */
.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination span {
    @apply flex items-center justify-center min-w-[40px] h-10 px-3 bg-white border border-warm-200 rounded-lg text-neutral hover:bg-secondary hover:border-secondary hover:text-white transition-colors !important;
}

.woocommerce-account .woocommerce-pagination span.current {
    @apply bg-secondary border-secondary text-white !important;
}

/* Downloads page */
.woocommerce-account .woocommerce-order-downloads {
    @apply bg-white rounded-2xl shadow-sm border border-warm-200 overflow-hidden !important;
}

/* Lost password confirmation */
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row {
    @apply mb-6 !important;
}

/* Form buttons */
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
    @apply bg-secondary hover:bg-secondary-dark text-white font-semibold py-3 px-6 rounded-xl transition-all !important;
}

/* Select2 dropdown styling */
.select2-container--default .select2-dropdown {
    @apply border-2 border-warm-200 rounded-xl shadow-lg !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    @apply bg-secondary text-white !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    @apply border-warm-200 rounded-lg !important;
}

/* ==========================================================================
   Cart Page - Minimal Design
   ========================================================================== */

/* Hide default cart page header and breadcrumb */
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-title,
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-cart .storefront-breadcrumb,
.woocommerce-cart nav.woocommerce-breadcrumb,
.woocommerce-cart .breadcrumb-area,
.woocommerce-cart .page-title-area {
    @apply !hidden;
}

/* Remove default container padding */
.woocommerce-cart .entry-content > .woocommerce {
    @apply p-0 !important;
}

/* Cart page background */
.woocommerce-cart .content-area {
    @apply bg-white;
}

/* Quantity input - Clean minimal style */
.qtn-cart-page .quantity {
    @apply inline-flex items-center;
}

.qtn-cart-page .quantity .qty {
    @apply w-12 h-8 text-center border border-gray-300 rounded bg-white text-sm text-neutral focus:outline-none focus:border-neutral;
    -moz-appearance: textfield;
}

.qtn-cart-page .quantity .qty::-webkit-outer-spin-button,
.qtn-cart-page .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide quantity +/- buttons if they exist */
.qtn-cart-page .quantity button,
.qtn-cart-page .quantity .minus,
.qtn-cart-page .quantity .plus {
    @apply hidden !important;
}

/* Cart product images */
.qtn-cart-page .product-thumbnail img {
    @apply w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-lg !important;
}

/* Cart shipping calculator */
.cart_totals .shipping-calculator-button {
    @apply text-gray-600 hover:text-neutral text-sm underline transition-colors;
}

.cart_totals .shipping-calculator-form {
    @apply mt-3 p-4 bg-white border border-gray-200 rounded-lg;
}

.cart_totals .shipping-calculator-form .form-row {
    @apply mb-3;
}

.cart_totals .shipping-calculator-form .form-row label {
    @apply block text-xs text-gray-500 mb-1;
}

.cart_totals .shipping-calculator-form input,
.cart_totals .shipping-calculator-form select {
    @apply w-full px-3 py-2 text-sm border border-gray-300 rounded focus:border-neutral focus:outline-none;
}

.cart_totals .shipping-calculator-form button {
    @apply w-full mt-2 px-4 py-2 bg-neutral text-white text-sm font-medium rounded hover:bg-black transition-colors !important;
}

/* Cart totals shipping methods */
.cart_totals .woocommerce-shipping-methods {
    @apply list-none p-0 m-0 space-y-2;
}

.cart_totals .woocommerce-shipping-methods li {
    @apply flex items-center gap-2;
}

.cart_totals .woocommerce-shipping-methods li label {
    @apply flex items-center gap-2 cursor-pointer text-neutral text-sm;
}

.cart_totals .woocommerce-shipping-methods li input[type="radio"] {
    @apply w-4 h-4 accent-neutral;
}

/* Shipping destination */
.cart_totals .woocommerce-shipping-destination {
    @apply text-xs text-gray-500 mt-2;
}

/* Checkout button - override any plugin styles */
.cart_totals .wc-proceed-to-checkout .checkout-button {
    @apply w-full block text-center px-6 py-3 bg-neutral text-white font-medium rounded hover:bg-black transition-colors !important;
}

/* Cart empty page */
.qtn-cart-empty .woocommerce-info {
    @apply hidden !important;
}

/* WooCommerce notices on cart */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
    @apply mb-6 p-4 rounded text-sm !important;
}

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

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

.woocommerce-cart .woocommerce-info {
    @apply bg-gray-50 text-gray-800 border border-gray-200 !important;
}

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce div.product {
        @apply grid-cols-1;
    }

    .woocommerce form.checkout {
        @apply grid-cols-1;
    }
}