/**
 * FairPlay Swiss Shop - WooCommerce Block Overrides
 *
 * Overrides for WooCommerce Blocks to match FairPlay brand.
 * Targets both legacy and Blocks-based WooCommerce components.
 *
 * @package FairPlay_Swiss_Shop
 */

/* =============================================================
   WOOCOMMERCE GLOBAL RESET
   ============================================================= */

/* Remove WooCommerce's default blue/purple button colors */
.wc-block-components-button,
.wp-element-button {
	border-radius: 6px !important;
	font-weight: 600 !important;
}

/* =============================================================
   STORE NOTICES
   ============================================================= */
.wc-block-store-notices {
	margin-bottom: 1.5rem;
}

.wc-block-components-notice-banner {
	border-radius: 8px !important;
	border: none !important;
	padding: 1rem 1.25rem !important;
}

.wc-block-components-notice-banner.is-success {
	background-color: rgba(22, 101, 52, 0.1) !important;
	border-left: 4px solid var(--wp--preset--color--success) !important;
	color: var(--wp--preset--color--success) !important;
}

.wc-block-components-notice-banner.is-error {
	background-color: rgba(185, 28, 28, 0.1) !important;
	border-left: 4px solid var(--wp--preset--color--error) !important;
	color: var(--wp--preset--color--error) !important;
}

/* =============================================================
   MINI CART
   ============================================================= */
.wc-block-mini-cart__button {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--text-dark) !important;
	transition: all 150ms ease !important;
	padding: 0.5rem 0.75rem !important;
}

.wc-block-mini-cart__button:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
	background-color: rgba(212, 88, 10, 0.05) !important;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
}

.wc-block-mini-cart__drawer .components-panel__body-title {
	font-weight: 700;
}

.wc-block-mini-cart__footer-checkout {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	transition: background-color 150ms ease !important;
}

.wc-block-mini-cart__footer-checkout:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

/* =============================================================
   PRODUCT RATING STARS
   ============================================================= */
.wc-block-components-product-rating .wc-block-components-review-list-item__rating .wc-block-components-star-rating span,
.star-rating span::before,
.woocommerce-product-rating .star-rating span::before {
	color: var(--wp--preset--color--accent) !important;
}

.wc-block-components-product-rating__stars .filled {
	fill: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent) !important;
}

/* =============================================================
   PRICE
   ============================================================= */
.wc-block-components-product-price__regular {
	color: var(--wp--preset--color--text-muted) !important;
	text-decoration: line-through !important;
	font-size: 0.9em !important;
}

.wc-block-components-product-price__value {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700 !important;
}

/* =============================================================
   CART TABLE (Block Cart)
   ============================================================= */
.wc-block-cart-items__header {
	border-bottom: 2px solid var(--wp--preset--color--border) !important;
	padding-bottom: 0.75rem !important;
	font-size: 0.8rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--wp--preset--color--text-muted) !important;
}

.wc-block-cart-item {
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
	padding: 1.25rem 0 !important;
}

.wc-block-cart-item__image img {
	border-radius: 8px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
}

.wc-block-cart-item__quantity .quantity {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 6px !important;
	overflow: hidden;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	background: var(--wp--preset--color--background) !important;
	border: none !important;
	color: var(--wp--preset--color--text-dark) !important;
	transition: background-color 150ms ease !important;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--border) !important;
}

.wc-block-cart-item__product-name a {
	color: var(--wp--preset--color--text-dark) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wc-block-cart-item__product-name a:hover {
	color: var(--wp--preset--color--primary) !important;
}

.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--text-muted) !important;
	font-size: 0.8rem !important;
	text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--error) !important;
}

/* =============================================================
   ORDER SUMMARY (Cart + Checkout)
   ============================================================= */
.wc-block-components-order-summary {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
}

.wc-block-components-order-summary__toggle {
	background-color: var(--wp--preset--color--surface-warm) !important;
	padding: 1rem 1.25rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
}

.wc-block-components-order-summary-item {
	padding: 0.875rem 1.25rem !important;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 6px !important;
}

.wc-block-components-totals-item {
	padding: 0.75rem 1.25rem !important;
}

.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--text-medium) !important;
	font-size: 0.9rem !important;
}

.wc-block-components-totals-item.wc-block-components-totals-footer-item {
	background-color: var(--wp--preset--color--surface-warm) !important;
	border-top: 2px solid var(--wp--preset--color--border) !important;
	padding: 1rem 1.25rem !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--text-dark) !important;
}

/* =============================================================
   CHECKOUT FORM
   ============================================================= */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 6px !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.95rem !important;
	color: var(--wp--preset--color--text-dark) !important;
	background: #FFFFFF !important;
	transition: border-color 150ms ease, box-shadow 150ms ease !important;
	width: 100% !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px rgba(212, 88, 10, 0.15) !important;
	outline: none !important;
}

.wc-block-components-text-input label,
.wc-block-components-select label {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--text-medium) !important;
	margin-bottom: 0.35rem !important;
	display: block !important;
}

/* Section headings in checkout */
.wc-block-checkout__step-title,
.wc-block-components-checkout-step__title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--wp--preset--color--text-dark) !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
	margin-bottom: 1.25rem !important;
}

/* Payment methods */
.wc-block-components-payment-method-label {
	font-weight: 500 !important;
}

.wc-block-components-radio-control-accordion-option--checked {
	border-color: var(--wp--preset--color--primary) !important;
	background-color: rgba(212, 88, 10, 0.04) !important;
}

/* Place order button */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 1rem 2rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	width: 100% !important;
	box-shadow: 0 4px 12px rgba(212, 88, 10, 0.3) !important;
	transition: all 150ms ease !important;
	cursor: pointer !important;
}

.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
	box-shadow: 0 6px 16px rgba(212, 88, 10, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* =============================================================
   ACCEPTED PAYMENT METHODS
   ============================================================= */
.wc-block-components-payment-method-icons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid var(--wp--preset--color--border) !important;
}

.wc-block-components-payment-method-icon {
	height: 24px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 4px !important;
	padding: 2px 4px !important;
}

/* =============================================================
   COUPON FORM
   ============================================================= */
.wc-block-components-totals-coupon {
	padding: 0.75rem 1.25rem !important;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
}

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: 0.5rem;
}

.wc-block-components-totals-coupon__form input {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 6px !important;
	padding: 0.6rem 0.875rem !important;
	font-size: 0.875rem !important;
	flex: 1;
}

.wc-block-components-totals-coupon__form button {
	background-color: var(--wp--preset--color--secondary) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.6rem 1rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: background-color 150ms ease !important;
}

.wc-block-components-totals-coupon__form button:hover {
	background-color: var(--wp--preset--color--secondary-light) !important;
}

/* =============================================================
   SHIPPING METHODS
   ============================================================= */
.wc-block-components-radio-control__option {
	padding: 0.75rem !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 6px !important;
	margin-bottom: 0.5rem !important;
	transition: border-color 150ms ease, background-color 150ms ease !important;
}

.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--wp--preset--color--primary) !important;
	background-color: rgba(212, 88, 10, 0.04) !important;
}

/* =============================================================
   MY ACCOUNT (Classic WooCommerce)
   ============================================================= */
.woocommerce-MyAccount-navigation {
	background: var(--wp--preset--color--surface-warm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.875rem;
	border-radius: 6px;
	color: var(--wp--preset--color--text-dark);
	text-decoration: none;
	font-weight: 500;
	transition: all 150ms ease;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
	background-color: rgba(212, 88, 10, 0.1);
	color: var(--wp--preset--color--primary);
}

/* =============================================================
   PRODUCT LOOP (Legacy / Non-Block WooCommerce)
   ============================================================= */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 250ms ease, box-shadow 250ms ease;
	margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.75rem 1rem 0.25rem !important;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700 !important;
	padding: 0 1rem !important;
}

.woocommerce ul.products li.product .button {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	margin: 0.75rem 1rem 1rem !important;
	display: block !important;
	text-align: center !important;
	transition: background-color 150ms ease !important;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

/* Sale flash */
.woocommerce span.onsale {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	border-radius: 4px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	padding: 0.3rem 0.6rem !important;
}

/* =============================================================
   WOOCOMMERCE NOTICES
   ============================================================= */
.woocommerce-message {
	background-color: rgba(22, 101, 52, 0.08) !important;
	border-color: var(--wp--preset--color--success) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--success) !important;
}

.woocommerce-error {
	background-color: rgba(185, 28, 28, 0.08) !important;
	border-color: var(--wp--preset--color--error) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--error) !important;
}

.woocommerce-info {
	background-color: rgba(26, 47, 30, 0.06) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	border-radius: 8px !important;
}

/* =============================================================
   PRODUCT SORTING / CATALOG SORTING
   ============================================================= */
.woocommerce-ordering select,
.wc-block-catalog-sort__select {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 6px !important;
	padding: 0.5rem 2rem 0.5rem 0.875rem !important;
	font-size: 0.875rem !important;
	color: var(--wp--preset--color--text-dark) !important;
	background-color: #FFFFFF !important;
	appearance: auto !important;
	cursor: pointer !important;
}

/* =============================================================
   PRODUCT FILTERS (Block Filters)
   ============================================================= */
.wc-block-stock-filter,
.wc-block-price-filter {
	margin-bottom: 1.5rem;
}

.wc-block-components-price-slider__range-input-wrapper {
	accent-color: var(--wp--preset--color--primary) !important;
}

.wc-block-components-filter-submit-button {
	background-color: var(--wp--preset--color--primary) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.6rem 1.25rem !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	cursor: pointer !important;
	transition: background-color 150ms ease !important;
}

.wc-block-components-filter-submit-button:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
}

/* Checkbox filters */
.wc-block-components-checkbox .components-checkbox-control__input:checked {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* =============================================================
   BREADCRUMBS (WooCommerce native)
   ============================================================= */
.woocommerce-breadcrumb {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 1.5rem;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition: color 150ms ease;
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}

/* =============================================================
   PRODUCT GALLERY ZOOM
   ============================================================= */
.woocommerce-product-gallery__trigger {
	background-color: rgba(255, 255, 255, 0.9) !important;
	border-radius: 50% !important;
	transition: background-color 150ms ease !important;
}

.woocommerce-product-gallery__trigger:hover {
	background-color: rgba(255, 255, 255, 1) !important;
}

/* Slick slider dots */
.flex-control-nav li img {
	border: 2px solid transparent !important;
	border-radius: 4px !important;
	transition: border-color 150ms ease !important;
}

.flex-control-nav li.flex-active img {
	border-color: var(--wp--preset--color--primary) !important;
}