/**
 * Wishlist Drawer: slide-in panel from right (or left), wishlist items list,
 * remove animation, add-to-cart button states, RTL, mobile.
 */

/* 360° spin for × buttons on hover */
@keyframes iwe-wishlist-spin {
	to { transform: rotate(360deg); }
}

/* Loading dots for add-to-cart preloader */
@keyframes iwe-wishlist-dots {
	0%, 100% { transform: scale(0.5); opacity: 0.35; }
	50%       { transform: scale(1);   opacity: 1; }
}


#iwe-wishlist-drawer,
#iwe-wishlist-drawer * {
	font-family: inherit;
	box-sizing: border-box;
}

/* ─── Wrapper ──────────────────────────────────────────────────────────── */
#iwe-wishlist-drawer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	visibility: hidden;
}

#iwe-wishlist-drawer.active {
	pointer-events: auto;
	visibility: visible;
}

.iwe-wishlist-drawer {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ─── Overlay ──────────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
	cursor: pointer;
}

#iwe-wishlist-drawer.active .iwe-wishlist-drawer__overlay {
	opacity: 1;
}

/* ─── Panel ────────────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__inner {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 400px;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow: hidden;
	outline: none;
}

#iwe-wishlist-drawer.active .iwe-wishlist-drawer__inner {
	transform: translateX(0);
}

/* Left variant */
#iwe-wishlist-drawer.iwe-wishlist-drawer--left .iwe-wishlist-drawer__inner {
	right: auto;
	left: 0;
	transform: translateX(-100%);
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}

#iwe-wishlist-drawer.iwe-wishlist-drawer--left.active .iwe-wishlist-drawer__inner {
	transform: translateX(0);
}

/* ─── Body: flex column fills panel ───────────────────────────────────── */
.iwe-wishlist-drawer__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--yellow, #E7E2D6);
}

[dir="rtl"] .iwe-wishlist-drawer__header {
	padding: 0 10px 0 0;
}

.iwe-wishlist-drawer__heading {
	margin: 0 15px 0 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--black, #121212);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

[dir="rtl"] .iwe-wishlist-drawer__heading {
	margin: 0 0 0 15px;
}

.iwe-wishlist-drawer__count {
	font-size: 0.875rem;
	font-weight: 400;
	color: #777;
}

.iwe-wishlist-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--black, #121212);
	flex-shrink: 0;
}

.iwe-wishlist-drawer__close:hover {
	animation: iwe-wishlist-spin 0.45s ease-in-out;
}

.iwe-wishlist-drawer__close .icon {
	width: 1rem;
	height: 1rem;
}

/* ─── Scroll area ─────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__scroll {
	flex: 1;
	min-height: 80px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.5rem 0;
}

.iwe-wishlist-drawer__scroll::-webkit-scrollbar {
	width: 3px;
}

.iwe-wishlist-drawer__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.iwe-wishlist-drawer__scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 2px;
}

.iwe-wishlist-drawer__scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.32);
}

/* ─── Empty state ─────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 3rem 1.5rem;
	text-align: center;
	color: #888;
}

.iwe-wishlist-drawer__empty-icon {
	opacity: 0.35;
	color: var(--black, #121212);
}

.iwe-wishlist-drawer__empty p {
	margin: 0;
	font-size: 0.9375rem;
}

/* ─── Items list ──────────────────────────────────────────────────────── */
.iwe-wishlist-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── Single item ─────────────────────────────────────────────────────── */
.iwe-wishlist-item {
	position: relative;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.iwe-wishlist-item:last-child {
	border-bottom: none;
}

/* Remove animation (× clicked) */
.iwe-wishlist-item.iwe-removing {
	max-height: 0 !important;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease, border-bottom-width 0.28s;
}

/* ── "Added to cart" state: show overlay, fade item content ────────── */
.iwe-wishlist-item.iwe-wl-state-added .iwe-wl-item__inner,
.iwe-wishlist-item.iwe-wl-state-added .iwe-wishlist-item__remove {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.iwe-wl-added-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black, #121212);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.iwe-wishlist-item.iwe-wl-state-added .iwe-wl-added-msg {
	opacity: 1;
}

/* Accordion collapse after "Added" message */
.iwe-wishlist-item.iwe-wl-collapsing {
	max-height: 0 !important;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	transition: max-height 0.5s ease, opacity 0.35s ease, padding 0.45s ease, border-bottom-width 0.5s;
}

/* Remove (×) button — absolute in corner */
.iwe-wishlist-item__remove {
	position: absolute;
	top: 6px;
	left: 6px; /* visual top-left for RTL layout */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--black, #121212);
	opacity: 0.45;
	transition: opacity 0.15s;
	transform-origin: center center;
}

.iwe-wishlist-item__remove:hover {
	opacity: 1;
	animation: iwe-wishlist-spin 0.4s ease-in-out;
}

.iwe-wishlist-item__remove svg {
	display: block;
	pointer-events: none;
}

/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.iwe-wishlist-drawer__inner {
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
	iwe-wl-* item layout  (independent classes, no conflicts with theme)
	Swatch / size-btn / button values mirror mini-cards-alternative module.
	═══════════════════════════════════════════════════════════════════════ */

/* ─── Item: inner flex row ───────────────────────────────────────────── */
.iwe-wl-item__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}

/* ─── Thumbnail column ───────────────────────────────────────────────── */
.iwe-wl-item__thumb {
	flex-shrink: 0;
	width: 90px;
	overflow: hidden;
}

.iwe-wl-item__thumb a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
}

.iwe-wl-item__thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ── Scale Perfect Badges proportionally inside the 90 px wishlist thumbnail.
   Product listing images are ~300 px wide; thumbnail is ~90 px (≈ 0.3×).
   We use font-size + min-height overrides so text and badge height shrink
   together without affecting layout (badge-zone is position:absolute). ──── */
.iwe-wl-item__thumb .pb-badge-text {
	font-size: 0.5rem !important;
	padding: 2px 6px !important;
	line-height: 1.1 !important;
}
.iwe-wl-item__thumb .pb-badge {
	min-height: 12px !important;
}
.iwe-wl-item__thumb .pb-badge-wrap {
	height: auto !important;
}

/* ─── Info column ────────────────────────────────────────────────────── */
.iwe-wl-item__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* ─── Row: generic ───────────────────────────────────────────────────── */
.iwe-wl-item__row {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
}

/* ─── Row: name + remove ─────────────────────────────────────────────── */
.iwe-wl-item__row--name {
	align-items: flex-start;
}


.iwe-wl-item__name {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--black, #121212);
	text-decoration: none;
	word-break: break-word;
}

.iwe-wl-item__name:hover {
	text-decoration: underline;
}

/* ─── Row: price ─────────────────────────────────────────────────────── */
.iwe-wl-item__row--price {
	margin-top: 0.05rem;
}

.iwe-wl-item__price {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--black, #121212);
}

.iwe-wl-item__price del .amount {
	font-weight: 400;
	opacity: 0.6;
}

/* ─── Row: saved attributes (color + size for variation) ─────────────── */
.iwe-wl-item__row--attrs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.1rem;
}

.iwe-wl-item__attr-color img {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.iwe-wl-item__attr-size {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.8125rem;
	color: #555;
}

.iwe-wl-item__attr-label { font-weight: 400; }
.iwe-wl-item__attr-val   { font-weight: 600; }

/* ─── Out of stock badge ─────────────────────────────────────────────── */
.iwe-wl-item__oos {
	display: inline-block;
	font-size: 0.8125rem;
	color: #888;
	font-style: italic;
	margin-top: 0.3rem;
}

/* ─── Preloader dots — inside buy-row, hidden by default ────────────── */
.iwe-wl-item__preloader {
	display: none;
	align-items: center;
	gap: 4px;
	height: 20px;
}

.iwe-wishlist-item.iwe-wl-is-loading .iwe-wl-item__preloader {
	display: flex;
}

.iwe-wl-item__preloader span {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--black, #121212);
	opacity: 0.35;
	animation: iwe-wishlist-dots 1s ease-in-out infinite;
}

.iwe-wl-item__preloader span:nth-child(2) { animation-delay: 0.15s; }
.iwe-wl-item__preloader span:nth-child(3) { animation-delay: 0.30s; }
.iwe-wl-item__preloader span:nth-child(4) { animation-delay: 0.45s; }

/* ─── Variation form ─────────────────────────────────────────────────── */
.iwe-wl-variation-form {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 0.3rem;
}

.iwe-wl-attr-row {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* ─── Color swatches — identical values to iwe-swatch--color ────────── */
.iwe-wl-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.iwe-wl-swatch--color {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	cursor: pointer;
	background-size: cover;
	background-position: center;
	transition: border-color 0.15s, outline-color 0.15s;
	position: relative;
	flex-shrink: 0;
}

.iwe-wl-swatch--color:hover {
	border-color: var(--black, #121212);
}

.iwe-wl-swatch--color.iwe-wl-swatch--selected {
	outline: 1px solid var(--black, #121212);
	outline-offset: 2px;
}

.iwe-wl-swatch--color.iwe-wl-swatch--oos {
	opacity: 0.35;
	cursor: default;
}

.iwe-wl-swatch--color.iwe-wl-swatch--oos::after {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 0.5px),
		rgba(0, 0, 0, 0.4) 50%,
		transparent calc(50% + 0.5px)
	);
	border-radius: 50%;
	pointer-events: none;
}

/* ─── Size buttons — identical values to iwe-size-btn ───────────────── */
.iwe-wl-size-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.iwe-wl-size-btn {
	display: inline-flex;
	align-items: center;
	padding: 5px;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.iwe-wl-size-btn:hover {
	background: rgba(0, 0, 0, 0.06);
}

.iwe-wl-size-btn.iwe-wl-size-btn--selected {
	background: var(--black, #121212);
	color: #fff;
}

.iwe-wl-size-btn.iwe-wl-size-btn--oos {
	opacity: 0.35;
	text-decoration: line-through;
	cursor: default;
	border-color: rgba(0, 0, 0, 0.25);
	color: #aaa;
}

/* ─── Validation error — inside buy-row, wraps to full-width second line */
.iwe-wl-item__error {
	display: none;
	width: 100%;
	order: 99; /* always last in the flex row, forces wrap to next line */
	font-size: 0.72rem;
	color: #c00;
	padding: 2px 0 0;
	line-height: 1.3;
}

/* ─── Buy row: qty | button | preloader ─────────────────────────────── */
/* DOM order: qty → button → preloader                                   */
/* RTL (row, right-to-left): qty[right] button[middle] preloader[left]  */
/* LTR (row, left-to-right): qty[left]  button[middle] preloader[right] */
.iwe-wl-item__buy-row {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

/* ─── Add-to-cart buttons — shorter, inline spinner on load ─────────── */
#iwe-wishlist-drawer .iwe-wl-direct-atc,
#iwe-wishlist-drawer .iwe-wl-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 14px;
	font-size: 0.75rem;
	cursor: pointer;
	border-radius: 50px;
	background: #fff;
	color: #000;
	border: 1px solid var(--black, #121212) !important;
	font-family: inherit;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s;
	font-weight: 400;
	line-height: 1;
	min-width: 0;
}

#iwe-wishlist-drawer .iwe-wl-direct-atc:hover,
#iwe-wishlist-drawer .iwe-wl-add-btn:hover {
	background: var(--black, #121212) !important;
	color: #fff !important;
	border-color: var(--black, #121212) !important;
	opacity: 1 !important;
}

#iwe-wishlist-drawer .iwe-wl-direct-atc:disabled,
#iwe-wishlist-drawer .iwe-wl-add-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}


/* ─── Qty control — mirrors iwe-mini-card__qty / iwe-qty-btn ─────────── */
.iwe-wl-qty {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--black, #121212);
	border-radius: 50px;
	overflow: hidden;
	flex-shrink: 0;
}

.iwe-wl-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--black, #121212);
	padding: 0;
	font-family: inherit;
}

.iwe-wl-qty__btn:hover {
	background: rgba(0, 0, 0, 0.06);
}

.iwe-wl-qty__val {
	font-size: 0.75rem;
	line-height: 20px;
	min-width: 18px;
	text-align: center;
	color: var(--black, #121212);
	font-family: inherit;
	user-select: none;
}

/* ─── Mobile tweaks ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.iwe-wl-item__thumb { width: 70px; }
}

/* ─── Fix: mini-cart / wishlist-dropdown "trail" on close ───────────────
   Root cause: the theme transitions visibility over 0.2s alongside opacity.
   During the close animation, visibility stays "visible" until the end of
   the transition, so any DOM replacement (WC fragments, YITH wishlist sync)
   briefly renders new content at full opacity inside a "closing" container.

   Fix: snap visibility to hidden with a 0.2 s DELAY (= exactly when opacity
   finishes), so the element is truly hidden once opacity reaches zero.
   For OPENING we keep visibility instant (0s no delay) so the element
   appears immediately when activated.
   ──────────────────────────────────────────────────────────────────────── */

/* CLOSE direction: visibility hidden snaps at t=0.2s (after opacity fades) */
.mini-cart-dropdown.nav-dropdown,
.wishlist-dropdown.nav-dropdown {
	transition: opacity .2s ease-in-out, visibility 0s .2s !important;
}

/* OPEN direction: visibility visible snaps immediately, opacity fades in */
.cart-icon-container.active   .mini-cart-dropdown.nav-dropdown,
.cart-icon-container:hover    .mini-cart-dropdown.nav-dropdown,
.wishlist-icon-container:hover .wishlist-dropdown.nav-dropdown,
.nav-dropdown.active {
	transition: opacity .2s ease-in-out, visibility 0s !important;
}