/**
 * Drobne dopełnienia, których nie da się (wygodnie) wyrazić samymi
 * klasami Tailwind z CDN. Reszta stylowania: patrz style.css (reset)
 * i assets/js/tailwind-config.js (tokeny z DESIGN.md).
 */

/* line-clamp jest częścią Tailwind core od v3.3 (CDN ładuje najnowszy v3),
   ale zostawiamy fallback na wypadek starszej wersji CDN w cache przeglądarki. */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Przycisk "+" (dodaj do koszyka) na karcie produktu (template-parts/product-card.php) -
   AJAX obsługuje natywny WooCommerce assets/js/frontend/add-to-cart.js
   (klasy .ajax_add_to_cart/.loading/.added są jego, nie nasze), ale
   ponieważ wyłączyliśmy domyślny CSS WooCommerce (woocommerce_enqueue_styles),
   te stany nie miały żadnego stylu - stąd "brzydki"/martwy wygląd
   podczas ładowania i po dodaniu. Link "Zobacz koszyk" ten sam skrypt
   dokleja obok przycisku bez żadnych klas Tailwind - ukrywamy go,
   bo mamy już własny toast potwierdzenia (patrz theme.js) i licznik
   koszyka w nagłówku aktualizujący się na żywo (cart fragments). */
.smk-add-to-cart-btn.loading {
	pointer-events: none;
	position: relative;
}
.smk-add-to-cart-btn.loading .material-symbols-outlined {
	visibility: hidden;
}
.smk-add-to-cart-btn.loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	margin: auto;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: smk-spin .6s linear infinite;
}
.smk-add-to-cart-btn.added {
	animation: smk-added-pulse .35s ease;
}
@keyframes smk-spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes smk-added-pulse {
	50% {
		transform: scale(1.18);
	}
}
.smk-add-to-cart-btn + .added_to_cart.wc-forward {
	display: none;
}

/* Treść z edytora WordPressa (the_content() na zwykłych podstronach - patrz
   page.php - i na wpisach bloga - patrz single.php): akapity/nagłówki/listy/
   linki bez własnych klas Tailwind, bo admin wpisuje je w edytorze blokowym. */
.smk-wysiwyg > * + * {
	margin-top: 1.25rem;
}
.smk-wysiwyg h2 {
	font-family: inherit;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
	color: #1b1c1e;
	margin-top: 2rem;
}
.smk-wysiwyg h3 {
	font-family: inherit;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	color: #1b1c1e;
	margin-top: 1.75rem;
}
.smk-wysiwyg p,
.smk-wysiwyg li {
	font-size: 15px;
	line-height: 26px;
	color: #1b1c1e;
}
.smk-wysiwyg ul,
.smk-wysiwyg ol {
	padding-left: 1.25rem;
}
.smk-wysiwyg ul {
	list-style: disc;
}
.smk-wysiwyg ol {
	list-style: decimal;
}
.smk-wysiwyg li + li {
	margin-top: .5rem;
}
.smk-wysiwyg a {
	color: #486800;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.smk-wysiwyg a:hover {
	color: #78a714;
}
.smk-wysiwyg img {
	border-radius: .75rem;
	max-width: 100%;
	height: auto;
}
.smk-wysiwyg blockquote {
	border-left: 3px solid #78a714;
	padding-left: 1rem;
	font-style: italic;
	color: #5E6852;
}

/* Ostrzeżenie widoczne tylko dla zalogowanych redaktorów, gdy moduł strony
   głównej nie ma jeszcze danych (np. nie wybrano produktów). */
.smk-admin-hint {
	background: #FFF8E1;
	border: 1px dashed #AE8433;
	border-radius: .5rem;
	padding: .75rem 1rem;
	font-size: .8rem;
	color: #5E6852;
}

/* Dodatkowe informacje od wtyczek przewoźników (patrz
   woocommerce/cart/cart-shipping.php) - np. wtyczka InPost PL dokleja
   swoje logo; ograniczamy jego wysokość, żeby nie rozsadzało karty. */
.smk-shipping-rate-meta img {
	/* !important: przebija własny CSS wtyczki InPost PL (.easypack-shipping-method-logo
	   ustawia tam max-height:40px z wyższą specyficznością). */
	max-height: 18px !important;
	width: auto !important;
	display: inline-block;
	vertical-align: middle;
}

/* Nagłówek jest "position: fixed; top: 0", więc trzeba go ręcznie
   przesunąć o wysokość paska admina WP, gdy jest widoczny (zalogowany
   użytkownik) - elementy "fixed" nie reagują na margin-top, który WP
   standardowo dokleja do <html>/<body>. Bez tego pasek admina zasłania
   górną belkę (Infolinia/dostawa). Wysokości 32px/46px = te same, których
   używa sam WordPress (wp-admin/css/admin-bar.min.css). */
body.admin-bar header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar header {
		top: 46px;
	}
}

/* ==========================================================================
   Checkout (woocommerce/checkout/form-checkout.php): układ (siatka, karty)
   jest już własny/Tailwind, ale same pola formularza (billing/shipping),
   lista metod płatności i przycisk złożenia zamówienia to wciąż markup
   generowany przez WooCommerce (klasy .form-row/.input-text/#payment itd.)
   - nie da się go bezpiecznie zastąpić własnymi klasami Tailwind bez
   ryzyka rozwalenia integracji z bramkami płatności. Ograniczony zestaw
   reguł niżej dociąga ten markup wizualnie do reszty motywu (kolory,
   zaokrąglenia, odstępy z DESIGN.md), zamiast zostawiać go całkiem
   "surowym". Pełne przejęcie każdego pola z osobna to kolejny etap.
   ========================================================================== */
.smk-wc-form .form-row {
	margin-bottom: 1rem;
}
/* Własne nagłówki sekcji (Krok 1/3/4) zastępują domyślne WooCommerce
   "Billing details" / "Ship to a different address?" itd. */
.smk-wc-form > h3 {
	display: none;
}
.smk-wc-form .woocommerce-billing-fields__field-wrapper,
.smk-wc-form .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: start;
}
.smk-wc-form .form-row-wide,
.smk-wc-form .create-account,
.smk-wc-form .woocommerce-account-fields,
.smk-wc-form .woocommerce-additional-fields {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.smk-wc-form .woocommerce-billing-fields__field-wrapper,
	.smk-wc-form .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}
.smk-wc-form .shipping_address {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.smk-wc-form .shipping-calculator-form {
	margin-top: .5rem;
}
.smk-wc-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1b1c1e;
	margin-bottom: .35rem;
}
.smk-wc-form .required {
	color: #C82229;
	text-decoration: none;
}
.smk-wc-form .input-text,
.smk-wc-form select,
.smk-wc-form textarea,
.smk-wc-form .select2-selection {
	width: 100%;
	background: #F5F1E9;
	border: 1px solid #E8E2D7;
	border-radius: .625rem;
	padding: .6rem .85rem;
	font-size: 14px;
	color: #1b1c1e;
	font-family: inherit;
}
/* select2 (dropdown "Kraj / region") ma własną, sztywną wysokość
   28px i wewnętrzne elementy (__rendered, __arrow) pozycjonowane
   względem niej - nasz padding wyżej na .select2-selection wchodzi
   w konflikt z tą sztywną wysokością (box-sizing:border-box z Tailwind
   preflight) i wypycha tekst/strzałkę poza widoczną ramkę. Wysokość
   auto + flex centruje zawartość niezależnie od naszego paddingu. */
.smk-wc-form .select2-container--default .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}
.smk-wc-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: inherit;
}
.smk-wc-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
}
.smk-wc-form .input-text:focus,
.smk-wc-form select:focus,
.smk-wc-form textarea:focus {
	outline: none;
	border-color: #78a714;
	box-shadow: 0 0 0 2px rgba(120, 167, 20, .25);
}
.smk-wc-form .woocommerce-input-wrapper {
	display: block;
}
.smk-wc-form h3 {
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	color: #1b1c1e;
	margin: 0 0 1rem;
}
.smk-wc-form .woocommerce-additional-fields {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E8E2D7;
}

/* Metody dostawy/płatności - listy <ul> generowane przez WooCommerce. */
.smk-wc-form ul#shipping_method,
.smk-wc-form .woocommerce-shipping-methods,
.smk-wc-form .payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.smk-wc-form ul#shipping_method li,
.smk-wc-form .payment_methods > li {
	background: #F5F1E9;
	border: 1px solid #E8E2D7;
	border-radius: .75rem;
	padding: .75rem 1rem;
}
.smk-wc-form .payment_box {
	background: #FBF9F5;
	border-radius: .625rem;
	padding: .85rem 1rem;
	margin-top: .5rem;
	font-size: 13px;
	color: #5E6852;
}

/* Podsumowanie zamówienia (#order_review) - tabelka mini-koszyka. */
.smk-wc-form table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.smk-wc-form table.shop_table th,
.smk-wc-form table.shop_table td {
	padding: .6rem 0;
	border-bottom: 1px solid #E8E2D7;
	text-align: left;
}
.smk-wc-form table.shop_table td:last-child,
.smk-wc-form table.shop_table th:last-child {
	text-align: right;
}
.smk-wc-form table.shop_table .order-total th,
.smk-wc-form table.shop_table .order-total td {
	font-weight: 800;
	font-size: 16px;
	border-bottom: none;
	border-top: 2px solid #1b1c1e;
}

/* Przycisk "Złóż zamówienie"/"Zapisz" itd. - każdy button[type=submit] w
   obrębie .smk-wc-form (checkout, ale też formularze Moje konto: logowanie,
   rejestracja, edycja adresu/danych konta, reset hasła). */
.smk-wc-form #place_order,
.smk-wc-form .checkout-button,
.smk-wc-form button[type="submit"] {
	width: 100%;
	background: #87BA14;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: .9rem 1.5rem;
	border-radius: .75rem;
	border: none;
	cursor: pointer;
	transition: background-color .15s ease;
	margin-top: 1rem;
}
.smk-wc-form #place_order:hover,
.smk-wc-form button[type="submit"]:hover {
	background: #486800;
}
.smk-wc-form .woocommerce-terms-and-conditions-wrapper {
	font-size: 13px;
	color: #5E6852;
	margin-top: 1rem;
}
/* Komunikaty WooCommerce (błąd/sukces/info) - te same klasy pojawiają się
   zarówno w formularzach (.smk-wc-form, np. błędny kupon na checkoucie)
   jak i samodzielnie poza nimi (np. logowanie w Moje konto), więc reguły
   niżej są celowo NIE ograniczone do .smk-wc-form. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.smk-wc-form .woocommerce-NoticeGroup ul {
	border-radius: .625rem;
	padding: .75rem 1rem;
	list-style: none;
	margin: 0 0 1rem;
	font-size: 14px;
}
.woocommerce-error li {
	margin: 0;
}
.woocommerce-error li + li {
	margin-top: .35rem;
}
.woocommerce-error,
.smk-wc-form .woocommerce-NoticeGroup ul {
	background: #ffdad6;
	color: #93000a;
}
.woocommerce-message {
	background: #e5f3d1;
	color: #2f4a00;
}
.woocommerce-info {
	background: #F5F1E9;
	color: #1b1c1e;
	border: 1px solid #E8E2D7;
}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Kalkulator kosztów wysyłki w koszyku ("Oblicz koszty wysyłki" -
   patrz woocommerce/cart/cart-shipping.php i cart-totals.php) - te same
   pola .form-row/.input-text/select co reszta .smk-wc-form powyżej,
   ale link-przełącznik i przycisk "Aktualizuj" mają własny, natywny
   markup WooCommerce bez naszych klas. */
.smk-shipping-calculator .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: 13px;
	font-weight: 700;
	color: #486800;
	text-decoration: none;
}
.smk-shipping-calculator .shipping-calculator-button:hover {
	text-decoration: underline;
}
.smk-shipping-calculator .shipping-calculator-form {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px dashed #E8E2D7;
}
.smk-shipping-calculator .shipping-calculator-form .button {
	background: #87BA14;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: .5rem 1.1rem;
	border-radius: .625rem;
	border: none;
	cursor: pointer;
}
.smk-shipping-calculator .shipping-calculator-form .button:hover {
	background: #486800;
}

/* ==========================================================================
   Strona potwierdzenia zamówienia (woocommerce/checkout/thankyou.php) -
   instrukcje płatności doklejane przez bramkę (hook
   "woocommerce_thankyou_{gateway}", np. dane do przelewu z natywnej
   metody WooCommerce "Przelew bankowy" - BACS) to wciąż natywny markup
   wtyczki/rdzenia (<h3>/<ul class="wc-bacs-bank-details">), nie da się
   go bezpiecznie zastąpić bez ryzyka rozwalenia integracji z bramkami.
   ========================================================================== */
.smk-payment-instructions h2,
.smk-payment-instructions h3 {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #1b1c1e;
	margin: 0 0 .5rem;
}
.smk-payment-instructions p {
	font-size: 14px;
	color: #5E6852;
	margin: 0 0 .75rem;
}
.smk-payment-instructions ul.wc-bacs-bank-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.smk-payment-instructions ul.wc-bacs-bank-details li {
	font-size: 14px;
	color: #1b1c1e;
	padding: .5rem .75rem;
	background: #FBF9F5;
	border: 1px solid #E8E2D7;
	border-radius: .5rem;
}
.smk-payment-instructions ul.wc-bacs-bank-details li strong {
	color: #486800;
	font-weight: 700;
}

/* ==========================================================================
   Formularz "Dodaj opinię" (karta produktu, zakładka Opinie - patrz
   template-parts/single-product/tabs.php) - natywny WP comment_form()
   dociągnięty wizualnie tymi samymi zasadami co .smk-wc-form (checkout/moje
   konto), ale pod OSOBNĄ klasą: ".smk-wc-form > h3 { display:none }" wyżej
   celowo chowa nagłówki WooCommerce w checkoucie i złapałoby też nagłówek
   "Dodaj opinię", gdyby użyć tu tej samej klasy.
   ========================================================================== */
.smk-review-form .form-row {
	margin-bottom: 1rem;
}
.smk-review-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1b1c1e;
	margin-bottom: .35rem;
}
.smk-review-form .required {
	color: #C82229;
	text-decoration: none;
}
.smk-review-form .input-text,
.smk-review-form textarea {
	width: 100%;
	background: #FBF9F5;
	border: 1px solid #E8E2D7;
	border-radius: .625rem;
	padding: .6rem .85rem;
	font-size: 14px;
	color: #1b1c1e;
	font-family: inherit;
}
.smk-review-form .input-text:focus,
.smk-review-form textarea:focus {
	outline: none;
	border-color: #78a714;
	box-shadow: 0 0 0 2px rgba(120, 167, 20, .25);
}
.smk-review-form button[type="submit"] {
	background: #87BA14;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: .8rem 1.75rem;
	border-radius: .75rem;
	border: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.smk-review-form button[type="submit"]:hover {
	background: #486800;
}
.smk-review-form .comment-notes,
.smk-review-form .logged-in-as {
	font-size: 13px;
	color: #5E6852;
	margin: 0 0 1rem;
}
.smk-review-form .logged-in-as a {
	color: #486800;
	font-weight: 700;
}
/* Ocena gwiazdkowa (name="rating", odczytywane przez WooCommerce
   WC_Comments::add_comment_rating()) - czysty CSS, bez JS: kolejność
   inputów w DOM jest odwrócona (5..1) i wizualnie odwracana z powrotem
   przez row-reverse, dzięki czemu ":checked ~ label" podświetla wszystkie
   gwiazdki PRZED klikniętą (czyli od lewej do wybranej). */
.smk-star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: .15rem;
}
.smk-star-rating input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.smk-star-rating label {
	margin: 0;
	font-size: 28px;
	line-height: 1;
	color: #E8E2D7;
	cursor: pointer;
	transition: color .1s ease;
}
.smk-star-rating label:before {
	content: "★";
}
.smk-star-rating input:checked ~ label,
.smk-star-rating input:focus-visible ~ label,
.smk-star-rating label:hover,
.smk-star-rating label:hover ~ label {
	color: #AE8433;
}