/* =========================================================
   Shoptet notifikace – Veronika Adams
   www.veronika.works
   ========================================================= */

:root {
    --nf-card-bg: #fff;
    --nf-text: #2f2a2a;
    --nf-muted: #6f6262;
    --nf-radius: 18px;
    --nf-shadow: 0 18px 45px rgba(39, 28, 34, .18), 0 5px 16px rgba(39, 28, 34, .08);
    --nf-success: #3fa66f;
    --nf-success-bg: #eef9f3;
    --nf-info: #e88f36;
    --nf-info-bg: #fff6ea;
    --nf-warning: #e1a11f;
    --nf-warning-bg: #fff8df;
    --nf-error: #e45d73;
    --nf-error-bg: #fff0f3;
}

/* Pozice celé skupiny notifikací */
.messages {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 999999999999 !important;
    pointer-events: none;
}

.messages > *,
.messages .msg,
.messages .msg-wrapper {
    pointer-events: auto;
}

/* Reset starého vzhledu */
.msg,
.msg .container,
div.message[role="alert"],
.message[role="alert"] {
    box-sizing: border-box !important;
}

.msg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    animation: none !important;
}

/* Samostatné Shoptet hlášky mimo .messages */
body > div.message[role="alert"],
body > .message[role="alert"] {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 999999999999 !important;
}

/* Základní karta */
.msg .container,
body > div.message[role="alert"],
body > .message[role="alert"],
.nf-v2 .message[role="alert"] > span,
.nf-v2 ~ .message > span {
    --nf-accent: var(--nf-info);
    --nf-bg: var(--nf-info-bg);
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 18px 22px 18px 66px !important;
    border: 1px solid rgba(47, 42, 42, .08) !important;
    border-left: 0 !important;
    border-radius: var(--nf-radius) !important;
    background: linear-gradient(135deg, var(--nf-card-bg) 0%, var(--nf-bg) 100%) !important;
    color: var(--nf-text) !important;
    box-shadow: var(--nf-shadow) !important;
    overflow: hidden !important;
    line-height: 1.45 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transform-origin: right bottom;
    animation: nfSlideUp .38s cubic-bezier(.2, .75, .25, 1) both !important;
}

/* Barevný proužek */
.msg .container::after,
body > div.message[role="alert"]::after,
body > .message[role="alert"]::after,
.nf-v2 .message[role="alert"] > span::after,
.nf-v2 ~ .message > span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--nf-accent);
}

/* Ikona */
.msg .container::before,
body > div.message[role="alert"]::before,
body > .message[role="alert"]::before,
.nf-v2 .message[role="alert"] > span::before,
.nf-v2 ~ .message > span::before {
    content: "i";
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50%;
    background: #fff !important;
    color: var(--nf-accent) !important;
    box-shadow: 0 5px 14px rgba(39, 28, 34, .12);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background-image: none !important;
}

/* Text a odkazy */
.msg .container > span,
div.message[role="alert"] > span,
.message[role="alert"] > span {
    position: relative;
    z-index: 1;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.msg .container a,
div.message[role="alert"] a,
.message[role="alert"] a {
    color: var(--nf-text) !important;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Úspěch */
.msg.msg-success .container,
body > div.message.success-message[role="alert"],
body > .message.success-message[role="alert"],
body > div.message.notice-message[role="alert"],
body > .message.notice-message[role="alert"],
.nf-v2 .message.success-message[role="alert"] > span,
.nf-v2 .message.notice-message[role="alert"] > span,
.nf-v2 ~ .message.success-message > span,
.nf-v2 ~ .message.notice-message > span {
    --nf-accent: var(--nf-success);
    --nf-bg: var(--nf-success-bg);
}

.msg.msg-success .container::before,
body > div.message.success-message[role="alert"]::before,
body > .message.success-message[role="alert"]::before,
body > div.message.notice-message[role="alert"]::before,
body > .message.notice-message[role="alert"]::before,
.nf-v2 .message.success-message[role="alert"] > span::before,
.nf-v2 .message.notice-message[role="alert"] > span::before,
.nf-v2 ~ .message.success-message > span::before,
.nf-v2 ~ .message.notice-message > span::before {
    content: "✓";
}

/* Info */
.msg.msg-info .container,
body > div.message.info-message[role="alert"],
body > .message.info-message[role="alert"],
.nf-v2 .message.info-message[role="alert"] > span,
.nf-v2 ~ .message.info-message > span {
    --nf-accent: var(--nf-info);
    --nf-bg: var(--nf-info-bg);
}

/* Varování */
.msg.msg-warning .container,
body > div.message.warning-message[role="alert"],
body > .message.warning-message[role="alert"],
.nf-v2 .message.warning-message[role="alert"] > span,
.nf-v2 ~ .message.warning-message > span {
    --nf-accent: var(--nf-warning);
    --nf-bg: var(--nf-warning-bg);
}

.msg.msg-warning .container::before,
body > div.message.warning-message[role="alert"]::before,
body > .message.warning-message[role="alert"]::before,
.nf-v2 .message.warning-message[role="alert"] > span::before,
.nf-v2 ~ .message.warning-message > span::before {
    content: "!";
}

/* Chyba */
.msg.msg-error .container,
body > div.message.error-message[role="alert"],
body > .message.error-message[role="alert"],
.nf-v2 .message.error-message[role="alert"] > span,
.nf-v2 ~ .message.error-message > span {
    --nf-accent: var(--nf-error);
    --nf-bg: var(--nf-error-bg);
}

.msg.msg-error .container::before,
body > div.message.error-message[role="alert"]::before,
body > .message.error-message[role="alert"]::before,
.nf-v2 .message.error-message[role="alert"] > span::before,
.nf-v2 ~ .message.error-message > span::before {
    content: "×";
}

/* Případné zavírací tlačítko */
.msg .close,
.message .close,
.msg .close-message,
.message .close-message {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(47, 42, 42, .06) !important;
    color: var(--nf-muted) !important;
    opacity: 1 !important;
    transition: background .2s ease, color .2s ease;
}

.msg .close:hover,
.message .close:hover,
.msg .close-message:hover,
.message .close-message:hover {
    background: rgba(47, 42, 42, .12) !important;
    color: var(--nf-text) !important;
}

/* Fix pro starší template-05, aby chyby ve formulářích nezůstaly jako velký plovoucí box uvnitř obsahu */
.template-05 #content-in .message.error-message {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    animation: none !important;
}

/* Mobil */
@media (max-width: 767px) {
    .messages,
    body > div.message[role="alert"],
    body > .message[role="alert"] {
        left: 12px !important;
        right: 12px !important;
        bottom: 14px !important;
        width: auto !important;
        max-width: none !important;
    }

    .msg .container,
    body > div.message[role="alert"],
    body > .message[role="alert"],
    .nf-v2 .message[role="alert"] > span,
    .nf-v2 ~ .message > span {
        max-width: none !important;
        min-height: 66px !important;
        padding: 15px 18px 15px 58px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
    }

    .msg .container::before,
    body > div.message[role="alert"]::before,
    body > .message[role="alert"]::before,
    .nf-v2 .message[role="alert"] > span::before,
    .nf-v2 ~ .message > span::before {
        left: 17px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
}

@keyframes nfSlideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .msg .container,
    body > div.message[role="alert"],
    body > .message[role="alert"],
    .nf-v2 .message[role="alert"] > span,
    .nf-v2 ~ .message > span {
        animation: none !important;
    }
}