/* rbx/flagday.css — the UAE Flag Day look (rbx/flagday.js turns it on with body.nb-flagday).
   The flag: a red band on the left, then green, white and black stripes. */
:root{ --fd-red:#ff0000; --fd-green:#00732f; --fd-white:#ffffff; --fd-black:#000000; }

/* ---------- the theme on the Home pages ---------- */
body.nb-flagday .nh{ --green:#00732f; --green2:#008a39; }
body.nb-flagday .nh-top{ border-bottom-color:transparent; }
body.nb-flagday .nh-top::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:6px; pointer-events:none;
  background:linear-gradient(90deg, var(--fd-red) 0 64px, transparent 64px),
             linear-gradient(180deg, var(--fd-green) 0 33.34%, var(--fd-white) 33.34% 66.67%, var(--fd-black) 66.67%); }
body.nb-flagday .nh-logo .mark{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.85);
  background:linear-gradient(90deg, var(--fd-red) 0 28%, transparent 28%),
             linear-gradient(180deg, var(--fd-green) 0 33.34%, var(--fd-white) 33.34% 66.67%, var(--fd-black) 66.67%); }
body.nb-flagday .nh-link.on{ background:rgba(255,0,0,0.13); box-shadow:inset 3px 0 0 var(--fd-red); }
body.nb-flagday .nh-main{ background:
  radial-gradient(900px 340px at 0% 0%, rgba(0,115,47,0.20), transparent 70%),
  radial-gradient(700px 300px at 100% 0%, rgba(255,0,0,0.12), transparent 70%); }
body.nb-flagday .nh-hello img{ box-shadow:0 0 0 3px #fff, 0 0 0 7px var(--fd-green); }
body.nb-flagday .nh-play{ box-shadow:0 6px 0 #004d1f; }
body.nb-flagday .nh-play:active{ box-shadow:0 2px 0 #004d1f; }

/* ---------- the Flag Day banner at the top of Home ---------- */
.nbfd-hero{ display:none; align-items:center; gap:26px; margin:0 0 26px; padding:22px 26px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(0,115,47,0.28), rgba(17,18,22,0.6) 45%, rgba(255,0,0,0.18)); border:1px solid rgba(255,255,255,0.10); }
body.nb-flagday.nbfd-today .nbfd-hero{ display:flex; }
.nbfd-hero h2{ margin:2px 0 6px !important; font-size:28px; font-weight:900; line-height:1.15; }
.nbfd-hero p{ margin:0 0 14px; color:#d5d8de; font-weight:700; font-size:15px; max-width:560px; }
.nbfd-kicker{ font-weight:900; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#ffd7d7; }
.nbfd-kicker .ar{ font-family:system-ui, 'Segoe UI', Tahoma, sans-serif; letter-spacing:0; text-transform:none; margin-left:8px; font-size:15px; color:#fff; }
.nbfd-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.nbfd-btns button{ border:none; border-radius:10px; padding:10px 16px; font:inherit; font-weight:900; font-size:14px; cursor:pointer; }
.nbfd-btns .keep{ background:var(--fd-green); color:#fff; }
.nbfd-btns .keep:hover{ background:#008a39; }
.nbfd-btns .normal{ background:rgba(255,255,255,0.10); color:#fff; }
.nbfd-btns .normal:hover{ background:rgba(255,255,255,0.18); }
.nbfd-btns .kept{ background:transparent; color:#9ff0bf; cursor:default; padding-left:4px; }

/* a waving flag on a pole: the flag is cut into thin slices that bob one after another */
.nbfd-flag{ position:relative; flex:none; width:206px; height:120px; }
.nbfd-flag .pole{ position:absolute; left:0; top:0; width:7px; height:120px; border-radius:4px; background:linear-gradient(90deg,#d9dde3,#8c929c); }
.nbfd-flag .pole::before{ content:''; position:absolute; left:-3px; top:-6px; width:13px; height:13px; border-radius:50%; background:#e8c35a; }
.nbfd-flag .cloth{ position:absolute; left:7px; top:6px; width:192px; height:96px; display:flex; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.nbfd-flag .s{ flex:1; height:100%; position:relative;
  background-image:linear-gradient(90deg, var(--fd-red) 0 48px, transparent 48px),
                   linear-gradient(180deg, var(--fd-green) 0 33.34%, var(--fd-white) 33.34% 66.67%, var(--fd-black) 66.67%);
  background-size:192px 96px; background-repeat:no-repeat; animation:nbfdWave 1.6s ease-in-out infinite; }
.nbfd-flag .s::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,0.0); animation:nbfdShade 1.6s ease-in-out infinite; animation-delay:inherit; }
@keyframes nbfdWave{ 0%,100%{ transform:translateY(-4px); } 50%{ transform:translateY(4px); } }
@keyframes nbfdShade{ 0%,100%{ background:rgba(255,255,255,0.10); } 50%{ background:rgba(0,0,0,0.16); } }
@media (prefers-reduced-motion: reduce){ .nbfd-flag .s, .nbfd-flag .s::after{ animation:none; } }

/* the switch in the sidebar */
.nbfd-switch{ display:none; }
body.nbfd-offer .nbfd-switch{ display:flex; }
.nbfd-switch .tog{ margin-left:auto; width:34px; height:20px; border-radius:10px; background:#3a3d44; position:relative; flex:none; transition:background .15s; }
.nbfd-switch .tog::after{ content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s; }
body.nb-flagday .nbfd-switch .tog{ background:var(--fd-green); }
body.nb-flagday .nbfd-switch .tog::after{ transform:translateX(14px); }

@media (max-width: 760px){
  .nbfd-hero{ flex-direction:column; align-items:flex-start; gap:16px; padding:18px; }
  .nbfd-hero h2{ font-size:23px; }
  .nbfd-flag{ transform:scale(.8); transform-origin:left top; height:96px; margin-bottom:-6px; }
}