/* ===========================
   Binance Checkout — Clean Final
   Scope everything to avoid theme collisions
=========================== */
.binance-checkout-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
    min-height: 100vh;
}

/* Header */
.binance-header { text-align: center; margin-bottom: 24px; }
.binance-header h1 { font-size: 24px; font-weight: 600; color: #1e293b; margin: 0; }


/* ===== Countdown (premium) ===== */
.bz-countdown {
    background: #e9edf7 !important; /* soft grey/blue */
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06) !important;
    border: 1px solid #d4dcf0 !important;
}

.bz-countdown > div:first-child {
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.bz-countdown .timer {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #eab308 !important; /* yellow digits */
    font-feature-settings: "tnum" !important;
}

/* ===== Cards ===== */
.binance-checkout-page .card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: white;
}
.binance-checkout-page .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0 !important;
}
.binance-checkout-page .card-body { padding: 20px; }

/* ===== Section Bars ===== */
.binance-checkout-page .bz-bar {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    margin: 0;
}
.binance-checkout-page .bz-bar.blue { background: #3b7bff !important; } /* lighter blue */
.binance-checkout-page .bz-bar.green { background: #059669; }

/* Order section background subtle blue/grey */
.binance-checkout-page .card.order-section { background: #f5f8ff !important; }

/* Order info */
.binance-checkout-page .bz-order { padding: 20px; }
.binance-checkout-page .order-id {
    font-size: 15px;
    font-weight: 600;
    color: #000 !important;  /* black text, no pill */
    margin-bottom: 8px;
}
.binance-checkout-page .product {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 4px;
}

/* ===== Safe banner (separate full-width notice) =====
.safe-banner{
    width:100%;
    background:#cff4fc;
    color:#055160;
    padding:12px 18px;
    border-radius:10px;
    font-weight:600;
    text-align:center;
    margin:20px 0;
    font-size:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
}


/* (If you still have the old .bz-safe inside a card, keep it neutral) */
.binance-checkout-page .bz-safe {
    display: flex; align-items: center; gap: 12px;
    background: #f6f9ff; border: 1px solid #e3effd;
    padding: 14px 16px; border-radius: 12px;
}

/* ===== Payment Amount ===== */
.binance-checkout-page .bz-amount .row {
    padding: 24px 20px;
    text-align: center; /* center it */
}
.binance-checkout-page .bz-amount .big {
    font-size: 32px; font-weight: 700; color: #059669; margin-bottom: 8px;
}
.binance-checkout-page .bz-amount .tag {
    font-size: 14px; color: #64748b;
}
/* Center the “Payment Amount” green bar text */
.binance-checkout-page .card.order-section .bz-bar.green { text-align: center !important; }

/* ===== Binance Pay Header (robust) ===== */
.binance-checkout-page .payment-section .card-header.bg-success {
    background: #059669 !important;
    border-color: #047857;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}
.binance-checkout-page .payment-section .card-header.bg-success h4,
.binance-checkout-page .payment-section .card-header.bg-success h4.mb-0 {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 32px !important;
    color: #fff !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}
.binance-checkout-page .payment-section .card-header.bg-success .bitcoin-symbol {
    font-size: 32px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    color: #fff !important;
    line-height: 1 !important;
    margin-right: 8px !important;
}

/* ===== Payment Info & Box ===== */
.binance-checkout-page .payment-info h5 {
    font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 8px;
}
.binance-checkout-page .payment-info p {
    color: #64748b; font-size: 14px; margin-bottom: 0;
}
.binance-checkout-page .payment-note {
    background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.binance-checkout-page .payment-note small { font-size: 12px; color: #64748b; }

/* Binance gold CTA (non-clickable look) */
.binance-checkout-page .binance-box {
    background: #1e1e1e;
    background-image: linear-gradient(90deg, transparent 0%, transparent 20%, #d4a900 50%, transparent 80%, transparent 100%);
    background-size: 400% 100%;
    animation: binance-glow 8s linear infinite;
    color: #ffcc00;
    border: 2px solid #d4a900;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    margin-bottom: 16px;
}
@keyframes binance-glow {
    0% { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}

/* ===== Status ===== */
.binance-checkout-page .payment-status h5 {
    font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;
}
.binance-checkout-page .payment-status .small {
    font-size: 12px; color: #64748b; margin-bottom: 8px;
}
.binance-checkout-page .status-message {
    font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 6px;
    background: #f0f9ff; color: #0369a1; border: 1px solid #e0f2fe;
}
.binance-checkout-page .status-message.paid {
    background: #f0fff4; color: #059669; border-color: #dcfce7;
}
.binance-checkout-page .status-message.expired {
    background: #fef2f2; color: #dc2626; border-color: #fecaca;
}

/* ===== Instructions ===== */
.binance-checkout-page .payment-instructions-container {
    display: flex; gap: 20px; align-items: flex-start;
}
.binance-checkout-page .binance-note-box { flex: 0 0 140px; text-align: center; }
.binance-checkout-page .note-image { width: 100%; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 8px; }
.binance-checkout-page .note-caption { font-size: 12px; color: #64748b; }
.binance-checkout-page .instructions-content { flex: 1; }
.binance-checkout-page .instruction-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid #f1f5f9;
}
.binance-checkout-page .instruction-row:last-child { border-bottom: none; }
.binance-checkout-page .payment-code {
    background: #f8fafc; padding: 8px 12px; border-radius: 6px; border: 1px solid #e2e8f0;
    font-family: 'Courier New', monospace; font-size: 14px; color: #1e293b; margin-top: 4px;
}

/* ===== Steps ===== */
.binance-checkout-page .payment-steps h5 {
    font-size: 16px; font-weight: 600; color: #1e293b; margin: 16px 0;
}
.binance-checkout-page .step {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 0;
}
.binance-checkout-page .step-number {
    background: #3b82f6; color: #fff; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.binance-checkout-page .step-text { color: #475569; font-size: 14px; line-height: 1.4; }
.binance-checkout-page .step-text strong { color: #1e293b; }

/* ===== Utilities ===== */
.binance-checkout-page .btn-sm { padding: 6px 12px; font-size: 12px; }
.binance-checkout-page .btn-outline-primary {
    border: 1px solid #3b82f6; color: #3b82f6; background: #fff; border-radius: 6px; cursor: pointer; transition: .2s;
}
.binance-checkout-page .btn-outline-primary:hover { background: #3b82f6; color: #fff; }
.binance-checkout-page .text-center { text-align: center; }
.binance-checkout-page .text-muted { color: #64748b; }
.binance-checkout-page .mb-0 { margin-bottom: 0; }
.binance-checkout-page .mb-2 { margin-bottom: 8px; }
.binance-checkout-page .mb-3 { margin-bottom: 12px; }
.binance-checkout-page .mb-4 { margin-bottom: 16px; }
.binance-checkout-page .me-2 { margin-right: 8px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .binance-checkout-page { padding: 16px; max-width: 100%; }
    .binance-checkout-page .card-body { padding: 16px; }
    .binance-checkout-page .binance-box { min-width: auto; width: 100%; padding: 14px 20px; }
    .binance-checkout-page .payment-instructions-container { flex-direction: column; }
    .binance-checkout-page .binance-note-box {
        flex: 0 0 auto; width: 100%; max-width: 200px; margin: 0 auto 16px;
    }
    .binance-checkout-page .instruction-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .binance-checkout-page .instruction-row .payment-code { width: 100%; margin: 4px 0; }
}

/* remove theme purple timer bg — FINAL NUKE FIX */
.binance-checkout-page .bz-countdown .timer {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: #eab308 !important; /* yellow digits stays */
}

/* REMOVE PURPLE TIMER BACKGROUND – FORCE */
.binance-checkout-page .bz-countdown .timer {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: #eab308 !important;
}
/* ORDER BAR LIGHT GREEN FIX */
.binance-checkout-page .bz-bar.blue {
    background: #45d69c !important;  /* light green */
}
/* ==== BINANCE CHECKOUT DESKTOP TWEAKS (force) ==== */
@media (min-width: 900px){
  .binance-checkout-page{
    max-width: 760px !important;
    padding: 24px !important;
  }
  .binance-checkout-page .card-body{
    padding: 24px !important;
  }
}

/* bar color: make the blue bar light-green */
.binance-checkout-page .bz-bar.blue{
  background:#22c55e !important; /* light green */
}

/* Order ID: black text, no pill */
.binance-checkout-page .order-id{
  color:#000 !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  display:block !important;
  margin-bottom:8px !important;
}

/* Safe banner (full-width cyan box) */
.safe-banner{
  width:100%;
  background:#cff4fc !important;
  color:#055160 !important;
  padding:14px 18px !important;
  border:1px solid #b6e9f3 !important;
  border-radius:12px !important;
  font-weight:600;
  text-align:center;
  margin:18px 0 !important;
}

/* Spinner for "Waiting for payment..." */
.status-message.waiting-spin::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6; /* blue arc */
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    animation: spinLoad 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes spinLoad {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== payment instruction layout fix (image LEFT / text RIGHT) ===== */
.payment-instructions-container {
    display: grid !important;
    grid-template-columns: 270px 1fr !important; /* image first, text second */
    gap: 30px !important;
    align-items: start !important;
}

/* tighten image box */
.binance-note-box {
    max-width: 260px !important;
    margin-right: 0 !important;
}

/* tighten steps vertical */
.payment-steps .step {
    margin-bottom: 8px !important;
}