/* ========================= BASE ========================= */

/* Bootstrap backdrop tint override */
.modal-backdrop.show { background: var(--backdrop); }

/* ========================= COMPONENTS ========================= */

/* Modal dialog width (desktop) */
#incModal .modal-dialog { max-width: var(--promo-w); }

/* Card shell */
.promo-card{
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--white);
  background: var(--promo-gradient);
  box-shadow: var(--shadow-lg);
  width: var(--promo-w);
  height: var(--promo-h);
  display: flex;
}

/* Dots overlay + soft highlight */
.promo-card::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background-image: var(--dot-url), var(--highlight);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-position: center, center;
  opacity:.55;        /* brighten/dim dots here */
  mix-blend-mode:screen;
}

/* Inner grid (desktop) */
.promo-wrap{
  position:relative; z-index:1;
  padding: var(--pad-card-desk);
  display:grid; grid-template-columns: 1fr 360px;
  gap:36px; align-items:center; width:100%;
}

/* Left column */
.promo-brand img{
  height:55px; display:block;
  margin-bottom:68px; margin-top:-40px;
}

.promo-title{
  font-weight: var(--h1-weight);
  font-size: var(--title-desk);
  line-height: 1.1;
  margin: 0 0 10px;
  white-space: nowrap;
  max-width: 620px;
}

.promo-sub{
  margin: 0 0 42px;
  font-size: var(--subtitle-desk);
  line-height: 1.4;
}

/* CTA button */
.btn-yellow{
  background: var(--brand-orange-500);
  color: var(--white);
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-weight: 500;
  font-size: 18px;
  line-height: 38px;
  cursor: pointer;
}
.btn-yellow:hover{ background: var(--brand-orange-600); }

/* Medal (right) */
.promo-right{ position:relative; }
.promo-medal{
  width:320px; max-width:100%; height:auto;
  margin-top:-48px; margin-right:-4px;
}

/* Custom SVG close */
.promo-close{
  position:absolute; top: 40px;
    right: 22px;
    z-index: 3;
    width: 28px;
    height: 28px;  background:transparent; border:none;
  display:grid; place-items:center; cursor:pointer;
}
.promo-close svg{ width:18px; height:18px; }

/* ========================= MOBILE ========================= */
@media (max-width:576px){
  #incModal .modal-dialog{
    max-width: var(--promo-mw);
    margin: .6rem auto;
  }
  .promo-card{
    width: var(--promo-mw);
    height: var(--promo-mh);
    border-radius: var(--radius-card);
    display:flex; align-items:center; justify-content:center;
  }
  .promo-wrap{
    padding: var(--pad-card-mob);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    width:100%; height:100%; justify-content:flex-start;
  }

  /* Medal first */
  .promo-right{ order:-1; width:100%; }
  .promo-medal{ width:175px; margin:-14px auto 16px; }

  /* Logo & text */
  .promo-brand img{ height:27px; margin:-15px auto 18px; }

  .promo-title{
    font-size: var(--title-mob);
    line-height: 1.3;
    white-space: normal;
    margin: 30px 0 8px;
  }
  .promo-sub{
    font-size: var(--subtitle-mob);
    line-height: 1.35;
    margin: 0 0 26px;
  }

  .btn-yellow{
    padding: 8px 20px;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 38px;  /* extra bottom breathing room */
  }

  .promo-close{ top:24px; right:12px; }
}



/* ========================= TOKENS ========================= */
:root{
  /* Brand colors */
  --brand-blue-500: #0B66FF;
  --brand-blue-700: #0052D6;
  --brand-orange-500: #f7981c;
  --brand-orange-600: #DE6E05;
  --white: #FFFFFF;

  /* Backgrounds / overlay */
  --backdrop: rgba(9,17,34,.60);

  /* Sizing (desktop) */
  --promo-w: 1080px;
  --promo-h: 485px;

  /* Sizing (mobile) */
  --promo-mw: 320px;
  --promo-mh: 560px;

  /* Border radius & shadows */
  --radius-card: 12px;
  --radius-btn: 6px;
  --shadow-lg: 0 20px 50px rgba(2,6,23,.35);

  /* Typography */
  --font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --h1-weight: 800;
  --title-desk: 48px;
  --title-mob: 24px;
  --subtitle-desk: 26px;
  --subtitle-mob: 20px;

  /* Spacing */
  --pad-card-desk: 32px 40px 34px 44px;
  --pad-card-mob: 0 16px 28px;

  /* Assets */
  --dot-url: url("../../assets/img/inc-5000/background-dot.png");

  /* Gradients */
  --promo-gradient: linear-gradient(135deg, var(--brand-blue-500) 0%, var(--brand-blue-700) 100%);
  --highlight: radial-gradient(900px 350px at 82% 12%, rgba(255,255,255,.12), transparent 60%);
}


/* ========================= UTILITIES ========================= */
.hidden{ display:none !important; }
.text-center{ text-align:center !important; }
.mb-0{ margin-bottom:0 !important; }

/* Unique backdrop just for the Inc modal */
.tl-inc-backdrop.show{
  background: var(--backdrop) !important;  /* uses your token */
}

/* Fix: ensure modal content is above backdrop */
.modal.show {
  z-index: 1060 !important;
}
.modal-backdrop.show {
  z-index: 1050 !important;
}

/* --- Force modal above all WordPress / builder wrappers --- */
.modal-backdrop.show {
  z-index: 1050 !important;
}
.modal.show {
  z-index: 1060 !important;
}

/* --- Guarantee clicks inside the modal are accepted --- */
.modal.show,
.modal-content-popup,
.promo-card,
.promo-wrap,
.promo-close,
.btn-yellow {
  pointer-events: auto !important;
}

/* --- Block pointer events on the backdrop only --- */
.modal-backdrop {
  pointer-events: none !important;
}