/* Walaa Rewards — base stylesheet.
   Per-page layout lives in each page's <style> block; this file holds
   document resets, link colours and the reveal/animation primitives. */

:root {
  /* brand accent — used by buttons, rules and highlights across every page */
  --wr-accent: #F2C206;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #0A121D;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: 'Poppins', system-ui, sans-serif; }

img, svg, video { max-width: 100%; }

a { color: #2D6BA8; text-decoration: none; }
a:hover { color: #F2C206; }

button { font-family: inherit; }

input, textarea, select { font-family: inherit; }

::selection { background: rgba(242, 194, 6, .3); }

/* ---- page preloader ----------------------------------------------------
   Sits above everything until the page has loaded, then fades out.
   site.js removes it on window load (and after 3.5s as a safety net). */

#wr-preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: #00234B;
  transition: opacity .45s ease, visibility .45s ease;
}

#wr-preloader img { display: block; height: auto; }

#wr-preloader-bar {
  display: block;
  width: 160px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}

#wr-preloader-bar > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--wr-accent, #F2C206);
  animation: wr-loading 1.1s ease-in-out infinite;
}

#wr-preloader.wr-done { opacity: 0; visibility: hidden; }

@keyframes wr-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* marquee used by the footer logo strip */
@keyframes wr-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}