/* ==========================================================
   Picsob Notification Permission Popup
========================================================== */

.picsob-notification-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	opacity:0;
	visibility:hidden;
	transition:.35s;
	z-index:9998;
}

.picsob-notification-overlay.active{
	opacity:1;
	visibility:visible;
}

.picsob-notification-popup{
	position:fixed;
	left:50%;
	bottom:70px;
	transform:translate(-50%,30px) scale(.96);
	width:min(92%,520px);
	padding:32px;
	border-radius:24px;
	background:rgba(15,18,24,.96);
	border:1px solid rgba(255,255,255,.08);
	box-shadow:0 30px 80px rgba(0,0,0,.45);
	opacity:0;
	visibility:hidden;
	transition:.4s cubic-bezier(.22,1,.36,1);
	z-index:9999;
}

.picsob-notification-popup.active{
	opacity:1;
	visibility:visible;
	transform:translate(-50%,0) scale(1);
}

.picsob-notification-close{
	position:absolute;
	top:12px;
	right:12px;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:none;
	background:transparent;
	color:#fff;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	opacity:.7;
	transition:.25s;
}

.picsob-notification-close:hover{
	opacity:1;
	transform:rotate(90deg);
}

.picsob-notification-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:14px;
}

.picsob-notification-head h3{
	margin:0;
	font-size:28px;
	font-weight:700;
	color:#fff;
}

.picsob-notification-bell{
	font-size:28px;
}

.picsob-notification-title{
	margin:0 0 24px;
	font-size:17px;
	line-height:1.7;
	color:var(--text-muted);
}

.picsob-notification-slider{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	margin-bottom:24px;
}

.notify-thumb{
	height:96px;
	overflow:hidden;
	border-radius:14px;

	/* Bug fix: JS animates opacity/transform on THIS element, so the
	   transition must live here (not only on the child <img>). */
	transition:opacity .35s ease, transform .35s ease;
}

.notify-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.picsob-notification-text{
	margin:0 0 28px;
	text-align:center;
	font-size:15px;
	color:var(--text-muted);
}

.picsob-notification-actions{
	display:flex;
	gap:12px;
}

.picsob-notification-actions button{
	flex:1;
	height:50px;
	border-radius:14px;
	cursor:pointer;
	font-size:15px;
	font-weight:600;
	transition:.3s;
}

.notify-not-now{
	background:transparent;
	border:1px solid var(--border);
	color:var(--text);
}

.notify-allow{
	border:none;
	background:#fff;
	color:#111;
}

.notify-not-now:hover,
.notify-allow:hover{
	transform:translateY(-2px);
}

@media(max-width:768px){

	.picsob-notification-popup{
		padding:24px;
		bottom:30px;
	}

	.picsob-notification-head h3{
		font-size:24px;
	}

	.notify-thumb{
		height:82px;
	}

	.picsob-notification-actions{
		flex-direction:column;
	}

}

@media (prefers-reduced-motion:reduce){

	.picsob-notification-overlay,
	.picsob-notification-popup,
	.notify-thumb,
	.picsob-notification-close{
		transition:none;
	}

}


/* ==========================================================
   Picsob Floating Notify Bell
========================================================== */

.picsob-notify-bell{

	position:fixed;

	right:28px;

	bottom:28px;

	width:58px;
	height:58px;

	border-radius:50%;

	background:rgba(255,255,255,.94);

	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);

	display:flex;
	align-items:center;
	justify-content:center;

	box-shadow:0 15px 40px rgba(0,0,0,.18);

	cursor:pointer;

	z-index:9997;

	transition:opacity .35s ease, visibility .35s ease, transform .25s ease, box-shadow .25s ease;

}

.picsob-notify-bell svg{

	width:24px;
	height:24px;

	color:#111;

	transition:transform .3s ease;

}

.picsob-notify-bell:hover{

	transform:scale(1.05);

	box-shadow:0 18px 46px rgba(0,0,0,.24);

}

.picsob-notify-bell:hover svg{

	animation:picsob-bell-ring .5s ease;

}

@keyframes picsob-bell-ring{

	0%,100%{ transform:rotate(0); }
	20%{ transform:rotate(-12deg); }
	40%{ transform:rotate(10deg); }
	60%{ transform:rotate(-6deg); }
	80%{ transform:rotate(4deg); }

}

.picsob-notify-bell.hide{

	opacity:0;

	visibility:hidden;

	pointer-events:none;

}

.picsob-notify-bell-tooltip{

	position:absolute;

	right:calc(100% + 12px);

	top:50%;

	transform:translateY(-50%) translateX(6px);

	white-space:nowrap;

	padding:8px 12px;

	border-radius:8px;

	background:rgba(15,17,25,.95);

	border:1px solid var(--border);

	color:#fff;

	font-size:12px;

	opacity:0;

	pointer-events:none;

	transition:opacity .25s ease, transform .25s ease;

}

.picsob-notify-bell-tooltip.show{

	opacity:1;

	transform:translateY(-50%) translateX(0);

}

@media(prefers-reduced-motion:reduce){

	.picsob-notify-bell,
	.picsob-notify-bell svg,
	.picsob-notify-bell-tooltip{
		transition:none;
		animation:none;
	}

}

@media(max-width:768px){

	.picsob-notify-bell{

		right:18px;

		bottom:18px;

		width:54px;
		height:54px;

	}

}