/* GK Binance Pay v1.0.8 */
:root {
    --gk-gold:    #F0B90B;
    --gk-surface: #1E2026;
    --gk-card:    #14161B;
    --gk-border:  #2B2F36;
    --gk-text:    #EAECEF;
    --gk-muted:   #848E9C;
    --gk-green:   #0ECB81;
}

/* Overlay — JS inline style দিয়ে show/hide হবে */
#gk-bp-overlay {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#gk-bp-modal {
    background: var(--gk-surface);
    border: 1px solid var(--gk-border);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 28px 72px rgba(0,0,0,.65), 0 0 0 1px rgba(240,185,11,.12);
    animation: gk-in .32s cubic-bezier(.34,1.4,.64,1) both;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--gk-text);
}

@keyframes gk-in {
    from { opacity:0; transform:translateY(24px) scale(.95); }
    to   { opacity:1; transform:none; }
}

.gk-bp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #12141a;
    border-bottom: 1px solid var(--gk-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--gk-gold);
}

.gk-bp-body { padding: 18px 20px; }

.gk-bp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gk-card);
    border: 1px solid var(--gk-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.gk-bp-lbl {
    color: var(--gk-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    min-width: 68px;
}

.gk-bp-val {
    color: var(--gk-gold);
    font-weight: 700;
    font-size: 15px;
    font-family: 'Courier New', monospace;
    flex: 1;
    word-break: break-all;
}

.gk-bp-copy {
    background: transparent;
    border: 1px solid var(--gk-border);
    color: var(--gk-muted);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .18s;
    flex-shrink: 0;
}
.gk-bp-copy:hover,
.gk-bp-copy.copied {
    border-color: var(--gk-green);
    color: var(--gk-green);
    background: rgba(14,203,129,.08);
}

.gk-bp-hint {
    color: var(--gk-muted);
    font-size: 12.5px;
    line-height: 1.65;
    margin: 12px 0 16px !important;
    padding: 10px 13px !important;
    background: rgba(240,185,11,.05);
    border-left: 3px solid rgba(240,185,11,.35);
    border-radius: 0 8px 8px 0;
}
.gk-bp-hint strong { color: var(--gk-text); }

.gk-bp-input-lbl {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gk-text);
    margin-bottom: 8px;
}

.gk-bp-input-row {
    display: flex;
    gap: 8px;
}

.gk-bp-input {
    flex: 1;
    min-width: 0;
    background: var(--gk-card) !important;
    border: 1.5px solid var(--gk-border) !important;
    border-radius: 10px !important;
    color: var(--gk-text) !important;
    padding: 11px 13px !important;
    font-size: 13.5px !important;
    font-family: 'Courier New', monospace !important;
    outline: none !important;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
}
.gk-bp-input:focus {
    border-color: var(--gk-gold) !important;
    box-shadow: 0 0 0 3px rgba(240,185,11,.13) !important;
}
.gk-bp-input::placeholder { color: var(--gk-muted) !important; }

.gk-bp-btn {
    background: var(--gk-gold) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .18s, transform .15s !important;
}
.gk-bp-btn:hover  { background: #d9a50a !important; transform: translateY(-1px); }
.gk-bp-btn:disabled { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }

.gk-bp-msg {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    animation: gk-fade .22s ease;
}
.gk-bp-msg.success { background:rgba(14,203,129,.1); border:1px solid rgba(14,203,129,.3); color:var(--gk-green); }
.gk-bp-msg.error   { background:rgba(246,70,93,.08); border:1px solid rgba(246,70,93,.25); color:#ff8a97; }

.gk-bp-foot {
    border-top: 1px solid var(--gk-border);
    padding: 11px 20px;
    text-align: center;
    color: var(--gk-muted);
    font-size: 11.5px;
}

/* Checkout section info */
.gk-bp-checkout-info { margin-top: 6px; }
.gk-bp-desc { color: #777; font-size: 13px; margin-bottom: 6px !important; }
.gk-bp-checkout-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; margin-bottom:5px; }
.gk-bp-checkout-meta strong { color:#333; }
.gk-bp-click-hint { color:#c9960a; font-size:12.5px; font-weight:600; margin:0 !important; }

.gk-spinner {
    display:inline-block; width:13px; height:13px;
    border:2px solid rgba(0,0,0,.15); border-top-color:#000;
    border-radius:50%; animation:gk-spin .6s linear infinite;
    vertical-align:middle; margin-right:5px;
}

@keyframes gk-spin { to { transform:rotate(360deg); } }
@keyframes gk-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

@media (max-width:480px) {
    .gk-bp-input-row { flex-direction:column; }
    .gk-bp-btn { width:100% !important; }
}

/* Gateway icon — payment list এ শুধু gateway icon */
.payment_method_gk_binance_pay img:not(.gk-bp-qr-img) {
    height: 30px !important;
    width: auto !important;
    float: right;
    margin: 0 0 0 8px;
    object-fit: contain;
}

/* QR Code — আলাদা style, gateway icon CSS override হবে না */
img.gk-bp-qr-img {
    display: block !important;
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
    float: none !important;
    margin: 0 auto 8px auto !important;
    border-radius: 12px !important;
    border: 4px solid #F0B90B !important;
    padding: 8px !important;
    background: #fff !important;
    object-fit: unset !important;
}