/* ========================= complete.css ========================= */

/* ========================= RESET ========================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }

/* ========================= FONTS ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ========================= THEME TOKENS (BLACK/GOLD/WHITE + GREEN CTA) ========================= */
:root{
  --main-bg: #070707;
  --page-bg: #0B0B0B;
  --footer: #050505;
  --header: #050505;

  --main-font: #ffffff;
  --page-font: rgba(255,255,255,.78);

  --gold: #D4AF37;
  --gold-2: #F5D76E;
  --highlight: #D4AF37;

  --btn: #00C500;
  --btn-hover: #00E000;

  --black: #000;
  --white: #fff;
  --error: #ff2e2e;

  /* unified card tones */
  --card-bg: #0E0E0E;
  --card-surface: transparent;
  --card-surface-hover: rgba(255,255,255,.03);
}

/* ========================= RTL ========================= */
html{ direction: rtl; }

/* ========================= BASE ========================= */
html{
  scroll-behavior: smooth;
  font-size: 14px;
}
body{
  margin: 0;
  font-family: "Tajawal","Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--main-font);

  background-image: url('/main-bg.webp');
  background-color: var(--main-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
a{ color: var(--main-font); }

footer{ background: var(--main-bg); }

.mobile-div-container{
  margin: 0;
  font-family: "Tajawal","Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--main-font);
  background-color: var(--main-bg);
  background-image: url(./main-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ========================= LAYOUT ========================= */
.home-page-cover{
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  padding: 0 0 16.7rem;
}
.main-container{
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ========================= HERO / SUB-HEADER ========================= */
.sub-header-container{
  position: relative;
  padding: 2.3rem 1.3rem;

  background-image: url('../images/hero2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  background-color: rgba(0,0,0,.55);
  border: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  overflow: hidden;

  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;

  /* ✅ NEW: small space gap under hero */
  margin-bottom: 12px;
}
.sub-header-text{ width:100%; flex:1; color:#fff; }
.sub-header-container h1{
  margin-bottom: 0.5rem;
  font-size: 1.9rem;
  font-weight: 600;
}

/* ✅ CHANGED ONLY: subtitle bigger */
.sub-header-container p{
  font-size: 1.55rem; /* was 1.25rem */
  font-weight: 500;
  color: var(--gold-2) !important;
}

.image-container{
  flex-shrink:0;
  max-width:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
}
.header-container{ text-align:center; margin:20px 0; }
.image-container img{
  width:80% !important;
  max-width:90% !important;
  height:auto !important;
  margin:0;
}

.advertiser-container{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .2rem 1.3rem;
  text-align: end;
  background-color: #0B0B0B;
  border-top: 1px solid rgba(255,255,255,.08);
}
.advertiser-container p{
  font-size: .9rem;
  font-weight: 700;
  color: #ffffff25;
}

/* ========================= CONTENT ========================= */
.content-container{
  width: 100%;
  padding: 1.3rem;
  background-color: var(--main-bg);
}
.content-container h4{
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-2);
}
.content-container h4,
.content-container ul,
.content-container p{
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.3rem;
}
.content-container p{ color: rgba(255,255,255,.85); }
.content-container p strong{ font-weight: 700; }
.content-container ul{
  list-style-type: disc;
  padding-left: 2.4rem;
}
.adv-footer-container h4{
  margin-bottom: .5rem;
  font-size: 1.25rem;
  text-transform: none;
}
.adv-footer-container p{
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.3rem;
}

.view-footer-links>a:not(:last-child){
  font-size: 0.875rem !important;
  padding-right: 5px;
  margin-right: 5px;
  border-right: 1px solid #bcbbb6;
}

/* ========================= OFFERS ========================= */
.offers-page-container{
  margin-top: 0;
  padding: 0 1rem;
}
.offers-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--page-bg);
  padding: 0 14px !important;

  /* ✅ NEW: tiny internal gap so it feels separated from hero */
  padding-top: 8px !important;

  gap: 12px;
}
.offer-block{
  position: relative;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  box-shadow: none !important;
  align-items: stretch !important;
}
.offers-page-container .offer-block:nth-child(n+4){ display: none; }

.mobile-link{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

/* ===== Animated GOLD border ===== */
@keyframes border-move{
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.offer-inner-block{
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex;
  justify-content: space-between;

  min-height: 220px !important;
  border-radius: 26px !important;
  border: 2px solid transparent !important;

  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(
      90deg,
      #B8891B,
      #D4AF37,
      #F5D76E,
      #FFE9A6,
      #F5D76E,
      #D4AF37,
      #B8891B
    ) border-box !important;

  background-size: 300% 300% !important;
  animation: border-move 5s linear infinite !important;

  padding: 10px !important;
  margin: 0 auto 14px;
  max-width: 920px;
  align-items: stretch !important;
}
@media (prefers-reduced-motion: reduce){
  .offer-inner-block{ animation: none !important; }
}

.offer-left-block,
.offer-right-block{
  width: 50%;
  display: flex;
  align-items: center;
  align-self: stretch !important;
}

/* ✅ DESKTOP REBALANCE: logo side bigger, button side smaller */
.offer-left-block{
  width: 52% !important; /* was 44% */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 0 !important;
}
.offer-right-block{
  width: 48% !important; /* was 56% */
  padding: 12px 14px !important;
  background: var(--card-surface) !important;
  border-radius: 25px;
}

/* ========================= BRAND LOGO (BIGGER) ========================= */
.offer-logo{
  width: 100% !important;

  /* bigger box */
  height: 185px !important; /* was 160 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 8px !important;

  background: var(--card-surface) !important;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  outline: none;
  position: relative;
  text-align: center !important;
}
.offer-logo:hover{ background: var(--card-surface-hover) !important; }

.offer-logo img{
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  /* mild boost */
  transform: scale(1.001) !important;
  transform-origin: center !important;
}

/* Badge */
.offer-logo .brand-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 3;

  background: #3D0B05 !important;
  color: #F5D76E !important;
  border: 1px solid rgba(245,215,110,.55) !important;

  padding:6px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  max-width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}

/* Rating under logo */
.rating-under-logo{
  width: 100%;
  height: 62px !important; /* was 78 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center !important;
  gap: 6px;
  padding: 4px 0 8px !important;
  text-align:center;
}
.rating-under-logo .rating-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:13px;
  font-weight:800;
  color: rgba(255,255,255,.85);
}
.rating-under-logo .score-text{
  color: var(--gold-2);
  font-weight:900;
}

/* Welcome bonus */
.welcome-bonus-block{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  line-height: 1.5rem;
  justify-content: center;
  min-height: 74px !important;
}
.welcome-bonus-block span{
  font-weight: 600;
  text-align: center;
}
.welcome-bonus-block span:first-child{
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  color: var(--gold-2) !important;
}
.welcome-bonus-block span:not(:first-child){
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
}

/* ========================= CTA BUTTON (REDUCED ~30%) ========================= */
.btn-block{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px !important; /* was 58 */
}

.offer-btn{
  position: relative;
  overflow: hidden;

  width: 11.2rem !important;  /* was 16rem */
  height: 2.45rem !important; /* was 3.5rem */

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 0.9rem;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 1000;
  text-transform: uppercase;

  background: var(--btn) !important;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0,133,0,1) !important;
  transition: transform .25s ease;
}
.offer-btn:hover{
  transform: translateY(-2px);
  background: var(--btn-hover) !important;
}

.offer-btn::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%) skewX(-20deg);
  animation: shineLoop 3s infinite;
  pointer-events: none;
}
.offer-btn::after{
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(255,255,255,.6);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.offer-btn:active::after{
  top: 50%;
  left: 50%;
  animation: ripple .6s ease-out;
}

@keyframes shineLoop{
  0% { transform: translateX(-120%) skewX(-20deg); }
  50% { transform: translateX(120%)  skewX(-20deg); }
  100%{ transform: translateX(120%)  skewX(-20deg); }
}
@keyframes ripple{
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(25); opacity: 0; }
}

/* Payments */
.payments-block{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: -8px;
}
@media (max-width: 1024px){
  .payments-block{ flex-wrap: wrap; }
}
.payments-block .img-block{
  width: 15%;
  margin-right: 10px;
  margin-bottom: 8px;
}
@media (max-width: 1024px){
  .payments-block.wrap-condition .img-block{
    width: 23%;
    margin: 0 2px 5px 2px;
    text-align: center;
  }
}
.payments-block .img-block img{ width: 25px; }
.payments-block .img-block img:last-child{ margin-right: 0; }

/* remove label rectangle */
.label-container{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* flag */
.flag{
  position: absolute;
  padding: 5px 10px;
  top: -5px;
  right: -10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 800 !important;

  background-color: #3D0B05 !important;
  color: #F5D76E !important;
  border: 1px solid #F5D76E !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* ========================= HEADER ========================= */
.main-header{
  padding: .5rem;
  background-color: var(--header);
}
.main-header a{
  display: block;
  height: 100%;
  width: fit-content;
  padding-left: 1rem;
}
.main-header a img{
  max-width: 10rem;
  height: auto;
}

/* ========================= FOOTER ========================= */
.main-footer{
  width: 100%;
  padding: 1.5rem;
  font-size: 0.857rem;
  line-height: 1.25rem;
  background-color: var(--footer) !important;
}
.to-top-container{
  width: 100%;
  text-align: start !important;
}
.footer-navbar{
  width: 100%;
  padding: 1rem 0 2rem;
}
.footer-navbar ul{
  width: fit-content;
  padding-bottom: .7rem;
  margin: 1rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ffffff30;
}
.footer-navbar ul li{
  margin: 0 .7rem;
  font-size: 1rem;
  font-weight: 700;
}
.footer-navbar ul li a{
  color: var(--white);
  transition: color .5s;
}
.footer-navbar ul li:hover a{
  text-decoration: underline;
  color: var(--gold-2) !important;
  text-decoration-color: var(--gold);
}
.partners-container{ margin-bottom: 3rem; }
.partners-container ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
.partners-container img{
  height: 1.8rem;
  width: auto;
  opacity: .75 !important;
  margin: 0 .2rem;
}
.footer__content{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-bottom:5em;
}
.footer__terms-link{
  padding:15px 0;
  color: var(--gold);
  font-weight:800;
}
.footer__terms-link:hover{
  color: var(--gold-2);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.first-block{ position: relative; z-index: 0; }
.first-block:before{
  position:absolute;
  content:"";
  top:0; bottom:0; left:0; right:0;
  background:url(./assets/bg-pic.png) no-repeat 50% 50% / cover;
  width:100%;
  height:auto;
  z-index:-1;
  margin-top:50px;
  transform: rotate(-180deg);
  opacity:.18;
  filter: saturate(.85) contrast(1.05) brightness(.65);
}

/* ========================= RESPONSIVE ========================= */
@media (min-width:768px){
  .hide-on-desktop{ display:none !important; opacity:0 !important; }
}

@media (max-width:1050px){
  .main-container{ max-width: 767px; }
  .sub-header-container{ background-position: 65%; }

  .main-footer{
    width: 100%;
    padding: 0;
    font-size: 1rem;
  }
  .to-top-container{
    padding: 1rem 1.3rem;
    border-bottom: 1rem solid var(--main-bg);
  }
  .to-top-container a{ font-size: .875rem; }
  .footer-navbar{ width: 100%; }
  .footer-navbar ul{
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
  }
  .footer-navbar ul li{
    width: 100%;
    margin: 0;
    padding: .5rem .7rem;
    border-bottom: 1px solid #ffffff30;
  }
  .footer-navbar ul li a{
    position: relative;
    display: block;
    width: 100%;
  }
  .footer-navbar ul li a::after{
    content: '◄';
    position: absolute;
    top: 0;
    left: 1rem;
    right: auto;
    color: var(--white);
  }
  .contact-container{ padding: 0 1.5rem 2rem; }
}

@media (max-width:767px){
  body{ background: none; }
  .main-container{ max-width: inherit; }

  .sub-header-container{
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/sub-header-mobile.webp');
    background-size: cover;
    background-position: inherit;
    background-color: var(--header);
    flex-direction:column;
    gap:14px;
    text-align:center;

    /* ✅ keep the same gap on mobile */
    margin-bottom: 12px;
  }
  .sub-header-text{ width: 60%; }
  .image-container{ max-width:100%; }
  .image-container img{ width:70% !important; }

  .mobile-link{ display: block; }

  .offer-left-block,
  .offer-right-block{
    width: 100% !important;
  }

  .offer-inner-block{
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ✅ MOBILE: keep logo big */
  .offer-logo{
    height: 175px !important;
  }
  .offer-logo img{
    transform: scale(1.01) !important;
  }

  .rating-under-logo{ height: auto !important; }

  .offer-right-block{
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border-radius: 0;
  }

  .welcome-bonus-block{ margin-bottom: 1.1rem; min-height: 0 !important; }
  .btn-block, .welcome-bonus-block{ width: 100%; height: auto !important; }

  /* ✅ MOBILE CTA FIX: was 18rem — now reduced ~30% */
  .offer-btn{
    width: 12.6rem !important;
    height: 2.6rem !important;
    font-size: 1rem !important;
    border-radius: 1.5rem !important;
  }

  .offer-btn:active,
  .offer-btn:hover{
    transform: scale(1) translateY(3px);
    background: var(--btn) !important;
  }

  .flag{
    padding: 4px 10px;
    top: -10px;
    right: 6px;
    border-radius: 22px;
    font-size: 14px;
  }
}

@media (max-width:550px){
  /* (kept as-is - your popup styles removed earlier) */
}

@media (max-width:350px){
  /* small screen tweaks (kept as-is) */
}