.luman-ios-notification-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
width: 90%;
max-width: 240px;
height: 114px;
clear: both;
} .elementor-widget-luman_ios_notification_box {
text-align: center;
}
.elementor-widget-luman_ios_notification_box .luman-ios-notification-list {
display: inline-block;
}
.luman-ios-notification-list .luman-ios-notification-item {
position: absolute;
left: 50%;
top: 0;
width: 100%;
padding: 1rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
backdrop-filter: saturate(150%) blur(20px);
color: #222;
pointer-events: none;
opacity: 0;
transform-origin: center top;
transition: opacity 0.8s ease,
transform 0.8s ease,
width 0.8s ease;
transform-style: preserve-3d;
transform: translateX(-50%) translateY(3rem) scale(0.9);
z-index: 0;
}
.luman-ios-notification-list .luman-ios-notification-front {
opacity: 1;
width: 100%;
transform: translateX(-50%) translateY(0) scale(1);
z-index: 3;
}
.luman-ios-notification-list .luman-ios-notification-second {
opacity: 0.9;
width: 95%;
transform: translateX(-50%) translateY(0.7rem) scale(0.97);
z-index: 2;
}
.luman-ios-notification-list .luman-ios-notification-third {
opacity: 0.75;
width: 90%;
transform: translateX(-50%) translateY(1.4rem) scale(0.94);
z-index: 1;
}
.luman-ios-notification-list .luman-ios-notification-hidden {
opacity: 0;
width: 90%;
transform: translateX(-50%) translateY(3rem) scale(0.9);
z-index: 0;
}
.luman-ios-notification-list .luman-ios-notification-title {
font-weight: bold;
font-size: 1rem;
margin-bottom: 6px;
}
.luman-ios-notification-list .luman-ios-notification-message {
font-size: 0.9rem;
} .luman-ios-notification-list .luman-ios-notification-box {
display: flex;
align-items: center;
gap: 8px;
}
.luman-ios-notification-list .luman-ios-notification-box-position-right {
flex-direction: row;
}
.luman-ios-notification-list .luman-ios-notification-box-position-left {
flex-direction: row-reverse;
}
.luman-ios-notification-list .luman-ios-notification-box-position-top {
flex-direction: column;
align-items: center;
text-align: center;
} @media (max-width: 767px) {
.luman-ios-notification-list {
width: 100%;
max-width: none;
}
.luman-ios-notification-list .luman-ios-notification-item {
padding: 0.75rem;
}
.luman-ios-notification-list .luman-ios-notification-title {
font-size: 0.9rem;
}
.luman-ios-notification-list .luman-ios-notification-message {
font-size: 0.8rem;
}
}