/* widget/payment-widget.css */
/* Crypto Payment Widget — drop-in styles */

:root {
  --cp-bg:         #0f0e17;
  --cp-card:       #1a1a2e;
  --cp-border:     #2a2a4a;
  --cp-accent:     #f7931a;
  --cp-green:      #26de81;
  --cp-red:        #fc5c65;
  --cp-blue:       #45aaf2;
  --cp-text:       #e0e0f0;
  --cp-muted:      #8888aa;
  --cp-radius:     14px;
  --cp-shadow:     0 8px 32px rgba(0,0,0,0.5);
}

/* Modal overlay */
#cp-overlay {
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
  z-index:9998;
  align-items:center;
  justify-content:center;
  padding:16px;
}
#cp-overlay.active { display:flex; }

/* Widget card */
#cp-widget {
  background:var(--cp-card);
  border:1px solid var(--cp-border);
  border-radius:var(--cp-radius);
  box-shadow:var(--cp-shadow);
  width:100%;max-width:460px;
  font-family:'Segoe UI',system-ui,sans-serif;
  color:var(--cp-text);
  overflow:hidden;
  animation:cpSlideIn .25s ease;
}
@keyframes cpSlideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Header */
.cp-header {
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--cp-border);
}
.cp-header h2{margin:0;font-size:17px;font-weight:700;color:#fff}
.cp-header h2 span{color:var(--cp-accent)}
.cp-close{background:none;border:none;color:var(--cp-muted);font-size:22px;cursor:pointer;padding:0;line-height:1}
.cp-close:hover{color:#fff}

/* Tabs */
.cp-tabs{display:flex;border-bottom:1px solid var(--cp-border)}
.cp-tab{flex:1;padding:12px;background:none;border:none;color:var(--cp-muted);font-size:14px;cursor:pointer;transition:.2s}
.cp-tab.active{color:var(--cp-accent);border-bottom:2px solid var(--cp-accent);margin-bottom:-1px}
.cp-tab-panel{display:none;padding:20px}
.cp-tab-panel.active{display:block}

/* Form fields */
.cp-field{margin-bottom:14px}
.cp-field label{display:block;font-size:13px;color:var(--cp-muted);margin-bottom:6px}
.cp-field input,.cp-field select{
  width:100%;box-sizing:border-box;
  background:#0f0e17;border:1px solid var(--cp-border);
  border-radius:8px;padding:10px 13px;
  color:var(--cp-text);font-size:15px;outline:none;
  transition:border .2s;
}
.cp-field input:focus,.cp-field select:focus{border-color:var(--cp-accent)}
.cp-field select option{background:#1a1a2e}

/* Buttons */
.cp-btn{
  width:100%;padding:13px;border:none;border-radius:10px;
  font-size:15px;font-weight:700;cursor:pointer;transition:.2s;
}
.cp-btn-primary{background:var(--cp-accent);color:#000}
.cp-btn-primary:hover{background:#ffa433}
.cp-btn-primary:disabled{background:#555;color:#888;cursor:not-allowed}
.cp-btn-ghost{background:transparent;border:1px solid var(--cp-border);color:var(--cp-muted);margin-top:8px}
.cp-btn-ghost:hover{border-color:var(--cp-text);color:var(--cp-text)}

/* Messages */
.cp-msg{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none}
.cp-msg.show{display:block}
.cp-msg.error{background:rgba(252,92,101,.15);border:1px solid var(--cp-red);color:var(--cp-red)}
.cp-msg.success{background:rgba(38,222,129,.12);border:1px solid var(--cp-green);color:var(--cp-green)}
.cp-msg.info{background:rgba(69,170,242,.12);border:1px solid var(--cp-blue);color:var(--cp-blue)}

/* QR panel */
.cp-qr-panel{text-align:center}
.cp-qr-wrap{
  background:#fff;border-radius:12px;
  display:inline-flex;padding:10px;margin:12px 0;
}
.cp-qr-wrap img{width:200px;height:200px;display:block}

.cp-amount-badge{
  background:#0f0e17;border:1px solid var(--cp-accent);
  border-radius:8px;padding:12px;margin:12px 0;text-align:center;
}
.cp-amount-badge .cp-big{font-size:22px;font-weight:700;color:#fff}
.cp-amount-badge .cp-small{font-size:12px;color:var(--cp-muted);margin-top:4px}

.cp-address-box{
  background:#0f0e17;border:1px solid var(--cp-border);
  border-radius:8px;padding:10px 13px;
  font-size:12px;word-break:break-all;color:var(--cp-muted);
  position:relative;cursor:pointer;
}
.cp-address-box:hover{border-color:var(--cp-blue)}
.cp-copy-hint{font-size:11px;color:var(--cp-blue);margin-top:4px}

/* Status bar */
.cp-status{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 13px;border-radius:8px;font-size:13px}
.cp-status.pending{background:rgba(69,170,242,.1);border:1px solid var(--cp-blue);color:var(--cp-blue)}
.cp-status.confirmed{background:rgba(38,222,129,.12);border:1px solid var(--cp-green);color:var(--cp-green)}
.cp-status.expired{background:rgba(252,92,101,.12);border:1px solid var(--cp-red);color:var(--cp-red)}

.cp-spinner{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:cpspin .8s linear infinite;flex-shrink:0}
@keyframes cpspin{to{transform:rotate(360deg)}}

/* Timer */
.cp-timer{text-align:center;font-size:13px;color:var(--cp-muted);margin-top:8px}
.cp-timer span{color:#fff;font-weight:600}

/* Balance display */
.cp-balance-grid{display:grid;gap:8px}
.cp-balance-row{
  display:flex;justify-content:space-between;align-items:center;
  background:#0f0e17;border:1px solid var(--cp-border);
  border-radius:8px;padding:10px 14px;
}
.cp-balance-row .cp-coin{font-size:13px;color:var(--cp-muted)}
.cp-balance-row .cp-val{font-size:15px;font-weight:700;color:#fff}

/* Divider */
.cp-divider{text-align:center;position:relative;margin:14px 0}
.cp-divider::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--cp-border)}
.cp-divider span{background:var(--cp-card);position:relative;padding:0 10px;font-size:12px;color:var(--cp-muted)}

/* Coin selector icons */
.cp-coin-option{display:flex;align-items:center;gap:6px}

/* Responsive */
@media(max-width:480px){
  #cp-widget{border-radius:12px 12px 0 0}
  #cp-overlay{align-items:flex-end;padding:0}
}