@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&display=swap');
:root { color-scheme: dark; color: #fff; font: 16px/1.7 "Noto Sans Arabic", Tahoma, sans-serif; background: #100b20; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 23px 14px; background: radial-gradient(ellipse at 90% 0%, #501a49, transparent 53%), radial-gradient(ellipse at 0% 100%, #1a2762, transparent 56%), #100b20; }
main { width: min(100%, 510px); overflow: hidden; border-radius: 26px; background: #181027; border: 1px solid #60506f; box-shadow: 0 24px 85px #090511b0; }
main::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg,#19d9ed,#8a4bff 34%,#ff2897 68%,#ffc64f); }
header { padding: 25px 14px 19px; text-align: center; background: radial-gradient(ellipse at 50% -25%, #74376390, transparent 73%); }
header img { display: block; margin: auto; border-radius: 17px; box-shadow: -6px 0 26px #37acff55, 6px 0 28px #ef4dc37c; }
.brand { margin: 15px 0 4px; font: 800 .73rem/1.5 Arial,sans-serif; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(1.75rem, 6vw, 2.45rem); font-weight: 900; line-height: 1.6; }
.details { margin: 0; font-size: .84rem; }
form, section { padding: 17px clamp(15px, 5vw, 31px) 20px; border-top: 1px solid #433452; }
label { font-weight: 700; }
input[type=text] { width: 100%; margin-top: 5px; border: 1px solid #6c587a; border-radius: 12px; min-height: 49px; padding: 6px 12px; color: #fff; background: #211630; font: inherit; }
input::placeholder { color: #fff; opacity: .75; }
.choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
button { min-height: 51px; padding: 7px 6px; border: 1px solid #8a6eaa; border-radius: 12px; font: 800 clamp(.72rem, 3vw, .91rem)/1.5 "Noto Sans Arabic",Tahoma,sans-serif; color: #fff; background: #432661; cursor: pointer; }
button span { margin-inline-end: 3px; font: 900 1.1em Arial,sans-serif; }
button.yes { border-color: #63ffba; background: linear-gradient(155deg,#136045,#114235); box-shadow: inset 0 0 15px #5bffab30, 0 0 18px #25ff8f40; }
button.no { border-color: #ff7188; background: linear-gradient(155deg,#8b2a44,#601c32); box-shadow: inset 0 0 15px #ff7a9b36, 0 0 18px #ff335a48; }
button:hover, .store:hover { filter: brightness(1.18); }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.error, #sending { font-size: .82rem; margin: 10px 0 0; }
section { text-align: center; }
section h2, section p { margin: 0; }
.check { font-size: 1.7rem; }
footer { border-top: 1px solid #433452; padding: 13px 12px 19px; text-align: center; }
footer p { margin: 0 0 7px; font-size: .82rem; font-weight: 700; }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.store { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #77717e; border-radius: 8px; background: #100d14; min-height: 43px; padding: 4px 9px; text-decoration: none; color: #fff; text-align: left; font: 400 14px/1 Arial,sans-serif; }
.store svg { width: 23px; height: 23px; }
.store small, .store strong { display: block; }
.store small { font-size: 9px; margin-bottom: 3px; }

body,
body main,
body main * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body input::placeholder {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1;
}

body main dialog { color-scheme: dark; width: min(calc(100% - 28px), 438px); max-height: calc(100% - 24px); padding: 19px; border: 1px solid #8b6eb0; border-radius: 20px; background: radial-gradient(ellipse at top, #3f2551, #191128 72%); box-shadow: 0 16px 48px #0c0619aa; text-align: center; }
body main dialog::backdrop { background: #090512c9; }
body main dialog h2, body main dialog p { margin: 0; }
body main dialog .venue { margin-top: 13px; font-size: .85rem; }
body main .dialog-top { position: relative; margin-bottom: 5px; }
body main .dialog-top form { position: absolute; inset-inline-end: 0; top: 0; border: 0; padding: 0; }
body main .dialog-top button { min-height: 44px; min-width: 44px; font-size: 1.3rem; }
body main .receipt-actions { display: grid; gap: 8px; margin-top: 15px; }
body main .receipt-actions a { display: grid; place-items: center; min-height: 46px; padding: 5px 8px; text-decoration: none; border: 1px solid #9f85bb; border-radius: 11px; background: #2c203c; font-weight: 700; }
body main .receipt-actions a:last-child { background: #573184; }
body main #reopen { margin-top: 10px; padding-inline: 13px; }