/* Fly Air payment dashboard styles. Brand colors: #ff7a00 (orange), #3264ff, #023a8b (navy), #0082fc. */
.vpx-page,.vpx{--o:#ff7a00;--o2:#e66d00;--b:#3264ff;--n:#023a8b;--s:#0082fc;--ink:#0f1b3d;--mut:#64708a;--line:#e4e9f5}
.vpx-page{background:#eef2fb;-webkit-text-size-adjust:100%}
.vpx-page.vpx-lock{overflow:hidden}
.vpx,.vpx *{box-sizing:border-box}
.vpx{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.5;font-size:15px}
.vpx h1,.vpx h2,.vpx h3,.vpx p{margin:0}

/* ---------- Auth ---------- */
.vpx-auth-wrap{min-height:90vh;min-height:90dvh;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.vpx-auth{width:100%;max-width:440px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(2,58,139,.22);overflow:hidden}
.vpx-auth-head{background:linear-gradient(135deg,var(--n) 0%,var(--b) 65%,var(--s) 100%);color:#fff;padding:34px 28px;text-align:center;position:relative}
.vpx-auth-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--o)}
.vpx-logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.vpx-logo-img{max-height:56px;max-width:220px;width:auto;margin-bottom:12px;background:#fff;border-radius:10px;padding:6px 10px}
.vpx-auth-head h2{font-size:24px;font-weight:700;color:#fff}
.vpx-auth-head p{opacity:.9;margin-top:4px;font-size:14px;color:#fff}
.vpx-auth-body{padding:28px}
.vpx-field{margin-bottom:16px;position:relative;min-width:0}
.vpx-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#2c3a5e}
.vpx .vpx-field input,.vpx .vpx-field select{width:100%;height:46px;padding:0 14px;border:1.5px solid #cfd8ec;border-radius:10px;background:#fff;font-size:16px;color:var(--ink);box-shadow:none;outline:none;transition:.15s;margin:0;max-width:100%}
.vpx .vpx-field input:focus,.vpx .vpx-field select:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(50,100,255,.18)}
.vpx .vpx-field input[type=file]{height:auto;padding:10px;border-style:dashed;background:#f8faff;font-size:13px}
.vpx-eye{position:absolute;right:12px;top:35px;background:none!important;border:0!important;color:var(--b)!important;font-size:13px;font-weight:600;cursor:pointer;padding:0!important}
.vpx .vpx-btn,.vpx .vpx-btn:hover,.vpx .vpx-btn:focus{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--o);color:#fff!important;border:0;border-radius:10px;padding:0 22px;height:46px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;box-shadow:none;white-space:nowrap;font-family:inherit}
.vpx .vpx-btn:hover{background:var(--o2)}
.vpx .vpx-btn.block{width:100%}
.vpx .vpx-btn.sm,.vpx .vpx-btn.sm:hover{height:40px;padding:0 16px;font-size:14px;border-radius:9px}
.vpx .vpx-btn.blue,.vpx .vpx-btn.blue:hover{background:var(--b)}
.vpx .vpx-btn.blue:hover{background:var(--n)}
.vpx .vpx-btn.ghost,.vpx .vpx-btn.ghost:hover{background:#eaf0ff;color:var(--b)!important}
.vpx .vpx-btn.outline,.vpx .vpx-btn.outline:hover{background:#fff;color:var(--n)!important;border:1.5px solid #cfd8ec}
.vpx .vpx-btn.outline:hover{background:#f3f6ff;border-color:var(--b)}
.vpx .vpx-btn.gray,.vpx .vpx-btn.gray:hover{background:#e7ebf5;color:#2c3a5e!important}
.vpx .vpx-btn.glass,.vpx .vpx-btn.glass:hover{background:rgba(255,255,255,.16);color:#fff!important;border:1px solid rgba(255,255,255,.4)}
.vpx .vpx-btn.glass:hover{background:rgba(255,255,255,.28)}
.vpx .vpx-btn svg{flex:none}
.vpx-n{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:500}
.vpx-ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.vpx-bad{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* ---------- Dashboard ---------- */
.vpx-dash{max-width:1400px;margin:0 auto;padding:24px 20px 60px}
.vpx-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,var(--n) 0%,var(--b) 62%,var(--s) 100%);color:#fff;padding:26px 30px;border-radius:20px;box-shadow:0 14px 34px rgba(2,58,139,.28);margin-bottom:24px;position:relative;overflow:hidden;border-bottom:5px solid var(--o)}
.vpx-hero:after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.vpx-user{display:flex;align-items:center;gap:16px;position:relative;z-index:1;min-width:0}
.vpx-avatar{width:56px;height:56px;border-radius:50%;background:var(--o);border:2px solid rgba(255,255,255,.7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;flex:none}
.vpx-user small{display:block;opacity:.85;font-size:13px}
.vpx-user h2{font-size:22px;font-weight:700;color:#fff;line-height:1.2;word-break:break-word}
.vpx-user .role{display:inline-block;margin-top:6px;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:700;padding:2px 12px;border-radius:99px;text-transform:uppercase;letter-spacing:.6px}
.vpx-hero-act{display:flex;gap:10px;position:relative;z-index:1;flex-wrap:wrap}
.vpx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:24px}
.vpx-stat{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 12px rgba(2,58,139,.07);display:flex;align-items:center;gap:16px;border-left:4px solid var(--b)}
.vpx-stat .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:#eaf0ff;flex:none}
.vpx-stat.g{border-color:#16a34a}.vpx-stat.y{border-color:var(--o)}.vpx-stat.r{border-color:#dc2626}
.vpx-stat.g .ic{background:#dcfce7}.vpx-stat.y .ic{background:#fff0e0}.vpx-stat.r .ic{background:#fee2e2}
.vpx-stat small{display:block;color:var(--mut);font-size:13px;font-weight:600}
.vpx-stat b{display:block;font-size:26px;color:var(--ink);line-height:1.2;margin-top:2px;word-break:break-word}
.vpx-card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(2,58,139,.07);margin-bottom:24px;overflow:hidden}
.vpx-card-h{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);gap:14px;flex-wrap:wrap}
.vpx-card-h h3{font-size:19px;font-weight:700;color:var(--ink)}
.vpx-card-h h3 span{font-size:12px;font-weight:700;background:#eaf0ff;color:var(--b);padding:2px 10px;border-radius:99px;margin-left:8px;vertical-align:middle}
.vpx-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vpx-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vpx-tbl table{width:100%;border-collapse:collapse;font-size:14px;margin:0;border:0}
.vpx-tbl th{background:#f5f8ff;color:var(--mut);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:14px 12px;text-align:left;white-space:nowrap;border:0;border-bottom:1px solid var(--line)}
.vpx-tbl td{padding:14px 12px;border:0;border-bottom:1px solid #eef1f8;white-space:nowrap;vertical-align:middle;background:#fff}
.vpx-tbl tr:last-child td{border-bottom:0}
.vpx-tbl tr:hover td{background:#f8faff}
.vpx-tbl .amt{font-weight:700;color:var(--ink)}
.vpx-tbl .cn{font-weight:600;color:var(--ink)}
.vpx-pill{display:inline-block;background:#f1f4fb;color:#2c3a5e;border-radius:8px;padding:3px 10px;font-size:13px;font-weight:600}
.vpx-tbl td.act{position:sticky;right:0;box-shadow:-8px 0 10px -8px rgba(0,0,0,.12)}
.vpx-tbl th.act{position:sticky;right:0}
.vpx-badge{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700}
.vpx-b-success{background:#dcfce7;color:#166534}.vpx-b-pending{background:#fff0e0;color:#b45309}
.vpx-b-failed{background:#fee2e2;color:#991b1b}.vpx-b-refunded{background:#dbeafe;color:#1e40af}
.vpx-link{color:var(--b);font-weight:600;text-decoration:none;background:#eaf0ff;padding:4px 12px;border-radius:8px;font-size:13px;display:inline-block}
.vpx-empty{text-align:center;padding:50px 10px!important;color:var(--mut)}
.vpx-acts{display:inline-flex;gap:8px}
.vpx .vpx-ic,.vpx .vpx-ic:hover{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;transition:.15s;padding:0}
.vpx .vpx-ic.edit{background:#eaf0ff;color:var(--b)!important}
.vpx .vpx-ic.edit:hover{background:var(--b);color:#fff!important}
.vpx .vpx-ic.del{background:#fee2e2;color:#dc2626!important}
.vpx .vpx-ic.del:hover{background:#dc2626;color:#fff!important}

/* ---------- Filter panel ---------- */
.vpx-fpanel{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(2,58,139,.07);padding:18px 22px;margin:0 0 24px}
.vpx-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.vpx-chips b{font-size:13px;color:#2c3a5e;margin-right:4px}
.vpx .vpx-chip,.vpx .vpx-chip:visited{display:inline-block;padding:6px 14px;border:1.5px solid #cfd8ec;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--n)!important;text-decoration:none;background:#fff;transition:.15s}
.vpx .vpx-chip:hover{border-color:var(--b);background:#f3f6ff}
.vpx .vpx-chip.on,.vpx .vpx-chip.on:hover{background:var(--b);border-color:var(--b);color:#fff!important}
.vpx-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}
.vpx-fgrid>div{min-width:0}
.vpx-fgrid .wide{grid-column:span 2}
.vpx-fgrid label{display:block;font-size:12.5px;font-weight:700;color:#2c3a5e;margin-bottom:5px}
.vpx .vpx-fgrid input,.vpx .vpx-fgrid select{width:100%;height:42px;padding:0 12px;border:1.5px solid #cfd8ec;border-radius:10px;background:#fff;font-size:14px;color:var(--ink);outline:none;box-shadow:none;margin:0;max-width:100%}
.vpx .vpx-fgrid input:focus,.vpx .vpx-fgrid select:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(50,100,255,.18)}
.vpx-fact{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
@media(max-width:820px){.vpx-fpanel{padding:16px}.vpx-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vpx-fgrid .wide{grid-column:1/-1}.vpx .vpx-fgrid input,.vpx .vpx-fgrid select{font-size:16px}.vpx-fact .vpx-btn{flex:1}}

/* ---------- Modal ---------- */
.vpx-modal{position:fixed;inset:0;background:rgba(2,20,60,.62);display:none;align-items:center;justify-content:center;z-index:100000;padding:16px;backdrop-filter:blur(3px)}
.vpx-modal.open{display:flex}
.vpx-dialog{background:#fff;border-radius:18px;width:100%;max-width:780px;max-height:92vh;max-height:92dvh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35);-webkit-overflow-scrolling:touch}
.vpx-dialog.narrow{max-width:560px}
.vpx-dialog-h{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2;border-top:4px solid var(--o)}
.vpx-dialog-h h3{font-size:20px;font-weight:700;color:var(--ink)}
.vpx .vpx-x,.vpx .vpx-x:hover{background:#eef2fb;border:0;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:#42506f;padding:0}
.vpx-dialog-b{padding:24px 26px 8px}
.vpx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.vpx-dialog-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 26px 24px}
.vpx-hint{font-size:12px;color:var(--mut);margin-top:5px}
.vpx-hint a{color:var(--b);font-weight:600}
.vpx-steps{margin:0 0 16px;padding-left:18px;font-size:13.5px;color:#2c3a5e}
.vpx-steps li{margin-bottom:4px}
.vpx-steps code{background:#eef2fb;border-radius:5px;padding:1px 6px;font-size:12px;word-break:break-word}

/* ---------- Tablet ---------- */
@media(max-width:1024px){.vpx-dash{padding:18px 16px 50px}.vpx-hero{padding:22px}}

/* ---------- Mobile: table becomes cards ---------- */
@media(max-width:820px){
.vpx-card-h{padding:16px}
.vpx-card-h>*{width:100%}
.vpx-tools{width:100%}
.vpx-tools .vpx-btn{flex:1 1 calc(50% - 10px)}
.vpx-tbl{overflow:visible;padding:14px;background:#f3f6fd}
.vpx-tbl table,.vpx-tbl tbody,.vpx-tbl tr,.vpx-tbl td{display:block;width:100%}
.vpx-tbl thead{display:none}
.vpx-tbl tr{border:1px solid var(--line);border-radius:14px;margin:0 0 14px;padding:6px 14px;background:#fff;box-shadow:0 2px 8px rgba(2,58,139,.06)}
.vpx-tbl tr:last-child{margin-bottom:0}
.vpx-tbl td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px dashed #e6ebf6;white-space:normal;text-align:right;background:transparent!important}
.vpx-tbl td:last-child{border-bottom:0}
.vpx-tbl td:before{content:attr(data-label);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);text-align:left;flex:none}
.vpx-tbl td.act{position:static;box-shadow:none;justify-content:flex-end}
.vpx-tbl td.act:before{display:none}
.vpx-tbl td.vpx-empty:before{display:none}
.vpx-tbl td.vpx-empty{justify-content:center}
}

/* ---------- Phone ---------- */
@media(max-width:640px){
.vpx-dash{padding:12px 12px 40px}
.vpx-hero{padding:18px;border-radius:16px}
.vpx-hero-act{width:100%}
.vpx-hero-act .vpx-btn{flex:1 1 calc(50% - 10px)}
.vpx-user h2{font-size:19px}
.vpx-avatar{width:48px;height:48px;font-size:19px}
.vpx-stats{grid-template-columns:1fr 1fr;gap:12px}
.vpx-stat{padding:14px;gap:10px;flex-direction:column;align-items:flex-start}
.vpx-stat .ic{width:42px;height:42px;font-size:20px}
.vpx-stat b{font-size:21px}
.vpx-grid{grid-template-columns:1fr}
.vpx-modal{padding:0;align-items:flex-end}
.vpx-dialog{max-height:94vh;max-height:94dvh;border-radius:18px 18px 0 0}
.vpx-dialog-b,.vpx-dialog-h,.vpx-dialog-f{padding-left:18px;padding-right:18px}
.vpx-dialog-f{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.vpx-dialog-f .vpx-btn{flex:1}
.vpx-auth-body{padding:22px 18px}
}
@media(max-width:380px){.vpx-stats{grid-template-columns:1fr}}

/* ---------- Standalone app additions ---------- */
body.vpx{margin:0;min-height:100vh}
.vpx button,.vpx input,.vpx select{font-family:inherit}
.vpx a{color:var(--b)}
.vpx code{background:#eef2fb;border-radius:5px;padding:1px 6px;font-size:12px;word-break:break-word}
.vpx-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.vpx-card-b{padding:22px}
.vpx-alt{text-align:center;margin-top:20px;font-size:14px;color:var(--mut)}
.vpx-alt a{color:var(--b);font-weight:600;text-decoration:none}
.vpx-inline{display:inline;margin:0}
.vpx-topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(2,58,139,.05)}
.vpx-topbar-in{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vpx-brand{display:flex;align-items:center;text-decoration:none;font-weight:800;font-size:19px;color:var(--n)!important}
.vpx-brand img{max-height:40px;width:auto}
.vpx-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.vpx .vpx-nav a,.vpx .vpx-linkbtn{padding:8px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--n);text-decoration:none;background:none;border:0;cursor:pointer;display:inline-block}
.vpx .vpx-nav a:hover,.vpx .vpx-linkbtn:hover{background:#eaf0ff}
.vpx .vpx-nav a.on{background:var(--n);color:#fff}
.vpx-badge-n{background:var(--o);color:#fff;border-radius:99px;padding:0 7px;font-size:11px;margin-left:6px;font-weight:700}
.vpx-s-active{background:#dcfce7;color:#166534}.vpx-s-pending{background:#fff0e0;color:#b45309}.vpx-s-disabled{background:#e7ebf5;color:#42506f}
.vpx-acts.wrap{flex-wrap:wrap;justify-content:flex-end}
.vpx button.vpx-ic{font-family:inherit}
@media(max-width:640px){.vpx-topbar-in{padding:8px 12px}.vpx-brand{font-size:17px}.vpx .vpx-nav a,.vpx .vpx-linkbtn{padding:7px 10px;font-size:13px}.vpx-acts.wrap{justify-content:flex-start}}
@media(max-width:820px){.vpx-acts.wrap{justify-content:flex-end}}
.vpx-role-admin{background:#e0e9ff;color:#023a8b}.vpx-role-agent{background:#eef1f7;color:#42506f}
.vpx-brand img{max-height:46px}
.vpx .vpx-field textarea{box-sizing:border-box;display:block;width:100%;min-height:92px;padding:12px 14px;border:1.5px solid #cfd8ec;border-radius:10px;background:#fff;font-size:16px;font-family:inherit;color:var(--ink);box-shadow:none;outline:none;transition:.15s;margin:0;max-width:100%;resize:vertical;line-height:1.45}
.vpx .vpx-field textarea:focus{border-color:var(--b);box-shadow:0 0 0 3px rgba(50,100,255,.18)}
.vpx-grid .vpx-full{grid-column:1/-1}
.vpx-tbl td.vpx-clip{max-width:220px;white-space:normal;word-break:break-word;font-size:13px;color:#42506f}