/**
 * UNICEF Mini Cart — KOOBA 2026-10-07 / updated 2026-10-13
 *
 * Standalone file — not processed by Gulp.
 * UNICEF brand: #1CABE2 (blue), #E2231A (red)
 * Fonts: Aleo (headings), Noto Sans (body) — inherited from theme
 */

/* ============================================================
   KOOBA 2026-10-08: Hide billing_country field on electronic card checkout.
   The field is kept in the WC form (not removed) so WooCommerce Stripe Gateway
   detects it and suppresses the Payment Element's own country collection — but
   it must not be visible to the customer.
   ============================================================ */
.ucmc-hidden-field {
	display: none !important;
}

/* ============================================================
   KOOBA 2026-10-07: Reposition WooCommerce notices wrapper on
   product pages. The new gift-banner hero starts at the top of
   <main>, pushing the notices wrapper behind the nav bar.
   This ensures any notice (stock errors, validation, etc.)
   renders visibly below the nav. The add-to-cart notice is
   suppressed separately via woocommerce_add_to_cart_message_html.
   ============================================================ */
.single-product .woocommerce-notices-wrapper:not(:empty) {
	position: relative;
	z-index: 500;
	padding: 12px 20px 0;
	background: #fff;
}

/* ============================================================
   Fix: remove » arrows from WooCommerce product loop buttons.
   The theme's .button-text mixin (used by .woocommerce ul.products
   li.product .button) sets opacity: initial !important on ::after,
   making the » permanently visible. Suppress it here.
   ============================================================ */
.woocommerce ul.products li.product .button::after {
	content: none !important;
}

/* ============================================================
   Fix: related products row wraps below 960px, causing enormous height.
   The theme only sets flex-wrap: nowrap at 960px+; lower it to 600px.
   Also constrain image height so a broken/missing image doesn't stretch
   the row — all cards then stay a consistent height.
   ============================================================ */
@media (min-width: 600px) {
	.related .products {
		flex-wrap: nowrap;
	}
}

.related .product img {
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	object-position: center top !important;
}

/* ============================================================
   Hide the existing floating "View Cart" button on shop/category pages
   ============================================================ */
.floating-cart-btn {
	display: none !important;
}

/* ============================================================
   Drawer container
   ============================================================ */
#ucmc-drawer {
	position: fixed;
	z-index: 9999;
	background: #EEF4F9;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

#ucmc-drawer.ucmc-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Desktop: top-right dropdown */
@media (min-width: 700px) {
	#ucmc-drawer {
		top: 60px;
		right: 20px;
		width: 380px;
		max-height: calc(100vh - 80px);
		border-radius: 16px;
		transform: translateY(-12px);
	}

	#ucmc-drawer.ucmc-open {
		transform: translateY(0);
	}
}

/* Mobile: bottom full-width sheet */
@media (max-width: 699px) {
	#ucmc-drawer {
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 80vh;
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
	}

	#ucmc-drawer.ucmc-open {
		transform: translateY(0);
	}
}

/* ============================================================
   Close button — dark charcoal circle with white X
   ============================================================ */
.ucmc-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	background: #2D2D2D;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
	z-index: 1;
	padding: 0;
}

.ucmc-close:hover {
	background: #111;
}

.ucmc-close svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
}

/* ============================================================
   Added to basket heading (shown in 'added' mode only)
   ============================================================ */
.ucmc-added-heading {
	display: none;
	padding: 20px 56px 0 20px; /* right padding clears the close button */
}

.ucmc-added-title {
	font-family: 'General Sans', sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	color: #111;
	margin: 0;
	line-height: 1.3;
}

/* ============================================================
   Item list
   ============================================================ */
.ucmc-items {
	overflow-y: hidden; /* auto only when drawer is open */
	flex: 1;
	padding: 12px 0;
}

/* View mode: no heading, so items need top clearance for the close button */
#ucmc-drawer:not(.ucmc-mode-added) .ucmc-items {
	padding-top: 56px;
}

/* Added mode: heading provides the top spacing */
#ucmc-drawer.ucmc-mode-added .ucmc-items {
	padding-top: 12px;
}

#ucmc-drawer.ucmc-open .ucmc-items {
	overflow-y: auto;
}

.ucmc-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 20px;
}

.ucmc-item + .ucmc-item {
	border-top: 1px solid #D9E8F2;
}

.ucmc-item-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ucmc-item-info {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
	text-align: left;
}

.ucmc-item-name {
	font-family: 'General Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ucmc-item-price {
	font-family: 'General Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: #333;
	margin: 0 0 8px;
}

/* Quantity controls — pill/outline style, desktop only */
.ucmc-qty {
	display: flex;
	align-items: center;
	border: 1.5px solid #B0C8D9;
	border-radius: 20px;
	overflow: hidden;
	width: fit-content;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: auto;
	align-self: flex-start;
}

@media (max-width: 699px) {
	.ucmc-qty {
		display: none;
	}
}

.ucmc-qty-btn {
	background: none;
	border: none;
	width: 30px;
	height: 28px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
	padding: 0;
}

.ucmc-qty-btn:hover {
	background: #1CABE2;
	color: #fff;
}

.ucmc-qty-val {
	font-family: 'General Sans', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	min-width: 26px;
	text-align: center;
	color: #111;
	padding: 0 2px;
}

/* Remove — "Remove" text + bin icon */
.ucmc-remove {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: #111;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'General Sans', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	transition: color 0.2s;
}

.ucmc-remove:hover {
	color: #E2231A;
}

.ucmc-remove svg {
	width: 13px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Empty state */
.ucmc-empty {
	padding: 24px 20px;
	text-align: center;
	font-family: 'General Sans', sans-serif;
	font-size: 0.875rem;
	color: #666;
}

/* ============================================================
   Footer
   ============================================================ */
.ucmc-footer {
	padding: 14px 20px 20px;
	flex-shrink: 0;
}

.ucmc-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
}

.ucmc-total-label {
	font-family: 'General Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111;
}

.ucmc-total-amount {
	font-family: 'General Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #111;
}

/* CTA row — Go to Checkout and View Basket side by side */
.ucmc-cta-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.ucmc-btn-checkout,
.ucmc-btn-basket {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 12px;
	font-family: 'General Sans', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 24px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.ucmc-btn-checkout {
	background: #E2231A;
	color: #fff;
	border: 2px solid #E2231A;
}

.ucmc-btn-checkout:hover {
	background: #c41c14;
	border-color: #c41c14;
	color: #fff;
	text-decoration: none;
}

.ucmc-btn-basket {
	background: #fff;
	color: #111;
	border: 2px solid #D0D0D0;
}

.ucmc-btn-basket:hover {
	background: #f5f5f5;
	color: #111;
	text-decoration: none;
}

/* CTA icon circle — sits to the right of the button label */
.ucmc-btn-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ucmc-btn-checkout .ucmc-btn-icon {
	background: #fff;
}

.ucmc-btn-basket .ucmc-btn-icon {
	background: #E2231A;
}

.ucmc-btn-checkout .ucmc-btn-icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #111;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ucmc-btn-basket .ucmc-btn-icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Browse more gifts — text + UNICEF blue circle arrow (added mode only) */
.ucmc-browse {
	display: block;
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.ucmc-browse-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	width: fit-content;
	margin-left: 0;
	margin-right: 0;
}

.ucmc-browse-link:hover {
	text-decoration: none;
}

.ucmc-browse-text {
	font-family: 'General Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: #333;
}

.ucmc-browse-link:hover .ucmc-browse-text {
	color: #1CABE2;
}

.ucmc-browse-btn {
	width: 36px;
	height: 36px;
	background: #1CABE2;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s;
	flex-shrink: 0;
}

.ucmc-browse-link:hover .ucmc-browse-btn {
	background: #1799cc;
}

.ucmc-browse-btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   Loading / spinner overlay
   ============================================================ */
.ucmc-loading {
	position: absolute;
	inset: 0;
	background: rgba(238, 244, 249, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	z-index: 10;
}

.ucmc-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #D9E8F2;
	border-top-color: #1CABE2;
	border-radius: 50%;
	animation: ucmc-spin 0.7s linear infinite;
}

@keyframes ucmc-spin {
	to { transform: rotate(360deg); }
}