/* ===========================
	1. GLOBAL UTILITIES
=========================== */

.color-red{ color: #FF0000 !important;}
.color-silver{ color: #E6E7EB !important;}

/* ===== Root Variables ===== */
:root {
	/* Power-Up */
  --powerup-color: #F8936F;
  --powerup-bg: #685541;
	
	/* Grand Prix */
  /*-grand-color: #385262;*/
  --grand-bg: #E8E7E0;
	
	/* PH BIGs '25 */
	--ph-bg: #6B6E69;
	--date: #C13139;
	
	/* BIGs Rings '25 */
	--rings-bg: linear-gradient(
	120deg,
  #c2c5ca 0%,
  #d4d7db 40%,
  #eef0f2 75%,
  #c5c7cb 100%
);
	--rings-buttons-text-color: #DCDDDF;
	
	/* Frozen Face Off */
	--frozen-bg: #6D6F6D;
	--frozen-color: #A3C4EE;
	
	/* Chain Launch */
	--chain-color: #D5D5D5; 
	--chain-bg: #2A2A2A;
	
	/* Revolution */
	--revolution-bg: #B82D2D;
	--revolution-color: #B82D2D;
	
	/* Good Catch Club */
	--goodCatch-bg: #0D0D0D;
	--goodCatch-button-bg: #E86853;
	--goodCatch-button-bg-hover: #E1B77D;
	--goodCatch-button-text: #3B4550;
	
	/* Air '26 Q1 */
	--air-bg: 
	 linear-gradient(
    135deg,
  #e6e6e6,
  #c2c2c2,
  #9e9e9e,
  #d4d4d4,
  #8a8a8a
  ),
  repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0px,
    rgba(0,0,0,0.05) 2px,
    rgba(255,255,255,0.05) 4px
  );
	
	/* Memorial Day */
	--memorial-button-gb: #262D65;
	--memorial-button-text: #D02030;
	
	/* Neutral / Base Theme */
  --black: #000;
  --white: #FFFFFF;
}

/* ===== Spacing ===== */
.flex-1{ flex: 1; }

/* ===== Text Colors ===== */
.text-powerup { color: var(--powerup-color) !important; }
.text-grand { color: var(--grand-color); }
.text-date-ph { color: var(--date); }
.text-frozen { color: var(--frozen-bg); }
.text-chain { color: var(--chain-color); }
.text-revolution { color: var(--revolution-color); }
.text-goodCatch { color: var(--goodCatch-button-text); }
.text-memorial { color: var(--memorial-button-text); }
.text-black { color: var(--black) !important; }
.text-white { color: var(--white) !important; }

/* ===== Background Colors ===== */
.bg-powerup { background-color: var(--powerup-bg); }
.bg-grand { background-color: var(--grand-bg); }
.bg-ph { background-color: var(--ph-bg); }
.bg-rings { background: var(--rings-bg); }
.bg-frozen{ background-color: var(--frozen-bg); }
.bg-chain{ background-color: var(--chain-bg); }
.bg-revolution{ background-color: var(--revolution-bg); }
.bg-goodCatch{ background-color: var(--goodCatch-bg); }
.bg-air { background: var(--air-bg); }
.bg-memorial { background: var(--memorial-button-gb); }
.bg-black { background-color: var(--black) !important; }
.bg-white { background-color: var(--white) !important; }

/* ====== Button Backgound Colors ===== */
.goodCatch-button-bg { background-color: var(--goodCatch-button-bg) !important; }

/* ===== Border Colors ===== */
.border-powerup { border-color: var(--powerup-color) !important; }
.border-grand { border-color: var(--grand-color) !important; }
.border-chain { border-color: var(--chain-color) !important; }
.border-black { border-color: var(--black) !important; }
.border-white { border-color: var(--white) !important; }

/* ===== Shared Border / Shape Utilities ===== */
.rounded-3 { border-radius: 3rem !important; }
.border-3 { border-width: 3px !important; border-style: solid; }

/* ===========================
	2. GLOBAL ANIMATIONS
=========================== */

/* ===== Font Famliy ===== */
@font-face {
  font-family: 'roobert';
  src: url('https://store-media.mpowerpromo.com/6668852ece18b5103e163051/assets/RoobertTRIAL-SemiBold-BF67243fd54213d-1756151315480.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
	font-display: swap;
}
.custom-font, .custom-font * { font-family: 'roobert', sans-serif; }
  
/* ===============================
	3. COMPONENT-SPECIFIC CSS
=============================== */

/* ---------- NAVBAR ---------- */

.navbar-class{
	padding-left: 16px !important;
	padding-right: 16px !important;
}
  
.breadcrumb{ display: none !important; }

/* ---------- HOMEPAGE BANNER ---------- */

.rally-bg-color{ background-color: #3A4456 !important;}
.dynasty-bg-color{ background-color: #EDE6DC !important;}
.dynasty-banner-container{ background-color: #36573B !important;}
.banner {
	position: relative;
  height: 60vh;
  background-image: url('https://store-media.mpowerpromo.com/6668852ece18b5103e163051/assets/Guy-Tri-Header-1747238355784.png');
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
}
.banner-logo { width: 55%; }

/* ---------- REWARD PAGE CONTENT ---------- */

.bouncing-arrow-container{ height: 10vh;}
.reward-message{margin-top: 5vh;} 
.conratulations{ font-size: clamp(1.5rem, 5vw, 5rem); }
.justify-content-evenly{ justify-content: space-evenly !important; }
.reward-button-container{
	margin-left: 15%;
  margin-right: 15%;
  margin-top: 2rem;
  padding-bottom: 7rem;
}

/* ---------- Buttons ---------- */

.reward-button:hover{
  color: var(--black) !important;
  background-color: var(--white) !important;
  border-color: var(--white) !important;
}
.power-up-button:hover{
	color: var(--powerup-bg) !important;
  background-color: var(--powerup-color) !important;
  border-color: var(--powerup-bg) !important;
}
.grand-prix-button:hover{
	color: var(--grand-bg) !important;
  background-color: var(--black) !important;
  border-color: var(--black) !important;
}
.ph-bigs-button:hover{
	color: var(--ph-bg) !important;
	background-color: var(--black) !important;
	border-color: var(--ph-bg) !important;
}
.bigs-rings-button:hover{
	color: var(--rings-buttons-text-color) !important;
	background-color: var(--black) !important;
	background-image: none !important;
}
.frozen-button:hover{
	color: var(--frozen-color) !important;
	background-color: var(--frozen-bg) !important;
	border-color: var(--frozen-color) !important;
}
.chain-launch-button:hover{
	color: var(--white) !imortant;
	background-color: var(--black) !important;
	border-color: var(--black) !important;
}
.goodCatch-button:hover{
	background-color: var(--goodCatch-button-bg-hover) !important;
	color: var(--goodCatch-button-text) !important;
}
.memorial-button:hover{
  background-color: var(--memorial-button-text) !important;
	color: var(--memorial-button-gb) !important;
}

/* ---------- Product Page ---------- */

/* Swaps the color pattern of primary and secondary buttons*/
.btn-primary{
  color: white;
  background-color: black;
  border-color: black;
  }
  
.btn-secondary{
  color: black;
  background-color: white;
  border-color: white;
}
.product-configure-part-label{ display: none; }
span.product-configure-part-count::after { content: " Option(s)"; }
img.vue-lb-modal-image { background-color: white !important; }

/* ---------- Cart Page ---------- */

.py-3 > a[href="/"] { display: none;}
[data-id="mPower-referenceField"][data-value="Competition Name"] { display: none !important; }
.checkout-reference-fields{ display: none; }

/* ---------- FOOTER ---------- */

.footer-link{
  display: block;
  padding: .5rem 1rem;
  text-decoration:none;
}

/* ===============================
	4. Media CSS
=============================== */  

@media screen and (max-width: 1000px) {
.nav-link{
  color: black !important;
  }
}
@media screen and (max-width: 600px) {
.reward-message{ align-items: center; }
.reward-button-container{ flex-direction: column;}
.reward-button{ margin-bottom: 1rem;}
.row{ /* footer content */ flex-direction: column; }
  }