/* Container styles */
.wa-notify-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999999;
    pointer-events: none;
}
.wa-notify-container.wa-notify-top { top: 0; }
.wa-notify-container.wa-notify-bottom { bottom: 0; }

/* Item wrapper - margin collapsing works in block flow (no flex/grid on container) */
.wa-notify-item {
    position: relative;
    pointer-events: auto;
    max-width: calc(100% - 40px);
    overflow: visible;
    margin: 20px auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.wa-notify-item.wa-notify-visible {
    opacity: 1;
    transform: translateY(0);
}
.wa-notify-item.wa-notify-hiding {
    opacity: 0;
    transform: translateY(20px);
}
.wa-notify-item[data-align="left"] { margin-left: 20px; margin-right: auto; }
.wa-notify-item[data-align="center"] { margin-left: auto; margin-right: auto; }
.wa-notify-item[data-align="right"] { margin-left: auto; margin-right: 20px; }

/* Default notification theme (adapted from prototype css.css) */
.wa-notify-case {
    display: flex;
    align-items: center;
    padding: 20px 30px;
}
.wa-notify-content { font-size: 16px; margin-right: 30px; flex: 1; }
.wa-notify-buttons { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.wa-notify-buttons button {
    text-align: center; font-weight: bold;
    border: 1px solid #2d2d2d; box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
    background: #2d2d2d; padding: 10px 24px; color: #fff;
    border-radius: 12px; font-size: 16px; cursor: pointer; white-space: nowrap;
}
.wa-notify-buttons button:hover { color: #2d2d2d; background: #e5e5e5; }
.wa-notify-item > .wa-notify-case {
    background: #fff; border-radius: 14px;
    box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.1);
    position: relative;
}
.wa-notify-close-btn {
    display: block; position: absolute; top: -15px; right: -15px;
    background-color: #fff; border: 1px solid #fff;
    width: 48px; height: 48px; border-radius: 100px;
    background-image: url(../images/close.svg);
    background-size: 15px; background-repeat: no-repeat; background-position: center;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); cursor: pointer;
}
.wa-notify-close-btn:hover { background-color: #e5e5e5; border: 1px solid #2d2d2d; }

/* Responsive */
@media screen and (max-width: 980px) {
    .wa-notify-case { display: block; }
    .wa-notify-buttons { margin-left: auto; margin-right: auto; justify-content: center; gap: 30px; }
    .wa-notify-content { margin-right: unset; }
}
@media screen and (max-width: 500px) {
    .wa-notify-buttons { gap: 16px; }
    .wa-notify-buttons button { width: 90px; }
}