.parent-body{background:#0b101b;color:#f7f9ff;min-height:100vh;font-family:Cairo,Arial,sans-serif}.payment-page{max-width:1200px;margin:auto;padding:8px 16px 35px}.payment-header{background:#192536;border:1px solid #354255;border-radius:20px;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.payment-school{display:flex;align-items:center;gap:13px}.payment-school img{width:58px;height:52px;object-fit:contain;border-radius:50%;background:#fff}.payment-school strong{display:block;font-size:18px}.payment-school small{display:block;color:#a7b5c8;font-size:12px}.payment-admin{border:1px solid #596477;background:#2e3b4f;padding:12px 16px;border-radius:12px;color:#fff;text-decoration:none;font-weight:800}.payment-hero{margin:24px 0 29px;background:linear-gradient(110deg,#086ba2,#2446b9);padding:30px 36px 36px;border-radius:25px}.payment-hero span{display:inline-block;background:#ffffff31;padding:6px 15px;border-radius:25px;font-weight:800;font-size:13px}.payment-hero h1{font-size:clamp(23px,2.6vw,34px);margin:8px 0 3px;line-height:1.4}.payment-hero p{font-size:16px;line-height:1.8;max-width:780px;margin:0}.payment-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}.payment-section-title h2,.payment-box h2{margin:0;font-size:19px;color:white}.payment-section-title small{color:#37bbf7}.payment-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:25px}.payment-method{border:1px solid;border-radius:18px;padding:20px 22px;min-height:300px;display:flex;flex-direction:column}.payment-method.bank{background:linear-gradient(145deg,#145677,#053451);border-color:#008dc4}.payment-method.jawwal{background:linear-gradient(145deg,#5b220f,#290d04);border-color:#d15a00}.payment-method.pal{background:linear-gradient(145deg,#36136d,#21043d);border-color:#9b2ee0}.method-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.method-head>div{display:flex;align-items:center;gap:9px}.method-head span{font-size:26px}.method-head b{font-size:18px}.bank .method-head b,.bank .method-number b{color:#38bffc}.jawwal .method-head b,.jawwal .method-number b{color:#ff9b40}.pal .method-head b,.pal .method-number b{color:#dba3ff}.method-head em{font-style:normal;background:#ffffff21;padding:7px;border-radius:8px;font-size:11px;font-weight:800}.method-details{margin-top:25px;text-align:right}.method-details small{display:block;color:#b8bad4;font-size:12px}.method-details strong{display:block;margin:3px 0 13px;font-size:17px}.method-number{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.method-number b{font-size:17px;background:#0005;padding:6px 11px;border-radius:7px;direction:ltr}.method-number button{border:0;border-radius:7px;background:#008cc6;color:white;padding:8px 13px;font-weight:800}.jawwal .method-number button{background:#f0640b}.pal .method-number button{background:#8d3adb}.method-foot{border-top:1px solid #ffffff28;margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.qr-payment{background:transparent;border:1px solid #ffffff5c;color:#fff;padding:7px 10px;border-radius:8px}.payment-box{background:#1e293b;border:1px solid #374357;border-radius:20px;padding:25px 23px;margin-bottom:24px}.payment-box>p{color:#a5adbc;font-size:13px;margin:14px 0 20px}.payment-search{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:18px}.payment-search input,.payment-form input,.payment-form select{background:#0e1729;color:#fff;border:1px solid #48566e;height:54px;margin:0;padding:12px 14px}.payment-search input::placeholder,.payment-form input::placeholder{color:#77849a}.payment-search button{background:#0790ce;color:white;border:0;border-radius:10px;padding:0 22px;font-weight:800}.payment-note{font-size:11px!important;color:#8c9aac!important;margin:10px 0 0!important}.payment-result{display:flex;justify-content:space-between;gap:10px;background:#0c3d51;border:1px solid #147da9;border-radius:12px;padding:15px;margin-top:18px}.payment-result b,.payment-result small{display:block}.payment-result strong{color:#50e4aa}.payment-invoices>div,.payment-history>div{display:flex;gap:20px;flex-wrap:wrap;border-bottom:1px solid #ffffff24;padding:12px}.payment-exit button{background:#314153;border:0;color:#fff;border-radius:8px;padding:8px 12px;margin-top:12px}.payment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.payment-form label{color:#b8c3d2;font-weight:800;font-size:12px}.payment-form label>input,.payment-form select{display:block;width:100%;margin-top:7px}.payment-form .full{grid-column:1/-1}.reference-field{color:#16b8ef!important}.reference-field input{background:#053958;border-color:#0793cc}.amount-presets{display:flex;gap:5px;justify-content:flex-start;margin-top:6px}.amount-presets button{border:0;background:#344154;color:#fff;border-radius:5px;padding:4px 8px;font-size:11px}.payment-send{grid-column:1/-1;justify-self:start;background:#0db48e;color:white;font-size:15px;font-weight:800;border:0;border-radius:10px;padding:14px 23px;box-shadow:0 8px 20px #0db48e3b}.payment-alert{border-radius:12px;padding:12px 17px;margin-bottom:16px}.payment-alert.error{background:#5d2633;color:#fff}.payment-alert.success{background:#166b52;color:#fff}.payment-page footer{text-align:center;color:#77849b;font-size:11px;margin:25px}#demoQr{background:#1e293b;border:1px solid #536078;border-radius:14px;color:#fff;padding:28px;text-align:center}#demoQr::backdrop{background:#000b}#demoQr button{border:0;background:#0db48e;color:#fff;border-radius:7px;padding:9px 20px}.payment-page button{cursor:pointer}.payment-page button:focus-visible,.payment-admin:focus-visible{outline:3px solid #69d9bd;outline-offset:3px}@media(max-width:850px){.payment-methods{grid-template-columns:1fr}.payment-method{min-height:245px}.payment-search{grid-template-columns:1fr 1fr}.payment-search button{grid-column:1/-1;min-height:48px}}@media(max-width:550px){.payment-header{padding:12px}.payment-school strong{font-size:13px}.payment-school small{font-size:10px}.payment-school img{width:40px}.payment-admin{font-size:10px;padding:8px}.payment-hero{padding:24px 17px}.payment-hero p{font-size:13px}.payment-section-title{display:block}.payment-section-title h2,.payment-box h2{font-size:16px}.payment-search,.payment-form{grid-template-columns:1fr}.payment-form .full,.payment-send,.payment-search button{grid-column:1}.payment-result{display:block}}
.demo-lookup{background:none;border:0;color:#47c5f6;font-weight:800;text-decoration:underline;padding:4px}.payment-result[hidden]{display:none}