/* =========================================================
   SHOPTET – systémové hlášky jako malý toast vpravo dole
   ========================================================= */

/* hlavní wrappery hlášek – různé varianty Shoptetu */
.system-message,
.message,
.msg,
.flash-message,
.messages .success,
.messages .message-success,
.messages .msg-success,
div[class*="message-success"],
div[class*="msg-success"]{
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
    background: transparent !important;
}

/* vnitřní obsah hlášky */
.system-message .container,
.system-message .content,
.message .container,
.message .content,
.msg .container,
.msg .content,
.flash-message .container,
.flash-message .content,
.messages .success .container,
.messages .success .content,
.messages .message-success .container,
.messages .message-success .content,
.messages .msg-success .container,
.messages .msg-success .content,
div[class*="message-success"] .container,
div[class*="message-success"] .content,
div[class*="msg-success"] .container,
div[class*="msg-success"] .content{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 22px !important;
    background: #69c33b !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}

/* když Shoptet nemá container uvnitř */
.system-message:not(:has(.container)):not(:has(.content)),
.message:not(:has(.container)):not(:has(.content)),
.msg:not(:has(.container)):not(:has(.content)),
.flash-message:not(:has(.container)):not(:has(.content)),
.messages .success:not(:has(.container)):not(:has(.content)),
.messages .message-success:not(:has(.container)):not(:has(.content)),
.messages .msg-success:not(:has(.container)):not(:has(.content)),
div[class*="message-success"]:not(:has(.container)):not(:has(.content)),
div[class*="msg-success"]:not(:has(.container)):not(:has(.content)){
    padding: 18px 22px !important;
    background: #69c33b !important;
    color: #fff !important;
}

/* text */
.system-message *,
.message *,
.msg *,
.flash-message *,
.messages .success *,
.messages .message-success *,
.messages .msg-success *,
div[class*="message-success"] *,
div[class*="msg-success"] *{
    color: #fff !important;
    text-shadow: none !important;
}

.system-message p,
.system-message div,
.system-message span,
.system-message strong,
.system-message h1,
.system-message h2,
.system-message h3,
.system-message h4,
.system-message h5,
.system-message h6,
.message p,
.message div,
.message span,
.message strong,
.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6,
.msg p,
.msg div,
.msg span,
.msg strong,
.msg h1,
.msg h2,
.msg h3,
.msg h4,
.msg h5,
.msg h6,
.flash-message p,
.flash-message div,
.flash-message span,
.flash-message strong,
.flash-message h1,
.flash-message h2,
.flash-message h3,
.flash-message h4,
.flash-message h5,
.flash-message h6,
.messages .success p,
.messages .success div,
.messages .success span,
.messages .success strong,
.messages .message-success p,
.messages .message-success div,
.messages .message-success span,
.messages .message-success strong,
.messages .msg-success p,
.messages .msg-success div,
.messages .msg-success span,
.messages .msg-success strong,
div[class*="message-success"] p,
div[class*="message-success"] div,
div[class*="message-success"] span,
div[class*="message-success"] strong,
div[class*="msg-success"] p,
div[class*="msg-success"] div,
div[class*="msg-success"] span,
div[class*="msg-success"] strong{
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* případné zavírací X */
.system-message .close,
.system-message .message-close,
.message .close,
.message .message-close,
.msg .close,
.msg .message-close,
.flash-message .close,
.flash-message .message-close{
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    color: #fff !important;
    opacity: 1 !important;
    font-size: 18px !important;
}

/* animace */
.system-message,
.message,
.msg,
.flash-message,
.messages .success,
.messages .message-success,
.messages .msg-success,
div[class*="message-success"],
div[class*="msg-success"]{
    animation: shoptetToastIn .25s ease-out !important;
}

@keyframes shoptetToastIn{
    from{
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* mobil */
@media (max-width: 768px){
    .system-message,
    .message,
    .msg,
    .flash-message,
    .messages .success,
    .messages .message-success,
    .messages .msg-success,
    div[class*="message-success"],
    div[class*="msg-success"]{
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        border-radius: 18px !important;
    }

    .system-message .container,
    .system-message .content,
    .message .container,
    .message .content,
    .msg .container,
    .msg .content,
    .flash-message .container,
    .flash-message .content,
    .messages .success .container,
    .messages .success .content,
    .messages .message-success .container,
    .messages .message-success .content,
    .messages .msg-success .container,
    .messages .msg-success .content,
    div[class*="message-success"] .container,
    div[class*="message-success"] .content,
    div[class*="msg-success"] .container,
    div[class*="msg-success"] .content{
        padding: 16px 18px !important;
        border-radius: 18px !important;
    }

    .system-message p,
    .system-message div,
    .system-message span,
    .system-message strong,
    .message p,
    .message div,
    .message span,
    .message strong,
    .msg p,
    .msg div,
    .msg span,
    .msg strong,
    .flash-message p,
    .flash-message div,
    .flash-message span,
    .flash-message strong,
    .messages .success p,
    .messages .success div,
    .messages .success span,
    .messages .success strong,
    .messages .message-success p,
    .messages .message-success div,
    .messages .message-success span,
    .messages .message-success strong,
    .messages .msg-success p,
    .messages .msg-success div,
    .messages .msg-success span,
    .messages .msg-success strong,
    div[class*="message-success"] p,
    div[class*="message-success"] div,
    div[class*="message-success"] span,
    div[class*="message-success"] strong,
    div[class*="msg-success"] p,
    div[class*="msg-success"] div,
    div[class*="msg-success"] span,
    div[class*="msg-success"] strong{
        font-size: 16px !important;
    }
}