/*** Colors
  Bright Red: #EC111A
  Gold: #C9B586
***/


/* =========================================================
   FONT IMPORTS
========================================================= */

@font-face {font-family: 'ScotiaFont'; src: url('https://tapin2.blob.core.windows.net/fonts/montserrat-bold.ttf') format('truetype'); font-weight: 700;font-style: normal; }

@font-face { font-family: 'MontserratRegular'; src: url('https://tapin2.blob.core.windows.net/fonts/montserrat-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }


/* =========================================================
   GLOBAL / BASE STYLES
   These apply everywhere unless overridden later
========================================================= */

/* New Changes */
#checkout-div .btn { background-color: #EC111A; }
#header-layout #cart-item-count { background-color: #EC111A; }
#page-menu .btn.btn-secondary.btn-note { background-color: #EC111A; border-color: #EC111A; }
#page-menu #header-layout .header-right { color: #FFF; font-size: 2rem; margin-top: 3rem; }
.modal-product .modal-dialog .modal-body .row-quantity input[type=number] { color: #EC111A; }
#page-menu #cart-desktop .quantity-circle, #page-review #tab-container .quantity-circle, #page-tab #tab-container .quantity-circle { background-color: #EC111A; }
#header-layout { background-color: #000; }
#page-menu .descr { font-size: 1rem!important; }
#page-tab #search-event-container { color: #FFF; }
#page-review #search-event-container { color: #FFF; }
#page-review .order-row-header a { background-color: #EC111A; border-color: #EC111A; color: #FFF; }
#page-review .btn.btn-secondary.btn-note { background-color: #EC111A; border-color: #EC111A; }
#page-review .tip-container .btn.active { background-color: #EC111A; }
#escrow-payment .payment-method-credit-card { display: none!important; }

@media (max-width: 800px) {
#page-menu .event-img { margin-left: .5rem!important; }
#page-menu .event-details-text { margin-left: -1rem; color: #FFF; }
#page-menu div#event-details { margin-top: 1rem; }
#page-tab .event-img { height: 4rem; width: 7rem; margin-top: 1.75rem; margin-left: -.5rem; }
.event-details-text { font-size: .75rem; }
#page-tab p.event-details-text.font-weight-bold.mb-0.mt-1 { margin-top: 2.2rem!important; }
#page-review p.event-details-text.font-weight-bold.mb-0.mt-1 { margin-top: 2.2rem!important; }
#page-review .event-img { height: 4rem; width: 7rem; margin-top: 1.75rem; margin-left: -.5rem; }

}

html,
body,
body.preorder.seat,
#main-body,
#page-seat,
#page-menu,
#page-review,
#page-tab,
#top-header,
#header-layout,
.navbar,
.modal,
.card,
.btn,
button,
input,
select,
textarea,
.product,
.modifier,
.footer {
  font-family: 'ScotiaFont', Montserrat, Arial, sans-serif !important;
}

.btn-primary {
  background-color: #EC111A;
  border-color: #EC111A;
}

.footer {
  background-color: transparent !important;
}

.custom-control-label {
  font-family: 'MontserratRegular';
}

.navbar-light .navbar-toggler {
  background: #FFFFFF;
}

.login.row .navbar-collapse {
  color: #000000;
}

.fa-plus:before,
.fa-minus:before {
  color: #000000;
}

#spinner-modal .modal-body .spinner-border {
  border-color: red;
  border-right-color: black;
}

#login-modal .modal-header .fa-window-close,
#login-before-event-selection-modal .modal-header .fa-window-close {
  color: #EC111A;
}


/* =========================================================
   HOME / EVENT SELECTION PAGE
========================================================= */

body.preorder.seat {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background: url('https://storage.tapin2.co/images/bg/Tapin2-BG.jpg') no-repeat center center / cover;
}

#page-seat {
  height: 90vh !important;
}

#page-seat h1,
#page-seat h3 {
  font-weight: bold;
}

#page-seat .event-grid .card-title { font-size: .9rem; }
#page-seat .event-grid .card-text { font-size: .9rem; }

#page-seat #section-group-container { margin-top: 1rem!important; }

#page-seat h3 {
  display: none !important;
  margin-top: 0vh;
}

#page-seat h4 {
  font-size: 1rem !important;
}

#page-seat .event-row {
  color: #FFFFFF;
}

#page-seat .event-row .event-select-btn,
#page-seat .event-grid .event-select-btn {
  background-color: #EC111A;
}


#page-seat .list-grid-toggle div.select {
  color: #EC111A !important;
}

#page-seat:after {
  content: " ";
  background: url('https://storage.tapin2.co/images/bg/Stacked_Scotiabank_Centre_Logo_2025_Rev_White.png') no-repeat center center;
  background-position-y: bottom;
  background-size: 15%;
  text-align: center;
  font-size: 15px;
  white-space: pre-wrap;
  display: flex;
  height: 20rem;
  color: #000000;
  margin-top: -7vh;
  margin-bottom: -3vh;
}

#main-body.container-fluid.px-0.flex-grow-1 {
  max-height: 50rem;
  height: 50rem;
  margin-bottom: -5rem;
}

#search-event-container {
  margin-top: 0rem;
  margin-left: 1rem;
  background-color: transparent !important;
}

.col-12.text-nowrap.position-relative {
  justify-items: center;
  text-align-last: center;
}

#event-details .justify-content-around {
  justify-content: flex-start !important;
  margin-left: .75rem !important;
}


/* =========================================================
   TOP HEADER
========================================================= */

#top-header {
  background-color: transparent !important;
  color: #FFFFFF;
  font-weight: bold;
}

#top-header .link {
  color: #D7B98A;
}

#preorder-logo {
  max-width: 15vw !important;
}


/* =========================================================
   MENU PAGE
========================================================= */

@media (min-width: 800px) {

#page-menu #header-layout {
  background-color: #000000 !important;
  background: url('https://storage.tapin2.co/images/bg/2025-Scotiabank-PS-Clr-logo-horizontal---RGB-red-rev-c.png') no-repeat center center;
  background-size: 35%;
  color: #FFFFFF;}

#header-layout .logo {
  margin-left: 15px !important;

}

#page-menu #header-layout { background-color: #000000 !important; }


#page-menu #header-layout .header-right {
  color: #FFFFFF;
}

#page-menu .edit-seat-btn,
#page-review .edit-seat-btn,
#page-tab .edit-seat-btn {
  color: #FFFFFF;
}

#page-menu .edit-sm-btn {
  color: #FFFFFF;
  /*background-color: #EC111A;*/
  margin-left: 15px !important;
}

#page-menu nav > a {
  margin-right: -17px;
}

#page-menu .subcategory-link {
  margin-right: -33px;
}

#page-menu nav > a.active {
  text-decoration: underline solid #EC111A 4px;
  text-underline-offset: 7px;
}

#page-menu .nav-link.active {
  background-color: #FFFFFF !important;
  color: #EC111A;
}

#page-menu #cart-desktop .quantity-circle,
#page-review #tab-container .quantity-circle,
#page-tab #tab-container .quantity-circle {
  background: #EC111A;
}


#page-menu .btn.btn-secondary.btn-note,
#page-menu #cart-desktop #special-instruction-btn,
#page-review #tab-container #special-instruction-btn,
#page-menu .order-note-btn {
  background-color: #EC111A;
  color: #FFFFFF;
}

#page-menu #cart-desktop #order-cart-div #checkout-div {
  margin-bottom: 5rem !important;
}

#page-menu .edit-sm-btn {
  color: #FFFFFF;
}

.pr-desktop .btn-pr > .info > .descr {
  display: none;
}

.product.selected,
.row-product-groups .row-products > .selected .modifier.selected,
.row-modifier-groups .row-modifiers .modifier.selected {
  background-color: #EC111A;
}

.modifier.w-100 {
  color: #000000;
}

.modal-product .modal-dialog .modal-body .row-quantity input[type=number] {
  color: #EC111A;
}

/* =========================================================
   REVIEW / TAB / CHECKOUT
========================================================= */

#page-review .change-order-btn,
#page-review .edit-order-btn,
#page-review .delete-order-btn,
#page-review .btn.btn-secondary.btn-note,
#page-review .order-note-btn {
  background-color: #EC111A !important;
  color: #FFFFFF !important;
}



#page-review #header-layout .logo {
  margin-left: -20px !important;
}

#page-review #tab-container {
  height: 95vh;
}

#checkout-div {
  padding-bottom: 2rem !important;
}

.card-body.text-left.pt-2 {
  padding-top: 0rem !important;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  width: -webkit-fit-content;
  font-size: 10px;
}

.btn.btn-secondary.btn-block.btn-lg.btn-cancel.my-auto.mx-auto {
  display: none !important;
}


/* =========================================================
   OPTIONAL POSTAL CODE REPLACEMENT
   Uncomment if needed
========================================================= */

/*
div#card-postal-code {
  font-size: 0;
}

div#card-postal-code:after {
  content: "Postal*";
  text-indent: 0;
  display: block;
  font-size: 1rem;
}
*/


/* =========================================================
   MOBILE / TABLET OVERRIDES
   These only apply at 800px wide or smaller
========================================================= */

@media (max-width: 800px) {

  /* -----------------------------
     Header
  ----------------------------- */

  #header-layout {
    position: sticky !important;
    min-height: 8.5rem !important;
    height: 8.5rem !important;
    padding: 0 !important;
    background-size: 60% !important;
    background-position-y: 30px;
  }

  #page-menu #header-layout .header-right {
    padding-right: 10px !important;
  }

#checkout-div .btn {
  background-color: #EC111A;
}


  /* -----------------------------
     Home / Event Selection
  ----------------------------- */

  #page-seat {
    height: calc(100vh - 100px) !important;
  }

  #page-seat .w-100 {
    padding-bottom: 20px !important;
  }

  #page-seat:after {
    content: " ";
    background: url('https://storage.tapin2.co/images/bg/Stacked_Scotiabank_Centre_Logo_2025_Rev_White.png') no-repeat center center;
    background-position-y: bottom;
    background-size: 20%;
    text-align: center;
    font-size: 15px;
    white-space: pre-wrap;
    display: flex;
    height: 15rem;
    color: #000000;
    margin-top: 5vh;
    margin-bottom: 1vh;
  }

  .row.event-row.mx-auto.mb-2 {
    color: #FFFFFF !important;
  }

  #page-menu .event-details-text {
    font-size: 1rem!important; }


  /* -----------------------------
     Search / Event Details
  ----------------------------- */





}


div#escrow-payment { display: none!important; }

#page-confirm a.btn.btn-primary.btn-lg { font-size: 0; }
#page-confirm a.btn.btn-primary.btn-lg::after { content: "Order Again"; text-indent: 0; display: block; font-size: 1.25rem;}