/*
 * LUEL Shop – WooCommerce stilovi.
 *
 * Prilagodjava WooCommerce (koji je podrazumevano svetao) tamnoj temi.
 * Boje se povlace iz palete teme, pa promena boje u Editoru menja i prodavnicu.
 */

/* ---------------------------------------------------------------
 * Katalog usluga
 * --------------------------------------------------------------- */

.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template {
	gap: var(--wp--preset--spacing--40);
}

.wc-block-product,
.wp-block-woocommerce-product-template li {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-lg);
	padding: 1.25rem;
	transition: transform var(--luel-transition), border-color var(--luel-transition);
}

.wp-block-woocommerce-product-template li:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.wc-block-components-product-image img,
.woocommerce-loop-product__link img {
	border-radius: var(--luel-radius-md);
}

/* Dok usluga nema svoju sliku, WooCommerce ubacuje belu placeholder sliku.
   Ovako se uklapa u tamnu temu. Prava slika se ne dira. */
img[src*="woocommerce-placeholder"] {
	filter: invert(1) brightness(0.82);
	border-radius: var(--luel-radius-md);
}

.wc-block-components-product-price__value,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

del .woocommerce-Price-amount,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--muted);
	opacity: 0.7;
}

.wc-block-components-product-sale-badge,
.onsale {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.25rem 0.75rem;
}

.woocommerce-result-count,
.wc-block-product-results-count,
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--accent);
}

.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	max-inline-size: 16rem;
}

/* ---------------------------------------------------------------
 * Dugmad
 * --------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--luel-transition), transform var(--luel-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, #ffffff);
	color: var(--wp--preset--color--accent-ink);
	transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}

.woocommerce a.button.wc-backward,
.wc-block-components-button.is-link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	padding-inline: 0;
}

/* ---------------------------------------------------------------
 * Stranica usluge
 * --------------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce div.product form.cart {
	margin-block-start: var(--wp--preset--spacing--40);
}

.woocommerce div.product form.cart div.quantity input {
	inline-size: 5rem;
	text-align: center;
}

.woocommerce-tabs ul.tabs {
	border: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	border-block-end: 1px solid var(--luel-hairline);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0 0 0.75rem;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent);
	padding-block-end: 0.75rem;
}

.wp-block-woocommerce-product-details .wc-tabs-wrapper {
	color: inherit;
}

/* ---------------------------------------------------------------
 * Detalji narudzbine (brief)
 * --------------------------------------------------------------- */

.luel-brief {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-lg);
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
	display: grid;
	gap: 1rem;
}

.luel-brief__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.luel-brief__intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.luel-brief__field {
	margin: 0;
	display: grid;
	gap: 0.35rem;
}

.luel-brief__field label {
	margin: 0;
}

.luel-brief .required {
	color: var(--wp--preset--color--accent);
	border: 0;
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Korpa, kasa, moj nalog
 * --------------------------------------------------------------- */

.woocommerce table.shop_table,
.wc-block-cart-items,
.wc-block-components-totals-wrapper {
	border-color: var(--luel-hairline);
	border-radius: var(--luel-radius-lg);
	color: var(--wp--preset--color--contrast);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-cart-items__row td {
	border-color: var(--luel-hairline);
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.woocommerce-checkout-review-order,
.cart_totals {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-lg);
	padding: var(--wp--preset--spacing--40);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-md);
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-checkout-step__description,
.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-panel,
.wc-block-components-radio-control-accordion-option {
	border-color: var(--luel-hairline);
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--luel-hairline);
	border-radius: var(--luel-radius-md);
	border-top-color: var(--wp--preset--color--accent);
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--wp--preset--color--accent);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--danger);
}

.woocommerce-error::before {
	color: var(--wp--preset--color--danger);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.25rem;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: var(--luel-radius-md);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: background-color var(--luel-transition), color var(--luel-transition);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.luel-empty-cart {
	color: var(--wp--preset--color--muted);
}

/* Mini korpa u zaglavlju */
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border: 0;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Ocene */
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars span::before {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
 * Mobilni ekrani
 * --------------------------------------------------------------- */

/* Mini korpa u zaglavlju: samo ikonica i broj, bez iznosa. */
.wc-block-mini-cart__button {
	padding: 0.35rem;
	gap: 0.35rem;
}

.wc-block-mini-cart__quantity-badge .wc-block-mini-cart__icon {
	inline-size: 24px;
	block-size: 24px;
}

@media (max-width: 781px) {
	/* Fioka korpe preko cele sirine telefona. */
	:root {
		--drawer-width: 100vw;
		--neg-drawer-width: -100vw;
	}

	.wc-block-mini-cart__amount,
	.wc-block-mini-cart__total-price {
		display: none;
	}

	/* Katalog: jedna usluga po redu, da slika i cena budu citljive. */
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	.wp-block-woocommerce-product-template,
	ul.wc-block-product-template,
	ul.products {
		grid-template-columns: 1fr !important;
	}

	.wc-block-product,
	.wp-block-woocommerce-product-template li {
		padding: 1rem;
	}

	/* Dugmad prodavnice preko cele sirine. */
	.wc-block-components-product-button .wp-block-button__link,
	.woocommerce div.product form.cart .button,
	.woocommerce a.button.wc-forward,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		inline-size: 100%;
	}

	/* Red sa sortiranjem i brojem rezultata ide u dva reda. */
	.woocommerce-result-count,
	.wc-block-product-results-count {
		inline-size: 100%;
	}

	.woocommerce-ordering select,
	.wc-block-catalog-sorting select {
		max-inline-size: 100%;
	}

	/* Tabovi na stranici usluge se skroluju vodoravno. */
	.woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 1.25rem;
		scrollbar-width: none;
	}

	.woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
	}

	/* Korpa i kasa: manje unutrasnjeg razmaka, vise sadrzaja na ekranu. */
	.wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.woocommerce-checkout-review-order,
	.cart_totals,
	.luel-brief {
		padding: var(--wp--preset--spacing--30);
	}

	/* Polja forme su dovoljno visoka za prst i ne zumiraju na iOS-u. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	select,
	textarea,
	.wc-block-components-text-input input {
		font-size: 16px;
		padding-block: 0.9rem;
	}

	/* Tabela korpe u klasicnom prikazu. */
	.woocommerce table.shop_table_responsive tr td {
		border-color: var(--luel-hairline);
	}
}

/* Prazna korpa: WooCommerce ikonica je bela, ovde je stisana da ne bode oci. */
.wc-block-cart__empty-cart__title::before,
.wc-block-cart__empty-cart__title img,
.wc-block-cart__empty-cart__title svg {
	opacity: 0.45;
}