.borderRadius{ border-radius:5px; }
.borderRadiusTp{ border-radius:5px 5px 0 0;}
.borderRadiusBtm{ border-radius:0 0 5px 5px;}

.ddcommon {position:relative;display:-moz-inline-stack; zoom:1; display:inline-block; *display:inline; cursor:default;}
.ddcommon ul{padding:0;margin:0;}
.ddcommon ul li{list-style-type:none;}
.borderRadiusTp ul li:last-child{ border-radius:0 0 5px 5px;border-bottom:0 none #c3c3c3; }
.borderRadiusBtm ul li:first-child{ border-radius:5px 5px 0 0 ;border-bottom:1 solid #c3c3c3; }

.ddcommon .disabled img, .ddcommon .disabled span, .ddcommon.disabledAll{
opacity: .5; /* standard: ff gt 1.5, opera, safari */
-ms-filter:"alpha(opacity=50)"; /* ie 8 */
filter:alpha(opacity=50); /* ie lt 7 */
-khtml-opacity:.5; /* safari 1.x */
-moz-opacity:.5; /* ff lt 1.5, netscape */
color:#999999;
}
.ddcommon .clear{clear:both}
.ddcommon .shadow{box-shadow: 5px 5px 5px -5px #888888;}
.ddcommon input.text{color:#7e7e7e;padding:0 0 0 0; position:absolute; background:#fff; display:block; width:98%; height:98%; left:2px; top:0; border:none;}
.ddOutOfVision{position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
.borderRadius .shadow{box-shadow: 5px 5px 5px -5px #888888;}
.borderRadiusBtm .shadow{box-shadow: -5px -5px 5px -5px #888888}
.borderRadiusTp .border, .borderRadius .border{ border-radius:0 0 5px 5px;}
.borderRadiusBtm .border{ border-radius:5px 5px 0 0;}
img.fnone{float:none !important}
.ddcommon .divider{width:0; height:100%; position:absolute;}
.ddcommon .ddArrow{display:inline-block; position:absolute; top:50%; right:4px;}
.ddcommon .ddArrow:hover{background-position:0 100%;}
.ddcommon .ddTitle{padding:0; position:relative; display:inline-block; width:100%}
.ddcommon .ddTitle .ddTitleText{display:block;}
.ddcommon .ddTitle .ddTitleText .ddTitleText{padding:0;}
.ddcommon .ddTitle .description{display:block;}
.ddcommon .ddTitle .ddTitleText img{position:relative; vertical-align:middle; float:left}
.ddcommon .ddChild{position:absolute;display:none;width:100%;overflow-y:auto; overflow-x:hidden; zoom:1; z-index:9999}
.ddcommon .ddChild li{clear:both;}
.ddcommon .ddChild li .description{display:block;}
.ddcommon .ddChild li img{border:0 none; position:relative;vertical-align:middle;float:left}
.ddcommon .ddChild li.optgroup{padding:0;}
.ddcommon .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.ddcommon .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.ddcommon .noBorderTop{border-top:none 0  !important; padding:0; margin:0;}

/*************** default theme **********************/
.dd{border:1px solid #c3c3c3;}
.dd .divider{border-left:1px solid #c3c3c3; border-right:1px solid #fff;; right:24px;}
.dd .ddArrow{width:16px;height:16px; margin-top:-8px; background:url(/images/dd_arrow.gif?f522c8699fd0952be7384e79e165129b) no-repeat;}
.dd .ddArrow:hover{background-position:0 100%;}
.dd .ddTitle{color:#000;background:#e2e2e4 url(/images/title-bg.gif?30dc050cc41d40e6bfb1ef792283b689) repeat-x left top;}
.dd .ddTitle .ddTitleText{padding:5px 20px 5px 5px;}
.dd .ddTitle .ddTitleText .ddTitleText{padding:0;}
.dd .ddTitle .description{font-size:12px; color:#666}
.dd .ddTitle .ddTitleText img{padding-right:5px;}
.dd .ddChild{border:1px solid #c3c3c3; background-color:#fff; left:-1px;}
.dd .ddChild li{padding:5px; background-color:#fff; border-bottom:1px solid #c3c3c3;}
.dd .ddChild li .description{color:#666;}
.dd .ddChild li .ddlabel{color:#333;}
.dd .ddChild li.hover{background-color:#f2f2f2}
.dd .ddChild li img{padding:0 6px 0 0;}
.dd .ddChild li.optgroup{padding:0;}
.dd .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.dd .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.dd .ddChild li.selected{background-color:#d5d5d5; color:#000;}
/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 Saurabh Sharma
 * Licensed under  ()
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url(/images/vendor/owl.carousel2/dist/owl.video.play.png?4a37f8008959c75f619bf0a3a4e2d7a2) no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
@charset "UTF-8";

/*
* ============================
*     ClicheCode Template
* ============================
* Auther : Saran
* https://www.clichecode.com
*
*/

.bootbox-confirm {
  --bs-modal-margin: 12% !important;
}

.name-div {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  margin-top: 5px;
}

.match-place {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  height: 24px;
  padding-left: 20px;
  text-align: left;
}

.match-place img {
  position: absolute;
  left: 0;
  top: 5px;
}

#match-page {
  background-color: #f1f3f8;
}

#match-page .fan-row {
  color: #f3b42f !important;
  font-weight: bold;
}

#match-page .more-button {
  background-color: #db9e1d;
  margin: auto;
  display: table;
  border: none;
}

#match-page .more-button:hover {
  background-color: #c3880d;
}

#match-page .indicator-progress {
  display: none;
}

#match-page .icon-amount-exceed {
  width: 50px;
}

#match-page #qtyExceedModal .modal-body {
  line-height: 40px !important;
}

#match-page .no-ticket {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}

#match-page .no-ticket img {
  max-width: 150px;
}

#match-page .owl-carousel .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

#match-page .owl-carousel .owl-nav .owl-prev {
  color: #fff;
  left: -20px;
  position: absolute;
  background: #1f2636;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  text-align: center;
  right: 34px;
  font-size: 10px;
}

#match-page .owl-carousel .owl-nav .owl-next {
  color: #fff;
  position: absolute;
  background: #1f2636;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  text-align: center;
  right: -20px;
  font-size: 10px;
}

#match-page .layoutView {
  margin: auto;
  display: none;
}

#match-page #loader {
  display: none;
  max-width: 100px;
  margin: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

#match-page #loader img {
  max-width: 100px;
}

#match-page .loader {
  display: none;
  text-align: center;
}

#match-page .loader img {
  max-width: 100px;
  margin: auto;
}

#match-page .banner-contr img {
  max-width: 100%;
}

#match-page .banner-contr .banner-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#match-page .banner-contr .banner-content img {
  max-height: 50px;
  max-width: 100px;
}

#match-page .banner-contr .banner-content h2 {
  font-size: 16px !important;
  line-height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 120px;
  font-family: Gilroy-Medium;
  margin: 0;
}

#match-page .banner-contr .banner-content .logo-right h2 {
  left: 120px;
  right: auto;
  margin: 0;
}

#match-page .banner-contr .banner-content .center {
  transform: translateY(-50%);
  top: 50%;
}

#match-page .banner-contr .banner-content .title img {
  max-width: 50px !important;
}

#match-page .banner-contr .banner-content .title h1 {
  font-size: 18px;
}

#match-page .banner-contr .banner-content .match-league-img {
  margin-bottom: 20px;
  margin-top: 10px;
}

#match-page .banner-contr .banner-content .match-date-time {
  margin-top: 10px;
}

#match-page .banner-contr .banner-content .match-date-time h3 {
  font-family: Gilroy-Medium;
  font-size: 16px;
  color: #f3b42f;
}

#match-page .banner-contr .banner-content .match-date-time p {
  color: #727b8d;
  font-family: Gilroy-Medium;
  font-size: 16px;
}

#match-page .category-dots {
  margin-top: 7px;
}

#match-page .category-dots p {
  font-size: 16px;
  margin-left: 5px;
  margin-right: 5px;
}

#match-page .category-dots .a {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin-top: 3px;
}

#match-page .category-dots .red {
  background: red !important;
}

#match-page .category-dots .green {
  background: green !important;
}

#match-page .category-dots .violet {
  background: violet !important;
}

#match-page .category-dots .pink {
  background: pink !important;
}

#match-page .category-dots .black {
  background: black !important;
}

#match-page .category-dots .blue {
  background: blue !important;
}

#match-page .category-dots .yellow {
  background: yellow !important;
}

#match-page .category-dots .orange {
  background: orange !important;
}

#match-page .category-dots .brown {
  background: brown !important;
}

#match-page .select2-container--default .select2-selection--single {
  background: #1f2636;
  color: #fff;
  border: none;
}

#match-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #fff !important;
}

#match-page .content-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#match-page .gr-view {
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

#match-page .ticket-stadium-section {
  background: #000;
  animation: flowInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#match-page .ticket-stadium-section .matches-carousel {
  padding: 50px 0px;
  padding-bottom: 80px;
}

#match-page .ticket-stadium-section .matches-carousel h2 {
  color: #fff;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item a {
  color: #000;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .date {
  width: 100%;
  position: relative;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .date h1 {
  font-size: 36px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .date .month {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 50px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .date .month p {
  font-size: 14px;
  margin: 0;
  line-height: 20px;
  font-family: Gilroy-Medium;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .date .month p span {
  font-family: Gilroy-Bold;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .time {
  width: 100%;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .time p {
  font-size: 14px;
  margin: 0;
  line-height: 20px;
  font-family: Gilroy-Medium;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .time p span {
  font-size: 14px;
  font-family: Gilroy-Bold;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .time p.timezone {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 20px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos {
  width: 100%;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos .logo-width {
  width: 45%;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos .logo-width .logo-image-space {
  height: 60px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos .logo-width .logo-image-space img {
  max-width: 70px;
  max-height: 60px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos h1 {
  font-size: 18px;
  margin: auto;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos h4 {
  font-size: 14px;
  margin: 5px 0px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 17px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets {
  position: relative;
  margin-top: 40px;
  border: 1px solid #dddddd;
  padding: 15px 10px 15px;
  border-radius: 12px;
  text-align: center;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets a {
  color: #000000;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets button a {
  color: #fff !important;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .border-line-logo {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .border-line-logo img {
  text-align: center;
  display: initial;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets p.match-tl {
  -webkit-line-clamp: 2;
  font-family: Gilroy-Bold;
  line-height: 21px;
  height: 42px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .stadium-logo {
  padding-left: 20px;
  padding-bottom: 5px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .stadium-logo img {
  max-width: 14px !important;
  max-height: 14px !important;
  width: 14px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 5px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .border-line-logo img {
  max-width: 35px;
  max-height: 35px;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets p {
  margin: 0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

#match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets button {
  border: none;
  border-radius: 6px;
  background: #0f131b;
  color: #fff;
  width: 150px;
  height: 30px;
  font-size: 15px;
  font-family: Gilroy-Bold;
}

#match-page .select2-container {
  width: 100% !important;
  height: 38px !important;
}

#match-page .select2-container .select2-selection__arrow {
  height: 38px !important;
}

#match-page .select2-container .select2-selection__rendered {
  height: 38px !important;
  line-height: 38px !important;
  color: #fff;
}

#match-page .select2-container .select2-selection {
  height: 38px !important;
}

#match-page .select2-container .selection {
  width: 100% !important;
}

#match-page .select2-container .select2-results__option {
  height: 30px !important;
}

#match-page .select2-container .select2-dropdown {
  border-radius: 0px !important;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
}

#match-page .select2-container:focus,
#match-page .select2-container .select2-selection:focus,
#match-page .select2-container .select2-search__field:focus {
  border-color: #a1cbef;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}

#match-page #ticketReqForm {
  float: right;
  padding-right: 80px;
  padding-left: 0;
}

#match-page #ticketReqForm span.ddlabel {
  padding-right: 5px;
}

#match-page #ticketReqForm input#phone {
  text-align: right;
}

#match-page #ticketReqForm .ddTitle.borderRadiusTp {
  border-right: none !important;
  border-left: 1px solid #ccc;
}

#match-page #ticketReqForm .dd .ddChild li {
  text-align: right;
}

#match-page #ticketReqForm .dd .ddChild li {
  text-align: right;
}

#match-page #ticketReqForm li.enabled._msddli_ span.ddlabel {
  float: none !important;
}

#match-page #ticketReqForm .dd .ddChild {
  left: auto;
}

#match-page .tl-cn i {
  border: 1px solid #E4B554;
  color: #E4B554;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  text-align: center;
  padding-top: 6px;
  float: left;
  margin-top: 11px;
  margin-right: 5px;
  font-size: 16px;
}

#match-page .tl-cn h1 {
  font-family: Sofia-Pro-Semi-Bold;
  font-size: 42px;
  padding-bottom: 10px;
}

#match-page .br-sec1 .form-group {
  padding-left: 40px;
  max-width: 220px;
}

#match-page .br-sec1 .form-group img {
  position: absolute;
  left: 0;
}

#match-page .br-sec1 .form-group input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #E4B554;
  border-radius: 0;
  height: 38px;
}

#match-page .br-sec1 .form-group input:focus {
  box-shadow: none !important;
}

#match-page .br-sec1 span:focus {
  box-shadow: none !important;
}

#match-page .br-sec1 h1.date-match {
  font-size: 18px;
  background: #000;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  text-align: center;
}

#match-page .br-sec1 h1.date-match span {
  font-size: 14px;
}

#match-page .tournaments-main-sec {
  padding: 30px 0px;
  padding-top: 20px;
}

#match-page .tournaments-main-sec .sessionError {
  color: red;
  font-family: "Gilroy-Bold";
  font-size: 16px;
}

#match-page .tournaments-main-sec .sl-margin .mlop {
  padding: 0;
}

#match-page .tournaments-main-sec .sl-margin .mlop h1 {
  font-size: 24px;
  text-align: left;
  margin-bottom: 0;
}

#match-page .tournaments-main-sec .sl-margin .form-validate .form-group {
  margin-bottom: 0;
  margin-top: 15px;
}

#match-page .tournaments-main-sec .sl-margin .form-validate .form-group input {
  border-radius: 0.25rem;
  height: 40px !important;
  border: 1px solid #ddd !important;
  background: #fff;
}

#match-page .tournaments-main-sec .sl-margin .form-validate .form-group input#submit {
  border: none;
  height: 35px;
  line-height: 26px;
  color: #fff !important;
  background: #f3b42f;
}

#match-page .tournaments-main-sec .sl-margin .form-validate .form-group input#submit:hover {
  background: #cc9621;
}

#match-page .tournaments-main-sec .sl-margin .form-validate .form-text {
  margin-left: -15px;
  margin-right: -15px;
}

#match-page .tournaments-main-sec .ticket-price {
  /*
   * Used to hard-cap at 560px with its own scrollbar - now
   * superseded by #tickets' own sizing (JS-synced to the map's
   * height on desktop, natural page flow on mobile - see the
   * rules for #tickets further down this file). Left in place
   * unconditionally like this, it forced .ticket-price to a
   * fixed 560px on every breakpoint regardless of how much
   * content #tickets actually had - harmless by coincidence on
   * desktop, but a dead whitespace gap under a short mobile
   * category list once #tickets stopped needing the same cap.
   */
  height: 560px;
  overflow-y: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

#match-page .tournaments-main-sec .ticket-price .match-ticket-section {
  max-height: 400px;
  overflow-y: auto;
}

#match-page .tournaments-main-sec .ticket-price .red {
  border-left-color: red !important;
}

#match-page .tournaments-main-sec .ticket-price .red:hover {
  border-color: red !important;
}

#match-page .tournaments-main-sec .ticket-price .green {
  border-left-color: green !important;
}

#match-page .tournaments-main-sec .ticket-price .green:hover {
  border-color: green !important;
}

#match-page .tournaments-main-sec .ticket-price .violet {
  border-left-color: violet !important;
}

#match-page .tournaments-main-sec .ticket-price .violet:hover {
  border-color: violet !important;
}

#match-page .tournaments-main-sec .ticket-price .pink {
  border-left-color: pink !important;
}

#match-page .tournaments-main-sec .ticket-price .pink:hover {
  border-color: pink !important;
}

#match-page .tournaments-main-sec .ticket-price .black {
  border-left-color: black !important;
}

#match-page .tournaments-main-sec .ticket-price .black:hover {
  border-color: black !important;
}

#match-page .tournaments-main-sec .ticket-price .blue {
  border-left-color: blue !important;
}

#match-page .tournaments-main-sec .ticket-price .blue:hover {
  border-color: blue !important;
}

#match-page .tournaments-main-sec .ticket-price .yellow {
  border-left-color: yellow !important;
}

#match-page .tournaments-main-sec .ticket-price .yellow:hover {
  border-color: yellow !important;
}

#match-page .tournaments-main-sec .ticket-price .orange {
  border-left-color: orange !important;
}

#match-page .tournaments-main-sec .ticket-price .orange:hover {
  border-color: orange !important;
}

#match-page .tournaments-main-sec .ticket-price .brown {
  border-left-color: brown !important;
}

#match-page .tournaments-main-sec .ticket-price .brown:hover {
  border-color: brown !important;
}

#match-page .tournaments-main-sec .ticket-price .red .st1 {
  fill: red !important;
}

#match-page .tournaments-main-sec .ticket-price .green rect {
  fill: green;
}

#match-page .tournaments-main-sec .ticket-price .violet rect {
  fill: violet;
}

#match-page .tournaments-main-sec .ticket-price .pink rect {
  fill: pink;
}

#match-page .tournaments-main-sec .ticket-price .black rect {
  fill: black;
}

#match-page .tournaments-main-sec .ticket-price .blue rect {
  fill: blue;
}

#match-page .tournaments-main-sec .ticket-price .yellow rect {
  fill: yellow;
}

#match-page .tournaments-main-sec .ticket-price .orange rect {
  fill: orange;
}

#match-page .tournaments-main-sec .ticket-price .brown rect {
  fill: brown;
}

#match-page .tournaments-main-sec .seat-title {
  padding: 5px 10px;
}

#match-page .tournaments-main-sec .seat-title img {
  position: absolute;
  right: 30px;
  top: 10px;
}

#match-page .tournaments-main-sec .seat-title h1 {
  color: #0f131b;
  font-size: 16px;
}

#match-page .tournaments-main-sec .seat-title .seat-img img {
  position: absolute;
  left: auto;
  right: 20px;
  top: 15px;
}

#match-page .tournaments-main-sec .gr-view img {
  max-width: 100%;
  padding-right: 60px;
}

#match-page .tournaments-main-sec .ar-img {
  display: none;
}

#match-page .tournaments-main-sec .ticket-price label.offer-tl {
  width: 100%;
}

#match-page .tournaments-main-sec .ticket-price .row {
  margin: 0;
}

#match-page .tournaments-main-sec .ticket-price .seat-section {
  background: #ffffff;
  margin-bottom: 12px;
  border: 1px solid #eaeaea;
  border-left: 6px solid red;
  position: relative;
  overflow: hidden;
  min-height: 110px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  /*Prevent text selection*/
}

#match-page .tournaments-main-sec .ticket-price .seat-section:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
  transform: translateY(-1px);
}

#match-page .tournaments-main-sec .ticket-price .seat-section input::-webkit-outer-spin-button,
#match-page .tournaments-main-sec .ticket-price .seat-section input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#match-page .tournaments-main-sec .ticket-price .seat-section input[type=number] {
  -moz-appearance: textfield;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .btn-secondary {
  background: #e4b554;
  padding: 8px 24px;
  border: none;
  margin-top: 5px;
  border-radius: 6px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .py-3 {
  padding: 0 !important;
  padding-left: 10px !important;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .py-3 label {
  margin-bottom: 0;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .py-3 input {
  margin-top: 7px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section strike {
  opacity: 0.5;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .plus,
#match-page .tournaments-main-sec .ticket-price .seat-section .qty .minus {
  cursor: pointer;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  margin: 5px;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .plus {
  background: #313b51;
  color: #fff;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .plus:hover {
  background: #1f2636 !important;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .plus:active {
  transform: scale(0.92);
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .minus {
  background: #313b51;
  color: #fff;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .minus:hover {
  background: #1f2636 !important;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .qty .minus:active {
  transform: scale(0.92);
}

#match-page .tournaments-main-sec .ticket-price .seat-section span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#match-page .tournaments-main-sec .ticket-price .seat-section nput::-webkit-outer-spin-button,
#match-page .tournaments-main-sec .ticket-price .seat-section input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#match-page .tournaments-main-sec .ticket-price .seat-section input:disabled {
  background-color: white;
}

#match-page .tournaments-main-sec .ticket-price .seat-section input.count {
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  background: #f1f3f8;
  text-align: center;
  color: #000;
  border: none;
  width: 40px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section span.minus,
#match-page .tournaments-main-sec .ticket-price .seat-section span.plus {
  background: #f3f3f7;
  color: #000000;
  padding: 7px 12px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section p {
  margin-bottom: 0;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .buy_now {
  height: 38px;
  border: none;
  padding: 0px 20px;
  border-radius: 6px;
  background: #313b51;
  color: #fff;
  line-height: 38px;
  font-family: Gilroy-Medium;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .buy_now:hover {
  background: #1f2636;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#match-page .tournaments-main-sec .ticket-price .seat-section .buy_now:active {
  transform: scale(0.95);
}

#match-page .tournaments-main-sec .ticket-price .seat-section .dlr-cn h1 {
  font-size: 12px;
  font-weight: bold;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .dlr-cn span {
  font-size: 14px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .dlr-cn p {
  border-radius: 20px;
  text-align: center;
  font-size: 16px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .dlr-cn p.sym {
  font-size: 14px;
  border: none;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .fd-tab {
  padding-top: 15px;
  height: -moz-fit-content;
  height: fit-content;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .fd-tab .pld-lft {
  padding-left: 15px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .fd-tab .pld-lft img {
  display: none;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .fd-tab span.badge {
  border: 1px solid #e4b554;
  font-size: 13px;
  width: auto;
  padding: 5px 30px;
  display: table;
  color: #000;
  margin: auto;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .fd-tab .ofer-tl {
  border: 1px solid #e4b554;
  line-height: 18px;
  border-radius: 4px;
  width: -moz-max-content;
  width: max-content;
  padding: 2px 5px;
  margin-top: 5px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section .pl-one {
  padding-top: 15px;
}

#match-page .tournaments-main-sec .ticket-price .seat-section p.tktFillingStatus {
  background: #ffdd00;
  text-align: center;
  transform: rotate(-42deg);
  width: 150px;
  position: absolute;
  right: -37px;
  bottom: 22px;
  height: 30px;
  font-weight: bold;
}

#match-page .tournaments-main-sec .ticket-price .ticketSection:hover {
  border-left: 5px solid red;
}

#match-page .tournaments-main-sec .ticket-price .ticketSection:hover .dlr-cn p.sym {
  background: transparent;
}

#match-page .match-ticket-section .badge {
  color: #131821;
}

#match-page .tournaments-second-sec {
  padding: 50px 200px;
}

#match-page .tournaments-second-sec .info-sec {
  padding-right: 50px;
}

#match-page .tournaments-second-sec .info-sec img {
  float: left;
  width: 85px;
  height: 85px;
  -o-object-fit: cover;
     object-fit: cover;
}

#match-page .tournaments-second-sec .info-sec .team-logo {
  padding: 10px;
}

#match-page .tournaments-second-sec .info-sec .team-logo .teams-icon {
  margin: auto;
  display: flex;
}

#match-page .tournaments-second-sec .info-sec .team-logo .teams-icon p {
  padding: 30px 15px;
  padding-bottom: 0;
}

#match-page .tournaments-second-sec .info-sec p {
  padding-bottom: 20px;
  padding-top: 30px;
  font-size: 18px;
  padding-right: 15px;
  padding-left: 15px;
}

#match-page .tournaments-second-sec .info-sec a {
  font-size: 18px;
  text-align: center;
  text-decoration: underline !important;
  width: 100%;
}

#match-page .tournaments-second-sec .info-sec .line-contr {
  border-bottom: 1px dashed #b3b3b3;
  height: 1px;
  width: 100%;
  padding-bottom: 30px;
}

#match-page .tournaments-second-sec .address {
  padding-right: 0;
  padding-left: 0;
}

#match-page .tournaments-second-sec .date-location h1 {
  background: #2f2f2f;
  color: #fff;
  font-size: 28px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 4px;
}

#match-page .tournaments-second-sec .date-location h1 span.match-timezone {
  font-size: 14px;
}

#match-page .tournaments-second-sec .date-location h2 {
  font-size: 24px;
}

#match-page .tournaments-second-sec .date-location p {
  font-size: 18px;
}

#match-page .tournaments-second-sec .date-location a {
  font-size: 18px;
  text-decoration: underline !important;
}

#ticketRequestForm h4.modal-title {
  padding-left: 10px;
  padding-top: 30px;
}

#ticketRequestForm .dd .ddChild {
  min-height: 269px;
}

#ticketRequestForm .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ffffff;
  border-radius: 6px;
}

#ticketRequestForm .checkmark:after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  top: -3px;
  width: 9px;
  height: 20px;
  border: solid #39b24a;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

#ticketRequestForm .checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

#ticketRequestForm .checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: 28px;
}

#ticketRequestForm .checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

#reqTktModalBody {
  padding: 0px 40px;
  padding-bottom: 20px;
}

#ticketRequestForm input#reqSubmit {
  background: #e4b554;
  border: none;
}

#ticketRequestForm input#reqSubmit:hover {
  background: #d8a843;
  border: none;
}

.form-group .ddTitle.borderRadiusTp {
  background: #fff;
  border-radius: 3px 0px 0px 3px;
  height: 38px;
}

.form-group #countryCodeMatch_msdd {
  width: 35% !important;
}

.form-group #countryCode_msdd {
  width: 35% !important;
  line-height: 28px;
}

.form-group .phone {
  border-radius: 0px 5px 5px 0px !important;
  width: 65%;
}

.form-group input {
  height: 40px;
}

.bootbox .bootbox-body {
  text-align: center;
  padding: 5px;
  margin-top: 30px;
  font-size: 16px;
  padding-bottom: 0;
}

.bootbox .modal-footer {
  border: none;
  justify-content: center;
}

.bootbox .modal-footer .bootbox-accept {
  background: #f3b42f;
  color: #fff;
  padding: 5px 15px;
}

.bootbox .modal-footer .bootbox-cancel {
  background: #313b51;
  color: #fff;
  padding: 5px 15px;
}

.more-info {
  background: #f3b42f;
  width: -moz-max-content;
  width: max-content;
  padding: 3px 10px;
  border: 1px solid #0f131b;
  float: right;
  color: #000;
  font-family: Gilroy-Bold;
}

.side-menu {
  display: block;
}

.side-menu ul {
  color: #fff;
}

.side-menu ul li i {
  padding-right: 5px;
}

.pushmenu {
  width: 100%;
  max-width: 600px;
  height: 100%;
  top: 0px;
  z-index: 99;
  position: fixed;
}

.pushmenu-left {
  right: -600px;
}

.pushmenu-left.pushmenu-open {
  right: 0;
  padding: 0;
  background: #fff;
}

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  right: 0;
}

.pushmenu-push-toright {
  right: 300px;
}

.pushmenu,
.pushmenu-push {
  transition: all 0.5s ease;
}

.more-info-container {
  padding: 30px;
}

.more-info-container h3 {
  font-family: "Gilroy-Medium";
  font-size: 16px;
  margin: 15px 0px;
}

.more-info-container h3 span {
  color: #f3b42f;
}

.more-info-container svg {
  transform: rotate(180deg);
}

.cms-menu .more-info {
  background: transparent;
  color: #000;
  float: none;
}

.more-info-open:before {
  background: #0000008a;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.team-name-contr {
  display: none !important;
}

.ticket-price .available-ticket-title {
  font-size: 24px;
}

.ticket-price .available-ticket-mob {
  font-size: 24px;
}

.ticket-price .ticket-category {
  padding: 16px 20px;
  border-radius: 12px !important;
  margin-bottom: 12px;
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  display: flex;
  align-items: center;
}

.ticket-price .ticket-category h2 {
  font-size: 16px;
  margin: 0;
  padding: 2px 0px;
  color: #131821;
  font-family: Gilroy-Medium;
}

.ticket-price .ticket-category:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

span.ticket-card-dot {
  height: 12px;
  width: 12px;
  min-width: 12px;
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Mobile-only accent bar for ticket rows, mirroring .ticket-card-dot for
   categories - see the max-width:767px override below. Hidden by default
   so desktop keeps its existing border-left-color accent untouched. */

.ticket-accent-bar {
  display: none;
}

.pld-lft {
  flex-grow: 1;
}

.pld-rgt {
  padding-right: 25px;
  text-align: right;
}

.pld-rgt h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.pld-rgt .available-onrequest {
  font-size: 11px;
  color: #727b8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

button.accordion-button.ticket-category.loaded.collapsed {
  background-color: #ffffff;
}

button.accordion-button.ticket-category.loaded.collapsed h2 {
  color: #131821;
}

button.accordion-button.ticket-category.notLoaded.collapsed h2 {
  color: #131821;
}

button.accordion-button.ticket-category.loaded.active {
  background-color: #313b51;
}

button.accordion-button.ticket-category.loaded.active h2 {
  color: #ffffff;
}

button.accordion-button.ticket-category:hover {
  background-color: #313b51 !important;
}

button.accordion-button.ticket-category:hover h2 {
  color: #ffffff !important;
}

.accordion-header {
  position: relative;
  z-index: 0;
}

img.view-match-banner {
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.accordion-item.accordion-ticket-card {
  border: none;
}

.accordion-button::after {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #fff;
  background-size: 9px;
  background-position: center;
  background-image: url(/images/blk-arw.svg?527ac7c8b76f49a1bec17157e7dc068c);
}

.accordion-button:not(.collapsed)::after {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #fff;
  background-size: 12px;
  background-position: center;
  background-image: url(/images/blk-arw.svg?527ac7c8b76f49a1bec17157e7dc068c);
  transform: none;
}

.accordion-button.active:not(.collapsed)::after {
  transform: rotate(180deg);
}

.restrictions_benefits {
  cursor: pointer;
}

.general-notification {
  position: fixed !important;
}

@media screen and (max-width: 1200px) {
  #match-page .banner-contr .banner-content .title p {
    margin: 0;
  }
}

@media screen and (max-width: 991px) {
  #match-page .banner-contr {
    /*
     * Figma's mobile match card is a white, rounded card (crests
     * + title + date) rather than the desktop dark banner image
     * with overlaid text - restyled in place here rather than
     * "un-fixed", since .banner-content was already position:initial
     * (normal flow) on mobile before this change; only its color
     * scheme needed to change. color:#131821 cascades down to the
     * team-name h2s (no color of their own, see the base rule
     * above this media query) - .match-date-time's own h3/p colors
     * stay as they were, both already legible on white.
     */
  }

  #match-page .banner-contr .view-match-banner {
    display: none;
  }

  #match-page .banner-contr .banner-content {
    position: initial;
    transform: none;
    background: #ffffff;
    color: #131821;
    padding: 14px 16px 16px;
    border-radius: 20px;
    box-shadow: 4px 4px 14px rgba(31, 38, 54, 0.05);
    animation: fadeInDownMobile 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@media screen and (max-width: 767px) {
  .position-div {
    position: initial !important;
  }

  .ticket-price .dropdown .dropdown-div-main {
    width: 100% !important;
    left: 0;
    right: 0 !important;
  }

  .pld-lft {
    padding-right: 112px;
  }

  .mob-venue {
    width: 130px;
    margin: auto !important;
    line-height: 10px;
  }

  /*
   * Kept visible on mobile now (was hidden in favour of the plain
   * duplicate heading below, .available-ticket-mob) since this is the
   * one wired up with the category-count badge and Filter button - the
   * duplicate has neither. Its own former container, .gr-view, is
   * hidden on mobile now anyway (see initMobileMapSlot() in
   * viewMatch.js), so .available-ticket-mob is simply orphaned rather
   * than needing its own override here.
   */

  .available-ticket-title {
    font-size: 18px;
  }

  .reqButtonDiv {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  h2 {
    font-size: 16px;
  }

  p.timezone {
    display: none !important;
  }

  .match-date-time h3 {
    line-height: 30px;
    margin: 0;
  }

  .match-date-time p {
    margin: 0;
  }

  .match-time {
    align-items: center;
    gap: 10px;
  }

  .match-inner-title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .match-inner-title h3 {
    display: block !important;
    font-size: 28px;
  }

  .layoutView {
    display: block !important;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .stadium-logo {
    padding-bottom: 0;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets button {
    width: 120px;
    height: 30px;
    font-size: 13px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .time p {
    font-size: 12px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .date .month {
    padding-left: 30px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .date .month p {
    font-size: 11px;
    line-height: 13px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .date h1 {
    font-size: 21px;
  }

  #match-page .category-dots {
    margin-top: 10px;
    display: initial !important;
    float: left;
    width: 100%;
  }

  #match-page .category-dots .a {
    float: left;
    margin-right: 10px;
  }

  #match-page .category-dots p {
    margin-bottom: 0;
  }

  #match-page .banner-contr .banner-content h2 {
    position: initial;
    transform: none;
    font-size: 14px !important;
    line-height: 20px;
  }

  #match-page .banner-contr .banner-content img {
    max-height: 50px;
    max-width: 50px;
  }

  #match-page .banner-contr .banner-content .center {
    top: 12px !important;
  }

  .time-zone {
    display: none;
  }

  #match-page .tournaments-main-sec {
    padding-top: 0;
    padding-bottom: 5px;
    /*
     * Dead selector removed here: .banner-contr is a sibling of
     * .tournaments-main-sec in the real markup (viewMatch.blade.php),
     * never its descendant, so ".tournaments-main-sec .banner-contr
     * .banner-content { position: fixed... }" never matched
     * anything - .banner-content's actual mobile position comes
     * from the max-width:991px rule above, which already keeps it
     * in normal flow.
     */
    /*
     * initMobileMapSlot() (viewMatch.js) moves the map and this
     * venue name/description out of .gr-view and into
     * #mobileMapSlot, once, on load - see that slot's rules
     * below for the actual sizing. .gr-view itself is hidden
     * right after (nothing meaningful left in it on mobile).
     */
  }

  #match-page .tournaments-main-sec .map {
    display: none;
  }

  #match-page .tournaments-main-sec .name-description {
    display: block !important;
    margin: 6px 0 0;
  }

  #match-page .tournaments-main-sec .name-description h2 {
    color: #131821 !important;
    font-size: 13px !important;
    font-weight: bold;
    margin-bottom: 0;
  }

  #match-page .tournaments-main-sec .name-description p {
    display: none;
  }

  #match-page .tournaments-main-sec .gr-view {
    display: none;
  }

  #match-page .tournaments-main-sec .ticket-price {
    margin-top: 5px;
  }

  .match-inner-title {
    margin-top: 0 !important;
  }

  .match-league-img {
    display: none;
  }

  .match-inner-title {
    margin-top: 10px;
    display: initial !important;
  }

  .team-name-contr {
    display: flex !important;
    justify-content: center;
    font-weight: bold;
  }

  .team-name-contr h2 {
    padding: 0px 6px;
    font-weight: 100;
  }

  .banner-contr {
    /*
     * margin-top, not top: a relative "top" offset visually shifts
     * the box without reserving that space in the flow, so whatever
     * follows (.tournaments-main-sec) started 65px higher than the
     * banner's actual (shifted) bottom edge - a 65px overlap that
     * was invisible while the banner was an opaque square-cornered
     * dark block sitting at z-index:2 over it, but became visible
     * clipping once the banner became a white, rounded Figma-style
     * card (its corners no longer mask the overlapped content
     * underneath). margin-top pushes the banner AND reserves the
     * space, so nothing after it needs to compensate.
     */
    margin-top: 65px;
    z-index: 2;
    width: 100%;
  }

  #topbar {
    position: fixed;
    width: 100%;
    z-index: 9;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.navbar-open #topbar {
    z-index: 1000 !important;
  }

  /*
   * The category-focus popup (z-index:500) already fully covers
   * #topbar the instant it opens - opaque immediately, no fade, since
   * animating the *whole* popup's opacity was what caused an earlier
   * bug (briefly showed real page content through it while still
   * fixed). That means #topbar itself needs its own independent
   * fade+retract, and needs to sit *above* the popup while it plays -
   * z-index:600 here, still comfortably below Bootstrap's
   * .modal-backdrop/.modal (1050/1055) - otherwise it would just be
   * instantly obscured with nothing to see.
   *
   * Keyed off category-focus-content-visible, not category-focus-open -
   * that one stays tied to the scroll-lock's own timing (only released
   * once the panel slide has actually finished, so the page underneath
   * can't shift mid-animation), but this class toggles in the exact
   * same instant as the panels start sliding (see
   * openCategoryFocus()/closeCategoryFocus() in viewMatch.js), so
   * #topbar's fade and the panel push run as one motion rather than
   * two visibly separate steps (slide, then topbar).
   */

  body.category-focus-content-visible #topbar {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 600;
  }

  .main-padding {
    padding: 0px 10px;
  }

  .ticket-stadium-section {
    padding: 0px 22px;
  }

  #match-page .banner-contr .banner-content .title h1 {
    font-size: 13px;
    margin-bottom: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 18px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
  }

  #match-page .banner-contr .banner-content .match-date-time h3 {
    font-size: 13px;
    line-height: 0;
  }

  #match-page .banner-contr .banner-content .match-date-time p {
    font-size: 13px;
  }

  .match-time svg {
    width: 13px;
  }

  #match-page .banner-contr .banner-content .match-date-time {
    margin-top: 0 !important;
    position: absolute;
    top: 30px;
  }

  #match-page .banner-contr .banner-content {
    padding: 2px 10px;
    height: 96px;
  }

  .mobile-padding {
    padding: 0;
  }

  #match-page .ticket-stadium-section .matches-carousel {
    padding: 20px 0px;
    padding-bottom: 20px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item {
    padding: 5px;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .buy_now {
    height: 32px;
    padding: 0px 16px;
    line-height: 32px;
    font-size: 14px;
    margin-top: 0px !important;
  }

  #match-page .content-center {
    line-height: normal;
    position: initial;
    transform: none;
  }

  #match-page .tournaments-main-sec .seat-title {
    padding: 5px 0px;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section span.minus,
  #match-page .tournaments-main-sec .ticket-price .seat-section span.plus {
    width: 28px !important;
    height: 28px !important;
    margin: 2px !important;
  }

  #match-page .tournaments-main-sec .seat-title .content-center h1 {
    font-size: 14px !important;
    margin-bottom: 0;
    float: left;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .content-center strike {
    float: left;
    margin-left: 5px;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section p {
    line-height: 16px;
    font-size: 13px;
  }

  .fld-srn {
    padding: 0;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section {
    min-height: 82px;
  }

  /*
   * The desktop ticket-row card is 4 Bootstrap columns (name / qty
   * stepper / price / Buy button) that pair up 2-per-row at col-6.
   * On a 390px screen that's two numbers, a stepper and a full CTA
   * all fighting for ~185px of width per row - name and price both
   * end up wrapping/truncating. Restructured here into one column of
   * purpose-grouped rows instead: name gets a full-width row to wrap
   * cleanly, price pairs with the stepper (the two numbers a buyer is
   * actually weighing together), and Buy Now becomes a full-width,
   * comfortably tappable row of its own. Pure flex re-layout of the
   * same markup - .qty/.dlr-cn/.ticket-div already select the
   * stepper/price/buy columns (see MatchTicketCard.blade.php); the
   * name column is the one .col-6 left over.
   */

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title.row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .col-6:not(.qty):not(.dlr-cn):not(.ticket-div) {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
    padding-bottom: 8px;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .dlr-cn {
    flex: 0 0 60%;
    max-width: 60%;
    order: 2;
    text-align: left !important;
    /*
     * A large price with a local-currency conversion (e.g.
     * "£ 606540.00 [ $ 702566.81 ]") can run past this column's
     * width - confirmed live as an ugly wrap landing mid-bracket,
     * right up against the stepper next to it. Shrinking the
     * conversion line and letting it wrap as a normal paragraph
     * (never forced onto one line, which would just overflow into
     * the stepper column instead) keeps it readable at any amount.
     */
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .dlr-cn .content-center {
    align-items: flex-start;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .dlr-cn p.sym {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .qty {
    flex: 0 0 40%;
    max-width: 40%;
    order: 3;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .qty .content-center {
    text-align: center;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .qty span.badge {
    font-size: 11px;
    white-space: nowrap;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .ticket-div {
    flex: 0 0 100%;
    max-width: 100%;
    order: 4;
    margin-top: 10px;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section .seat-title > .ticket-div .buy_now {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .dd .ddTitle .ddTitleText img {
    width: 30px;
  }

  .dd .ddTitle .ddTitleText {
    padding: 5px 20px 5px 0px !important;
  }

  #reqTktModalBody {
    padding: 20px 20px !important;
  }

  div#countryCode_msdd {
    padding: 0;
  }

  #match-page .match-inner-title .title {
    display: none !important;
  }

  .mobile-title {
    display: block !important;
  }

  .mobile-title h1 {
    font-size: 12px !important;
    width: 63%;
    margin: auto;
    height: 30px;
  }

  .match-date-time .match-time {
    margin-top: 15px;
  }

  #match-page .tournaments-main-sec .ticket-price {
    padding: 17px 12px !important;
  }

  #match-page .tournaments-main-sec .ticket-price .seat-section input.count {
    width: 30px !important;
    line-height: 20px;
  }

  .available-ticket-mob {
    font-size: 14px !important;
  }

  .match-date-time {
    display: initial;
  }

  .match-date-time .match-time {
    justify-content: center;
  }

  .banner-content img {
    max-height: 40px !important;
    max-width: 40px !important;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .logo-left {
    float: left !important;
  }

  .logo-right {
    float: right !important;
  }

  #match-page .banner-contr .banner-content .match-date-time p {
    font-size: 10px !important;
  }

  #match-page .banner-contr .banner-content .match-date-time h3 {
    font-size: 10px !important;
  }

  #match-page .banner-contr .banner-content h2 {
    font-size: 11px !important;
    line-height: 14px;
  }

  .banner-content img {
    max-height: 35px !important;
    max-width: 35px !important;
  }
}

@media (max-width: 360px) {
  #match-page .tournaments-main-sec .ticket-price .seat-section span.minus,
  #match-page .tournaments-main-sec .ticket-price .seat-section span.plus {
    margin: 0 !important;
  }

  .time p {
    font-size: 13px !important;
  }

  .month p {
    font-size: 13px !important;
  }

  .date h1 {
    font-size: 30px;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .team-logos .logo-width .logo-image-space img {
    max-width: 50px !important;
    max-height: 50px !important;
    margin: auto;
  }

  #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets button {
    width: 115px !important;
    font-size: 13px !important;
  }

  .team-logos {
    justify-content: space-evenly;
  }
}

html:lang(ar) #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets p {
  text-align: right;
}

html:lang(ar) .match-place {
  padding-left: 0;
  text-align: right;
  padding-right: 20px;
}

html:lang(ar) .match-place img {
  right: 0;
  left: auto;
}

html:lang(ar) #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .stadium-logo {
  padding-right: 20px;
  padding-left: 0;
  text-align: right;
}

html:lang(ar) #match-page .ticket-stadium-section .matches-carousel .matches .item .league-tickets .stadium-logo img {
  right: 0;
  left: auto;
  margin: 0;
}

html:lang(ar) .ticket-price .ticket-category h2 {
  text-align: right;
}

html:lang(ar) .accordion-button::after {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html:lang(ar) #match-page .tournaments-main-sec .seat-title img {
  left: 30px;
  right: auto;
}

html:lang(ar) #match-page .owl-carousel .owl-nav .owl-next {
  left: auto;
}

html:lang(ar) #match-page .logo-left {
  float: left !important;
}

html:lang(ar) #match-page .logo-left h2 {
  left: 120px !important;
  right: auto !important;
}

html:lang(ar) #match-page .logo-right {
  float: right !important;
}

html:lang(ar) #match-page .logo-right h2 {
  right: 120px !important;
  left: auto !important;
  margin: 0;
}

html:lang(ar) #match-page .pld-rgt {
  position: absolute;
  left: 60px;
}

html:lang(ar) #match-page span.ticket-card-dot {
  margin-left: 10px;
}

@media (max-width: 767px) {
  html:lang(ar) .pld-lft {
    padding-right: 0px;
    padding-left: 135px;
  }

  html:lang(ar) #match-page .category-dots .a {
    float: right;
    margin-right: 0;
    margin-left: 10px;
  }

  html:lang(ar) #match-page .tournaments-main-sec .ticket-price .seat-section .content-center strike {
    float: right;
    margin-left: 0;
    margin-right: 5px;
  }

  html:lang(ar) #match-page .tournaments-main-sec .seat-title .content-center h1 {
    float: right;
  }
}

.flex-box {
  display: flex;
  justify-content: space-between;
  /* Distributes space between items */
  align-items: center;
  /* Aligns items vertically in the center */
  gap: 1rem;
  /* Adds some spacing between the items */
}

.ticket-input {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  /* Adjust width as needed */
}

/* ─── Filter button ──────────────────────────────────────────────────── */

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(19, 24, 33, 0.14);
  padding: 7px 14px;
  color: #131821;
  font-weight: 600;
  border-radius: 10px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(19, 24, 33, 0.07);
  transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.filter-btn svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.filter-btn:active {
  background: #f4f5f7;
  box-shadow: none;
}

.filter-btn.active {
  background: #131821;
  border-color: #131821;
  color: #fff;
  box-shadow: 0 4px 12px rgba(19, 24, 33, 0.22);
}

.filter-btn.active svg path {
  stroke: #fff;
}

.filter-btn.active svg {
  transform: rotate(180deg) scaleX(-1);
}

/* ─── Filter dropdown card ───────────────────────────────────────────── */

.ticket-price .dropdown {
  position: relative;
}

.ticket-price .dropdown .dropdown-div-main {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #ffffff;
  border: 1px solid rgba(19, 24, 33, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(19, 24, 33, 0.14), 0 2px 8px rgba(19, 24, 33, 0.08);
  padding: 20px;
  display: block;
  z-index: 100;
  /* Hidden state — animates in when .active is added */
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transform-origin: top right;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  /* ── Quantity stepper ──────────────────────────────────────────── */
  /* ── Apply button ──────────────────────────────────────────────── */
}

.ticket-price .dropdown .dropdown-div-main h6 {
  font-size: 14px;
  font-weight: 700;
  color: #131821;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.ticket-price .dropdown .dropdown-div-main .input-div {
  display: flex;
  align-items: center;
  background: #f4f5f7;
  border: 1.5px solid rgba(19, 24, 33, 0.1);
  border-radius: 10px;
  padding: 4px 4px 4px 12px;
  gap: 6px;
  margin-bottom: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* Hide browser number spinners */
}

.ticket-price .dropdown .dropdown-div-main .input-div:focus-within {
  border-color: rgba(19, 24, 33, 0.35);
  box-shadow: 0 0 0 3px rgba(19, 24, 33, 0.06);
}

.ticket-price .dropdown .dropdown-div-main .input-div input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: #131821;
  width: 100%;
  outline: none;
  padding: 4px 0;
}

.ticket-price .dropdown .dropdown-div-main .input-div input[type=number]::-webkit-inner-spin-button,
.ticket-price .dropdown .dropdown-div-main .input-div input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ticket-price .dropdown .dropdown-div-main .input-div input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
          appearance: none;
}

.ticket-price .dropdown .dropdown-div-main .input-div .btn-div {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ticket-price .dropdown .dropdown-div-main .input-div .btn-div button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #131821;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.ticket-price .dropdown .dropdown-div-main .input-div .btn-div button:hover {
  background: #2c3444;
  box-shadow: 0 2px 8px rgba(19, 24, 33, 0.22);
}

.ticket-price .dropdown .dropdown-div-main .input-div .btn-div button:active {
  transform: scale(0.88);
  background: #000;
}

.ticket-price .dropdown .dropdown-div-main .apply-btn {
  width: 100%;
  background: linear-gradient(135deg, #e4b554 0%, #c99a3a 100%);
  border: none;
  border-radius: 10px;
  color: #131821;
  font-size: 14px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(228, 181, 84, 0.35);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.18s ease;
}

.ticket-price .dropdown .dropdown-div-main .apply-btn:hover {
  box-shadow: 0 4px 16px rgba(228, 181, 84, 0.5);
  transform: translateY(-1px);
}

.ticket-price .dropdown .dropdown-div-main .apply-btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

/* Open state — added by JS when filter btn is clicked */

.ticket-price .dropdown .dropdown-div-main.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* RTL override */

html:lang(ar) .ticket-price .dropdown .dropdown-div-main {
  right: auto;
  left: 0;
  transform-origin: top left;
}

/* Animations for Stadium and Tickets */

@keyframes flowInUp {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateY(-12px);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) translateY(0);
  }
}

@keyframes fadeInDownMobile {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mapGlow {
  0% {
    box-shadow: 0 4px 12px rgba(228, 181, 84, 0.08);
  }

  50% {
    box-shadow: 0 6px 24px rgba(228, 181, 84, 0.22);
  }

  100% {
    box-shadow: 0 4px 12px rgba(228, 181, 84, 0.08);
  }
}

@keyframes popScale {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.18);
  }

  65% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}

.animate-pop {
  animation: popScale 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.gr-view {
  animation: flowInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  border: 1px solid rgba(228, 181, 84, 0.2);
  transition: all 0.3s ease;
}

.gr-view:hover {
  animation: mapGlow 2s infinite ease-in-out;
  border-color: rgba(228, 181, 84, 0.5);
}

/*
 * Desktop only (matches the >=992px breakpoint syncTicketPanelHeight()
 * already assumes in viewMatch.js) - #tickets is normally height-capped to
 * match .gr-view's own rendered height so both columns end together, but
 * with a long category list that cap can still leave the ticket column
 * taller than the map, and .gr-view (position:relative) just sits at the
 * top of its column while the page scrolls past it. position:sticky keeps
 * the map in view alongside the list instead - no fixed header exists on
 * desktop to dodge (#topbar is only position:fixed in the mobile media
 * query), so a small top offset is enough.
 */

@media screen and (min-width: 992px) {
  .gr-view {
    position: sticky;
    top: 20px;
  }
}

.ticketSection,
.ticket-category {
  opacity: 0;
  animation: flowInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger ticket cards inside category — tight cascade, each 40ms apart */

.accordion-content .ticketSection:nth-child(1) {
  animation-delay: 0.03s;
}

.accordion-content .ticketSection:nth-child(2) {
  animation-delay: 0.07s;
}

.accordion-content .ticketSection:nth-child(3) {
  animation-delay: 0.11s;
}

.accordion-content .ticketSection:nth-child(4) {
  animation-delay: 0.15s;
}

.accordion-content .ticketSection:nth-child(5) {
  animation-delay: 0.19s;
}

.accordion-content .ticketSection:nth-child(6) {
  animation-delay: 0.23s;
}

.accordion-content .ticketSection:nth-child(7) {
  animation-delay: 0.27s;
}

/* Stagger category rows — 60ms apart, capped so last row still feels fast */

#tickets .accordion-item:nth-child(1) .ticket-category {
  animation-delay: 0.04s;
}

#tickets .accordion-item:nth-child(2) .ticket-category {
  animation-delay: 0.1s;
}

#tickets .accordion-item:nth-child(3) .ticket-category {
  animation-delay: 0.16s;
}

#tickets .accordion-item:nth-child(4) .ticket-category {
  animation-delay: 0.22s;
}

#tickets .accordion-item:nth-child(5) .ticket-category {
  animation-delay: 0.28s;
}

#tickets .accordion-item:nth-child(6) .ticket-category {
  animation-delay: 0.34s;
}

/* Sticky Match Header (Appears on Scroll) */

.sticky-match-header {
  position: fixed;
  top: 0px;
  /* Adjust based on topbar */
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  z-index: 8;
  /* Lower than #topbar (9) so it slides from underneath */
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.sticky-match-header.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.sticky-match-header .match-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #131821;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.sticky-match-header .match-info p {
  margin: 0;
  font-size: 12px;
  color: #727b8d;
}

.sticky-match-header .sticky-teams {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sticky-match-header .sticky-teams img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticky-match-header .sticky-teams .vs {
  font-size: 10px;
  font-weight: bold;
  color: #727b8d;
}

@media (max-width: 768px) {
  .sticky-match-header {
    top: 65px;
  }

  .sticky-match-header .match-info h4 {
    max-width: 150px;
  }

  .sticky-match-header .sticky-teams img {
    width: 24px;
    height: 24px;
  }
}

/*
 * Ticket count badge next to "Available Tickets" - injected by
 * updateTicketCategoryCount() once categories load, only shown once there
 * are enough categories that a count is actually useful context.
 */

.ticket-count-badge {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(228, 181, 84, 0.12);
  color: #a97918;
  font-size: 12px;
  font-family: Gilroy-Medium;
  white-space: nowrap;
}

/*
 * #tickets used to be capped to the sticky map's rendered height on
 * desktop so the two columns ended at the same point - reverted per
 * client feedback (a long category list read as cramped scrolling inside
 * a small internal box, compared to how ticket marketplaces present a
 * listing as one continuous page). #tickets now flows to its natural
 * full height; overflow-y:auto below is inert without a max-height
 * constraining it, kept only so a future height cap (if ever reinstated)
 * doesn't need this rule re-added too. .gr-view is position:sticky
 * instead, so the map follows alongside the now-potentially-much-taller
 * list as the page scrolls. On mobile the map isn't beside the list
 * (stacked layout) - see the max-width:767px override below.
 */

#tickets {
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 24, 33, 0.2) transparent;
}

#tickets::-webkit-scrollbar {
  width: 6px;
}

#tickets::-webkit-scrollbar-thumb {
  background-color: rgba(19, 24, 33, 0.2);
  border-radius: 10px;
}

#tickets::-webkit-scrollbar-track {
  background: transparent;
}

/* "More below" hint - a soft fade at the bottom edge of the scroll box,
   only shown while there's actually more content to reveal. */

.ticket-list-fade {
  position: absolute;
  left: 0;
  right: 6px;
  bottom: 0;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(244, 245, 247, 0) 0%, rgba(244, 245, 247, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ticket-list-wrap.has-more-below .ticket-list-fade {
  opacity: 1;
}

/* Mobile-only - see initMobileMapSlot() in viewMatch.js. */

#mobileMapSlot {
  display: none;
}

/* Mobile-only, matching the Figma reference's "Price" caption -
   unconditional like #mobileMapSlot above, since a bare <p> defaults to
   visible and desktop's price column has no such label. */

.ticket-price-label {
  display: none;
}

/*
 * Mobile-only (see openCategoryFocus()/closeCategoryFocus() in
 * viewMatch.js) - unconditional like #mobileMapSlot above, not just set
 * to display:none inside the max-width:767px block. A bare <button> with
 * no display rule at all falls back to the browser default (visible),
 * which is exactly what was happening here on desktop - the mobile-scoped
 * "on" rule further down (on #categoryDetailPanel .category-focus-close)
 * never applies there, but neither did any "off" rule, so nothing was
 * hiding it.
 */

.category-focus-close {
  display: none;
}

@media screen and (max-width: 767px) {
  /*
   * The desktop side-by-side layout caps #tickets to the sticky map's
   * height so both columns end together - see the rule above this
   * media query. On mobile the map sits stacked above the list (no
   * column to match), so that cap was carried over here too at first
   * and turned into a bug: a short internal scrollbox nested inside
   * the page's own scroll, sitting right under two fixed headers
   * (#topbar + .sticky-match-header, ~134px combined - see
   * scroll-margin-top below). A tap on a category near the bottom of
   * that box could expand content the user then had to fight a tiny
   * nested scrollbar to see, half-hidden behind the fixed headers.
   * #tickets goes back to plain page flow here; decluttering a long
   * category list is handled instead by the "show more" progressive
   * disclosure below, which doesn't trap scrolling.
   */

  /*
   * One unified white card holding the whole category list, matching
   * #categoryDetailPanel .accordion-content's treatment (screen 2) so
   * both screens share the same container language - previously each
   * row carried its own desktop-derived shadow/radius/margin AND a
   * hairline divider sat between them, which read as two competing
   * separation styles stacked on top of each other (floating cards
   * that also had a stray line in their gap). Flattened to one style:
   * the card provides the boundary, rows below are plain and rely
   * purely on the divider.
   */

  #tickets {
    max-height: none;
    overflow-y: visible;
    background: #fff;
    border-radius: 16px;
    padding: 4px 16px;
    box-shadow: 0 2px 4px rgba(19, 24, 33, 0.05);
  }

  .ticket-list-fade {
    display: none;
  }

  /*
   * Rows go flat here (no per-row card chrome) - the hairline divider
   * between rows is the only separator now, matching the Figma
   * reference and the same treatment already used for ticket rows
   * inside #categoryDetailPanel below. Rows collapse their own margin
   * so the line alone carries the visual separation - no double-gap
   * between rows.
   */

  #tickets .accordion-item.accordion-ticket-card {
    margin-bottom: 0;
  }

  #tickets .accordion-item.accordion-ticket-card + .accordion-item.accordion-ticket-card {
    border-top: 1px solid #eaeaea;
  }

  /*
   * transition intentionally left undeclared here - the "Tactile tap
   * feedback" rule further below (button.accordion-button.ticket-category)
   * already owns transform/background-color transitions for :active.
   * This selector's #id-scoped specificity would otherwise silently
   * replace that whole transition (shorthand, not merged) and kill the
   * press animation.
   */

  #tickets .ticket-category {
    padding: 16px 4px;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background-color: #fff !important;
    border: none;
    box-shadow: none !important;
  }

  #tickets .ticket-category:hover {
    transform: none;
    box-shadow: none !important;
  }

  /*
   * Moved here from .gr-view by initMobileMapSlot() (viewMatch.js),
   * once, on load - sitting directly above the category list rather
   * than all the way up past the banner means tapping a category can
   * scroll to bring the map and that category into view together
   * (see the shown.bs.collapse handler in viewMatch.js), which is the
   * actual ask: seeing the highlighted section and the selected
   * category alongside each other, not a map that's already scrolled
   * out of view by the time a category is open.
   */

  #mobileMapSlot {
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  #mobileMapSlot object#layoutView {
    width: 150px;
    margin: auto;
    display: table;
  }

  #mobileMapSlot img#layoutView {
    width: 130px !important;
    padding: 0 !important;
    margin: auto;
    display: table;
  }

  #mobileMapSlot #xs2eventsMapContainer svg {
    width: 150px;
    height: auto;
    margin: auto;
    display: block;
  }

  #mobileMapSlot .name-description {
    margin-top: 6px;
  }

  /* Tactile tap feedback - the two-column desktop hover states don't
     apply on a touch screen, so a category needs its own press cue. */

  button.accordion-button.ticket-category {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease;
  }

  button.accordion-button.ticket-category:active {
    transform: scale(0.97);
  }

  /*
   * Figma accent bar instead of a dot, on both the category list and
   * (via .ticket-accent-bar, added in MatchTicketCard.blade.php) each
   * ticket row inside a focused category - desktop keeps the circular
   * dot and the row's own border-left-color untouched.
   */

  span.ticket-card-dot {
    width: 9px;
    height: 20px;
    min-width: 9px;
    border-radius: 8px;
    border: 1px solid #fff;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.08);
    margin-right: 12px;
  }

  .ticket-accent-bar {
    display: block;
    width: 9px;
    height: 20px;
    min-width: 9px;
    border-radius: 8px;
    border: 1px solid #fff;
    box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.08);
    margin-right: 10px;
  }

  /*
   * Sentence case, no letter-spacing, matching the Figma reference's
   * plain "Available" label - the desktop treatment (uppercase,
   * letter-spaced, 11px) stays untouched.
   */

  .available-onrequest {
    text-transform: none;
    letter-spacing: normal;
    font-size: 10px;
    font-weight: 600;
  }

  /*
   * Collapsed rows on mobile show only the category name + Available +
   * chevron, no price (see MatchTicketCategory.blade.php, which wraps
   * the price in this class specifically so it can be hidden here
   * without touching the "Available"/on-request label sharing the same
   * <h2>). Desktop keeps showing the price on the collapsed row.
   */

  .ticket-category-collapsed-price {
    display: none;
  }

  .pld-left-box {
    display: flex;
    align-items: center;
  }

  /*
   * Individual ticket rows (inside a focused category, screen 2) get
   * their own left-column copy of "Available : N" and, when the ticket
   * carries the multiples_only rule, a red "Purchase in Multiply of N"
   * warning - see MatchTicketCard.blade.php. The desktop-only
   * duplicate further right (.ticket-available-desktop, same data,
   * just placed in the qty column) is redundant here so it's hidden
   * rather than shown twice.
   */

  .ticket-available-mobile {
    color: #727b8d;
    font-size: 12px;
    font-weight: 500;
    margin: 2px 0;
  }

  .ticket-rule-warning {
    color: #fd235d;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 0;
  }

  .ticket-available-desktop {
    display: none;
  }

  /* Small grey caption above the amount, matching the Figma reference
     ("Price" over "$92"). */

  .ticket-price-label {
    display: block;
    color: #727b8d;
    font-size: 11px;
    font-weight: 500;
    margin: 0 0 2px;
  }

  .seat-section {
    border-left: none !important;
  }

  /*
   * A category row no longer expands in place on mobile - tapping it
   * navigates straight to screen 2 (see the .ticket-category click
   * handler in viewMatch.js) - so the desktop "dark = currently
   * expanded" active state and the rotating accordion arrow no longer
   * mean anything here. Rows stay a uniform white/light look with a
   * plain forward chevron, matching the Figma reference.
   */

  button.accordion-button.ticket-category.loaded.active,
  button.accordion-button.ticket-category:hover {
    background-color: #ffffff !important;
  }

  button.accordion-button.ticket-category.loaded.active h2,
  button.accordion-button.ticket-category:hover h2 {
    color: #131821 !important;
  }

  button.accordion-button.ticket-category.loaded.active .available-onrequest,
  button.accordion-button.ticket-category:hover .available-onrequest {
    color: #727b8d !important;
  }

  /*
   * back-chevron.svg's own path geometry actually points right (its
   * name refers to where it's used, the back-to-categories link, which
   * flips it - see .back-chevron below) - unflipped here, it's already
   * the correct forward/right chevron for a row that navigates onward.
   */

  .accordion-button.ticket-category::after,
  .accordion-button.ticket-category:not(.collapsed)::after {
    width: 7px;
    height: 12px;
    border-radius: 0;
    background-color: transparent;
    background-image: url(/images/back-chevron.svg?c930ccfe3543859d1908a72d0e37ce2d);
    background-size: contain;
    background-repeat: no-repeat;
    transform: none;
  }

  /*
   * Rounded-square stepper buttons, matching the Figma reference - size
   * stays the existing 28px override just above this block, only the
   * shape changes. !important because the desktop rule this overrides
   * is nested .ticket-price .seat-section .qty .plus/.minus
   * (specificity 0,4,0), higher than a flat .qty .plus/.minus override
   * can beat on source order alone.
   */

  .qty .plus,
  .qty .minus {
    border-radius: 8px !important;
  }

  /* Bootstrap's own .collapsing default (height 0.35s ease) reads
     stiffer than the rest of this page's motion - matched to the same
     easing everything else here uses. */

  .accordion-collapse.collapsing {
    transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .accordion-button::after,
  .accordion-button:not(.collapsed)::after {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /*
   * Progressive disclosure for long category lists - built by
   * applyMobileCategoryPeek() in viewMatch.js. Two classes, not one:
   * a peek-hidden category sits at max-height:0, and reveal adds
   * category-peek-revealing (a real, generous-but-bounded max-height)
   * for the transition, then JS strips both classes and any inline
   * height once it's finished so the item goes back to being a plain,
   * unconstrained accordion-item. That matters because these rows can
   * later be tapped open and fill with several ticket rows - if the
   * peek constraint stayed on permanently, overflow:hidden would clip
   * real ticket content instead of just hiding a collapsed header.
   */

  .accordion-item.category-peek-hidden {
    max-height: 0 !important;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
    /*
     * This transition fires when .category-peek-hidden is ADDED
     * (browser animates to this state). JS first pins an inline
     * max-height matching the item's real pixel height, then adds
     * this class in the next rAF so there is a concrete value to
     * transition FROM to 0.
     */
    transition: max-height 0.45s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease, margin-bottom 0.45s cubic-bezier(0.4, 0, 1, 1);
  }

  .accordion-item.category-peek-revealing {
    max-height: 140px;
    overflow: hidden;
    opacity: 1;
    /*
     * This transition fires when .category-peek-revealing is ADDED
     * (expand direction). JS removes .category-peek-hidden first so
     * the item starts from max-height:0, then adds this class a tick
     * later so the browser has a real start state to animate from.
     */
    transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  }

  /* Plain centered text link, matching the Figma reference - no
     pill/dashed-box chrome. */

  .category-peek-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    background: none;
    border: none;
    color: #131821;
    font-family: Gilroy-Medium;
    font-size: 14px;
    font-weight: 600;
  }

  .category-peek-toggle .chevron {
    display: inline-block;
    transition: transform 0.3s ease;
  }

  .category-peek-toggle.expanded .chevron {
    transform: rotate(180deg);
  }

  .category-peek-toggle:active {
    opacity: 0.6;
  }

  .category-focus-close {
    display: none;
  }

  /*
   * Chrome's scroll anchoring was fighting the explicit restore in
   * closeCategoryFocus() (viewMatch.js): closing the popup brings a
   * large chunk of previously display:none content back into flow all
   * at once, and with anchoring left on, the browser kept nudging
   * scroll position across several frames to "anchor" to whatever
   * content it guessed was under the viewport - confirmed live as a
   * scroll position that visibly climbed over ~300ms instead of
   * landing immediately where it should. Turning anchoring off here
   * makes the explicit window.scrollTo() the only thing moving scroll
   * during open/close.
   */

  #categoryFocusScope {
    overflow-anchor: none;
  }

  /*
   * Category focus popup - see openCategoryFocus()/closeCategoryFocus()
   * in viewMatch.js. Toggles position:fixed on #categoryFocusScope
   * itself (the shared wrapper around the map slot + slider, added
   * specifically for this in viewMatch.blade.php) rather than fixing
   * pieces separately - the earlier attempt at a persistently-pinned
   * map fixed a small piece while everything else kept flowing/
   * scrolling normally around it, which is what actually broke
   * (confirmed live, reverted). #mobileMapSlot itself is never moved
   * (initMobileMapSlot() places it here once, permanently), so there's
   * no risk of its <object> reloading and losing its highlight.
   *
   * Inside the scope, #categorySlider hosts the two-screen transition:
   * #ticketListWrap (screen 1, the category list, untouched otherwise)
   * just darkens in place, while #categoryDetailPanel (screen 2) holds
   * whichever .accordion-item openCategoryFocus() just moved into it
   * and slides up from the bottom edge (bottom-sheet style, per the
   * 2026 Figma redesign - the previous version pushed in from the
   * right instead). Both are real siblings inside #categorySlider
   * rather than #categoryDetailPanel being a descendant of
   * #ticketListWrap - a transform on #ticketListWrap would otherwise
   * become the containing block for any position:absolute descendant,
   * coupling the two screens' movement instead of letting them
   * transition independently.
   */

  /*
   * Hidden by default - only positioned/shown once .category-focus-active
   * turns the scope into the fixed slider below. Without this, the
   * close button living inside it (see viewMatch.blade.php) would sit
   * as a stray in-flow block on the ordinary category-list page.
   */

  #categoryDetailPanel {
    display: none;
  }

  #categoryFocusScope.category-focus-active {
    position: fixed;
    inset: 0;
    /*
     * Comfortably above every other z-index in this file (the
     * highest regular one is 99) but below Bootstrap's own
     * .modal-backdrop (1050) / .modal (1055) - the "Benefits &
     * Restrictions" and quantity-exceeded modals need to open on
     * top of this popup, not disappear behind it, since a ticket
     * inside the focused category can still trigger them.
     */
    z-index: 500;
    background: #f4f5f7;
    display: flex;
    flex-direction: column;
    padding: 16px 12px 12px;
    /*
     * No opacity fade here (tried, reverted) - fading the whole
     * scope while it's still position:fixed for the full close
     * duration meant it spent part of that time visibly
     * semi-transparent, letting whatever's underneath (e.g. "Related
     * Matches", further down the actual page) show/flash through
     * before the popup actually un-fixes. Opaque the instant it's
     * fixed, all the entrance/exit motion instead comes from the two
     * panels' own slide (#ticketListWrap/#categoryDetailPanel below).
     */
    /*
     * The slider viewport - fills whatever height #mobileMapSlot
     * leaves inside the fixed scope. #ticketListWrap and
     * #categoryDetailPanel both sit position:absolute/inset:0 within
     * it (rather than one pushing the other's layout height) so each
     * can scroll its own content independently and neither's height
     * depends on the other.
     */
    /*
     * will-change on both panels promotes each to its own compositor
     * layer up front, so the slide only ever has to move two cached
     * layers around rather than repaint #tickets' ~20+ accordion
     * items (several of which carry their own "transition: all"
     * hover/press rules) on every animation frame - confirmed live as
     * the difference between a smooth push and a visibly stuck/janky
     * one on a real device.
     */
    /*
     * cubic-bezier(0.16, 1, 0.3, 1) is this file's own established
     * "premium" easing (already used for .category-focus-close,
     * fadeInDownMobile, the category-peek reveal) - kept for the same
     * snappy-but-smooth quality on the bottom-sheet transition.
     * Screen 1 no longer moves (a horizontal recede made sense when
     * screen 2 entered from the side; sliding it away vertically too
     * would double up on the same axis screen 2 now uses) - it just
     * darkens under the sheet, which is the standard bottom-sheet
     * backdrop treatment.
     */
    /*
     * Two-screen transition: premium spring entry (scale+Y) for screen 2,
     * parallax scale+dim for screen 1.
     *
     * Screen 1 (#ticketListWrap) scales back slightly and dims — gives the
     * user spatial awareness that they are going "deeper" into a category,
     * not just sliding sideways. will-change on both panels keeps the GPU
     * compositing these as cached layers rather than repainting them.
     */
    /*
     * CLOSE transitions live here (base state):
     * Browser uses the TARGET state's transition when class is removed,
     * so these timings fire when .category-focus-visible is removed.
     *
     * #ticketListWrap restores with ease-OUT (fast start) so screen 1
     * springs back into view before the panel has even fully left.
     * #categoryDetailPanel exits with ease-IN (slow start, fast end)
     * giving a satisfying gravity-pull-away feel.
     */
    /*
     * CLOSE transition for panel: ease-IN (gravity pull downward).
     */
    /*
     * Content children hidden initially — back btn, title, body each
     * stagger in from their own direction after the panel arrives.
     * Compatible selectors (no leading > combinator — SASS 1.23 limit).
     */
    /*
     * category-content-ready — added by JS 150ms after panel starts
     * opening so content staggers in after the panel has largely arrived.
     */
  }

  #categoryFocusScope.category-focus-active #mobileMapSlot {
    flex: 0 0 auto;
    /*
     * Starts hidden — no transition here so the snap-to-hidden is
     * instant when position:fixed is applied. The close fade-out
     * (0.28s) also lives here: when .category-focus-visible is
     * removed the browser uses the BASE state transition, so the
     * map fades out gracefully during close without us needing a
     * separate closing class.
     */
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #categoryFocusScope.category-focus-active #categorySlider {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin-top: 12px;
    /* Always visible — its child panels handle their own opacity. */
  }

  #categoryFocusScope.category-focus-active #ticketListWrap {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding-bottom: 24px;
    will-change: transform, opacity;
    transform: scale(1) translateY(0);
    transform-origin: center top;
    /* CLOSE easing: ease-out — screen 1 bounces back quickly */
    transition: transform 0.44s cubic-bezier(0, 0, 0.2, 1), opacity 0.36s cubic-bezier(0, 0, 0.2, 1);
    /* Dim overlay */
  }

  #categoryFocusScope.category-focus-active #ticketListWrap::after {
    content: "";
    position: absolute;
    inset: 0;
    min-height: 100%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    /* CLOSE: overlay lifts quickly */
    transition: opacity 0.36s cubic-bezier(0, 0, 0.2, 1);
  }

  #categoryFocusScope.category-focus-active #categoryDetailPanel {
    /*
     * flex + wrap, not block: #categoryFocusClose (the back
     * button) and the moved .accordion-item are siblings here
     * (see openCategoryFocus() in viewMatch.js, which appends
     * the tapped category after the button) - as plain block
     * children they simply stacked, so the category name landed
     * on its own line below the button instead of beside it as
     * intended (see the header comment further down). The
     * .accordion-item itself is set to display:contents below,
     * promoting its .accordion-header (back button's row-mate)
     * and .accordion-collapse (the ticket list, forced to its
     * own full-width row) to be direct flex children here.
     */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    -moz-column-gap: 8px;
         column-gap: 8px;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding-bottom: 24px;
    background: #f4f5f7;
    will-change: transform, opacity;
    transform: translateY(100%) scale(1.03);
    transform-origin: center bottom;
    opacity: 0;
    border-radius: 20px 20px 0 0;
    /* CLOSE easing: ease-in — panel falls away under gravity */
    transition: transform 0.44s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1), border-radius 0.44s cubic-bezier(0.4, 0, 1, 1);
  }

  #categoryFocusScope.category-focus-active #categoryDetailPanel .category-focus-close {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  #categoryFocusScope.category-focus-active #categoryDetailPanel .accordion-item .accordion-header {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #categoryFocusScope.category-focus-active #categoryDetailPanel .accordion-item .accordion-collapse {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #categoryFocusScope.category-focus-active.category-focus-visible {
    /*
     * OPEN transitions live here (visible state):
     * Browser uses the TARGET state's transition when class is ADDED,
     * so these timings fire on OPEN only.
     */
    /* Map: slides down from above with spring easing + small delay */
    /* Screen 1: ease-IN for dimming (start slow, land hard) */
    /* Screen 2: spring open (fast deceleration into position) */
  }

  #categoryFocusScope.category-focus-active.category-focus-visible #mobileMapSlot {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.03s, transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.03s;
  }

  #categoryFocusScope.category-focus-active.category-focus-visible #ticketListWrap {
    pointer-events: none;
    transform: scale(0.96) translateY(-6px);
    opacity: 0.55;
    transition: transform 0.36s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s cubic-bezier(0.4, 0, 1, 1);
  }

  #categoryFocusScope.category-focus-active.category-focus-visible #ticketListWrap::after {
    opacity: 1;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 1, 1);
  }

  #categoryFocusScope.category-focus-active.category-focus-visible #categoryDetailPanel {
    transform: translateY(0) scale(1);
    opacity: 1;
    border-radius: 16px 16px 0 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #categoryFocusScope.category-focus-active.category-content-ready #categoryDetailPanel .category-focus-close {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }

  #categoryFocusScope.category-focus-active.category-content-ready #categoryDetailPanel .accordion-item .accordion-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.055s;
  }

  #categoryFocusScope.category-focus-active.category-content-ready #categoryDetailPanel .accordion-item .accordion-collapse {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.11s;
  }

  #categoryFocusScope.category-focus-active #categoryPeekToggle {
    display: none;
  }

  /*
   * <html>, not just <body> - this page's own base style already sets
   * body { overflow: hidden auto }, but documentElement is what's
   * actually driving scroll here (confirmed live via a real wheel
   * gesture), so body alone wouldn't reliably stop it scrolling behind
   * the popup.
   */

  html.category-focus-open,
  body.category-focus-open {
    overflow: hidden;
  }

  /*
   * White pill background restored per explicit request, over the
   * Figma reference's plain-text treatment - lives inside
   * #categoryDetailPanel now (screen 2), so its own visibility no
   * longer needs a focus-state toggle, the panel being off-screen
   * (translateY(100%) above) already hides it when closed.
   */

  #categoryDetailPanel .category-focus-close {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 31px;
    box-shadow: 0 2px 4px rgba(19, 24, 33, 0.05);
    font-size: 14px;
    font-weight: 600;
    color: #131821;
    font-family: Gilroy-Medium;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  }

  #categoryDetailPanel .category-focus-close .back-chevron {
    width: 6px;
    height: auto;
    /* The raw asset's path geometry points right - flipped here
       for the back-to-categories direction. */
    transform: scaleX(-1);
    position: relative;
    top: -5px;
  }

  #categoryDetailPanel .category-focus-close:active {
    background: #f4f5f7;
    transform: scale(0.96);
  }

  /*
   * Screen 2's ticket rows as one unified white card with dividers
   * between items, matching the Figma reference - not the same stacked/
   * individually-shadowed .seat-section cards the desktop-derived
   * markup renders by default.
   *
   * The category's own header button is restyled down to a plain
   * label (name only, no price/dot/dark button chrome/arrow) rather
   * than hidden outright - the Figma reference has no repeated header
   * at all, but with real category names (not "Player Zone" for
   * everything) that context is worth keeping, just not as a second
   * button competing with "Back to categories". pointer-events:none
   * because it no longer looks interactive - Bootstrap's collapse
   * still shows/hides .accordion-body via its own .show class
   * regardless of whether the trigger button is clickable, so this
   * doesn't affect anything functional.
   */

  #categoryDetailPanel {
    /*
     * Screen-2 header: icon-only back chevron sits to the left of the
     * category name, which is promoted to a prominent heading (18px bold)
     * matching the Figma reference. The close button's pill chrome is
     * removed - it's now a bare tap target so the heading reads as the
     * primary element, not a secondary label below a navigation button.
     */
    /*
     * The moved .accordion-item's own box is dropped from layout
     * (its children are promoted to be direct flex items of
     * #categoryDetailPanel instead - see that rule) purely so the
     * back button and the category heading can share one flex row;
     * nothing here styles .accordion-item's own box, so nothing is
     * lost by removing it.
     */
    /*
     * Screen 2 arrives instantly on tap now (see the .ticket-category
     * click handler in viewMatch.js), often before loadTickets()'s
     * AJAX call for that category has actually resolved - so this is
     * frequently the very first thing visible in the panel, not a
     * rare edge case. The stock ticketloader.gif (a generic spinner
     * from the desktop-derived markup) is swapped for a small CSS
     * spinner matching this page's own accent color, in a
     * consistently-sized card so the panel doesn't visibly jump in
     * height once the real content replaces it. Show/hide itself is
     * unchanged - still plain jQuery fadeIn()/hide() on .loader from
     * the existing loadTickets() flow, just given somewhere nicer to
     * fade into.
     */
  }

  #categoryDetailPanel .category-focus-close {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 6px;
    margin: 0;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  #categoryDetailPanel > .accordion-item.accordion-ticket-card {
    display: contents;
  }

  #categoryDetailPanel .accordion-header {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }

  #categoryDetailPanel .accordion-collapse {
    flex: 0 0 100%;
    width: 100%;
  }

  #categoryDetailPanel button.accordion-button.ticket-category {
    display: flex;
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    padding: 4px 4px 4px 0;
    pointer-events: none;
  }

  #categoryDetailPanel button.accordion-button.ticket-category .ticket-card-dot,
  #categoryDetailPanel button.accordion-button.ticket-category .pld-rgt {
    display: none;
  }

  #categoryDetailPanel button.accordion-button.ticket-category::after {
    display: none;
  }

  #categoryDetailPanel button.accordion-button.ticket-category .pld-lft h2 {
    font-size: 18px;
    font-weight: 700;
    color: #131821;
    font-family: Gilroy-Medium;
  }

  #categoryDetailPanel .accordion-body {
    padding: 0;
  }

  #categoryDetailPanel .accordion-content {
    background: #fff;
    border-radius: 13px;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(19, 24, 33, 0.05);
  }

  #categoryDetailPanel .seat-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 16px 0 !important;
  }

  #categoryDetailPanel .seat-section:not(:last-child) {
    border-bottom: 1px solid #eee !important;
  }

  #categoryDetailPanel .loader {
    padding: 32px 0;
    text-align: center;
  }

  #categoryDetailPanel .loader img {
    display: none;
  }

  #categoryDetailPanel .loader::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(19, 24, 33, 0.1);
    border-top-color: #e4b554;
    border-radius: 50%;
    animation: categoryDetailLoaderSpin 0.7s linear infinite;
  }
}

@keyframes categoryDetailLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}