/* Tahseeel payment pages — redesign
   Design system: Schibsted Grotesk, coral accent, navy secondary, high contrast.
   Mobile-first; tablet/desktop center the same single-column card (checkout-page pattern). */

:root{
  --tp-bg:#F3F4F6;
  --tp-card:#fff;
  --tp-text:#212B38;
  --tp-text-2:#3B4552;
  --tp-text-3:#5B6470;
  --tp-text-4:#8A93A0;
  --tp-border:#E4E6EA;
  --tp-divider:#F0F1F3;
  --tp-divider-2:#F7F8F9;
  --tp-acc:#F0536B;
  --tp-acc-rgb:240,83,107;
  --tp-green:#0FA972;
  --tp-green-rgb:15,169,114;
  --tp-orange:#E07C00;
  --tp-orange-rgb:224,124,0;
  --tp-navy:#2A3747;
  --tp-rad-card:20px;
  --tp-rad:16px;
  --tp-rad-sm:14px;
  --tp-rad-pill:999px;
  --tp-shadow-card:0 1px 2px rgba(33,43,56,.05);
}

.tp *{box-sizing:border-box}
html, body{background:var(--tp-bg)}
.tp{
  font-family:'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color:var(--tp-text);
  background:var(--tp-bg);
  /* 100vh on mobile Safari is measured against the largest viewport (address bar
     collapsed), while the page first paints in the smaller one (address bar
     visible) - that mismatch is what makes the page scroll into blank space below
     the content. 100dvh (dynamic viewport height) tracks the *current* visible
     viewport instead; the plain 100vh above is just a fallback for older browsers
     that don't support dvh, overridden by the line below wherever it's supported. */
  min-height:100vh;
  min-height:100dvh;
  padding:24px 16px 40px;
}
.tp a{text-decoration:none;color:inherit}
.tp .tp-wrap{max-width:480px;margin:0 auto}

/* header */
.tp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tp-logo img{height:26px;display:block}
.tp-logo-text{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--tp-text);text-transform:lowercase}
.tp-logo-text .tp-logo-dot{color:var(--tp-acc)}
.tp-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:var(--tp-rad-pill);padding:5px 12px;white-space:nowrap}
.tp-badge-secure{color:var(--tp-green);background:rgba(var(--tp-green-rgb),.1)}
.tp-badge-paid{color:var(--tp-green);background:rgba(var(--tp-green-rgb),.1)}
.tp-badge svg{flex-shrink:0}
.tp-dot{width:6px;height:6px;border-radius:50%;background:var(--tp-green);display:inline-block}

/* generic card */
.tp-card{background:var(--tp-card);border-radius:var(--tp-rad-card);box-shadow:var(--tp-shadow-card);margin-bottom:14px}
.tp-card-pad{padding:20px}

/* business/invoice header row */
.tp-biz-row{display:flex;align-items:center;gap:12px}
.tp-biz-logo{width:44px;height:44px;border-radius:12px;background:repeating-linear-gradient(45deg,#EAECEF 0 8px,#F3F4F6 8px 16px);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.tp-biz-logo img{width:100%;height:100%;object-fit:cover}
.tp-biz-info{flex:1;min-width:0}
.tp-biz-name{font-size:15.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-biz-sub{font-size:12px;color:var(--tp-text-4);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-status-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--tp-rad-pill);white-space:nowrap;flex-shrink:0}
.tp-status-unpaid{color:var(--tp-orange);background:rgba(var(--tp-orange-rgb),.1)}
.tp-status-paid{color:var(--tp-green);background:rgba(var(--tp-green-rgb),.1)}
.tp-status-other{color:var(--tp-text-3);background:rgba(91,100,112,.1)}

/* line items */
.tp-items{border-top:1px solid var(--tp-divider);margin-top:16px;padding-top:0}
.tp-items.tp-no-border{border-top:none;margin-top:0}
.tp-item-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--tp-divider-2)}
.tp-item-row.tp-muted .tp-item-label,
.tp-item-row.tp-muted .tp-item-val{color:var(--tp-text-4)}
.tp-item-label{font-size:13.5px;color:var(--tp-text-2)}
.tp-item-val{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-total-row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0}
.tp-total-label{font-size:15px;font-weight:800}
.tp-total-val{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.tp-cur{font-size:12px;font-weight:600;color:var(--tp-text-4)}

/* form section */
.tp-section-label{font-size:13.5px;font-weight:700;margin-bottom:8px}
.tp-field{height:50px;background:var(--tp-card);border-radius:var(--tp-rad-sm);border:1.5px solid var(--tp-border);display:flex;align-items:center;padding:0 16px;gap:10px;margin-bottom:10px}
.tp-field:last-child{margin-bottom:0}
.tp-field input{border:none;outline:none;background:transparent;font-family:inherit;font-size:14.5px;color:var(--tp-text);width:100%}
.tp-field input::placeholder{color:var(--tp-text-4)}
.tp-field-prefix{font-size:14px;font-weight:600;color:var(--tp-text-3);flex-shrink:0}

/* payment method tiles */
.tp-methods{display:flex;gap:10px;margin:14px 0}
.tp-method{flex:1;background:var(--tp-card);border-radius:var(--tp-rad-sm);border:1.5px solid var(--tp-border);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tp-method.tp-selected{border:2px solid var(--tp-acc);box-shadow:0 0 0 4px rgba(var(--tp-acc-rgb),.08);padding:11px}
.tp-method-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(42,55,71,.07);overflow:hidden}
.tp-method-icon img{width:100%;height:100%;object-fit:contain;padding:4px}
.tp-method-label{font-size:12.5px;font-weight:700}
.tp-method input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.tp-method.tp-disabled{opacity:.4;pointer-events:none}

/* buttons */
.tp-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;width:100%}
.tp-btn-primary{height:56px;border-radius:var(--tp-rad);background:var(--tp-acc);color:#fff;font-size:16.5px;font-weight:700;box-shadow:0 10px 24px rgba(var(--tp-acc-rgb),.3)}
.tp-btn-primary:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.tp-btn-navy{height:54px;border-radius:var(--tp-rad);background:var(--tp-navy);color:#fff;font-size:15.5px;font-weight:700}
.tp-btn-outline{height:50px;border-radius:var(--tp-rad);border:1.5px solid var(--tp-border);background:var(--tp-card);color:var(--tp-navy);font-size:14.5px;font-weight:700}
.tp-btn-row{display:flex;gap:10px}
.tp-btn-row .tp-btn{flex:1}
.tp-btn-row .tp-btn-wide{flex:1.4}

/* success / failed state card */
.tp-result-card{padding:28px 20px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tp-result-icon{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tp-result-icon.tp-icon-success{background:var(--tp-green);box-shadow:0 12px 30px rgba(var(--tp-green-rgb),.35)}
.tp-result-icon.tp-icon-fail{background:rgba(var(--tp-acc-rgb),.1)}
.tp-result-title{font-size:21px;font-weight:800;letter-spacing:-.01em}
.tp-result-sub{font-size:14px;color:var(--tp-text-3);margin-top:6px;line-height:1.55;max-width:300px}
.tp-result-amt{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:10px}
.tp-result-amt .tp-cur{font-size:15px}

/* reference / detail card (success + failed + receipt) */
.tp-ref-card{padding:4px 16px}
.tp-ref-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--tp-divider)}
.tp-ref-row:last-child{border-bottom:none}
.tp-ref-label{font-size:13px;color:var(--tp-text-3)}
.tp-ref-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:end}
.tp-ref-val.tp-danger{color:var(--tp-acc)}

/* info / warning banners */
.tp-banner{border-radius:var(--tp-rad-sm);padding:13px 16px;display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5}
.tp-banner svg{flex-shrink:0;margin-top:1px}
.tp-banner-success{background:rgba(var(--tp-green-rgb),.07);border:1px solid rgba(var(--tp-green-rgb),.2);color:#106B4C}
.tp-banner-warning{background:rgba(var(--tp-orange-rgb),.08);border:1px solid rgba(var(--tp-orange-rgb),.25);color:#7A5200}

/* receipt card (dashed tear lines) */
.tp-receipt-card{overflow:hidden}
.tp-receipt-top{padding:18px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px dashed var(--tp-border)}
.tp-receipt-amt{text-align:end;flex-shrink:0}
.tp-receipt-amt .tp-total-val{color:var(--tp-green)}
.tp-receipt-items{padding:4px 20px 8px;border-top:1px dashed var(--tp-border);margin-top:4px}
.tp-receipt-detail{padding:4px 20px}

/* footer */
.tp-footer{text-align:center;font-size:11.5px;color:var(--tp-text-4);margin-top:16px;padding-bottom:8px}

/* deleted / not-found message */
.tp-empty{text-align:center;padding:60px 20px;color:var(--tp-text-3);font-size:15px}

/* ---- legacy payment-method markup (invoice.php's preserved #frm/#frmCC/#frmAX/#frmaPay
   forms and .knet radio tiles) restyled in place - the PHP/JS submission logic is untouched,
   only these existing selectors get new rules. ---- */
.tp-methods{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.tp-methods form{margin:0;flex:1;min-width:90px}
.tp-methods label#radio_label{display:block;margin:0;cursor:pointer;font-weight:400}
.tp-methods .knet{
  background:var(--tp-card);border-radius:var(--tp-rad-sm);border:1.5px solid var(--tp-border);
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.tp-methods .knet img{order:-1;width:34px;height:34px;object-fit:contain;border-radius:8px}
.tp-methods .knet br{display:none}
.tp-methods .knet input.checked_process{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tp-methods .knet #checked_val{font-size:12.5px;font-weight:700;color:var(--tp-text)}
.tp-methods .knet .amount_c{display:block;font-size:11px;font-weight:600;color:var(--tp-text-4);margin-top:2px}
/* JS applies inline background/border-color on click for the selected state (kept working as-is,
   just recolored to the coral accent instead of the legacy blue via the trailing inline script) */

.pay_btn{margin-top:4px}
.pay_btn button{
  display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:none;cursor:pointer;
  border-radius:var(--tp-rad);background:var(--tp-acc);color:#fff;font-size:16.5px;font-weight:700;
  font-family:inherit;box-shadow:0 10px 24px rgba(var(--tp-acc-rgb),.3);
}
.form-processing{background:var(--tp-card);border-radius:var(--tp-rad-card);box-shadow:var(--tp-shadow-card);margin-top:14px;text-align:center}
.form-processing h4{font-size:14px;font-weight:600;color:var(--tp-text-3);margin:0 0 10px}
.form-processing .progress{height:6px;border-radius:99px;background:var(--tp-divider);overflow:hidden}
.form-processing .progress-bar{height:100%;background:var(--tp-acc)}

/* RTL */
.tp[dir="rtl"]{direction:rtl;text-align:right}
.tp[dir="rtl"] .tp-field-prefix{order:2}
.tp[dir="rtl"] .tp-ref-val{text-align:start}
.tp[dir="rtl"] .tp-btn svg{transform:scaleX(-1)}

/* tablet / desktop: same single-column card, more room, centered (checkout-page pattern) */
@media (min-width:768px){
  .tp{padding:56px 24px}
  .tp .tp-wrap{max-width:520px}
  .tp-card-pad{padding:26px}
  .tp-result-title{font-size:23px}
  .tp-result-amt{font-size:38px}
}
@media (min-width:1024px){
  .tp{padding:72px 24px}
  .tp .tp-wrap{max-width:560px}
}