/* 
 * Supernoti Public Styles
 * 
 * Contains all the styles for the notification bars and popups
 * 
 * @package Supernoti
 * @subpackage Supernoti/assets/css
 * @author Developmizer
 */


.supernoti-notification {
 box-sizing: border-box;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 font-size: 14px;
 line-height: 1.5;
 position: fixed;
 z-index: 999999;
 transition: all 0.3s ease;
}

.supernoti-notification * {
 box-sizing: border-box;
}

.supernoti-notification.supernoti-shadow {
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.supernoti-content {
 display: flex;
 align-items: center;
 width: 100%;
}

.supernoti-icon {
 margin-right: 15px;
 font-size: 1.5em;
}

.supernoti-message {
 flex: 1;
}

.supernoti-message p {
 margin: 0 0 10px 0;
}

.supernoti-message p:last-child {
 margin-bottom: 0;
}

.supernoti-close {
 cursor: pointer;
 font-size: 20px;
 line-height: 1;
 margin-left: 15px;
 opacity: 0.7;
 transition: opacity 0.2s ease;
}

.supernoti-close:hover {
 opacity: 1;
}

.supernoti-button {
 display: inline-block;
 padding: 8px 16px;
 margin: 5px 10px 5px 0;
 text-decoration: none;
 border-radius: 4px;
 cursor: pointer;
 font-weight: 600;
 transition: all 0.2s ease;
}

.supernoti-button:hover {
 opacity: 0.9;
}

.supernoti-dismiss-button {
 background: transparent;
 text-decoration: underline;
}


.supernoti-top-bar {
 left: 0;
 width: 100%;
}

.supernoti-top-bar.supernoti-position-top {
 top: 0;
}

.supernoti-top-bar.supernoti-position-bottom {
 bottom: 0;
}

.supernoti-progress {
 position: absolute;
 bottom: 0;
 left: 0;
 height: 3px;
 width: 0;
 transition: width linear;
}


.supernoti-corner {
 max-width: 90%;
}

.supernoti-corner.supernoti-position-top-right {
 top: 20px;
 right: 20px;
}

.supernoti-corner.supernoti-position-top-left {
 top: 20px;
 left: 20px;
}

.supernoti-corner.supernoti-position-bottom-right {
 bottom: 20px;
 right: 20px;
}

.supernoti-corner.supernoti-position-bottom-left {
 bottom: 20px;
 left: 20px;
}


.supernoti-banner {
 left: 0;
 width: 100%;
}

.supernoti-banner.supernoti-position-top {
 top: 0;
}

.supernoti-banner.supernoti-position-bottom {
 bottom: 0;
}

.supernoti-banner .supernoti-content {
 flex-wrap: wrap;
 justify-content: space-between;
}

.supernoti-banner .supernoti-message {
 flex: 1 0 100%;
 margin-bottom: 10px;
}

.supernoti-banner .supernoti-buttons {
 display: flex;
 align-items: center;
 margin-top: 10px;
}


.supernoti-modal-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 999999;
 display: flex;
 align-items: center;
 justify-content: center;
}

.supernoti-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.supernoti-modal {
 position: relative;
 max-height: 90vh;
 overflow-y: auto;
 padding: 25px;
}

.supernoti-modal .supernoti-content {
 flex-direction: column;
 text-align: center;
}

.supernoti-modal .supernoti-icon {
 margin: 0 0 15px 0;
 font-size: 2.5em;
}

.supernoti-modal .supernoti-close {
 position: absolute;
 top: 10px;
 right: 10px;
 margin: 0;
}

.supernoti-modal .supernoti-buttons {
 margin-top: 20px;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

.supernoti-modal .supernoti-button {
 margin: 5px 10px;
}


.supernoti-slide-in {
 max-width: 90%;
}

.supernoti-slide-in.supernoti-position-top-right {
 top: 20px;
 right: -400px;
}

.supernoti-slide-in.supernoti-position-top-left {
 top: 20px;
 left: -400px;
}

.supernoti-slide-in.supernoti-position-bottom-right {
 bottom: 20px;
 right: -400px;
}

.supernoti-slide-in.supernoti-position-bottom-left {
 bottom: 20px;
 left: -400px;
}

.supernoti-slide-in.supernoti-active.supernoti-position-top-right,
.supernoti-slide-in.supernoti-active.supernoti-position-bottom-right {
 right: 20px;
}

.supernoti-slide-in.supernoti-active.supernoti-position-top-left,
.supernoti-slide-in.supernoti-active.supernoti-position-bottom-left {
 left: 20px;
}

.supernoti-slide-in .supernoti-buttons {
 margin-top: 15px;
}


.supernoti-animation-fade {
 opacity: 0;
}

.supernoti-animation-fade.supernoti-active {
 opacity: 1;
}

.supernoti-animation-slide.supernoti-top-bar.supernoti-position-top {
 transform: translateY(-100%);
}

.supernoti-animation-slide.supernoti-top-bar.supernoti-position-bottom {
 transform: translateY(100%);
}

.supernoti-animation-slide.supernoti-top-bar.supernoti-active {
 transform: translateY(0);
}

.supernoti-animation-slide.supernoti-banner.supernoti-position-top {
 transform: translateY(-100%);
}

.supernoti-animation-slide.supernoti-banner.supernoti-position-bottom {
 transform: translateY(100%);
}

.supernoti-animation-slide.supernoti-banner.supernoti-active {
 transform: translateY(0);
}

.supernoti-animation-bounce.supernoti-active {
 animation: supernoti-bounce 0.5s;
}

@keyframes supernoti-bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-20px);}
 60% {transform: translateY(-10px);}
}


@media screen and (max-width: 768px) {
 .supernoti-content {
 flex-direction: column;
 align-items: flex-start;
 }
 
 .supernoti-icon {
 margin: 0 0 10px 0;
 }
 
 .supernoti-close {
 position: absolute;
 top: 10px;
 right: 10px;
 margin: 0;
 }
 
 .supernoti-banner .supernoti-content,
 .supernoti-top-bar .supernoti-content {
 padding-right: 30px;
 }
 
 .supernoti-corner,
 .supernoti-slide-in {
 width: calc(100% - 40px) !important;
 }
 
 .supernoti-banner .supernoti-buttons {
 flex-direction: column;
 align-items: flex-start;
 }
 
 .supernoti-banner .supernoti-button {
 width: 100%;
 margin: 5px 0;
 text-align: center;
 }
}


.admin-bar .supernoti-top-bar.supernoti-position-top,
.admin-bar .supernoti-banner.supernoti-position-top {
 top: 32px;
}

@media screen and (max-width: 782px) {
 .admin-bar .supernoti-top-bar.supernoti-position-top,
 .admin-bar .supernoti-banner.supernoti-position-top {
 top: 46px;
 }
}


html.supernoti-mobile-disabled .supernoti-notification,
html.supernoti-mobile-disabled .supernoti-modal-container {
 display: none !important;
}