:root{
  --crx-ink:#09090B;
  --crx-paper:#F8F4E8;
  --crx-acid:#D2E823;
}

body.crx-notice-open{
  overflow:hidden !important;
}

.crx-campaign-overlay{
  position:fixed;
  inset:0;
  z-index:99999999;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:rgba(9,9,11,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.crx-campaign-modal{
  width:min(900px,95vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;

  background:var(--crx-paper);
  color:var(--crx-ink);

  border:3px solid var(--crx-ink);
  border-radius:18px;

  box-shadow:
    9px 9px 0 var(--crx-acid),
    13px 13px 0 var(--crx-ink);

  font-family:"Space Grotesk",Arial,sans-serif;
}

.crx-campaign-head{
  padding:24px 26px 20px;
  border-bottom:3px solid var(--crx-ink);

  background:
    radial-gradient(
      circle,
      rgba(9,9,11,.16) 1.5px,
      transparent 2px
    ) right top / 12px 12px,
    var(--crx-paper);
}

.crx-campaign-badge{
  display:inline-block;
  margin-bottom:14px;
  padding:7px 11px;

  background:var(--crx-acid);

  border:2px solid var(--crx-ink);
  border-radius:999px;

  box-shadow:3px 3px 0 var(--crx-ink);

  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.crx-campaign-head h2{
  margin:0;

  max-width:780px;

  font-family:"Dela Gothic One","Arial Black",sans-serif;
  font-size:clamp(1.55rem,3.2vw,2.8rem);
  line-height:1;
  letter-spacing:-.035em;
}

.crx-campaign-head p{
  margin:13px 0 0;
  font-size:.92rem;
  font-weight:700;
}

.crx-campaign-body{
  overflow-y:auto;
  padding:24px 27px 12px;

  scrollbar-width:thin;
  scrollbar-color:var(--crx-ink) var(--crx-acid);
}

.crx-campaign-body h3{
  margin:24px 0 8px;

  font-family:"Dela Gothic One","Arial Black",sans-serif;
  font-size:.95rem;
  line-height:1.1;
  text-transform:uppercase;
}

.crx-campaign-body p{
  margin:0 0 13px;
  font-size:.9rem;
  font-weight:600;
  line-height:1.6;
}

.crx-campaign-body strong{
  font-weight:900;
}

.crx-highlight{
  display:inline-block;

  padding:2px 7px;

  background:var(--crx-acid);

  border:1px solid var(--crx-ink);
  border-radius:4px;

  font-weight:900;
}

.crx-campaign-footer{
  padding:17px 22px 21px;

  background:#fffdf5;

  border-top:3px solid var(--crx-ink);
}

.crx-confirm-row{
  display:flex;
  align-items:flex-start;
  gap:10px;

  margin-bottom:15px;

  cursor:pointer;

  font-size:.82rem;
  font-weight:800;
  line-height:1.4;
}

.crx-confirm-row input{
  width:20px;
  height:20px;

  flex:0 0 20px;

  margin-top:1px;

  accent-color:var(--crx-acid);
}

.crx-campaign-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:11px;
}

.crx-campaign-continue,
.crx-campaign-underage{
  min-height:48px;

  border:2px solid var(--crx-ink);
  border-radius:9px;

  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:.83rem;
  font-weight:900;

  cursor:pointer;
}

.crx-campaign-continue{
  background:var(--crx-ink);
  color:var(--crx-acid);

  box-shadow:4px 4px 0 var(--crx-acid);
}

.crx-campaign-continue:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.crx-campaign-underage{
  padding:0 16px;

  background:var(--crx-paper);
  color:var(--crx-ink);

  box-shadow:3px 3px 0 var(--crx-ink);
}


/* MOBILE */

@media(max-width:700px){

  .crx-campaign-overlay{
    padding:9px;
  }

  .crx-campaign-modal{
    width:100%;
    max-height:95vh;

    border-radius:13px;

    box-shadow:
      5px 5px 0 var(--crx-acid),
      8px 8px 0 var(--crx-ink);
  }

  .crx-campaign-head{
    padding:17px 16px 14px;
  }

  .crx-campaign-badge{
    margin-bottom:10px;
    padding:6px 9px;
    font-size:8px;
  }

  .crx-campaign-head h2{
    font-size:1.4rem;
  }

  .crx-campaign-head p{
    font-size:.76rem;
  }

  .crx-campaign-body{
    padding:17px 16px 8px;
  }

  .crx-campaign-body h3{
    margin-top:19px;
    font-size:.8rem;
  }

  .crx-campaign-body p{
    font-size:.75rem;
    line-height:1.52;
  }

  .crx-campaign-footer{
    padding:13px 14px 15px;
  }

  .crx-confirm-row{
    font-size:.7rem;
  }

  .crx-campaign-actions{
    grid-template-columns:1fr;
  }
}

/* FIX ACKNOWLEDGEMENT ROW */
.crx-confirm-row{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 0 15px !important;
  color:#09090B !important;
  opacity:1 !important;
}

.crx-confirm-row span{
  color:#09090B !important;
  opacity:1 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

.crx-confirm-row input{
  border:2px solid #09090B !important;
  outline:none !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* CRX DESKTOP NAV OVERLAP FIX */
@media (min-width: 992px){

  .crx-campaign-overlay{
    align-items:flex-start !important;
    justify-content:center !important;

    /* keep popup completely below the fixed navbar */
    padding-top:92px !important;
    padding-left:20px !important;
    padding-right:20px !important;
    padding-bottom:18px !important;

    box-sizing:border-box !important;
  }

  .crx-campaign-modal{
    margin:0 auto !important;

    width:min(900px, calc(100vw - 40px)) !important;

    /* popup fits in remaining screen below nav */
    max-height:calc(100dvh - 110px) !important;

    overflow:hidden !important;
  }

  .crx-campaign-body{
    min-height:0 !important;
    overflow-y:auto !important;
  }

}
/* END CRX DESKTOP NAV OVERLAP FIX */

/* CRX NO GAMBLING HEADER CARD */

@media (min-width: 820px){

  .crx-campaign-head{
    position:relative !important;

    /* reserve room for right-side notice */
    padding-right:300px !important;
    min-height:245px;
  }

  .crx-campaign-head h2{
    max-width:590px !important;
  }

  .crx-campaign-head > p{
    max-width:560px !important;
  }

  .crx-no-gambling-card{
    position:absolute;

    top:28px;
    right:26px;

    width:235px;

    padding:16px 16px 15px;

    background:#D2E823;
    color:#09090B;

    border:3px solid #09090B;
    border-radius:13px;

    box-shadow:5px 5px 0 #09090B;

    transform:rotate(1deg);
  }

  .crx-no-gambling-small{
    margin-bottom:8px;

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;
  }

  .crx-no-gambling-main{
    display:flex;
    flex-direction:column;

    gap:1px;

    font-family:"Dela Gothic One","Arial Black",sans-serif;

    font-size:25px;
    line-height:.95;

    letter-spacing:-.04em;
  }

  .crx-no-gambling-main span{
    display:block;
  }

  .crx-no-gambling-foot{
    margin-top:11px;
    padding-top:9px;

    border-top:2px solid #09090B;

    font-size:9px;
    font-weight:900;
    line-height:1.3;
  }

}


/* MOBILE / SMALL TABLET */

@media (max-width:819px){

  .crx-no-gambling-card{
    margin-top:16px;
    padding:14px;

    background:#D2E823;
    color:#09090B;

    border:2px solid #09090B;
    border-radius:10px;

    box-shadow:4px 4px 0 #09090B;
  }

  .crx-no-gambling-small{
    margin-bottom:6px;

    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
  }

  .crx-no-gambling-main{
    display:flex;
    gap:7px;
    flex-wrap:wrap;

    font-family:"Dela Gothic One","Arial Black",sans-serif;
    font-size:16px;
    line-height:1;
  }

  .crx-no-gambling-main span:not(:last-child)::after{
    content:" •";
  }

  .crx-no-gambling-foot{
    margin-top:8px;

    font-size:8px;
    font-weight:800;
    line-height:1.3;
  }

}

/* END CRX NO GAMBLING HEADER CARD */

/* CRX NOT INTENDED AS HIGHLIGHT */

.crx-no-gambling-small{
  display:inline-block !important;

  padding:5px 8px !important;
  margin-bottom:10px !important;

  background:#09090B !important;
  color:#D2E823 !important;

  border:2px solid #09090B !important;
  border-radius:6px !important;

  box-shadow:3px 3px 0 #F8F4E8 !important;

  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.11em !important;
  line-height:1 !important;
}

@media(max-width:819px){
  .crx-no-gambling-small{
    font-size:8px !important;
    padding:5px 7px !important;
    margin-bottom:8px !important;
  }
}

/* END CRX NOT INTENDED AS HIGHLIGHT */

/* CRX CAMPAIGN HEADER OVERFLOW FIX */

/* Never allow the modal header/footer to be squeezed */
.crx-campaign-head{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
}

.crx-campaign-footer{
  flex:0 0 auto !important;
}

.crx-campaign-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}


/* Keep the long title safely inside its area */
.crx-campaign-head h2{
  width:100% !important;
  max-width:100% !important;

  margin:0 !important;

  overflow-wrap:normal !important;
  word-break:normal !important;

  font-size:clamp(28px,4.1vw,52px) !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
}


/* DESKTOP — proper 2-column header instead of absolute overlap */
@media (min-width:820px){

  .crx-campaign-head{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      235px;

    grid-template-rows:auto auto auto;

    column-gap:28px !important;
    row-gap:12px !important;

    align-items:start !important;

    padding:
      25px
      27px
      24px !important;
  }

  .crx-campaign-badge{
    grid-column:1;
    grid-row:1;

    width:max-content;
    max-width:100%;
    margin:0 !important;
  }

  .crx-campaign-head h2{
    grid-column:1;
    grid-row:2;

    font-size:clamp(30px,3.5vw,48px) !important;
  }

  .crx-campaign-head > p{
    grid-column:1;
    grid-row:3;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
  }

  .crx-no-gambling-card{
    position:static !important;

    grid-column:2;
    grid-row:1 / span 3;

    width:auto !important;
    max-width:none !important;

    margin:0 !important;

    align-self:start;
  }

}


/* MOBILE / TABLET */
@media (max-width:819px){

  .crx-campaign-head{
    display:block !important;

    padding:
      18px
      16px
      17px !important;
  }

  .crx-campaign-head h2{
    margin-top:12px !important;

    font-size:clamp(25px,7vw,38px) !important;
    line-height:.96 !important;

    overflow-wrap:anywhere !important;
  }

  .crx-campaign-head > p{
    margin-top:12px !important;
  }

  .crx-no-gambling-card{
    position:static !important;
    width:auto !important;

    margin-top:16px !important;
  }

}

/* END CRX CAMPAIGN HEADER OVERFLOW FIX */

/* CRX MOBILE NAV UNTIL NOTICE ACCEPTED */

@media (max-width:819px){

  /*
    Hide every known version of the CREAIONX navbar
    while the Pakistan notice has not been accepted.
  */

  html.crx-pakistan-notice-pending .crx-universal-nav,
  html.crx-pakistan-notice-pending .universal-nav,
  html.crx-pakistan-notice-pending .site-nav,
  html.crx-pakistan-notice-pending .navbar,
  html.crx-pakistan-notice-pending .crx-nav,
  html.crx-pakistan-notice-pending .crx-mobile-nav,
  html.crx-pakistan-notice-pending #universalNav,
  html.crx-pakistan-notice-pending [data-universal-nav],
  html.crx-pakistan-notice-pending body > nav,
  html.crx-pakistan-notice-pending body > header > nav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

}

/* END CRX MOBILE NAV UNTIL NOTICE ACCEPTED */

