.bom-front-box{border:1px solid #ddd;padding:15px;margin:20px 0;background:#fff}
.bom-card{position:relative;border:1px solid #e5e7eb;background:#f9fafb;padding:10px;border-radius:8px;margin:8px 0}
.bom-card .button.bom-remove-row,.bom-card .button.bom-remove-sample{position:absolute;left:8px;top:8px;border:1px solid #ccc}
.bom-fade-in{animation:bomfadein .2s ease-in}
.bom-fade-out{animation:bomfadeout .2s ease-in forwards}
@keyframes bomfadein{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes bomfadeout{from{opacity:1}to{opacity:0;height:0;margin:0;padding:0}}
.bom-add{border:1px solid #888}
.bom-gateway-choice-label{font-weight:700;margin:14px 0 8px}
.bom-gateway-buttons{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:7px;margin:0}
.bom-gateway-button{width:82px;height:64px;display:inline-flex!important;flex:0 0 82px;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #1685c1!important;border-radius:7px!important;background:#fff!important;color:#096692!important;padding:4px!important;font-family:IRANSansX,Tahoma,sans-serif!important;font-weight:700!important;cursor:pointer}
.bom-gateway-button:hover{background:#0b84bd!important;color:#fff!important;border-color:#0b84bd!important}
.bom-gateway-button:active{background:#07658f!important;border-color:#07658f!important}
.bom-gateway-button img{width:42px;height:30px;object-fit:contain;background:#fff;border-radius:3px;padding:1px}
.bom-gateway-button span{font-size:10px;line-height:1.2;white-space:nowrap;font-weight:400}
.bom-gateway-limit-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.42);direction:rtl;font-family:IRANSansX,Tahoma,sans-serif}
.bom-gateway-limit-modal[hidden]{display:none!important}
.bom-gateway-limit-dialog{position:relative;width:min(100%,420px);background:#fff;border:1px solid #fecaca;border-radius:9px;padding:26px 22px 18px;color:#991b1b;box-shadow:0 18px 42px rgba(15,23,42,.2);text-align:right}
.bom-gateway-limit-dialog strong{display:block;padding-left:26px;font-size:15px;line-height:1.8}
.bom-gateway-limit-dialog p{margin:12px 0 0;color:#334155;line-height:1.9}
.bom-gateway-limit-dialog b{color:#b91c1c}
.bom-gateway-limit-close{position:absolute;left:9px;top:7px;border:0;background:transparent;color:#991b1b;font-size:26px;line-height:1;cursor:pointer}
.bom-order-only-label{display:inline-block;color:#0f766e;font-family:IRANSansX,Tahoma,sans-serif;font-weight:700}
@media(max-width:420px){.bom-gateway-buttons{gap:5px}.bom-gateway-button{width:76px;flex-basis:76px;height:60px}.bom-gateway-button img{width:38px;height:27px}.bom-gateway-button span{font-size:9px}}
#bom-img-modal{position:fixed;inset:0;z-index:99999;display:none}
#bom-img-modal .bom-img-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
#bom-img-modal .bom-img-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;padding:10px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:10px}
#bom-img-modal img{max-width:80vw;max-height:70vh;object-fit:contain;border:1px solid #eee;border-radius:8px}
#bom-img-modal .bom-img-close{align-self:flex-end}

/* باکس کلی لیست کامنت‌ها */
.bom-comments-wrap {
    background: #eee; /* نقره‌ای/خاکستری ملایم */
    padding: 12px;
    border-radius: 10px;
    margin: 12px 0;
    direction: rtl;
}

/* کارت هر کامنت - سبز با متن سفید */
.bom-comment-card {
    background: #2e7d32; /* سبز */
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative; /* برای هرگونه افزونه پوزیشنی لازم */
    z-index: 1; /* جلوی عناصر پشت‌صحنه */
}

/* هدر: تاریخ + نویسنده */
.bom-comment-head {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
}

.bom-comment-date {
    opacity: .95;
}

.bom-comment-author {
    opacity: .9;
}

/* متن کامنت */
.bom-comment-body {
    line-height: 1.8;
}

/* فوتر: جای دکمه ضمیمه */
.bom-comment-footer {
    display: flex;
    justify-content: flex-start; /* چون گفته بودی سمت چپ باشه، تو RTL سمت چپ برابر با start نیست؛
                                 ولی اینجا دکمه را با کلاس زیر کنترل می‌کنیم */
}

/* خود دکمه ضمیمه */
.bom-attach-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    transition: background .18s ease;
    /* برای اینکه حتماً داخل کادر بماند و زیر چیزی نرود */
    position: relative;
    z-index: 2;
    margin-top: 4px;
}

/* هاور ملایم */
.bom-attach-btn:hover {
    background: rgba(255,255,255,.1);
}