/*!
 * Bootoast CSS
 * @author odahcam
 * @version 1.0.0
 **/

.bootoast {
    opacity: 0;
    filter: alpha(opacity=0);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.bootoast>.glyphicon {
    display: inline-block;
    float: left;
    font-size: 20px;
    margin-right: 14px;
}

.bootoast>.bootoast-alert-container {
    display: block;
    max-width: 100%;
    overflow: auto;
}

.bootoast>.bootoast-alert-container>.bootoast-alert-content {
    display: table;
    width: 100%;
    height: 100%
}

.bootoast-container {
    position: fixed;
    left: 20px;
    right: 20px;
    top: initial;
    bottom: initial;
    width: 390px;
    max-width: 95%;
    z-index: 2060
}

.bootoast-container.top {
    top: 20px
}

.bootoast-container.bottom {
    bottom: 20px
}

.bootoast-container.right {
    left: initial
}

.bootoast-container.left {
    right: initial
}

.bootoast-container.center {
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%)
}

/* 手机端：紧凑、水平居中、宽度收缩到内容（小药丸，不再铺满整条），整体收小一号。
   长文本到 calc(100vw-24px) 上限再换行。无论调用用的是哪种方位类，水平方向都统一居中；
   垂直方向仍由 .top/.bottom 决定（现有调用多为 *-top，故在顶部）。
   配合 bootoast.js 末尾对 window.bootoast 的手机端拦截：同一时刻只显示一条，新提示覆盖旧的。 */
@media screen and (max-width: 768px) {
    /* 容器铺满可用宽度（左右各 12px），并用 flex 纵向、横向居中其中的提示药丸：
       短提示=居中小药丸；长提示能用到接近满宽再换行；多条时纵向居中堆叠（且配合 JS 只留一条）。
       不用 left:50%+translateX —— 定位元素那样会被可用宽度限制成 50vw，把长文本挤窄。 */
    .bootoast-container,
    .bootoast-container.top,
    .bootoast-container.bottom,
    .bootoast-container.left,
    .bootoast-container.right,
    .bootoast-container.center {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        -webkit-transform: none !important;
                transform: none !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
                flex-direction: column !important;
        -webkit-align-items: center !important;
                align-items: center !important;
    }
    .bootoast-container.top { top: 12px !important; }
    .bootoast-container.bottom { bottom: 12px !important; }

    /* 单条药丸：按内容宽度排布（图标 + 文字 + 关闭），整体收小，上限为容器宽度 */
    .bootoast-container .bootoast {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
                align-items: center !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 8px 14px !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    .bootoast-container .bootoast > .glyphicon {
        float: none !important;
        -webkit-order: 1; order: 1;
        -webkit-flex: none; flex: none;
        font-size: 15px !important;
        margin: 0 8px 0 0 !important;
    }
    .bootoast-container .bootoast > .bootoast-alert-container {
        -webkit-order: 2; order: 2;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;          /* 允许长文本换行而非撑破 */
        overflow: visible !important;
    }
    .bootoast-container .bootoast > .bootoast-alert-container > .bootoast-alert-content {
        display: block !important;
        width: auto !important;
    }
    .bootoast-container .bootoast > .close {
        -webkit-order: 3; order: 3;
        float: none !important;
        position: static !important;
        margin: 0 0 0 10px !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
}

/* 入场动画：从右侧轻微滑入（配合右上角定位）。只动 transform，不与 JS 的 opacity 渐显冲突。
   用 fill-mode: both，避免动画首帧前出现位移跳动。 */
@-webkit-keyframes bootoast-slide-in {
    from { -webkit-transform: translateX(24px); }
    to   { -webkit-transform: translateX(0); }
}
@keyframes bootoast-slide-in {
    from { transform: translateX(24px); }
    to   { transform: translateX(0); }
}

/* 电脑端优化：flex 对齐让图标/文字/关闭垂直居中（多行不错位），排版精致一点，
   去掉 BS3 边框、靠底色 + 阴影做现代卡片，并加从右滑入的入场动画。手机端不受影响（另有 max-width:768 规则）。 */
@media screen and (min-width: 769px) {
    /* 整体宽度收窄一点（bootoast.css 默认 390px） */
    .bootoast-container { width: 320px !important; }

    .bootoast-container .bootoast {
        -webkit-animation: bootoast-slide-in .35s cubic-bezier(.21,1.02,.73,1) both;
                animation: bootoast-slide-in .35s cubic-bezier(.21,1.02,.73,1) both;
        /* 移除时用过渡做“向上滑出 + 高度收拢”；不含 opacity（入场的 opacity 由 JS 动画控制，避免打架） */
        -webkit-transition: -webkit-transform .3s ease, max-height .3s ease, margin .3s ease, padding .3s ease;
                transition: transform .3s ease, max-height .3s ease, margin .3s ease, padding .3s ease;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
                align-items: center !important;
        padding: 12px 16px !important;
        margin-bottom: 12px !important;
        border: 0 !important;            /* 去掉 BS3 边框，靠底色 + .bootoast 自带阴影做现代卡片 */
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    .bootoast-container .bootoast > .glyphicon {
        float: none !important;
        -webkit-order: 1; order: 1;
        -webkit-flex: none; flex: none;
        font-size: 18px !important;
        margin: 0 12px 0 0 !important;
    }
    .bootoast-container .bootoast > .bootoast-alert-container {
        -webkit-order: 2; order: 2;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    .bootoast-container .bootoast > .bootoast-alert-container > .bootoast-alert-content {
        display: block !important;
        width: auto !important;
    }
    .bootoast-container .bootoast > .close {
        -webkit-order: 3; order: 3;
        float: none !important;
        position: static !important;
        margin: 0 0 0 14px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        opacity: .45;
        -webkit-transition: opacity .15s; transition: opacity .15s;
    }
    .bootoast-container .bootoast > .close:hover { opacity: .8; }

    /* 被挤掉时（最旧的在顶部）：向上滑出 + 高度/边距/内边距收拢到 0，
       它收拢的同时，下面的提示会平滑上移补位，整列丝滑流动、不跳动。opacity 由 JS 同步淡出。 */
    .bootoast-container .bootoast.bootoast-removing {
        -webkit-transform: translateY(-100%) !important;
                transform: translateY(-100%) !important;
        max-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* 文字过长时确保换行、不溢出边框（手机端/电脑端通用）。
   放在文件最后，覆盖上面两处文字容器的 overflow:visible。
   原因：flex 子项需 min-width:0 才能收缩到换行；长串（订单号/URL/英文数字等）需 word-break/overflow-wrap 才会断行。 */
.bootoast-container .bootoast > .bootoast-alert-container {
    overflow: hidden !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.bootoast-container .bootoast > .bootoast-alert-container > .bootoast-alert-content {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
/* 隐藏关闭按钮（已统一改为自动消失，无需手动关；JS 里也设了 dismissable:false，这里再兜底一层） */
.bootoast-container .bootoast > .close {
    display: none !important;
}