.hawks-edp-page .customInteriorContentWrapper {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #4a2a2e 0%, #1a0a0e 100%);
}
.hawks-edp-page .customInteriorContentWrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence type="turbulence" baseFrequency="0.7" numOctaves="3" /></filter><rect width="300" height="300" filter="url(%23noise)" opacity="0.12"/></svg>');
  pointer-events: none;
  z-index: 1;
}
.hawks-edp-page .customInteriorContent {
  padding: 0;
  background: #fff;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .hawks-edp-page .customInteriorContent {
    max-width: 768px;
    margin: 25px auto;
    border-radius: 25px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  }
}

.logoMatchup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  background: url(https://cdn.nba.com/teams/uploads/sites/1610612737/2025/07/sfa_bowl_fans_v3.jpg?imformat=generic) no-repeat;
  background-size: cover;
  background-position: center center;
  aspect-ratio: 2 / 1;
}
.logoMatchup:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.gameGraphicContainer img {
  width: 100%;
  height: auto;
}
.logoContainer {
  width: 225px;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logoContainer img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.vsTxt::before {
  content: "VS";
  font-size: 2em;
  font-weight: bold;
  color: #fff;
}

.logoContainer,
.vsTxt {
  z-index: 1;
}
.infoContainer {
  position: relative;
  padding: 15px;
}
.matchupDetails .gameTitleBasic {
  font-size: 2em;
  font-weight: bold;
}
@media (min-width: 768px) {
  .matchupDetails h1,
  .matchupDetails .gameTitleBasic,
  .calloutsWrapper {
    padding-right: 130px;
  }
}
@media (max-width: 767px) {
  .matchupDetails h1,
  .matchupDetails .gameTitleBasic {
    padding-right: 20vw;
  }
}
.hawks-edp-page {
  font-size: 16px;
}
@media (max-width: 400px) {
  .hawks-edp-page {
    font-size: 14px;
  }
}
.hawks-edp-page .customInteriorContent h1,
.hawks-edp-page .customInteriorContent h2,
.hawks-edp-page .customInteriorContent h3,
.hawks-edp-page .customInteriorContent h4,
.hawks-edp-page .customInteriorContent h5 {
  margin: 0 0 0.25em;
  line-height: 115%;
  color: #000;
  font-weight: bold;
}
.hawks-edp-page .customInteriorContent h1 {
  font-size: 2em;
}
.hawks-edp-page .customInteriorContent h2 {
  font-size: 1.8em;
  font-weight: bold;
}
.hawks-edp-page .customInteriorContent h3 {
  font-size: 1.4em;
}
.gameDetailsSubtitle {
  font-size: 1.2em;
}
.hawks-edp-page .customInteriorContent h4 {
  font-size: 1.2em;
}
.customInteriorContent .partnerContainer {
  width: 22vw;
  aspect-ratio: 2 / 1.25;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  text-align: center;
  padding: 1.7em 1em 0 0;
}
@media (min-width: 768px) {
  .customInteriorContent .partnerContainer {
    width: 9em;
  }
}
@media (max-width: 359px) {
  .customInteriorContent .partnerContainer {
    padding: 1.7em 0 0 0;
  }
}
.customInteriorContent .partnerIntroContainer {
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
}
.customInteriorContent .partnerImgContainer img {
  max-height: 50px;
  max-width: 100px;
  width: auto;
  height: auto;
}
@media (max-width: 500px) {
  .customInteriorContent .partnerImgContainer img {
    max-height: 45px;
    max-width: 80px;
  }
}
@media (max-width: 400px) {
  .customInteriorContent .partnerImgContainer img {
    max-height: 40px;
    max-width: 55px;
  }
}
.calloutLabel {
  display: inline-block;
  width: auto;
  font-size: 0.8em;
  font-weight: bold;
  background: #e1e1e1;
  padding: 0.2em 1em 0.3em;
  border-radius: 5em;
  margin: 0 0.25em 0.5em 0;
}
@media (max-width: 499px) {
  .calloutLabel {
    font-size: 0.8em;
  }
}
.stationsSection {
  margin: 0.8em 0 0;
}
.broadcastStation {
  position: relative;
  display: inline-block;
  color: #555;
  font-size: 0.8em;
  padding-left: 1.3em;
  margin-right: 1em;
}
.broadcastStation::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23888888' viewBox='0 0 640 640'%3E%3Cpath d='M96 160L96 400L544 400L544 160L96 160zM32 160C32 124.7 60.7 96 96 96L544 96C579.3 96 608 124.7 608 160L608 400C608 435.3 579.3 464 544 464L96 464C60.7 464 32 435.3 32 400L32 160zM192 512L448 512C465.7 512 480 526.3 480 544C480 561.7 465.7 576 448 576L192 576C174.3 576 160 561.7 160 544C160 526.3 174.3 512 192 512z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0.25em;
}
.broadcastStation[data-type="radio"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23888888' viewBox='0 0 640 640'%3E%3Cpath d='M160 288C160 199.6 231.6 128 320 128C408.4 128 480 199.6 480 288L480 325.5C470 322 459.2 320 448 320L432 320C405.5 320 384 341.5 384 368L384 496C384 522.5 405.5 544 432 544L448 544C501 544 544 501 544 448L544 288C544 164.3 443.7 64 320 64C196.3 64 96 164.3 96 288L96 448C96 501 139 544 192 544L208 544C234.5 544 256 522.5 256 496L256 368C256 341.5 234.5 320 208 320L192 320C180.8 320 170 321.9 160 325.5L160 288z' /%3E%3C/svg%3E");
}

.hawks-edp-page .customInteriorContent p {
  font-size: 1.1em;
  color: #666;
}
.hawks-edp-page .customInteriorContent .btnsContainer {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5em 0;
  text-align: center;
}

.hawks-edp-page .customInteriorContent .btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  width: 96%;
}

/* FAQ Accordion */
.hawksAccordionFAQsContainer {
  margin-bottom: 1em;
}

/* Responsive */
@media (max-width: 767px) {
  .logoMatchup {
    gap: 2em;
  }

  .logoContainer {
    width: 28vw;
    height: auto;
  }
}

section.infoContainer.sectionPromos,
section.infoContainer.sectionAddons {
  background: #eee;
  padding-top: 1.5em;
}

.promotionsList {
  text-align: center;
}
.swiperOuterContainer {
  margin: 0 -15px;
}
.swiper-wrapper {
  padding: 0 !important;
}

/**********************
* promo item styles
**********************/
.promoItem {
  position: relative;
  width: 100%;
  margin: 0 0 1.5em 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 0.75em;
}
.customInteriorContent .promoImgContainer {
  overflow: hidden;
}
@media (min-width: 768px) {
  .customInteriorContent .promoImgContainer {
    border-top-left-radius: 0.75em;
    border-bottom-left-radius: 0.75em;
  }
}
@media (max-width: 767px) {
  .customInteriorContent .promoImgContainer {
    border-top-left-radius: 0.75em;
    border-top-right-radius: 0.75em;
  }
}
.customInteriorContent .promoImgContainer {
  margin: 0;
  position: relative;
  background-color: #f0f0f0;
  border-right: solid 1px rgba(0, 0, 0, 0.1);
}
.promoInfoContainer {
  padding: 1.2em 1.25em;
  overflow: hidden;
}
.promoName {
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 0.4em;
  line-height: 1.2;
}
.promoItemDesc {
  font-size: 1.05em;
  line-height: 1.4;
  color: #444;
  margin-bottom: 1em;
}
.promoBtnContainer {
  text-align: left;
  margin-top: auto;
}
.btnBuyPromo {
  display: inline-block;
  padding: 10px 30px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  .promoItem {
    height: 200px;
  }
  .customInteriorContent .promoImgContainer {
    aspect-ratio: 3 / 2;
    height: 100%;
    width: auto;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .customInteriorContent .promoImgContainer img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
  }
  .promoInfoContainer {
    flex: 1; /* Fill remaining space */
    display: flex;
    flex-direction: column;
  }
  .promoBtnContainer {
    margin-top: auto; /* Push button to bottom */
    position: static;
    width: auto;
  }
}
@media (max-width: 767px) {
  .promoItem {
    flex-direction: column;
  }
  .promoInfoContainer {
    height: 250px !important;
  }
  .customInteriorContent .promoImgContainer {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }
  .promoBtnContainer {
    text-align: center;
    position: absolute;
    bottom: 1em;
    left: 2%;
    width: 96%;
  }
}
.promoReadMore {
  color: #23527c;
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
} /* Bootstrap Popover Customization */
.popover {
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  font-family: inherit;
  max-width: 320px; /* Keep it readable */
}

.popover-title {
  font-weight: bold;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  font-size: 1.1em;
}

.popover-content {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  padding: 12px 15px;
}

/* Ensure the arrow matches the popover styling */
.popover.top > .arrow:after {
  border-top-color: #fff;
}
/**********************
* END promo item styles
**********************/

.addonBlock {
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) {
  .addonBlocksContainer {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
  }
  .addonBlock {
    width: 96%;
    transition: all 0.2s ease-in-out;
  }
  .addonBlock:hover {
    transform: scale(1.03);
  }
  .addonBlock:first-of-type {
    justify-self: flex-start;
  }
  .addonBlock:last-of-type {
    justify-self: flex-end;
  }
}
.sectionMemPromo {
  padding: 0;
}

a.btn.btn-tm {
  background-image: url(https://cdn.nba.com/teams/uploads/sites/1610612737/2026/02/ticketmaster_logo_2026_white.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 40%;
  color: transparent !important;
}

.appDownloadBtnsContainer a.btn {
  width: 46% !important;
  margin: 0 2% 15px 0;
}

section.vidSection {
  display: flex;
  position: relative;
  overflow: hidden;

  align-items: center;
  justify-content: center;
  background-color: #c8102e;
  background-image: url(https://cdn.nba.com/teams/uploads/sites/1610612737/2023/07/ce_2021_torch_retro_dome_bg.jpg);
}
.hawks-edp-page .customInteriorContent .vidSection h3 {
  color: #fff;
  text-transform: uppercase;
}
.vidTxtContent {
  text-align: center;
  z-index: 2;
}
.vidHashContainer img {
  max-width: 461px;
  margin: 10px 0;
}
.vidSection .btnContainer {
  margin: 25px 0 0;
}
.vidSection .btnContainer a.btn {
  padding: 0.25em 1em;
  background: rgba(0, 0, 0, 0.4);
}
.vidSection .btnContainer a.btn i {
  color: #000;
  color: #fff;
  margin-right: 10px;
}
.vidSection .btnContainer a.btn.btn-peach.btn-outline i {
  color: #fff;
}
.vidTxtContent {
  font-size: 2.5vw;
}
.vidSection h3 {
  font-size: 1em;
}
.vidHashContainer img {
  width: 9em;
}
.vidSection .btnContainer a.btn {
  font-size: 0.65em;
}
.vidSection .btnContainer a.btn i {
  font-size: 0.75em;
}
.videoModal .modal-dialog {
  width: 96%;
  max-width: 1400px;
  background: black;
  margin-top: 10vh;
}
.videoModal .close {
  color: rgba(255, 255, 255, 1);
  top: -50px !important;
  right: 10px !important;
}
.videoModal .modal-content {
  background: none;
}
.ytVidContainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.videoModal .modal-body {
  padding: 0;
  box-shadow: none;
}
.blackModalBackdrop .modal-backdrop {
  opacity: 1 !important;
}
section.vidSection {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  width: 100%;
  max-width: unset;
  min-width: unset;
  height: auto;
  min-height: unset;
  max-height: unset;
  aspect-ratio: 5 / 2;
}
.vidSection::before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.vidSection video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
@media (max-width: 767px) {
  section.vidSection {
    aspect-ratio: 1 / 1;
  }
  .vidTxtContent {
    font-size: 6.5vw;
  }
}