/* SLTC Pay Online — public stylesheet (responsive + accessible) */
.sltc-pay-page{background:linear-gradient(135deg,#f0f5ff 0%,#f8fafc 100%);padding:60px 16px;min-height:60vh;display:flex;justify-content:center;align-items:flex-start;width:100%;box-sizing:border-box}
.sltc-pay-wrap{max-width:780px;margin:0 auto !important;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(15,40,90,.08);overflow:hidden;width:100%;box-sizing:border-box}
.sltc-pay-head{background:linear-gradient(135deg,#0d3c8a,#1768d6);color:#fff;padding:36px 40px;text-align:center}
.sltc-pay-head h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.5px;color:#fff}
.sltc-pay-head .sltc-pay-sub{margin:8px 0 0;color:#fff;opacity:1;font-size:15px}
.sltc-pay-steps{list-style:none;display:flex;gap:8px;margin:28px 0 0;padding:0;font-size:13px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:center}
.sltc-pay-steps::-webkit-scrollbar{display:none}
.sltc-pay-steps li{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.18);border-radius:999px;color:#fff;white-space:nowrap;flex:0 0 auto}
.sltc-pay-steps li .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);font-weight:700;font-size:11px;color:#fff}
.sltc-pay-steps li.on{background:#fff;color:#0d3c8a;font-weight:700}
.sltc-pay-steps li.on .n{background:#0d3c8a;color:#fff}
.sltc-pay-steps li.done{background:rgba(255,255,255,.35);color:#fff}
.sltc-pay-body{padding:36px 40px}
.sltc-pay-body .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sltc-pay-body .field.full{grid-column:1/-1}
.sltc-pay-body label{display:block;font-weight:600;font-size:13px;color:#1a2236;margin-bottom:6px}
.sltc-pay-body label .req{color:#d6204c}
.sltc-pay-body label .muted{font-weight:400;color:#6b7790}
.sltc-pay-body input,.sltc-pay-body select,.sltc-pay-body textarea{width:100%;padding:12px 14px;border:1.5px solid #d8dee9;border-radius:10px;font-size:15px;background:#fff;color:#1a2236;transition:.2s;font-family:inherit;box-sizing:border-box;max-width:100%}
.sltc-pay-body input:focus,.sltc-pay-body select:focus,.sltc-pay-body textarea:focus{outline:0;border-color:#1768d6;box-shadow:0 0 0 3px rgba(23,104,214,.15)}
.sltc-pay-body .field{margin-bottom:6px;min-width:0}
.sltc-pay-amount{position:relative}
.sltc-pay-amount::before{content:"LKR";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6b7790;font-weight:700;font-size:13px;pointer-events:none}
.sltc-pay-amount input{padding-left:54px;font-weight:700;font-size:18px}
.sltc-pay-actions{display:flex;justify-content:flex-end;margin-top:24px;gap:12px;flex-wrap:wrap}
.sltc-pay-actions.split{justify-content:space-between;align-items:center}
.sltc-pay-btn{background:linear-gradient(135deg,#1768d6,#0d3c8a);color:#fff;border:0;padding:14px 28px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;min-height:48px;box-sizing:border-box;text-align:center}
.sltc-pay-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,104,214,.3);color:#fff}
.sltc-pay-btn.alt{background:#eef2f7;color:#1a2236}
.sltc-pay-btn.alt:hover{color:#0d3c8a}
.sltc-pay-errors{background:#fdecef;border:1px solid #f5b5c1;color:#a8163a;padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:14px}
.sltc-pay-errors ul{margin:6px 0 0 18px;padding:0}
.sltc-pay-error{background:#fdecef;border:1px solid #f5b5c1;color:#a8163a;padding:14px 18px;border-radius:10px;font-size:14px;max-width:780px;margin:60px auto}
.note,.sltc-pay-body .note{font-size:12px;color:#6b7790;margin:6px 0 0}
.sltc-pay-secure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:18px;color:#6b7790;font-size:12px;text-align:center;flex-wrap:wrap}
/* Summary */
.sltc-sum{margin:0;padding:0}
.sltc-sum>div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #eef2f7;font-size:15px;align-items:flex-start}
.sltc-sum dt{margin:0;color:#6b7790;font-weight:400;flex:0 0 auto}
.sltc-sum dd{margin:0;font-weight:600;color:#1a2236;text-align:right;min-width:0;word-break:break-word;overflow-wrap:anywhere}
.sltc-sum dd.break{word-break:break-all}
.sltc-sum-total{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:20px 24px;background:linear-gradient(135deg,#f0f5ff,#e6efff);border-radius:12px;border:1px solid #cfdcf5;gap:12px;flex-wrap:wrap}
.sltc-sum-total .lbl{color:#1a2236;font-weight:600;font-size:15px}
.sltc-sum-total strong{font-size:26px;font-weight:800;color:#0d3c8a;line-height:1;display:inline-flex;align-items:baseline;gap:8px}
.sltc-sum-total strong .cur{font-size:15px;color:#6b7790;font-weight:700}
/* Receipt */
.sltc-rc-wrap{max-width:780px;margin:0 auto;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(15,40,90,.08);overflow:hidden}
.sltc-rc-head{padding:40px;text-align:center;color:#fff}
.sltc-rc-head.ok{background:linear-gradient(135deg,#0a8a3a,#1ea861)}
.sltc-rc-head.fail{background:linear-gradient(135deg,#a8163a,#d6204c)}
.sltc-rc-ico{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 14px}
.sltc-rc-head h1{margin:0;font-size:28px;font-weight:800;color:#fff}
.sltc-rc-head p{margin:6px 0 0;color:#fff;opacity:.95}
.sltc-rc-body{padding:36px 40px}
.sltc-rc-rows{margin:0;padding:0}
.sltc-rc-rows>div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #eef2f7;font-size:15px;align-items:flex-start}
.sltc-rc-rows dt{margin:0;color:#6b7790;flex:0 0 auto}
.sltc-rc-rows dd{margin:0;font-weight:600;color:#1a2236;text-align:right;word-break:break-word;overflow-wrap:anywhere;min-width:0}
.sltc-rc-rows .status.paid{color:#0a8a3a}
.sltc-rc-rows .status.failed,.sltc-rc-rows .status.cancelled{color:#a8163a}
.sltc-rc-total{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:20px 24px;background:#f0f5ff;border-radius:12px;gap:12px;flex-wrap:wrap}
.sltc-rc-total strong{font-size:24px;font-weight:800;color:#0d3c8a}
.sltc-rc-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}
/* Mobile */
@media (max-width:640px){
    .sltc-pay-page{padding:24px 12px}
    .sltc-pay-wrap,.sltc-rc-wrap{border-radius:14px}
    .sltc-pay-head{padding:22px 20px}
    .sltc-pay-head h1{font-size:22px}
    .sltc-pay-head .sltc-pay-sub{font-size:13.5px}
    .sltc-pay-body{padding:22px 20px}
    .sltc-pay-body .grid{grid-template-columns:1fr;gap:14px}
    .sltc-pay-steps li .t{display:none}
    .sltc-pay-steps li{padding:6px 10px}
    .sltc-rc-head,.sltc-rc-body{padding:22px 18px}
    .sltc-rc-head h1{font-size:22px}
    .sltc-pay-actions,.sltc-pay-actions.split{flex-direction:column-reverse;align-items:stretch;gap:10px}
    .sltc-pay-actions .sltc-pay-btn{width:100%;padding:14px 18px;font-size:15px}
    .sltc-sum>div,.sltc-rc-rows>div{flex-direction:column;gap:4px;align-items:flex-start}
    .sltc-sum dd,.sltc-rc-rows dd{text-align:left;font-size:15px}
    .sltc-sum-total{flex-direction:column;align-items:flex-start;padding:18px 20px}
    .sltc-sum-total strong{font-size:24px}
    .sltc-rc-total{flex-direction:column;align-items:flex-start}
    .sltc-rc-actions{flex-direction:column}
    .sltc-rc-actions .sltc-pay-btn{width:100%}
}

/* ===== Invoice (printable) ===== */
.sltc-invoice-body { font-family: 'Inter', system-ui, -apple-system, sans-serif; margin: 0; padding: 40px 16px; color: #1e293b; background: #f8fafc; }
.sltc-invoice { max-width: 800px; margin: 0 auto; background: #fff; padding: 48px; border-radius: 16px; box-shadow: 0 4px 24px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.04); position: relative; }

.sltc-inv-banner { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid #e2e8f0; }
.sltc-inv-brand img { max-height: 54px; max-width: 220px; display: block; }
.sltc-inv-brand-fallback { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
.sltc-inv-title { text-align: right; }
.sltc-inv-title .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.sltc-inv-title .ref { font-size: 15px; font-weight: 500; color: #0f172a; font-family: ui-monospace, monospace; }

.sltc-inv-amount-block { background: #f8fafc; border-radius: 12px; padding: 24px 32px; margin-bottom: 40px; border: 1px solid #f1f5f9; }
.sltc-inv-amount-block .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; color: #475569; }
.sltc-inv-amount-block .row .v strong { color: #0f172a; font-weight: 600; }
.sltc-inv-amount-block .row.total { margin-top: 12px; padding-top: 20px; border-top: 1px solid #e2e8f0; font-size: 16px; color: #0f172a; font-weight: 500; }
.sltc-inv-amount-block .row.total .v strong { font-size: 32px; font-weight: 800; letter-spacing: -1px; }

.sltc-inv-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 32px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #e2e8f0; }
.sltc-inv-detail:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 24px; }
.sltc-inv-detail .row { display: flex; flex-direction: column; gap: 6px; }
.sltc-inv-detail .row .k { color: #64748b; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.sltc-inv-detail .row .v { color: #0f172a; font-size: 15px; font-weight: 500; word-break: break-word; }
.sltc-inv-detail .row .v.mono { font-family: ui-monospace, monospace; font-size: 14px; }

.status-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.status-pill.paid { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.status-pill.failed, .status-pill.cancelled { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.status-pill.pending { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

.paid-stamp { position: absolute; top: 48px; right: 48px; border: 3px solid #10b981; color: #10b981; padding: 6px 20px; border-radius: 8px; font-weight: 800; letter-spacing: 2px; transform: rotate(-8deg); font-size: 20px; background: rgba(255,255,255,0.9); pointer-events: none; opacity: 0.9; }

.sltc-inv-foot { padding-top: 32px; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-size: 13px; color: #64748b; line-height: 1.6; }
.sltc-inv-foot .biz { flex: 1; min-width: 240px; }
.sltc-inv-foot .biz strong { color: #0f172a; font-size: 14px; display: block; margin-bottom: 4px; }
.sltc-inv-foot .note { flex: 1; min-width: 240px; text-align: right; font-style: italic; }

.sltc-invoice-actions { max-width: 800px; margin: 0 auto 24px; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 0; }
.sltc-invoice-actions button { background: #0f172a; color: #fff; border: 0; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; transition: 0.2s; }
.sltc-invoice-actions button:hover { background: #1e293b; transform: translateY(-1px); }
.sltc-invoice-actions a { background: #fff; color: #0f172a; padding: 10px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 14px; border: 1px solid #cbd5e1; transition: 0.2s; }
.sltc-invoice-actions a:hover { background: #f8fafc; border-color: #94a3b8; }

@media (max-width: 640px) {
    .sltc-invoice { padding: 32px 24px; }
    .sltc-inv-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .sltc-inv-title { text-align: left; }
    .paid-stamp { top: 24px; right: 24px; font-size: 14px; padding: 4px 12px; border-width: 2px; }
    .sltc-inv-amount-block { padding: 20px; }
    .sltc-inv-amount-block .row.total .v strong { font-size: 28px; }
    .sltc-inv-foot { flex-direction: column; gap: 24px; }
    .sltc-inv-foot .note { text-align: left; }
}
@media print {
    .sltc-invoice-body { background: #fff; padding: 0; }
    .sltc-invoice { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
    .sltc-inv-amount-block { border: 1px solid #cbd5e1; }
    .no-print { display: none; }
}