/*
 * Cart page (/kosik/, page 25): two-column cart + summary, reviews strip.
 * Ports Oxygen page 25 CSS, universal classes and the theme-markup rules of snippets 165, 490229, 500 and 5438.
 * The cart table itself is plugin markup (wooptima-ecommerce cart.php) and stays styled by the plugin/snippets.
 */

/* ---------- Cart section ---------- */

.wa-cart__inner,
.wa-cart-reviews > .section-inner {
	width: 100%;
}

.wa-cart__inner {
	padding-top: var(--space-l);
	padding-bottom: 0;
}

.wa-cart__inner > * {
	width: 100%;
}

.wa-cart-main-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-l);
	align-items: flex-start;
}

@media (min-width: 1025px) {
	.wa-cart-main-wrapper {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.wa-cart-items {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.wa-cart-items > * {
	width: 100%;
}

/* ---------- Fake coupon ticket (mobilky_cart_coupon_html(), includes/theme/inc/fake-coupon.php) ---------- */

/* Phones: amount strip on top; from 600px a ticket with the strip on the left, a perforation and notches. */
.wa-cart-coupon {
	display: grid;
	margin-top: var(--space-m);
	border: 1px solid var(--base-light);
	border-radius: var(--radius);
	background: var(--white);
	overflow: hidden;
	color: var(--base);
	font-size: 15px;
	line-height: 1.35;
}

.wa-cart-coupon[hidden] {
	display: none;
}

.wa-cart-coupon__stub {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	background: var(--coupon-accent, #d80001);
	color: var(--white);
	text-align: center;
}

.wa-cart-coupon__stub::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: -1px;
	left: 10px;
	border-bottom: 2px dashed rgba(255, 255, 255, 0.55);
}

.wa-cart-coupon__amount {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.wa-cart-coupon__label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.9;
}

.wa-cart-coupon__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 16px 14px 14px;
}

.wa-cart-coupon__title {
	margin: 0;
	color: var(--base-ultra-dark);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.wa-cart-coupon__title b {
	color: var(--coupon-accent, #d80001);
}

.wa-cart-coupon__hold {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 10px;
	border-radius: var(--radius-xxl);
	background: var(--coupon-bg, #fff2f2);
	color: var(--base-ultra-dark);
	font-size: 14px;
}

.wa-cart-coupon__hold > svg {
	flex: 0 0 auto;
	color: var(--coupon-accent, #d80001);
}

.wa-cart-coupon__hold-text {
	flex: 1;
}

.wa-cart-coupon__timer {
	flex: 0 0 auto;
	min-width: 66px;
	padding: 4px 8px;
	border-radius: var(--radius-xxl);
	background: var(--coupon-accent, #d80001);
	color: var(--white);
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-align: center;
}

.wa-cart-coupon__timer.is-low {
	animation: wa-cart-coupon-pulse 1s ease-in-out infinite;
}

@keyframes wa-cart-coupon-pulse {
	50% {
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-cart-coupon__timer.is-low {
		animation: none;
	}
}

.wa-cart-coupon__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.wa-cart-coupon__code {
	display: inline-block;
	padding: 4px 10px 3px;
	border: 1.5px dashed var(--coupon-accent, #d80001);
	border-radius: var(--radius-xxl);
	background: var(--white);
	color: var(--coupon-accent, #d80001);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.wa-cart-coupon__applied {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--accent-dark);
	font-size: 14px;
	font-weight: 600;
}

.wa-cart-coupon__fine {
	margin: 0;
	color: var(--base-medium);
	font-size: 12.5px;
	line-height: 1.4;
}

@media (min-width: 600px) {
	.wa-cart-coupon {
		grid-template-columns: auto 1fr;
	}

	.wa-cart-coupon__stub {
		flex-direction: column;
		gap: 2px;
		min-width: 132px;
		padding: 18px 16px;
	}

	.wa-cart-coupon__stub::after {
		top: 10px;
		right: -1px;
		bottom: 10px;
		left: auto;
		border-right: 2px dashed rgba(255, 255, 255, 0.55);
		border-bottom: 0;
	}

	.wa-cart-coupon__body {
		padding: 16px 20px 16px 24px;
	}

	/* Ticket notches over the perforation. */
	.wa-cart-coupon__body::before,
	.wa-cart-coupon__body::after {
		content: "";
		position: absolute;
		left: -9px;
		width: 18px;
		height: 18px;
		border: 1px solid var(--base-light);
		border-radius: 50%;
		background: var(--white);
	}

	.wa-cart-coupon__body::before {
		top: -10px;
	}

	.wa-cart-coupon__body::after {
		bottom: -10px;
	}

	.wa-cart-coupon__title {
		font-size: 19px;
	}
}

/* Theme column with the support box + desktop summary (the plugin cart form has its own .wa-cart-actions). */
.wa-cart-main-wrapper > .wa-cart-actions {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

/* Support box: shared .wa-support-box (components/support-box.css) with the cart-page values. */
.wa-cart-actions > .wa-support-box {
	justify-content: center;
	margin-bottom: var(--space-m);
}

.wa-cart-actions > .wa-support-box .wa-support-box__content-area {
	align-items: center;
	margin-top: var(--space-xs);
	text-align: left;
}

.wa-support-box__prefix {
	margin: 0;
	font-size: var(--text-l);
	line-height: 1.5;
}

/* Scoped to .wa-cart-actions: snippet 165 (loaded after theme CSS) sets the phone colour on the bare class. */
.wa-cart-actions .wa-support-box__phone {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: var(--shade);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.wa-cart-actions .wa-support-box__phone:hover {
	color: var(--primary);
}

.wa-cart-actions .wa-support-box__phone svg {
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 0.8rem;
	fill: var(--shade-ultra-dark-trans-20);
}

.wa-cart-actions .wa-support-box__phone-number {
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.4px;
}

/* Snippet 5438: below the desktop grid the support box moves under the summary. */
@media (max-width: 1024px) {
	.wa-cart-actions > .wa-support-box {
		order: 1;
		margin-top: calc(var(--space-xxl) * 1.2);
		margin-bottom: 0;
	}
}

/* ---------- Summary box (theme desktop wrapper + plugin mobile wrapper) ---------- */

.wa-cart-sticky-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: sticky;
	top: 180px;
}

/* Snippet 490229. */
@media (max-width: 992px) {
	.wa-cart-sticky-wrapper {
		position: static;
	}
}

.wa-cart-price-and-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--space-l) var(--space-l);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	background-color: var(--secondary);
}

.wa-cart-price-and-btn__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--space-l) 0 var(--space-m);
}

.wa-cart-price-and-btn__total-amount {
	margin-bottom: var(--space-xs);
	line-height: 1;
}

/* Also styles the disclaimer inside the plugin's mobile summary (cart.php keeps Oxygen ids there). */
.wa-cart-price-and-btn_disclaimer {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	text-align: left;
}

.wa-cart-price-and-btn_disclaimer svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 0.4rem;
	fill: var(--primary);
}

/* The plugin's mobile summary wraps the icon in a div (Oxygen fancy icon). */
.wa-cart-price-and-btn_disclaimer > div {
	display: flex;
	flex-shrink: 0;
	margin-right: 4px;
	border-radius: 50%;
	color: var(--primary);
}

.wa-cart-price-and-btn_disclaimer > div svg {
	margin-right: 0;
}

.wa-cart-price-and-btn_disclaimer > span {
	color: var(--primary);
	font-size: var(--text-s);
	line-height: 1.5;
}

/* Snippet 490229 (≤372px). */
@media (max-width: 372px) {
	.wa-cart-price-and-btn_disclaimer {
		flex-direction: column;
		margin-top: var(--space-xs);
		text-align: center;
	}
}

.wa-cart-price-and-btn .wa-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 70px;
	border-radius: var(--radius-xxl);
	background-color: var(--accent);
	color: var(--white);
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.wa-cart-actions__free-shipping-bar {
	width: 100%;
	padding: var(--space-m);
	border-radius: 0 0 var(--radius-l) var(--radius-l);
	box-shadow: var(--shadow-soft);
}

/* ---------- Reviews strip ---------- */

.wa-cart-reviews {
	margin-top: var(--space-xxl);
	background-color: var(--secondary);
}

.wa-cart-reviews > .section-inner > * {
	width: 100%;
}

.product-reviews-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gap-fixed);
	align-items: stretch;
}

@media (min-width: 768px) {
	.product-reviews-wrapper {
		grid-template-columns: repeat(10, minmax(1px, 1fr));
		gap: var(--space-m);
		align-items: center;
		justify-items: stretch;
	}

	.product-reviews-wrapper > :first-child {
		grid-column: span 3;
	}

	.product-reviews-wrapper > :last-child {
		grid-column: span 7;
	}
}

.wa-cart-reviews__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wa-cart-reviews__score {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-s);
}

.wa-cart-reviews__badge {
	width: 100px;
	height: 100px;
}

.wa-cart-reviews__rating {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wa-cart-reviews__percent {
	font-size: calc(var(--text-xxl) * 1.4);
	font-weight: 700;
	line-height: 1.2;
}

.wa-cart-reviews__stars {
	width: 125px;
	height: 22px;
}

.wa-cart-reviews__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 250px;
	max-width: 100%;
	margin-top: var(--space-m);
	padding: calc(var(--space-xs) * 0.8) var(--space-l);
	border-radius: var(--radius-xxl);
	background-color: var(--primary);
	color: var(--white);
	text-align: center;
	text-decoration: none;
}

.wa-cart-reviews__carousel {
	display: none;
	min-width: 0;
}

@media (min-width: 768px) {
	.wa-cart-reviews__carousel {
		display: block;
	}
}

/* Oxygen's reset gave every button the native button appearance (the WooCommerce look itself:
 * components/woocommerce-legacy.css). */
.woocommerce-cart .quantity input[type="button"] {
	appearance: button;
}