:root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #041c16; color: #f6fff9; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 10% 12%, rgba(40,194,118,.24), transparent 32rem), radial-gradient(circle at 90% 85%, rgba(207,171,72,.18), transparent 28rem), linear-gradient(145deg,#03150f,#083626 55%,#052219); }
.bg-orb { position: fixed; z-index: 0; width: 18rem; height: 18rem; border-radius: 50%; filter: blur(25px); opacity: .35; pointer-events: none; }
.orb-one { top: -7rem; left: -7rem; background: #0fc672; }
.orb-two { right: -7rem; bottom: -7rem; background: #d2a735; }
.shell { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100vh; padding: 28px 16px; }
.glass-card { width: min(100%,460px); padding: 30px 28px 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.055)); box-shadow: 0 24px 65px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: center; }
.logo-wrap img { display: block; width: min(150px,44%); height: auto; margin: 0 auto 18px; object-fit: contain; }
.title { font-size: clamp(19px,5vw,25px); font-weight: 800; line-height: 1.45; color: #fff7cf; }
.subtitle { margin-top: 6px; font-size: 15px; color: #d4eadc; }
.zone, .footer-line { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: #efcf70; font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.zone span, .footer-line span { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(239,207,112,.65)); }
.zone span:last-child, .footer-line span:last-child { transform: scaleX(-1); }
.arabic { margin: 6px 0 18px; font-family: "Traditional Arabic","Noto Naskh Arabic",serif; font-size: 25px; line-height: 1.7; direction: rtl; }
.today-box { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(0,0,0,.16); color: #dff5e8; font-size: 13px; }
.cal { color: #efcf70; }
form { text-align: left; }
.form-group { margin-bottom: 17px; }
.form-group label { display: block; margin: 0 0 7px 3px; color: #eaf8ef; font-size: 13px; font-weight: 700; }
.form-group label em { color: #f1c85c; font-style: normal; }
.field { position: relative; }
.field-icon { position: absolute; top: 50%; left: 14px; z-index: 1; transform: translateY(-50%); color: #efcf70; pointer-events: none; }
.field input, .field select { width: 100%; min-height: 48px; padding: 11px 14px 11px 43px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; outline: none; background: rgba(3,28,20,.7); color: #fff; font: inherit; font-size: 14px; transition: border-color .2s,box-shadow .2s; }
.field select { cursor: pointer; }
.field select option { background: #083225; color: #fff; }
.field input::placeholder { color: #9db9aa; }
.field input:focus, .field select:focus { border-color: #55d995; box-shadow: 0 0 0 3px rgba(85,217,149,.14); }
.form-group small { display: block; margin: 7px 3px 0; color: #abc4b6; font-size: 11px; }
#submitButton { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 49px; margin-top: 8px; border: 0; border-radius: 14px; background: linear-gradient(135deg,#0b9857,#16bd70); box-shadow: 0 10px 25px rgba(5,141,79,.3); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
#submitButton:hover { filter: brightness(1.07); }
#submitButton:disabled { opacity: .7; cursor: wait; }
#message { display: none; margin-top: 13px; padding: 10px 12px; border-radius: 10px; text-align: center; font-size: 13px; }
#message.error { background: rgba(190,43,43,.28); color: #ffe3e3; }
#message.success { background: rgba(25,156,87,.25); color: #e0ffec; }
.footer-line { margin: 23px 0 12px; justify-content: center; letter-spacing: normal; }
footer { color: #a9c3b5; font-size: 11px; line-height: 1.7; letter-spacing: .04em; }
footer strong { color: #e7cd7c; }

/* Single SweetAlert ruleset. The poster remains complete at its native 4:5 ratio. */
.rsc-swal-popup { width: 290px !important; max-width: calc(100vw - 24px) !important; padding: 8px !important; border-radius: 16px !important; overflow: hidden !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 15px 40px rgba(0,0,0,.24) !important; }
.rsc-swal-popup .swal2-html-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.swal-poster-wrapper { width: 100%; max-width: 100%; overflow: hidden; text-align: center; }
.swal-poster { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto; border-radius: 9px; object-fit: contain; }
.swal-success-text { margin: 7px 0 2px; color: #087743; font-size: 12px; font-weight: 800; line-height: 1.25; }
.swal-entry-details { margin: 0; color: #56675e; font-size: 10px; line-height: 1.35; }
.swal-entry-details strong { color: #173f2c; font-weight: 800; }
.rsc-swal-popup .swal2-actions { width: 100%; margin: 7px 0 0; padding: 0; }
.rsc-swal-ok { min-width: 62px; min-height: 30px; margin: 0 !important; padding: 6px 15px; border: 0; border-radius: 7px; background: linear-gradient(135deg,#087743,#0aa15d) !important; color: #fff; font-size: 10px; font-weight: 800; }
.swal2-container, .swal2-popup, .swal2-html-container { overflow-x: hidden !important; }
@media (max-width: 480px) { .shell { padding: 16px 10px; } .glass-card { padding: 24px 18px 20px; border-radius: 22px; } .arabic { font-size: 22px; } .rsc-swal-popup { width: min(290px,calc(100vw - 20px)) !important; padding: 7px !important; } }
@media (max-width: 340px) { .glass-card { padding-inline: 14px; } .title { font-size: 18px; } }