/* ==========================================================================
   1. Custom Properties (Variables)
   ========================================================================== */

body {
  --page-width: 120rem;
  --cell-inline-padding: 0.75rem;
  --Gradient-2: linear-gradient(
    131deg,
    var(--Primary-Gradients-2-Start) 5.47%,
    var(--Primary-Gradients-2-End) 100%
  );
  --Primary-Solid-Base: #f50049;
  --Primary-Solid-On-Primary-Strong: #ffffff;
  --Primary-Gradients-2-Start: #ff0a0a;
  --Primary-Gradients-2-End: #e500b9;
  --Surface-Solid-Peaked: #fcfcfc;
  --Surface-Solid-On-Surface-Strong: #42081b;

  --space-title-paragraph: 2rem;
  --space-paragraph-title: 3rem;
  --space-paragraph-paragraph: 1.25rem;
  --space-list-items: 1rem;
}

body ul[class^="PriorityNav_dropdown"] {
  max-width: 100%;
  overflow: auto;
}

body main section div[class^="Row_row"] div[class^="Row_firstColumn"] {
  flex: 1;
  width: 100%;
  min-width: unset;
}

body main section div[class^="Row_row"] div[class^="Row_secondColumn"] {
  display: none;
}

body nav[class^="Breadcrumbs_breadcrumbs"] {
  margin-block-end: 1rem;
}

body p.content-lastupdated {
  color: #888;
  font-size: 0.9rem !important;
}

/* ==========================================================================
   2. Gaps
   ========================================================================== */

main {
  /* H1 HEADING GAPS */
  h1 + p,
  h1 + ol,
  h1 + ul,
  h1 + blockquote,
  h1 + picture,
  h1 + table,
  h1 + div.table-wrap,
  h1 + h2 {
    margin-top: var(--space-title-paragraph);
  }

  p + h1,
  ol + h1,
  ul + h1,
  picture + h1,
  blockquote + h1 {
    margin-top: var(--space-paragraph-title);
  }

  /* H2 HEADING GAPS */
  h2 + p,
  h2 + ol,
  h2 + ul,
  h2 + h3,
  h2 + picture,
  h2 + table,
  h2 + div.table-wrap,
  h2 + blockquote {
    margin-top: var(--space-title-paragraph);
  }

  p + h2,
  ol + h2,
  ul + h2,
  picture + h2,
  blockquote + h2 {
    margin-top: var(--space-paragraph-title);
  }

  /* H3 HEADING GAPS */
  h3 + p,
  h3 + ol,
  h3 + ul,
  h3 + blockquote,
  h3 + picture,
  h3 + table,
  h3 + div.table-wrap,
  h3 + h4 {
    margin-top: var(--space-title-paragraph);
  }

  p + h3,
  ol + h3,
  ul + h3,
  picture + h3,
  blockquote + h3 {
    margin-top: var(--space-paragraph-title);
  }

  /* H4 HEADING GAPS */
  h4 + p,
  h4 + ol,
  h4 + ul,
  h4 + picture,
  h4 + table,
  h4 + div.table-wrap,
  h4 + blockquote {
    margin-top: var(--space-title-paragraph);
  }

  p + h4,
  ol + h4,
  ul + h4,
  picture + h4,
  blockquote + h4 {
    margin-top: var(--space-paragraph-title);
  }

  /* PARAGRAPH GAPS */
  p + p,
  p + ol,
  ol + p,
  p + ul,
  ul + p {
    margin-top: var(--space-paragraph-paragraph);
  }

  /* IMAGE GAPS */
  picture + p,
  p + picture,
  picture + ol,
  ol + picture,
  picture + ul,
  picture + picture,
  ul + picture {
    margin-top: var(--space-paragraph-paragraph);
  }

  /* BLOCKQUOTE GAPS */
  blockquote + p,
  p + blockquote,
  blockquote + ol,
  ol + blockquote,
  blockquote + ul,
  ul + blockquote,
  blockquote + picture,
  picture + blockquote {
    margin-top: var(--space-paragraph-paragraph);
  }

  /* LISTS */
  ol {
    list-style: decimal outside;
  }

  ul {
    list-style: disc outside;
  }

  li + li,
  ol + ol,
  ul + ul {
    margin-top: var(--space-list-items);
  }

  ol + ul {
    margin-left: 6rem;
  }

  ul + ol {
    margin-top: var(--space-list-items);
  }

  ul,
  ol {
    margin: 0rem 0rem 0rem 3rem;

    li::marker {
      color: var(--Primary-Solid-Base);
      font-size: 1.25rem;
    }
  }

  /* TABLES */
  table + h1,
  div.table-wrap + h1,
  table + h2,
  div.table-wrap + h2,
  table + h3,
  div.table-wrap + h3,
  table + h4,
  div.table-wrap + h4,
  table + ol,
  table + ul,
  ol + table,
  ul + table,
  ol + div.table-wrap,
  ul + div.table-wrap,
  table + p,
  div.table-wrap + p,
  p + table,
  p + div.table-wrap {
    margin-block-start: var(--space-title-paragraph);
  }
}

/* ==========================================================================
   3. Base Element Selectors (broad → specific)
   ========================================================================== */

body main {
  margin-top: 0 !important;
}

body main table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem !important;
  font-family: inherit;
  line-height: 1.5rem !important;
}

body main button.intro-toggle-btn {
  margin: 1rem auto;
  text-align: center;
  width: 100%;
}

/* ==========================================================================
   4. Table Element Selectors
   ========================================================================== */

body .table-wrap {
  overflow: auto;
}

body table th,
body table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body table th,
body table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  word-break: normal !important;
  overflow-wrap: break-word;
}

body table th {
  white-space: nowrap !important;
}

body table thead tr {
  background-color: #1a1a2e;
  color: #ffffff;
}

body table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

body table tbody tr:hover {
  background-color: #eef2ff;
}

/* ==========================================================================
   5. Component / Class-Based Selectors
   ========================================================================== */

body main .casino-footer p {
  color: #282828;
  padding: 1rem 0;
  font-size: 0.8rem;
}

body main .casino-footer p a {
  color: #282828;
}

body main .casino-footer p.compliance-logos {
  margin-inline: auto;
  text-align: center;
}

body main .casino-footer img {
  max-width: min(80vw, 410px);
  max-height: 51px;
  height: auto;
}

body *::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}

body *::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.4rem #ddd;
  border-radius: 0.4rem;
}

body *::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 0.4rem;
}

body .casino-image {
  max-width: 700px;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

body .casino-image:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* ==========================================================================
   6. Media Queries (smallest breakpoint → largest)
   ========================================================================== */

@media screen and (max-width: 480px) {
  body main h1 {
    font-size: 2rem !important;
  }

  body main h2 {
    font-size: 1.625rem !important;
  }

  body main h3 {
    font-size: 1.3rem !important;
  }

  body main h4 {
    font-size: 1.1rem !important;
    font-weight: 700;
  }

  body main p,
  body main li {
    font-size: 1.1rem !important;
    line-height: 2.1rem !important;
  }

  body main ol li,
  body main ul li {
    padding: 0 0 0.1rem 0;
  }
}

@media screen and (min-width: 481px) {
  body main h1 {
    font-size: 2.875rem !important;
  }

  body main h2 {
    font-size: 2.25rem !important;
  }

  body main h3 {
    font-size: 1.625rem !important;
  }

  body main h4 {
    font-size: 1.2rem !important;
    font-weight: 700;
  }

  body main p,
  body main li {
    font-size: 1.1rem !important;
    line-height: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  body table thead {
    display: none;
  }

  body table tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  body table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    gap: 12px;
  }

  body table tbody td:last-child {
    border-bottom: none;
  }

  body table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #1a1a2e;
    flex-shrink: 0;
    min-width: 140px;
  }
}