/* ==========================================================================
   DESIWED — Category icons + Sign-in Modal styling
   ========================================================================== */

/* ==========================================================================
   1. CATEGORY CARD ICON OVERLAY
   ========================================================================== */
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -65%);
	width: 56px;
	height: 56px;
	color: rgba(255, 255, 255, 0.85);
	opacity: 0.92;
	z-index: 2;
	transition: transform 0.4s ease, opacity 0.3s ease;
	pointer-events: none;
}
.desiwed-rebrand .dw-cat-card:hover .dw-cat-card__icon {
	transform: translate(-50%, -75%) scale(1.05);
	opacity: 1;
}
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon path,
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon line,
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon circle,
.desiwed-rebrand .dw-cat-card .dw-cat-card__icon rect {
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.desiwed-rebrand .dw-cat-card[data-has-image="1"] .dw-cat-card__icon {
	display: none;
}
.desiwed-rebrand .dw-cat-card:not([data-has-image="1"])::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
	                  radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================================
   2. SIGN-IN DIALOG — comprehensive styling override
   ========================================================================== */

/* Listeo wraps the dialog in a Magnific Popup container */
.mfp-content #sign-in-dialog,
.desiwed-rebrand #sign-in-dialog,
.desiwed-rebrand #sign-in-dialog.dw-modal-open {
	background: #fff !important;
	border: 1px solid #dcd6cb !important;
	box-shadow: 0 24px 80px rgba(26, 24, 20, 0.18) !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 460px !important;
	margin: 40px auto !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	position: relative !important;
}

/* Kill the black headline bar */
.desiwed-rebrand #sign-in-dialog .small-dialog-headline,
.desiwed-rebrand #sign-in-dialog .mfp-headline,
.desiwed-rebrand #sign-in-dialog > .dialog-headline,
.desiwed-rebrand #sign-in-dialog > div:first-child:not(.tabs-container):not(form):not(.tabs-nav-wrapper) {
	background: transparent !important;
	background-color: transparent !important;
	color: #1a1814 !important;
	padding: 24px 32px 0 !important;
	border-bottom: 0 !important;
	text-align: left !important;
	min-height: auto !important;
	line-height: 1 !important;
}

.desiwed-rebrand #sign-in-dialog .small-dialog-headline h2,
.desiwed-rebrand #sign-in-dialog .small-dialog-headline h3,
.desiwed-rebrand #sign-in-dialog .small-dialog-headline span {
	font-family: 'Cardo', Georgia, serif !important;
	font-size: 24px !important;
	color: #1a1814 !important;
	font-weight: 400 !important;
	margin: 0 !important;
	letter-spacing: -0.01em !important;
}

/* Outer content wrapper */
.desiwed-rebrand #sign-in-dialog .small-dialog-content,
.desiwed-rebrand #sign-in-dialog .my-account,
.desiwed-rebrand #sign-in-dialog form,
.desiwed-rebrand #sign-in-dialog .tabs-container {
	background: #fff !important;
	padding: 0 32px 32px !important;
}

/* Tabs (LOG IN | REGISTER) */
.desiwed-rebrand #sign-in-dialog .tabs-nav,
.desiwed-rebrand #sign-in-dialog ul.tabs-nav,
.desiwed-rebrand #sign-in-dialog ul.ui-tabs-nav {
	display: flex !important;
	gap: 24px !important;
	border-bottom: 1px solid #dcd6cb !important;
	margin: 0 0 24px !important;
	padding: 16px 32px 0 !important;
	list-style: none !important;
	background: transparent !important;
}
.desiwed-rebrand #sign-in-dialog .tabs-nav li,
.desiwed-rebrand #sign-in-dialog ul.tabs-nav li,
.desiwed-rebrand #sign-in-dialog ul.ui-tabs-nav li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	float: none !important;
	border-radius: 0 !important;
}
.desiwed-rebrand #sign-in-dialog .tabs-nav li a,
.desiwed-rebrand #sign-in-dialog ul.tabs-nav li a,
.desiwed-rebrand #sign-in-dialog ul.ui-tabs-nav li a {
	padding: 12px 0 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	color: #94897e !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px !important;
	font-weight: 500 !important;
	background: transparent !important;
	font-family: 'Inter', sans-serif !important;
	display: block !important;
}
.desiwed-rebrand #sign-in-dialog .tabs-nav li.active a,
.desiwed-rebrand #sign-in-dialog .tabs-nav li.ui-tabs-active a,
.desiwed-rebrand #sign-in-dialog ul.tabs-nav li.active a,
.desiwed-rebrand #sign-in-dialog ul.ui-tabs-nav li.ui-state-active a {
	color: #1a1814 !important;
	border-bottom-color: #6b2c2c !important;
	background: transparent !important;
}

/* Input fields with icons (Listeo wraps in .input-with-icon) */
.desiwed-rebrand #sign-in-dialog .input-with-icon,
.desiwed-rebrand #sign-in-dialog form > p {
	position: relative !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.desiwed-rebrand #sign-in-dialog .input-with-icon input[type="text"],
.desiwed-rebrand #sign-in-dialog .input-with-icon input[type="email"],
.desiwed-rebrand #sign-in-dialog .input-with-icon input[type="password"],
.desiwed-rebrand #sign-in-dialog input[type="text"],
.desiwed-rebrand #sign-in-dialog input[type="email"],
.desiwed-rebrand #sign-in-dialog input[type="password"] {
	width: 100% !important;
	padding: 14px 16px 14px 44px !important;
	border: 1px solid #dcd6cb !important;
	border-radius: 0 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: #1a1814 !important;
	margin: 0 !important;
	height: auto !important;
}

.desiwed-rebrand #sign-in-dialog .input-with-icon i,
.desiwed-rebrand #sign-in-dialog .input-with-icon .fa,
.desiwed-rebrand #sign-in-dialog form > p i {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #94897e !important;
	font-size: 14px !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

/* Show password toggle */
.desiwed-rebrand #sign-in-dialog .password-toggle,
.desiwed-rebrand #sign-in-dialog .show-password {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #94897e !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer !important;
}

/* Lost password link */
.desiwed-rebrand #sign-in-dialog .lost-password,
.desiwed-rebrand #sign-in-dialog a.lost_password {
	color: #6b2c2c !important;
	font-size: 13px !important;
	text-decoration: none !important;
	display: inline-block !important;
	margin: 8px 0 16px !important;
}
.desiwed-rebrand #sign-in-dialog .lost-password:hover {
	text-decoration: underline !important;
}

/* Login / Register buttons */
.desiwed-rebrand #sign-in-dialog button,
.desiwed-rebrand #sign-in-dialog input[type="submit"],
.desiwed-rebrand #sign-in-dialog .button {
	background: #1a1814 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 14px 26px !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	font-weight: 500 !important;
	font-family: 'Inter', sans-serif !important;
	width: 100% !important;
	cursor: pointer !important;
	box-shadow: none !important;
	height: auto !important;
}
.desiwed-rebrand #sign-in-dialog button:hover,
.desiwed-rebrand #sign-in-dialog input[type="submit"]:hover {
	background: #6b2c2c !important;
}

/* Remember me checkbox */
.desiwed-rebrand #sign-in-dialog .checkboxes,
.desiwed-rebrand #sign-in-dialog label.checkbox-container {
	margin: 14px 0 0 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: #5b5550 !important;
	font-weight: 500 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.desiwed-rebrand #sign-in-dialog .checkboxes input[type="checkbox"] {
	margin: 0 !important;
}

/* Magnific Popup close button — make it nicer */
.mfp-close,
.mfp-wrap .mfp-close {
	background: transparent !important;
	color: #1a1814 !important;
	font-size: 32px !important;
	font-weight: 300 !important;
	right: 8px !important;
	top: 8px !important;
	width: 40px !important;
	height: 40px !important;
	line-height: 36px !important;
	opacity: 0.7 !important;
}
.mfp-close:hover {
	opacity: 1 !important;
	color: #6b2c2c !important;
}

/* Hide the dw-modal-close I add via JS — Magnific has its own */
.desiwed-rebrand #sign-in-dialog .dw-modal-close {
	display: none !important;
}

/* ==========================================================================
   2b. NUKE THE DARK GREY BAR AT TOP OF SIGN-IN MODAL
   ==========================================================================
   Listeo's Magnific wraps the dialog in mfp-content / mfp-container that
   sometimes carries a dark headline strip. Kill anything that creates a top bar.
   ========================================================================== */
.mfp-wrap .mfp-content,
.mfp-container .mfp-content,
.mfp-content #sign-in-dialog,
.mfp-content .small-dialog-header,
.mfp-content .modal-header,
.mfp-content > div::before,
.mfp-content > div::after {
	background: transparent !important;
	background-color: transparent !important;
}

/* Magnific bg overlay should be soft cream-blur, not black */
.mfp-bg.mfp-ready,
body .mfp-bg {
	background: rgba(26, 24, 20, 0.55) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	backdrop-filter: blur(4px) !important;
	opacity: 1 !important;
}

/* Any direct child of #sign-in-dialog that is acting as a coloured header bar */
#sign-in-dialog .dialog-with-tabs,
#sign-in-dialog .small-dialog-header,
#sign-in-dialog .modal-header,
#sign-in-dialog header,
#sign-in-dialog [class*="header"]:not(.dw-vendor__header):not(form *) {
	background: transparent !important;
	background-color: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Listeo sometimes puts a wrapping .my-account-popup with a coloured top */
#sign-in-dialog.my-account-popup,
.mfp-content .my-account-popup {
	background: #fff !important;
	border-radius: 0 !important;
	overflow: hidden !important;
}

/* Final hammer: any pseudo-element creating a top bar */
#sign-in-dialog::before,
#sign-in-dialog::after,
.mfp-content #sign-in-dialog > *::before {
	display: none !important;
	content: none !important;
}

/* ==========================================================================
   3. MODAL FALLBACK STYLES (when Magnific isn't available)
   ========================================================================== */

.desiwed-rebrand .dw-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 24, 20, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 9999;
}

.desiwed-rebrand body.dw-no-scroll {
	overflow: hidden;
}

/* End */