/* ==========================================================================
   MT Wood Gifts - Cart, checkout & single-product buttons
   ========================================================================== */

/*
 * Blocksy's global palette still has its default blues/slates in slots 1-7
 * (buttons, links, focus rings, radios/checkboxes, borders, text), and the
 * cart/checkout pages use those as-is. Rather than restyle every element,
 * this re-points Blocksy's own variables to the wood/gold palette, scoped
 * to the page content (#main) so the shared header/footer stay untouched.
 *
 * Blocksy's semantic vars (--theme-text-color etc.) are resolved on :root,
 * so redefining the palette slots alone wouldn't reach them - both the
 * slots (for rules that use them directly) and the semantic vars are set.
 *
 * Select2 (country/state pickers) renders its dropdown at the end of
 * <body>, outside #main, so it gets the same variables separately.
 */
.woocommerce-cart #main,
.woocommerce-checkout #main,
.single-product #main,
.woocommerce-cart .select2-container,
.woocommerce-checkout .select2-container {
	--mtwg-dark: #1c1410;
	--mtwg-cream: #f5efe4;
	--mtwg-gold: #c9a15a;
	--mtwg-gold-dark: #a97f3d;
	--mtwg-bg: #faf7f2;
	--mtwg-bg-alt: #f1ebe0;
	--mtwg-text: #4a3f34;
	--mtwg-text-muted: #7a6c5d;
	--mtwg-border: #e5dbca;
	--mtwg-border-strong: #cfc3b0;

	--theme-palette-color-1: var(--mtwg-gold-dark);
	--theme-palette-color-2: var(--mtwg-gold);
	--theme-palette-color-3: var(--mtwg-text);
	--theme-palette-color-4: var(--mtwg-dark);
	--theme-palette-color-5: var(--mtwg-border);
	--theme-palette-color-6: var(--mtwg-bg-alt);
	--theme-palette-color-7: var(--mtwg-bg);

	--theme-text-color: var(--mtwg-text);
	--theme-headings-color: var(--mtwg-dark);
	--theme-border-color: var(--mtwg-border);
	--theme-link-initial-color: var(--mtwg-gold-dark);
	--theme-link-hover-color: var(--mtwg-dark);
	--theme-selection-background-color: var(--mtwg-gold);
	--theme-selection-text-color: var(--mtwg-dark);

	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: var(--mtwg-dark);
	--theme-button-background-initial-color: var(--mtwg-dark);
	--theme-button-background-hover-color: var(--mtwg-gold);

	--theme-form-text-initial-color: var(--mtwg-dark);
	--theme-form-text-focus-color: var(--mtwg-dark);
	--theme-form-field-border-initial-color: var(--mtwg-border);
	--theme-form-field-border-focus-color: var(--mtwg-gold);
	--theme-form-selection-field-initial-color: var(--mtwg-border-strong);
	--theme-form-selection-field-active-color: var(--mtwg-gold-dark);
	--theme-form-select-background-active-color: var(--mtwg-gold-dark);

	--quantity-arrows-initial-color: var(--mtwg-dark);
}

/* Cart / checkout --------------------------------------------------------- */

:is(.woocommerce-cart, .woocommerce-checkout) #main :is(input, textarea, select)::placeholder {
	color: var(--mtwg-text-muted);
}

/* Blocksy sets the notice backgrounds (a cool grey) directly on the notice
   elements, so these need their own override. */
:is(.woocommerce-cart, .woocommerce-checkout) #main :is(.woocommerce-info, .woocommerce-message, .woocommerce-thankyou-order-received) {
	--background-color: var(--mtwg-bg-alt);
	--theme-link-initial-color: var(--mtwg-gold-dark);
	--theme-link-hover-color: var(--mtwg-dark);
	color: var(--mtwg-text);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .woocommerce-info::before,
:is(.woocommerce-cart, .woocommerce-checkout) #main .woocommerce-message::before {
	color: var(--mtwg-gold-dark);
}

/* Cart "remove item" cross. */
.woocommerce-cart #main .product-remove a.remove:hover {
	color: var(--mtwg-gold-dark);
}

/* Prices / totals. */
:is(.woocommerce-cart, .woocommerce-checkout) #main :is(.cart_totals, .woocommerce-checkout-review-order-table) .order-total .amount {
	color: var(--mtwg-dark);
}

/* Payment method box ("Плаќање при испорака" etc.). */
.woocommerce-checkout #main #payment {
	background: var(--mtwg-bg);
}

.woocommerce-checkout #main #payment ul.payment_methods .payment_box {
	background: var(--mtwg-bg-alt);
	color: var(--mtwg-text);
}

/* Select2 single-selection box and dropdown. */
:is(.woocommerce-cart, .woocommerce-checkout) .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--mtwg-dark);
}

:is(.woocommerce-cart, .woocommerce-checkout) .select2-container--default .select2-results__option--highlighted[aria-selected],
:is(.woocommerce-cart, .woocommerce-checkout) .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--mtwg-gold-dark);
	color: #ffffff;
}

/* Single product: "Купи" + "Додај во кошничка" ---------------------------- */

/*
 * Blocksy lays out .ct-cart-actions as a wrapping flex row (quantity, then
 * the add-to-cart button). "Купи" takes the add-to-cart button's spot next
 * to the quantity; "Додај во кошничка" drops to its own full-width row
 * below as the secondary, outlined action.
 */
.single-product .entry-summary .ct-cart-actions .mtwg-buy-now {
	--item-order: 2;
	flex: 1;
}

.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button:not(.mtwg-buy-now) {
	--item-order: 3;
	flex: 1 1 100%;
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: var(--mtwg-dark);
	--theme-button-text-initial-color: var(--mtwg-dark);
	--theme-button-text-hover-color: var(--mtwg-gold);
	--theme-button-border: 1px solid var(--mtwg-dark);
}

.single-product .entry-summary .ct-cart-actions .single_add_to_cart_button.mtwg-buy-now {
	--theme-button-background-initial-color: var(--mtwg-dark);
	--theme-button-background-hover-color: var(--mtwg-gold);
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: var(--mtwg-dark);
}

/* Blocksy's "View cart" link shown after an AJAX add, in the same row. */
.single-product .entry-summary .ct-cart-actions .added_to_cart {
	--theme-button-text-initial-color: var(--mtwg-dark);
	--theme-button-text-hover-color: var(--mtwg-dark);
	--theme-button-background-initial-color: var(--mtwg-bg-alt);
	--theme-button-background-hover-color: var(--mtwg-border);
}

/* Empty cart (woocommerce/cart/cart-empty.php) ---------------------------- */

/* Same warm background as the shop and content pages, instead of Blocksy's cool grey. */
.woocommerce-cart #main {
	background: var(--mtwg-bg);
}

.woocommerce-cart #main .mtwg-empty-cart {
	max-width: 640px;
	margin: 24px auto 40px;
	padding: 56px 32px;
	text-align: center;
	background: #ffffff;
	border: 1px solid var(--mtwg-border);
	border-radius: 6px;
}

.woocommerce-cart #main .mtwg-empty-cart__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--mtwg-bg-alt);
	color: var(--mtwg-gold-dark);
}

.woocommerce-cart #main .mtwg-empty-cart__title {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	color: var(--mtwg-dark);
	margin: 0 0 12px;
}

.woocommerce-cart #main .mtwg-empty-cart__text {
	max-width: 44ch;
	margin: 0 auto 28px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mtwg-text-muted);
}

.woocommerce-cart #main .mtwg-empty-cart__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 30px;
	border-radius: 6px;
	background: var(--mtwg-dark);
	color: var(--mtwg-cream);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart #main .mtwg-empty-cart__btn:hover {
	background: var(--mtwg-gold);
	color: var(--mtwg-dark);
}

.woocommerce-cart #main .mtwg-empty-cart__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--mtwg-border);
}

.woocommerce-cart #main .mtwg-empty-cart__cats a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--mtwg-border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mtwg-text);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart #main .mtwg-empty-cart__cats a:hover {
	border-color: var(--mtwg-gold);
	color: var(--mtwg-gold-dark);
}

.woocommerce-cart #main .mtwg-empty-cart__cats .mtwg-icon-svg {
	color: var(--mtwg-gold-dark);
}

/* Delivery-time notice above the order notes (inc/checkout.php) ----------- */

.woocommerce-checkout #main .mtwg-delivery-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	background: #eaf2fb;
	border: 1px solid #c9dcf2;
	border-left: 4px solid #2f6db5;
	border-radius: 6px;
	color: #1f3d63;
}

.woocommerce-checkout #main .mtwg-delivery-notice__icon {
	flex: none;
	margin-top: 1px;
	color: #2f6db5;
}

.woocommerce-checkout #main .mtwg-delivery-notice p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
}

/* "Delivered by ELS" row in the order review (inc/checkout.php) ----------- */

.woocommerce-checkout #main .mtwg-courier__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.woocommerce-checkout #main .mtwg-courier__label {
	font-size: 13px;
	color: var(--mtwg-text);
}

.woocommerce-checkout #main .mtwg-courier__logo {
	display: block;
	width: 120px;
	height: auto;
}

.woocommerce-checkout #main .mtwg-courier__pricelist {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--mtwg-gold-dark);
	text-decoration: underline;
}

.woocommerce-checkout #main .mtwg-courier__pricelist:hover {
	color: var(--mtwg-dark);
}