/* sfee-style.css - RTL/LTR aware */

.sfee-container { max-width:760px; margin:18px auto; font-family:"Tahoma",Arial,sans-serif; color:#2b2b2b; }
.sfee-top-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:14px;height: 45px !important; }

.sfee-top-label { flex:0 0 180px; text-align:center; background:#fff; border:1px solid #e6e6e6; padding:12px 10px;  font-weight:600; color:#666; height: 46px !important;}
.sfee-top-input { flex:1; padding:13px !important;border:1px solid #e6e6e6 !important; font-size:16px !important; text-align:center !important; height: 46px !important; }
/* amount input: always fill available space and never overflow */


.sfee-fee-panel { display:flex; align-items:center; background:#f6f9fc; height: 46px !important; padding:18px; margin-bottom:18px; box-shadow:0 0 0 1px rgba(230,230,230,0.6) inset; }
.sfee-fee-left { width:48px; display:flex; justify-content:center; align-items:center; }
.sfee-fee-icon { width:34px; height:34px; border-radius:50%; background:#eef6ff; color:#0a6bff; font-weight:700; display:flex; justify-content:center; align-items:center; }
.sfee-fee-center { flex:1; text-align:center; }
.sfee-fee-number { font-size:28px; font-weight:800; color:#0b6bff; }
.sfee-fee-right { min-width:160px; text-align:center; color:#8aa0b6; font-weight:600; }

.sfee-card { background:#fff; border-radius:14px; padding:18px; border:1px solid:#f1f6f7; margin-bottom:12px; box-shadow:0 8px 20px rgba(15,30,40,0.03); }
.sfee-card-title { margin:0 0 10px 0; text-align:center; color:#2b7a5a; font-weight:700; }
.sfee-pay-box { background:#fff; padding:16px; border-radius:10px; border:1px solid:#eef6f2; }
.sfee-pay-title { text-align:center; color:#10794f; margin:0 0 12px 0; font-weight:700; }
.sfee-form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sfee-input-small { padding:10px; border-radius:8px; border:1px solid:#e6eef0; background:#fff; text-align:start; direction:ltr; }
html[dir="rtl"] .sfee-input-small { text-align:end; direction:rtl; }
.sfee-btn-row { text-align:center; margin-top:6px; }
.sfee-btn { display:inline-block; padding:12px 18px; border-radius:8px; background:#0a6bff; color:#fff; border:0; cursor:pointer; font-weight:700; min-width:260px; transition:background .2s; }
.sfee-btn:hover { background:#095de0; }

.sfee-bank-box { margin-top:14px; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(10,10,10,0.04); }
.sfee-bank-inner { display:flex; flex-wrap:wrap; gap:18px; align-items:center; background:#fff; border-top:8px solid #39a46a; padding:18px; }
.sfee-bank-left { width:210px; display:flex; align-items:center; justify-content:center; margin:auto; }
.sfee-qr-wrap { width:170px; height:120px; background:#f7f9f7; border-radius:6px; display:flex; align-items:center; justify-content:center; padding:6px; }
.sfee-qr-wrap img { max-width:100%; max-height:100%; display:block; }
.sfee-bank-right { flex:1; display:flex; flex-direction:column; gap:8px; }
.sfee-bank-amount { font-weight:800; color:#2b7a5a; font-size:16px; }
.sfee-bank-small { color:#444; font-weight:600; }
.sfee-bank-company { color:#888; font-size:13px; }
.sfee-bank-note { margin-top:8px; color:#666; font-size:13px; }

@media (max-width:760px) {
  .sfee-top-row { flex-wrap:nowrap; }
 
  .sfee-top-label, .sfee-top-input { width:100%; }
  .sfee-bank-inner { flex-direction:column; align-items:stretch; }
  .sfee-bank-left { width:100%; }
  .sfee-btn { min-width:100%; }
}