/* ==========================================================================
   AFFANECOM - home page flash sale panel
   Loaded after affan-footer.css so these rules win the cascade.
   The three containers use content_width "full", so there is no .e-con-inner
   wrapper and children sit directly inside the container element.
   ========================================================================== */

/* Outer panel ------------------------------------------------------------ */
.affan-promo.e-con{
	display:flex !important;
	flex-direction:row !important;
	align-items:stretch !important;
	gap:0 !important;
	padding:0 !important;
	min-height:430px;
	background-color:#252525 !important;
	border-radius:20px !important;
	overflow:hidden;
	isolation:isolate;
}

/* Elementor writes width:100% onto every child container, which would stack
   these two halves. Release it and set the split explicitly. */
.affan-promo.e-con > .e-con{
	width:auto !important;
	max-width:none !important;
	margin:0 !important;
	align-self:stretch;
}
.affan-promo-copy.e-con{
	flex:0 0 53% !important;
	max-width:53% !important;
	position:relative;
	z-index:2;
	display:flex !important;
	flex-direction:column !important;
	align-items:flex-start !important;
	justify-content:center !important;
	gap:0 !important;
	padding:clamp(30px,4vw,56px) !important;
}
.affan-promo-media.e-con{
	flex:1 1 47% !important;
	max-width:47% !important;
	position:relative;
	padding:0 !important;
	background-size:cover !important;
	background-position:center center !important;
	background-repeat:no-repeat !important;
}
/* Charcoal bleeding into the photo so the two halves read as one panel. */
.affan-promo-media.e-con::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,#252525 0%,rgba(37,37,37,.35) 40%,rgba(37,37,37,0) 100%);
	pointer-events:none;
}

/* Vertical rhythm inside the copy column --------------------------------- */
.affan-promo-copy .elementor-widget{
	margin-bottom:0 !important;
	width:100% !important;
}
.affan-promo-copy .elementor-widget-heading + .elementor-widget-heading{ margin-top:14px !important; }
.affan-promo-copy .elementor-widget-text-editor{ margin-top:16px !important; }
.affan-promo-copy .elementor-widget-text-editor p{ margin:0 !important; max-width:44ch; }
.affan-promo-copy .elementor-widget-shortcode{ margin-top:28px !important; }
.affan-promo-copy .elementor-widget-shortcode .elementor-shortcode{ display:block; }
.affan-promo-copy .elementor-widget-button{ margin-top:30px !important; }

/* Countdown -------------------------------------------------------------- */
.affan-countdown{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.affan-countdown > div{
	background:rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.16);
	border-radius:10px;
	padding:10px 14px;
	text-align:center;
	min-width:64px;
}
.affan-countdown b{
	display:block;
	font-family:"Plus Jakarta Sans","Inter",sans-serif;
	font-size:1.35rem;
	font-weight:800;
	line-height:1.1;
	color:#fff;
	font-variant-numeric:tabular-nums;
}
.affan-countdown span{
	display:block;
	margin-top:3px;
	font-family:"Inter",sans-serif;
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.11em;
	text-transform:uppercase;
	color:rgba(255,255,255,.62);
}

/* CTA -------------------------------------------------------------------- */
.affan-promo-copy .elementor-widget-button .elementor-button{
	border-radius:999px !important;
	box-shadow:0 10px 26px rgba(244,124,32,.32);
	transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.affan-promo-copy .elementor-widget-button .elementor-button:hover,
.affan-promo-copy .elementor-widget-button .elementor-button:focus-visible{
	background-color:#dd6a12 !important;
	transform:translateY(-1px);
	box-shadow:0 14px 30px rgba(244,124,32,.42);
}

/* Stacked layout --------------------------------------------------------- */
@media (max-width:880px){
	.affan-promo.e-con{
		flex-direction:column !important;
		min-height:0;
	}
	.affan-promo-copy.e-con,
	.affan-promo-media.e-con{
		flex:1 1 auto !important;
		max-width:100% !important;
		width:100% !important;
	}
	.affan-promo-media.e-con{
		order:-1;
		min-height:230px;
	}
	.affan-promo-media.e-con::after{
		background:linear-gradient(0deg,#252525 0%,rgba(37,37,37,0) 72%);
	}
}
@media (max-width:480px){
	.affan-countdown > div{ min-width:0; flex:1 1 22%; padding:9px 6px; }
	.affan-countdown b{ font-size:1.15rem; }
}

@media (prefers-reduced-motion:reduce){
	.affan-promo-copy .elementor-widget-button .elementor-button{ transition:none; }
	.affan-promo-copy .elementor-widget-button .elementor-button:hover{ transform:none; }
}