/* ai-payment-verifier - final polished Razorpay-like UI (mobile-first) */

/* Theme */
:root{
  --aipv-primary:#2158E4;
  --aipv-primary-600:#1a4ec9;
  --aipv-muted:#586070;
  --aipv-border:rgba(33,88,228,0.09);
  --aipv-soft:#f6f8ff;
  --aipv-success:#0f9d58;
  --aipv-danger:#e53935;
}

/* Center wrapper */
.aipv-wrapper {
  display:block;
  width:100%;
  max-width:560px;
  margin:28px auto;
  padding:12px;
  box-sizing:border-box;
}

/* Outer card */
.aipv-card{
  width:100%;
  background:linear-gradient(180deg,#ffffff,#fcfdff);
  border-radius:14px;
  padding:16px;
  border:1px solid rgba(10,18,34,0.04);
  box-shadow:0 12px 36px rgba(16,24,40,0.06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#071128;
  box-sizing:border-box;
}

/* inner section */
.aipv-section {
  background:#fff;
  border-radius:12px;
  padding:14px;
  border:1px solid var(--aipv-border);
  box-shadow:0 6px 18px rgba(10,18,34,0.03);
}

/* header */
.aipv-title{ font-size:16px; font-weight:600; margin:0 0 8px; color:#08112a; }
.aipv-sub { font-size:13px; color:var(--aipv-muted); margin:0 0 12px; }

/* rows and inputs */
.aipv-row{ margin-bottom:12px; }
.aipv-label{ display:block; font-size:13px; color:var(--aipv-muted); margin-bottom:8px; }
.aipv-input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(10,18,34,0.06);
  background:#fff; font-size:15px; outline:none; box-shadow: inset 0 6px 18px rgba(33,88,228,0.02);
  transition: box-shadow .12s, border-color .12s, transform .08s;
}
.aipv-input:focus{ border-color:var(--aipv-primary); box-shadow:0 10px 28px rgba(33,88,228,0.07); transform:translateY(-1px); }

/* file card */
.aipv-file-card{
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  padding:14px; border-radius:12px; border:1px dashed var(--aipv-border);
  background: linear-gradient(180deg,#fbfdff,#f7f9ff); cursor:pointer; text-align:center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.aipv-file-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(33,88,228,0.06); border-color: rgba(33,88,228,0.18); }
.aipv-file-card .big{ font-size:15px; font-weight:700; color:var(--aipv-primary); }
.aipv-file-card .small{ font-size:13px; color:var(--aipv-muted); }

/* hide native input */
input#aipv-image.aipv-fileinput, input#aipv-image { display:none !important; visibility:hidden !important; }

/* preview */
.aipv-preview{ display:flex; justify-content:center; align-items:center; position:relative; min-height:140px; margin-top:12px; }
.aipv-thumb{ width:160px; height:160px; border-radius:12px; overflow:hidden; background:var(--aipv-soft); display:flex; align-items:center; justify-content:center; position:relative; border:1px solid var(--aipv-border); box-shadow:0 12px 30px rgba(10,18,34,0.06); }
.aipv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* cancel */
.aipv-cancel{ position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,0.65); color:#fff; display:flex; align-items:center; justify-content:center; z-index:40; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,0.16); font-weight:700; }

/* scanning overlay */
.aipv-scan-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:30; pointer-events:none; }
.aipv-scan-bar{ position:absolute; left:-45%; width:45%; height:100%; transform:skewX(-12deg); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(33,88,228,0.12) 40%, rgba(33,88,228,0.22) 60%, rgba(255,255,255,0) 100%); border-radius:10px; animation:aipv-scan 900ms linear infinite; }
@keyframes aipv-scan{ 0%{ left:-55%; } 100%{ left:155%; } }

/* actions */
.aipv-actions{ margin-top:16px; display:flex; gap:12px; justify-content:center; align-items:center; }
.aipv-btn{ padding:12px 16px; border-radius:12px; font-weight:800; font-size:15px; color:#fff; border:none; cursor:pointer; min-width:160px; box-shadow:0 12px 34px rgba(33,88,228,0.12); transition:transform .12s, opacity .12s; }
.aipv-btn:active{ transform:translateY(1px); } .aipv-btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.aipv-verify{ background: linear-gradient(180deg,var(--aipv-primary),var(--aipv-primary-600)); }
.aipv-continue{ background: linear-gradient(180deg,#1f58e0,#164ab8); }

/* status */
.aipv-status{ margin-top:12px; min-height:18px; font-size:13px; color:var(--aipv-muted); text-align:center; }
.aipv-success{ display:inline-block; background:#eaf6ff; color:#05204a; padding:8px 10px; border-radius:10px; font-weight:700; }

/* mobile */
@media (max-width:768px){
  .aipv-wrapper{ padding-left:12px; padding-right:12px; }
  .aipv-thumb{ width:170px; height:170px; }
  .aipv-actions{ flex-direction:column; gap:14px; padding:0 6px; }
  .aipv-btn{ width:100%; box-sizing:border-box; font-size:16px; padding:14px; }
}

/* focus outlines */
.aipv-file-card:focus, .aipv-btn:focus, .aipv-cancel:focus{ outline:3px solid rgba(33,88,228,0.12); outline-offset:2px; }