/* ==========================================
   File: /css/gamblexpress-carousel.css
   GambleXpress HTML-Only Carousel System
========================================== */

.gx-carousel-wrap {
  width: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
}

.gxU,
.gxU * {
  box-sizing: border-box;
}

.gxU {
  width: 100%;
  margin: 0 auto 34px auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}

.gxU-header {
  text-align: center;
  margin-bottom: 14px;
}

.gxU-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

.gxU-subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.gxU-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 16px 2px;
}

.gxU-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  align-items: stretch;
}

.gxU-card {
  flex: 0 0 300px;
  width: 300px;
  min-height: 500px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  color: #000;
}

.gxU-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  display: block;
}

.gxU-card h3 {
  margin: 0 0 8px 0;
  min-height: 42px;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: #000;
}

.gxU-card p {
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #000;
}

.gxU-states {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}

.gxU-btn {
  margin-top: auto;
  display: inline-block;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #008a2e;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background .2s ease, transform .2s ease;
}

.gxU-btn:hover,
.gxU-btn:focus {
  background: #0d5f94;
  transform: translateY(-1px);
}

.gxU-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0 0;
}

.gxU-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
  padding: 0;
}

.gxU-dot.is-active,
.gxU-dot[aria-selected="true"] {
  background: #1477b8;
}

@media (max-width: 768px) {
  .gx-carousel-wrap {
    padding: 10px;
  }

  .gxU-title {
    font-size: 21px;
  }

  .gxU-card {
    flex-basis: 270px;
    width: 270px;
    min-height: 500px;
  }

  .gxU-img {
    height: 165px;
  }
}

@media (max-width: 480px) {
  .gxU-card {
    flex-basis: 255px;
    width: 255px;
  }

  .gxU-card p,
  .gxU-states {
    font-size: 13px;
  }
}

/* ==========================================
   AUTHORIZED STATES TEXT
========================================== */

.gxU-states {
  margin: 2px 0 12px 0;
  font-size: 11px;
  line-height: 1.35;
  color: #444;
  text-align: left;
}

.gxU-states strong {
  font-size: 11px;
  color: #000;
}

/* ==========================================
   GAMBLEXPRESS CAROUSEL SAFETY OVERRIDES
   Protect gxU carousel from general CSS
========================================== */

.gx-carousel-wrap,
.gxU,
.gxU-viewport,
.gxU-track,
.gxU-card {
  max-width: none;
}

.gxU-viewport {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.gxU-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: stretch !important;
}

.gxU-card {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
}

.gxU-img {
  width: 100% !important;
  height: 180px !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  .gxU-card {
    flex-basis: 270px !important;
    width: 270px !important;
    max-width: 270px !important;
  }

  .gxU-img {
    height: 165px !important;
  }
}

@media (max-width: 480px) {
  .gxU-card {
    flex-basis: 255px !important;
    width: 255px !important;
    max-width: 255px !important;
  }
}

/* ==========================================
   GambleXpress Carousel Parent-Layout Patch
   Protects gxU carousel from GambleXpress.css
========================================== */

.gx-carousel-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 1290px !important;
  min-width: 0 !important;
  flex: none !important;
  align-self: center !important;
  text-align: initial !important;
  overflow: visible !important;
}

.gxU {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  text-align: initial !important;
  overflow: visible !important;
}

.gxU-header {
  text-align: center !important;
}

.gxU-viewport {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.gxU-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

.gxU-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  overflow: visible !important;
  text-align: left !important;
}

.gxU-card h3 {
  text-align: center !important;
}

.gxU-card p {
  text-align: left !important;
}

.gxU-btn {
  text-align: center !important;
}

@media (max-width: 768px) {
  .gxU-card {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: 270px !important;
    min-width: 270px !important;
  }
}

@media (max-width: 480px) {
  .gxU-card {
    flex: 0 0 255px !important;
    width: 255px !important;
    max-width: 255px !important;
    min-width: 255px !important;
  }
}

/* ========================================== GambleXpress Carousel Equal-Height / Button Alignment Patch Keeps all cards equal, minimizes excess height, and centers CTA buttons ========================================== */ .gxU-track { align-items: stretch !important; } /* Equal card structure */ .gxU-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; /* Keep cards equal without forcing unnecessary extra height. Adjust this value only if one carousel has unusually long copy. */ min-height: 470px !important; padding: 14px !important; text-align: left !important; } /* Fixed image height keeps card tops consistent */ .gxU-img { flex: 0 0 auto !important; height: 180px !important; margin-bottom: 10px !important; } /* Fixed title zone keeps buttons aligned even when names wrap */ .gxU-card h3 { flex: 0 0 auto !important; min-height: 46px !important; margin: 0 0 8px 0 !important; text-align: center !important; } /* Description text should not create random button positions */ .gxU-card p { flex: 0 0 auto !important; margin: 0 0 10px 0 !important; text-align: left !important; } /* Authorized states/info box remains compact */ .gxU-states { flex: 0 0 auto !important; margin: 2px 0 12px 0 !important; padding: 8px 9px !important; font-size: 11px !important; line-height: 1.3 !important; text-align: left !important; } /* This is the key rule: margin-top:auto creates flexible white space between the end of the text and the top of the button, so shorter cards still align with taller cards. */ .gxU-btn { display: inline-block !important; align-self: center !important; margin-top: auto !important; margin-left: auto !important; margin-right: auto !important; padding: 10px 18px !important; min-width: 128px !important; max-width: 90% !important; text-align: center !important; white-space: normal !important; } /* Tablet */ @media (max-width: 768px) { .gxU-card { min-height: 450px !important; } .gxU-img { height: 165px !important; } .gxU-card h3 { min-height: 44px !important; } } /* Mobile */ @media (max-width: 480px) { .gxU-card { min-height: 435px !important; } .gxU-img { height: 155px !important; } .gxU-card h3 { min-height: 42px !important; } .gxU-btn { min-width: 118px !important; } }