/* GT PRO - occasion visuals (greeting scenes, home backgrounds, send / feedback icons). Palette: deep navy, emerald, gold. */

/* ---------- small line icons (mask-based, take the text colour; consistent 1.8 stroke) ---------- */
.ico-send,.ico-chat{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-send{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21.5 2.5 10.6 13.4'/><path d='M21.5 2.5 14.6 21.5l-4-8.1-8.1-4z'/></svg>")}
.ico-chat{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 11.5a7.5 7.5 0 0 1-10.9 6.7L4 19.5l1.4-4.6A7.5 7.5 0 1 1 20.5 11.5z'/><path d='M9 10.5h6M9 13.5h3.6'/></svg>")}
/* paper plane points toward the reading direction: up-right in LTR, up-left (mirrored) in RTL */
html[dir="rtl"] .ico-send{transform:scaleX(-1)}
.nav-item .ico-send,.mobile-nav .ico-send,[data-page] .ico-send{width:1.2em;height:1.2em}
/* feedback: small discreet 44px icon button */
.home-feedback-slot{margin-top:6px}
.home-feedback-btn{display:inline-grid;place-items:center;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border-radius:50%;opacity:.82}
.home-feedback-btn:hover,.home-feedback-btn:focus-visible{opacity:1}
.home-feedback-btn .ico-chat{width:20px;height:20px;vertical-align:0}

/* ---------- greeting overlay backgrounds ---------- */
.wl.wl-k-national{background:radial-gradient(70% 45% at 12% 100%,#c9a24a40,transparent 70%),radial-gradient(70% 45% at 92% 100%,#ff000030,transparent 70%),radial-gradient(120% 90% at 50% 0%,#25304a 0%,#10192e 58%,#080c17 100%)}
.wl.wl-k-flag{background:radial-gradient(90% 60% at 50% 0%,#2c3752 0%,#101a31 55%,#080c17 100%)}
.wl.wl-k-remember{background:radial-gradient(100% 70% at 50% 0%,#182749 0%,#0d1528 55%,#060a12 100%)}
.wl.wl-k-ramadan{background:radial-gradient(90% 55% at 80% 0%,#333f5b 0%,transparent 70%),radial-gradient(120% 90% at 50% 0%,#182646 0%,#0f182c 55%,#080e1a 100%)}
.wl.wl-k-fitr{background:radial-gradient(80% 50% at 50% 0%,#29395f66 0%,transparent 70%),radial-gradient(120% 90% at 50% 0%,#19284b 0%,#101a31 55%,#080d19 100%)}
.wl.wl-k-adha{background:radial-gradient(80% 50% at 50% 0%,#2c3f6d55 0%,transparent 70%),radial-gradient(120% 90% at 50% 0%,#131e39 0%,#0e172c 55%,#070b14 100%)}
.wl.wl-k-arafah{background:linear-gradient(180deg,#141f3b 0%,#2e3952 42%,#6a5a6a 72%,#c99a5d 100%)}
.wl-card{background:#0c132388}
.wl.wl-k-arafah .wl-card,.wl.wl-k-remember .wl-card{background:#0a101d99}

/* geometric (eight-point star) pattern, faded out behind the card */
.oc-pat{position:absolute;inset:0;opacity:.2;background-size:62px 62px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='62' height='62' viewBox='0 0 62 62'><g fill='none' stroke='%23e3bd62' stroke-width='.8'><rect x='16' y='16' width='30' height='30'/><rect x='16' y='16' width='30' height='30' transform='rotate(45 31 31)'/><circle cx='31' cy='31' r='4'/><circle cx='0' cy='0' r='3'/><circle cx='62' cy='0' r='3'/><circle cx='0' cy='62' r='3'/><circle cx='62' cy='62' r='3'/></g></svg>");-webkit-mask-image:linear-gradient(#000 0,transparent 36%,transparent 64%,#000 100%);mask-image:linear-gradient(#000 0,transparent 36%,transparent 64%,#000 100%)}

/* crescent: centred variant, glow */
.oc-moon{filter:drop-shadow(0 0 22px #f4c95e88) drop-shadow(0 0 3px #fff3c8aa)}
.oc-moon-c{inset-inline-end:auto;left:50%;top:5%;width:min(30vw,132px);margin-left:calc(min(30vw,132px)/-2)}
.oc-rose{position:absolute;left:50%;width:min(86vw,440px);margin-left:calc(min(86vw,440px)/-2);top:-6%;opacity:.5;animation:ocSpin 160s linear infinite;pointer-events:none}
.oc-rose-12{opacity:.42;animation-direction:reverse}
@keyframes ocSpin{to{transform:rotate(360deg)}}

/* fanous: swinging lantern, warm glow */
.oc-fan{position:absolute;top:0;width:calc(46px*var(--s,1));transform-origin:50% 0;animation:ocSwing 5.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.oc-fan::before{content:"";display:block;width:1.4px;height:var(--len,20px);margin:0 auto;background:linear-gradient(#e3bd6277,#e3bd62)}
.oc-fan svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 10px #ffc95a66)}
.oc-halo{animation:ocGlow 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.oc-fan .oc-flame{transform-origin:40px 86px;animation:wlFlame 1.7s ease-in-out infinite}
.oc-fan.f1{inset-inline-start:6%}.oc-fan.f2{inset-inline-start:19%}.oc-fan.f3{inset-inline-start:31%}.oc-fan.f4{inset-inline-start:43%}
.oc-fan-edge-s{inset-inline-start:5%!important}.oc-fan-edge-e{inset-inline-start:auto!important;inset-inline-end:5%}
@keyframes ocSwing{0%,100%{transform:rotate(4.5deg)}50%{transform:rotate(-4.5deg)}}
@keyframes ocGlow{0%,100%{opacity:.14}50%{opacity:.34}}

/* skyline */
.oc-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(110px,19vh,230px);pointer-events:none}
.oc-sky-g{--sk1:#111c34;--sk2:#080d19;--sk3:#182749}
.oc-win{filter:drop-shadow(0 0 3px #ffd36e)}

/* fireworks */
.oc-burst{position:absolute;opacity:0;transform:scale(.15);animation:ocBurst 4s ease-out infinite;animation-delay:var(--d,0s);filter:drop-shadow(0 0 4px currentColor)}
@keyframes ocBurst{0%{transform:scale(.15);opacity:0}10%{opacity:1}60%{opacity:.9}100%{transform:scale(1.05);opacity:0}}

/* flags: container sizes; canvas is drawn by flag.js */
.oc-flag{direction:ltr;pointer-events:none}
.oc-flag-big{position:absolute;top:max(8px,1.6vh);left:0;right:0;margin:0 auto;width:min(72vw,430px);z-index:1}
.oc-flag-half{width:min(54vw,290px)}
.oc-flag canvas{display:block}
.oc-rays{position:absolute;left:0;right:0;top:0;height:62%;background:repeating-conic-gradient(from 100deg at 50% -6%,#ffd36e22 0 4deg,transparent 4deg 14deg);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);animation:ocPulse 6s ease-in-out infinite}
@keyframes ocPulse{0%,100%{opacity:.55}50%{opacity:1}}
.oc-sadu{position:absolute;left:0;right:0;bottom:0;width:100%;height:12px;opacity:.9}
.oc-bunting{position:absolute;left:0;right:0;top:0;width:100%;height:auto;max-height:78px;z-index:2;filter:drop-shadow(0 3px 3px #0006)}
.wl-k-flag .oc-flag-big{top:max(46px,6.5vh)}
.oc-sparkle b{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px 3px #ffd36e88;animation:wlSpark 3s ease-out infinite}
.oc-sparkle b:nth-child(1){left:10%;top:62%}.oc-sparkle b:nth-child(2){left:86%;top:54%;animation-delay:-.8s}.oc-sparkle b:nth-child(3){left:26%;top:80%;animation-delay:-1.5s}.oc-sparkle b:nth-child(4){left:70%;top:84%;animation-delay:-2.1s}.oc-sparkle b:nth-child(5){left:48%;top:70%;animation-delay:-2.6s}

/* Commemoration Day: sober */
.oc-beam{position:absolute;left:18%;right:18%;top:0;height:70%;background:linear-gradient(#e9e4d022,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000,transparent);mask-image:linear-gradient(90deg,transparent,#000,transparent)}
.oc-line{position:absolute;left:12%;right:12%;bottom:11%;height:1px;background:linear-gradient(90deg,transparent,#d8bd7a88,transparent)}
.oc-still b{animation:none!important;opacity:.45}
.wl-k-remember .wl-card{border-color:#d8bd7a33}
.wl-k-remember .wl-occ{color:#e9e1c8}

/* Arafah: calm dawn */
.oc-dawn{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,#ffd98a66,transparent 70%)}
.oc-sun{position:absolute;left:50%;bottom:calc(clamp(130px,22vh,260px)*.3);width:min(70vw,360px);aspect-ratio:1;margin-left:calc(min(70vw,360px)/-2);border-radius:50%;background:radial-gradient(circle,#fff4cf 0,#ffd98a88 22%,#ffc06a33 48%,transparent 70%);animation:ocPulse 7s ease-in-out infinite}
.wl-k-arafah .oc-rays{top:auto;bottom:0;height:70%;background:repeating-conic-gradient(from -80deg at 50% 100%,#fff0c01c 0 5deg,transparent 5deg 16deg);-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.oc-mts{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(130px,22vh,260px)}

/* ---------- home page background ---------- */
.occ-bg.wl-k-national,.occ-bg.wl-k-flag,.occ-bg.wl-k-remember{opacity:1}
.occ-bg.wl-k-ramadan,.occ-bg.wl-k-fitr,.occ-bg.wl-k-adha,.occ-bg.wl-k-arafah{background:none}
.occ-bg.wl-k-ramadan::before{content:none}
.oc-ribbon{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#FF0000 0 25%,transparent 25%),linear-gradient(180deg,#00732F 0 33.3%,#fff 33.3% 66.6%,#000 66.6%);box-shadow:0 1px 0 #0000001a}
.oc-ribbon-k{background:linear-gradient(90deg,transparent,#d8bd7a,transparent) bottom/100% 1px no-repeat,#0c1222}
.oc-hflag{position:absolute;top:6px;left:calc(50% + 18px);transform:translateX(-50%);z-index:1}
@media(min-width:701px){.oc-hflag{left:50%;top:8px;transform:translateX(-50%) scale(1.5);transform-origin:50% 0}}
.oc-hflag-half{top:2px}
.oc-home{position:absolute;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));height:min(215px,28vh);opacity:.75}
.oc-home .oc-sky-h{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(84px,14vh,130px);--sk1:#d9c48b;--sk2:#c6aa68;--sk3:#e4d4a4;opacity:.62}
.oc-home-adha .oc-sky-h{--sk1:#cfc9be;--sk2:#b1a897;--sk3:#ddd9d1}
.oc-home .wl-stars{height:60%}
.oc-home .wl-stars b{background:#c99a45;opacity:.55}
.oc-home-top{position:absolute;inset-inline-end:7%;top:62px}
.oc-moon-h{position:static;width:clamp(58px,11vw,92px);height:auto;inset:auto;margin:0;opacity:.8;filter:drop-shadow(0 0 12px #e0b95c66);animation:none}
.oc-garland{position:absolute;left:0;right:0;top:0;height:26px}
.oc-garland>svg{position:absolute;left:0;top:0;width:100%;height:26px}
.oc-garland .oc-fan{opacity:.92}
.oc-garland .oc-fan svg{filter:drop-shadow(0 0 6px #ffc95a55)}
.oc-garland .h1{inset-inline-start:11%;top:6px}.oc-garland .h2{inset-inline-start:46%;top:12px}.oc-garland .h3{inset-inline-start:79%;top:7px}
@media(min-width:701px){.oc-home{bottom:0}.oc-home .oc-sky-h{height:clamp(100px,16vh,150px)}}

@media(prefers-reduced-motion:reduce){
 .oc-clouds i,.oc-fan,.oc-halo,.oc-burst,.oc-rose,.oc-rays,.oc-sun,.oc-sparkle b,.oc-fan .oc-flame{animation:none!important}
 .oc-burst{opacity:.7;transform:scale(.9)}
}

.wl-k-flag .oc-flag-big{width:min(62vw,370px)}
.oc-mts-dim{opacity:.55;filter:saturate(.4)}
.oc-line{bottom:auto;top:0;display:none}
.oc-clouds i{position:absolute;height:22px;border-radius:50%;background:radial-gradient(closest-side,#ffffff30,transparent);animation:ocDrift 40s linear infinite alternate}
.oc-clouds i:nth-child(1){left:6%;top:9%;width:46%}
.oc-clouds i:nth-child(2){left:42%;top:17%;width:52%;height:28px;animation-duration:55s}
.oc-clouds i:nth-child(3){left:14%;top:76%;width:60%;height:30px;opacity:.7;animation-duration:48s}
@keyframes ocDrift{to{transform:translateX(34px)}}
.oc-garland .oc-bunting{top:0;max-height:none;height:46px;filter:none;opacity:.88}

/* ---------- flag scenes: no light / glow above the flag; National Day caption ---------- */
.wl-k-national .oc-rays,.wl-k-flag .oc-rays,.wl-k-remember .oc-beam{display:none}
.wl.wl-k-national{background:radial-gradient(70% 40% at 12% 100%,#c9a24a33,transparent 70%),radial-gradient(70% 40% at 92% 100%,#ff000026,transparent 70%),linear-gradient(180deg,#0c1222 0%,#090f1c 60%,#060910 100%)}
.wl.wl-k-flag{background:linear-gradient(180deg,#0c1425 0%,#090f1c 60%,#060910 100%)}
.wl.wl-k-remember{background:linear-gradient(180deg,#0e1629 0%,#090e1a 60%,#05080f 100%)}
.oc-natl{position:absolute;top:max(8px,1.6vh);left:0;right:0;z-index:1;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.oc-natl .oc-flag-big{position:relative;top:auto;left:auto;right:auto;margin:0 auto}
.wl-k-flag .oc-natl{top:max(46px,6.5vh)}
.oc-natl-cap{margin:2px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;font-family:"Amiri","Noto Naskh Arabic","Scheherazade New","Traditional Arabic",Georgia,serif;font-size:clamp(15px,4.4vw,21px);font-weight:700;letter-spacing:0;line-height:1.5;
 color:#e6c46f;background:linear-gradient(180deg,#fff0c0,#e3bd62 55%,#b98a35);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.oc-natl-cap i{width:5px;height:5px;transform:rotate(45deg);background:#d9b45a;flex:none;-webkit-text-fill-color:initial}
.wl.wl-k-national,.wl.wl-k-flag{place-items:end center;padding-bottom:clamp(22px,6vh,60px)}
.wl-k-national .oc-flag-big,.wl-k-flag .oc-flag-big{width:min(72vw,430px,40vh)}
.wl-k-flag .oc-natl{top:max(24px,4vh)}
.wl.wl-k-newyear{background:radial-gradient(120% 90% at 50% 0%,#18274a 0%,#0f182e 58%,#080d18 100%)}
.wl.wl-k-hijri{background:radial-gradient(120% 90% at 50% 0%,#162240 0%,#0d1527 58%,#060a14 100%)}
.wl.wl-k-mawlid{background:radial-gradient(120% 90% at 50% 0%,#15223f 0%,#0d1527 58%,#060910 100%)}