/**
 * 小林機械 - Pophint 提示元件樣式
 * 檔案位置：css/pophint.css
 */

.pophint-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:clamp(280px,90vw,400px)}
.pophint-item{display:flex;align-items:flex-start;gap:12px;padding:clamp(12px,3vw,16px);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:pophintSlideIn .3s ease-out;position:relative;overflow:hidden}
.pophint-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.pophint-success{background-color:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.pophint-success::before{background-color:#22c55e}
.pophint-success .pophint-icon{background-color:#dcfce7;color:#22c55e}
.pophint-error{background-color:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.pophint-error::before{background-color:#ef4444}
.pophint-error .pophint-icon{background-color:#fee2e2;color:#ef4444}
.pophint-warning{background-color:#fffbeb;border:1px solid #fde68a;color:#92400e}
.pophint-warning::before{background-color:#f59e0b}
.pophint-warning .pophint-icon{background-color:#fef3c7;color:#f59e0b}
.pophint-info{background-color:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.pophint-info::before{background-color:#3b82f6}
.pophint-info .pophint-icon{background-color:#dbeafe;color:#3b82f6}
.pophint-icon{width:clamp(32px,8vw,40px);height:clamp(32px,8vw,40px);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pophint-icon i{font-size:clamp(16px,4vw,20px)}
.pophint-content{flex:1;min-width:0}
.pophint-title{font-size:clamp(14px,3vw,16px);font-weight:600;margin-bottom:4px}
.pophint-message{font-size:clamp(12px,2.5vw,14px);line-height:1.5;opacity:.9}
.pophint-close{background:0 0;border:none;padding:4px;cursor:pointer;opacity:.5;transition:opacity .2s;flex-shrink:0;color:inherit}
.pophint-close:hover{opacity:1}
.pophint-close i{font-size:clamp(14px,3vw,16px)}
.pophint-progress{position:absolute;bottom:0;left:0;height:3px;background-color:currentColor;opacity:.3;animation:pophintProgress linear forwards}
@keyframes pophintSlideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes pophintSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
@keyframes pophintProgress{from{width:100%}to{width:0}}
@media(max-width:576px){.pophint-container{top:10px;right:10px;left:10px;max-width:none}}
