/* Damans Notifications — front-end styles.
   Colours & fonts mirror the live Avada theme so pop-ups feel native. */

.dpop-root{
	--dpop-primary:#358dd6;
	--dpop-primary-dark:#25498e;
	--dpop-ink:#0f1d38;
	--dpop-tint:#f0f5fb;
	--dpop-white:#ffffff;
	--dpop-radius:8px;
	--dpop-shadow:0 18px 50px rgba(15,29,56,.28);
	--dpop-heading:"Red Hat Display",Arial,Helvetica,sans-serif;
	--dpop-body:Roboto,Arial,Helvetica,sans-serif;
	position:fixed;
	inset:0;
	z-index:99999;
	pointer-events:none;
}
.dpop-root[hidden]{display:none;}

/* Dim layer behind centred pop-ups */
.dpop-overlay{
	position:absolute;
	inset:0;
	background:rgba(9,16,31,.78);
	pointer-events:auto;
	opacity:0;
	transition:opacity .55s cubic-bezier(.22,.61,.36,1);
}
.dpop-root.is-open .dpop-overlay{opacity:1;}

/* Shared card shell */
.dpop{
	position:absolute;
	pointer-events:auto;
	box-sizing:border-box;
	background:var(--dpop-white);
	color:var(--dpop-ink);
	font-family:var(--dpop-body);
	box-shadow:var(--dpop-shadow);
	overflow:hidden;
}
.dpop *,.dpop *::before,.dpop *::after{box-sizing:border-box;}

.dpop--card{
	width:min(420px,calc(100vw - 32px));
	border-radius:var(--dpop-radius);
}

/* ---- Positions ---- */
.dpop--pos-center{top:50%;left:50%;transform:translate(-50%,-50%);}
.dpop--pos-bottom-right{right:24px;bottom:24px;}
.dpop--pos-bottom-left{left:24px;bottom:24px;}
.dpop--pos-top-right{right:24px;top:24px;}
.dpop--pos-top-left{left:24px;top:24px;}

/* Bars span the full width */
.dpop--bar{
	left:0;right:0;
	width:100%;
	display:flex;
	align-items:center;
	gap:16px;
	padding:12px clamp(16px,4vw,40px);
}
.dpop--pos-top-bar{top:0;}
.dpop--pos-bottom-bar{bottom:0;}
.dpop--bar .dpop-body{display:flex;align-items:center;gap:16px;flex:1;}
.dpop--bar .dpop-text{margin:0;}
.dpop--bar .dpop-actions{margin:0;}

/* ---- Image ---- */
.dpop-image{
	width:100%;
	aspect-ratio:16/9;
	background-size:cover;
	background-position:center;
	background-color:var(--dpop-tint);
}

/* ---- Body ---- */
.dpop-body{padding:22px 24px 24px;}
.dpop--bar .dpop-body{padding:0;}
.dpop-text{
	font-size:15px;
	line-height:1.55;
	color:var(--dpop-ink);
}
.dpop-text :first-child{margin-top:0;}
.dpop-text :last-child{margin-bottom:0;}
.dpop-text h1,.dpop-text h2,.dpop-text h3,.dpop-text h4{
	font-family:var(--dpop-heading);
	color:var(--dpop-ink);
	line-height:1.2;
	margin:0 0 .4em;
}
.dpop-text h2{font-size:22px;}
.dpop-text h3{font-size:19px;}
.dpop-text a{color:var(--dpop-primary);}
.dpop-text img{max-width:100%;height:auto;border-radius:4px;}

/* ---- Button (matches Avada flat button) ---- */
.dpop-actions{margin:18px 0 0;}
.dpop-btn{
	display:inline-block;
	font-family:var(--dpop-heading);
	font-weight:700;
	font-size:15px;
	line-height:1;
	text-decoration:none;
	color:var(--dpop-white)!important;
	background:var(--dpop-primary);
	padding:13px 22px;
	border-radius:4px;
	transition:background .2s ease,transform .05s ease;
	cursor:pointer;
}
.dpop-btn:hover,.dpop-btn:focus{background:var(--dpop-primary-dark);color:var(--dpop-white)!important;}
.dpop-btn:active{transform:translateY(1px);}

/* ---- Close ---- */
.dpop-close{
	position:absolute;
	top:8px;right:10px;
	width:32px;height:32px;
	border:0;
	background:rgba(255,255,255,.85);
	color:var(--dpop-ink);
	border-radius:50%;
	font-size:22px;
	line-height:30px;
	text-align:center;
	cursor:pointer;
	padding:0;
	box-shadow:0 2px 8px rgba(15,29,56,.18);
	transition:background .2s ease;
	z-index:2;
}
.dpop-close:hover{background:#fff;}
.dpop--bar .dpop-close{
	position:static;
	flex:0 0 auto;
	background:transparent;
	box-shadow:none;
	color:var(--dpop-white);
}
.dpop--bar{background:var(--dpop-primary);color:var(--dpop-white);}
.dpop--bar .dpop-text,.dpop--bar .dpop-text h2,.dpop--bar .dpop-text h3{color:var(--dpop-white);}
.dpop--bar .dpop-btn{background:var(--dpop-white);color:var(--dpop-primary)!important;}
.dpop--bar .dpop-btn:hover{background:var(--dpop-tint);}

/* ---- Entrance animations (applied while open) ---- */
.dpop{
	opacity:0;
	transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
	will-change:opacity,transform;
}
.dpop-root.is-open .dpop{opacity:1;}

.dpop--anim-fade .dpop{transform:none;}
.dpop--anim-zoom.dpop--pos-center{}
.dpop--anim-zoom .dpop{transform:scale(.9);}
.dpop--pos-center.dpop--anim-zoom .dpop{transform:translate(-50%,-50%) scale(.9);}
.dpop-root.is-open .dpop--anim-zoom .dpop{transform:scale(1);}
.dpop-root.is-open .dpop--pos-center.dpop--anim-zoom .dpop{transform:translate(-50%,-50%) scale(1);}

.dpop--anim-slide-up .dpop{transform:translateY(24px);}
.dpop--pos-center.dpop--anim-slide-up .dpop{transform:translate(-50%,calc(-50% + 24px));}
.dpop-root.is-open .dpop--anim-slide-up .dpop{transform:translateY(0);}
.dpop-root.is-open .dpop--pos-center.dpop--anim-slide-up .dpop{transform:translate(-50%,-50%);}

.dpop--anim-slide-down .dpop{transform:translateY(-24px);}
.dpop--pos-center.dpop--anim-slide-down .dpop{transform:translate(-50%,calc(-50% - 24px));}
.dpop-root.is-open .dpop--anim-slide-down .dpop{transform:translateY(0);}
.dpop-root.is-open .dpop--pos-center.dpop--anim-slide-down .dpop{transform:translate(-50%,-50%);}

/* ---- Mobile: corners & centred become a bottom sheet ---- */
@media (max-width:600px){
	.dpop--card{
		width:100%;
		left:0;right:0;
		bottom:0;top:auto;
		transform:none!important;
		border-radius:14px 14px 0 0;
		max-height:88vh;
		overflow-y:auto;
	}
	.dpop--pos-center,.dpop--pos-top-right,.dpop--pos-top-left,
	.dpop--pos-bottom-right,.dpop--pos-bottom-left{
		top:auto;bottom:0;left:0;right:0;
	}
	/* keep vertical slide feel on mobile sheets */
	.dpop--card.dpop{transform:translateY(100%)!important;}
	.dpop-root.is-open .dpop--card.dpop{transform:translateY(0)!important;}
	.dpop-image{aspect-ratio:16/8;}
	.dpop--bar{flex-wrap:wrap;}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
	.dpop,.dpop-overlay{transition:opacity .01s linear!important;transform:none!important;}
	.dpop-root.is-open .dpop{transform:none!important;}
}