/* theme-overrides.css
 * Hotfix layer for UI polish without rebuilding bundles.
 * Cache-Control for this file is already configured in .htaccess.
 */

/* ----------------------------
   Bombobet Cashier Modal 2026
   Visual-only overrides
   ---------------------------- */

/* Modal shell: shift palette to brand gold + trust greens, reduce "blue app" feel */
.modal-cashier.modal-cashier{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,196,46,.22), transparent 55%),
    radial-gradient(120% 160% at 100% 10%, rgba(53,208,127,.14), transparent 55%),
    linear-gradient(180deg, rgba(12,18,32,.92), rgba(6,9,15,.98)) !important;

  /* Brand-driven tokens used across the cashier UI */
  --wallet-accent: var(--brand-gold, #ffc42e) !important;
  --wallet-accent-strong: var(--brand-gold-deep, #ffb000) !important;
  --wallet-accent-soft: rgba(255,196,46,.16) !important;
  --wallet-accent-border: rgba(255,196,46,.42) !important;
  --wallet-success-soft: rgba(53,208,127,.18) !important;

  --wallet-warning: rgba(255,196,46,.12) !important;
  --wallet-warning-border: rgba(255,196,46,.36) !important;

  /* Ensure modal typography matches site */
  font-family: var(--font-ui, "Montserrat", "Sora", "Helvetica Neue", sans-serif) !important;
}

/* Tab styling: navigation feel, calmer active state */
.modal-cashier .cashier-tabs{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.modal-cashier .tab-pill{
  letter-spacing: .1px !important;
}
.modal-cashier .tab-pill.active{
  background: rgba(255,196,46,.16) !important;
  color: rgba(255,246,220,.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,196,46,.28),
    0 14px 28px rgba(0,0,0,.35) !important;
}
.modal-cashier .tab-pill:hover{
  background: rgba(255,196,46,.10) !important;
  color: rgba(255,246,220,.98) !important;
}

/* Close button: less "buttony" */
.modal-cashier .cashier-close{
  background: rgba(255,255,255,.06) !important;
}
.modal-cashier .cashier-close:hover{
  border-color: rgba(255,196,46,.35) !important;
  background: rgba(255,196,46,.10) !important;
}

/* Flow surface: subtle depth + reduced harsh contrast */
.modal-cashier .cashier-flow{
  background:
    radial-gradient(140% 120% at 15% 0%, rgba(255,196,46,.10), transparent 55%),
    linear-gradient(160deg, rgba(16,24,40,.86), rgba(8,12,20,.96)) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Chips + selection states */
.modal-cashier .asset-chip.active,
.modal-cashier .asset-chip:hover{
  border-color: var(--wallet-accent-border) !important;
  background: var(--wallet-accent-soft) !important;
  color: rgba(255,246,220,.98) !important;
}
.modal-cashier .asset-chip img{
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  padding: 2px !important;
}

/* Inputs: brand focus ring */
.modal-cashier .input-control:focus:not(:disabled),
.modal-cashier .vs__dropdown-toggle:focus-within{
  border-color: rgba(255,196,46,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,196,46,.16) !important;
}

/* Step cards: calm panels */
.modal-cashier .wallet-step-card{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.modal-cashier .wallet-step-card.active{
  border-color: var(--wallet-accent-border) !important;
}
.modal-cashier .step-status.active{
  background: rgba(255,196,46,.85) !important;
  border-color: rgba(255,196,46,.95) !important;
}
.modal-cashier .step-status.done{
  background: rgba(53,208,127,.85) !important;
  border-color: rgba(53,208,127,.95) !important;
}

/* Network pills */
.modal-cashier .network-pill.active,
.modal-cashier .network-pill:hover{
  border-color: var(--wallet-accent-border) !important;
  background: rgba(255,196,46,.08) !important;
}

/* Address trust moment */
.modal-cashier .address-card{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.modal-cashier .qr-frame{
  border-radius: 16px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
}
.modal-cashier .address-value{
  font-family: var(--font-numeric, "JetBrains Mono", monospace) !important;
  letter-spacing: .2px !important;
}
.modal-cashier .copy-btn{
  min-width: 92px !important;
  background: var(--wallet-accent-soft) !important;
  color: rgba(255,246,220,.98) !important;
}
.modal-cashier .copy-btn:hover{
  background: rgba(255,196,46,.22) !important;
}
.modal-cashier .copy-btn.success{
  background: var(--wallet-success-soft) !important;
  color: rgba(220,255,235,.95) !important;
}

/* Sticky CTA: reduce "overlay shadow" feel */
.modal-cashier .cta-bar{
  background:
    linear-gradient(0deg, rgba(8,12,20,.92), rgba(8,12,20,.62) 40%, rgba(8,12,20,0)) !important;
  backdrop-filter: blur(10px);
}
.modal-cashier .primary-btn{
  min-width: 190px !important;
  background: var(--brand-gradient, linear-gradient(135deg,#ffc42e,#ff8a00)) !important;
  color: rgba(11,15,26,.96) !important;
}

/* Right trust panel: soften and replace letter icons with premium glyphs */
.modal-cashier .trust-panel{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,196,46,.12), transparent 55%),
    radial-gradient(120% 120% at 100% 15%, rgba(53,208,127,.10), transparent 55%),
    rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px) saturate(1.1);
}

.modal-cashier .trust-icon.trust-icon{
  font-size: 0 !important; /* hide letter */
  border-radius: 12px !important;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,196,46,.18),
    0 10px 20px rgba(0,0,0,.22) !important;
}
.modal-cashier .trust-icon.trust-icon::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: rgba(255,246,220,.98);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.modal-cashier .trust-item:nth-child(1) .trust-icon.trust-icon::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 4v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 4v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");
}
.modal-cashier .trust-item:nth-child(2) .trust-icon.trust-icon::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
}
.modal-cashier .trust-item:nth-child(3) .trust-icon.trust-icon::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm14 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM5 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm14 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM12 7v10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm14 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM5 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm14 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM12 7v10'/%3E%3C/svg%3E");
}

/* Small-screen: keep it calm without growing the scroll too much */
@media only screen and (max-width: 720px){
  .modal-cashier .cashier-body{padding: 18px 16px 18px !important;}
  .modal-cashier .cashier-flow{padding: 16px !important;}
  .modal-cashier .flow-stack{gap: 14px !important;}
}