html {
    scroll-behavior: smooth;
}

body {
	background-color:		#FFFFFF;
	color:					#000000;
	font-family: 			"Inter", sans-serif;
	font-optical-sizing: 	auto;
	font-weight: 			400;
	font-style: 			normal;
}

[id] {
    scroll-margin-top: 90px;
}

ul {
	list-style-type: 	none;
	padding: 			0;
	margin: 			0;
}

li {
	display: 			block;
}

hr {
	border: 			none;
	height: 			1px;
	background-color: 	#e8e7e6;
}

a {
	text-decoration:		none;
}

a:hover {
	text-decoration:		none;
}

.navLine {
	color:					#353535;
	font-weight:			700;
}

.navLineSplit {
	color:					#ff491c;
	font-weight:			700;
}

a.navLine {
	text-decoration:		none;
	color:					#353535;
}

a.navLine:hover {
	text-decoration:		underline;
}

a.boxLink {
	display: block; 
	background-color: #e33e11;
	font-weight: 500;
	font-size: 12px; 
	text-align: center; 
	padding: 3px 6px; 
	color: white; 
	text-decoration: none;
}

.deviceMenu {
	float:				left;
	margin:				16px 4px;
	padding:			0px 4px;
	font-weight:		500;
	font-size:			12px;
	border-bottom:		1px solid #EEEEEE;
}

.deviceMenu:hover {
	border-bottom:		1px solid #FA4616;
}

.dual {
	background: 		#ffded6; 
	color: 				#ff491c;
    font-size: 			10px;
    font-weight: 		600;
    letter-spacing: 	0.08em;
    text-transform: 	uppercase;
    padding: 			1px 5px;
    border-radius: 		2px;
	
	display: 			inline-block; 
	
	
	
	
	
	line-height: 		1.4;
	float: 				right;
}

.orange {
	color:					#FA4616;
}

.orange-border {
	border: 				1px solid #FA4616;
}

.orange-underline {
	text-decoration:		underline;
	text-decoration-color: 	#FA4616;
}


.green {
	color:					#66b95d;
}

.green-border {
	border: 				1px solid #66b95d;
}

.container {
  display: 					grid;
  grid-template-columns: 	minmax(10px, 1fr) minmax(0, 1280px) minmax(10px, 1fr);
  gap: 						0; /* Adjust the gap if needed */
}

.gradient {
	padding-top: 			96px;
	padding-bottom: 		10px;
	background: 			radial-gradient(70.95% 100% at 50% 0%, #EDEDED 0%, #FFFFFF 73.62%);
}

/* Remove left and right columns on smaller screens */
@media (max-width: 992px) {
	  .container {
		display: 					grid;
		grid-template-columns: 		minmax(0, 1fr); /* Only the middle column remains */
	  }
}

	.left {
		padding-top:			82px;
		margin-right:			5px;
		height:					inherit;
	}
}

.center {
	padding-top:			0px;
	max-width: 				1152px;
	margin: 				0 auto; /* Ensures proper centering */
}

.right {
	padding-top:			82px;
	margin-left:			5px;
	height:					inherit;
}

.sticky {
	position: 				sticky;
	top: 					0;
	
}

.chart-timeframe-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chart-timeframe-buttons button {
  padding: 4px 12px;
  border: 1px solid #378ADD;
  background: transparent;
  color: #378ADD;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.chart-timeframe-buttons button.active {
  background: #378ADD;
  color: #fff;
}

.chart-timeframe-buttons button.active {
  background: var(--partner-color, #ff491c);
  border-color: var(--partner-color, #ff491c);
  color: #fff;
}

.chart-timeframe-buttons button {
  border-color: var(--partner-color, #ff491c);
  color: var(--partner-color, #ff491c);
}

.navigationContainer {
  position: relative;
  z-index: 999;
  will-change: transform;
}

.menuHidden {
  visibility: hidden;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.menuVisible {
  visibility: visible;
  opacity: 1;
  display: block;
  pointer-events: auto;
}

.menuBarContainer {
	position: 				fixed;
	width:					100%;
	height:					74px;
    top: 					0;
    z-index: 				100;
	background-color:		#FFFFFF;
	border-bottom: 			1px solid #D6D6D6;
}

.menuBar {
	height:					inherit;
}

.menuBarLogo {
	padding:				4px 32px;
}

@media (max-width: 992px) {
	.menuBarLogo {
		border-right: 			none;
	}
	.indexWhite {
		font-size: 				32px; 
	}
	.indexGrey {
		font-size: 				12px; 
	}	
}

@media (min-width: 993px) {
	.menuBarLogo {
		border-right: 			1px solid #D6D6D6;
	}
	.indexWhite {
		font-size: 				64px; 
	}
	.indexGrey {
		font-size: 				14px; 
	}
}

.menuBarItem {
	justify-content:		center;
	margin:					0px 0px;
	border-left: 			1px solid #D6D6D6;
	width:					74px;
}

.menuArrow {
	max-width: 				8px; 
	max-height: 			8px;
	margin-top: 			0px;
}

.arrow {
	display: 				inline-block;
	filter: 				brightness(0) invert(1);
	transition: 			transform 0.3s ease, filter 0.3s ease;
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.rotate {
	transform: 				rotate(180deg);
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.navigationOptions {
	font-size:				12px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
	background-repeat: 		no-repeat; 
	background-position: 	center center; 
	background-size: 		16px 16px;
}

.navigationOptionsOpen {
	color:					#fa4616;
}

.triggerContainer {
	color:					#FFFFFF;
	font-size:				12px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
	background-repeat: 		no-repeat; 
	background-position: 	center center; 
	background-size: 		16px 16px;
}

.activeTrigger {
	color:					#fa4616;
}

.activeImage {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.menuHiddenMobile {
  visibility: hidden;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.menuVisibleMobile {
  visibility: visible;
  opacity: 1;
  display: block;
  pointer-events: auto;
}

.menu-header {
	margin:			12px 0px;
	font-weight:	700;
}

.menu-option {
	
}

a.menu-link {
	color:			#292929;
}

a.menu-link:hover {
	text-decoration:			underline;
}

@media (max-width: 992px) {
  .menuContentContainer {
		z-index: 				110;
		position: 				fixed;
		width:					100%;
	}
	.buttonMenus {
		width:					100%;
	}
}

@media (min-width: 993px) {
  .menuContentContainer {
	z-index: 				110;
	position: 				fixed;
	width:					300px;
	}
	.buttonMenus {
		width:					300px;
	}
}

.menuContent {
	z-index: 				110;
	position: 				absolute; 
	left:					0px;
	right:					0px;
	margin:					auto;
	margin-top:				0px;
	padding:				0px;
	max-width:				100%;
	background-color:		#FFFFFF;
	border: 				1px solid #D6D6D6;
}

.menuContentChoice {
	margin:					2px;
}

.menuContentChoice:hover {
	background-color:		#D6D6D6;
}

.menuContentChoice:hover .menuContentLogoContainer {
	background-color:		#353535;
	border: 				1px solid #353535;
}

.menuContentLogoContainer {
	border: 				1px solid #292929;
	margin:					10px;
	padding:				7px;
	line-height:			0px;
}

.menuContentLogo {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
	max-width:				12px;
	max-height:				12px;
}

.menuContentLogoGrey {
	filter: 				brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(97%) contrast(88%);
	max-width:				12px;
	max-height:				12px;
}

.menuContentHeader {
	margin-top:				10px;
}

.menuContentText {
	font-size:				11px;
	color:					#868686;
	margin-bottom:			5px;
}

.welcome {
	
}

@media (max-width: 502px) {
  .welcome {
	height:					350px;
  }
}

@media (min-width: 503px) {
  .welcome {
    height:					503px;
  }
}


.menuContentImageContainer {
	width: 100%;         /* or any responsive width you prefer */
	aspect-ratio: 1 / 1; /* ensures height equals width */
	padding: 0px 8px 8px 0px;
}

.menuContentImage {
	border: 				1px solid #36373f;
	padding:				5px;
	background-size: 		100% 100%;
	background-repeat:		no-repeat;
	width:					100%;
	height:					100%;
}

.menuContentImage:hover {
	border: 				1px solid #56575f;
}

.menuMobileContent {
	overflow-x: 			hidden;
	overflow-y: 			auto;
	scrollbar-color: 		#16171f #36373f;
	max-height:				80vh;
}

.menuMobileItem {
	margin:					1px 0px;
	padding:				10px 10px 10px 10px;
	background-color:		#36373f;
}

.menuMobileItem:hover {
	background-color:		#468189;
}

.menuBarHorizontal {
	padding:				4px;
	background-color:		#1f1f1f;
	margin:					20px 0px 0px 0px;
}

.menuBarHorizontalItem {
	height:					46px;
	justify-content:		center;
	font-weight: 			400;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	color: 					#868686;
}

.menuBarHorizontalItem:hover {
	background-color:		#353535;
	color:					#FFFFFF;
}

.menuBarHorizontalItemSelected {
	justify-content:		center;
	background-color:		#e33e11;
	font-weight: 			400;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
}

.search {
	width:					100%;
    font-weight: 			500;
    font-style: 			normal;
	border: 				2px solid #FA4616;
	border-radius:			6px;
}

.headerInfoContainer {
	margin-top:				20px;
	border: 				1px solid var(--grey-500);	
	min-height: 			71px;
	display: 				flex;
	flex-direction: 		row;
	background-color:		#E6E6E6;
}

.headerInfoSymbol {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.headerInfoHeader {
	font-weight: 			500;
	font-size: 				16px;
	line-height: 			140%;
	margin-bottom:			3px;
}

.headerInfoText {
	padding-right:			8px;
	font-weight: 			500;
	font-size: 				13px;
	line-height:		 	1.2;
	letter-spacing: 		0.02em;
	color: 					#868686;
}

.verticalAlign {
	height:					inherit;
	display: 				flex;
	align-items: 			center;
}

.amazonTitle {
	justify-content: 		left;
	line-height: 			1.6;
	display: 				-webkit-box;
	-webkit-line-clamp: 	2;
	-webkit-box-orient: 	vertical;
	overflow: 				hidden;
}

.headerOptionContainer {
	width:					170px;
	font-weight: 			400;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color:					#FFFFFF;
	border: 				1px solid #1f1f1f;
	padding: 				8px 12px;
	height: 				38px;
	background-color:		#000000;
}

.headerOptionSelect {
	height:					100%;
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				0px;
	background-color:		#000000;
}

.optionContainer {
	float:					left;
	width:					170px;
	padding-left:			8px;
}

.optionHeader {
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	margin-bottom:			8px;
}

.optionHeaderFocus {
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	margin-bottom:			8px;
	padding: 				6px;
	background-color:		#e33e11;
	float:					left;
}

.optionSelectContainer {
	font-weight: 			400;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				8px 12px;
	background-color:		#1f1f1f;
}

.optionSelect {
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				0px;
	background-color:		#1f1f1f;
}

.searchField {
	border: 				1.50px solid #353535;
	padding: 				8px 10px;
	width: 					100%;
	height: 				38px;
	font-weight: 			600;
	font-size: 				16px;
	line-height: 			140%;
	text-align: 			left;
	color: 					#868686;
	background-color:		#000000;
}


.expandedClosed {
	cursor: 				pointer;
	line-height:			1;
	height:					34px;
	padding:				0px 12px 8px 12px;
}

.expandedClosed:hover {
	background-color:		#36373f;;
}

.expandedOpen {
	background-color: 		#16171f;
}

.eContent {
	display: 				none;
	padding: 				10px;
	background-color: 		#161616;
	transition: 			max-height 0.3s ease-in-out;
	font-size:				11px;
	color:					lightgrey;
	white-space: 			pre-wrap;
}

.menuExit {
	position: 			fixed; 
	top:				0px;
    left:				0px;
	height: 			100vh;
	background: 		rgba(0,0,0,0.4);
	z-index:			1;
}

.indexMenuOption {
	margin-right: 		5px; 
	float: 				left; 
	height: 			inherit; 
	padding: 			8px 14px 8px 8px;
	cursor:				pointer;
}

.indexMenuOption:hover {
	background-color: 	#EEEEEE;
}

.indexMenuOptionSelected {
	margin-right: 		5px; 
	float: 				left; 
	background-color: 	#EEEEEE;
	height: 			inherit; 
	padding: 			8px 14px 8px 8px;
}

/* Device preview */
.device-container {
	
	padding:			12px;
}

.device-preview {
	height:				100%;
}

.device-image {
	position: 			relative;
	width:				100%;
	aspect-ratio:		2 / 1;
	background-color:	#EEEEEE;
	overflow: 			hidden;
	display: 			flex;
	align-items: 		center;
	justify-content: 	center;
}

.device-image img {
	display: 			block;
	padding:			28px;
	max-width: 			100%;
	max-height:			100%;
	transition: 		transform 0.4s ease;
	
}

.device-preview:hover .device-image img {
  transform: 			scale(1.08);
}

.device-image-overlay {
	position: 			absolute;
	top: 				0;
	left: 				0;
	padding: 			4px;
	color: 				white;
	z-index: 			1px;
}

.device-price {
	float: 				left; 
	padding: 			2px 4px;
	color:				#FFFFFF;
	background-color: 	#353535;
	border:		 		0px solid #E4DFD5;
	font-weight: 		500; 
	line-height: 		120%; 
	letter-spacing: 	0.08em; 
	text-transform: 	uppercase;
	font-size: 			clamp(10px, 2.5vw, 14px);
}

.device-title {
	text-align:			center;
    font-weight: 		700;
    font-size: 			18px;
    line-height: 		1;
    letter-spacing: 	-0.01em;
    margin: 			4px 0px 4px 0px;
	display: 			-webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow:			 hidden;
}

/* Contents */
.contentHeader {
	max-width:			800px;
	padding:			0px 12px;
	margin:				auto;
}

.contentHeaderImage {
	max-width:			900px;
	padding:			0px 0px;
	margin:				auto;
}

.contentContainer {
	max-width:			600px;
	padding:			0px 12px;
	margin:				auto;
}

.searchTag {
    background: 		#ffded6; 
	color: 				#ff491c;
    font-size: 			11px;
    font-weight: 		600;
    letter-spacing: 	0.08em;
    text-transform: 	uppercase;
    padding: 			2px 6px;
    border-radius: 		2px;
  }

.card-row a {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-decoration: none;
}

.card-row a .card__media {
  flex: 0 0 50%;   /* mirrors your l6/m6 50% width */
}

.card-row a .card__body {
  flex: 0 0 50%;
}

.card-row .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 992px) {
  .card-row a .card__media,
  .card-row a .card__body {
    flex: 0 0 100%;   /* stack on mobile, matching s12 */
  }
}

.card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
  }

  .card--feature {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: stretch;
    padding-bottom: 36px;
    border-bottom: 1px solid #E4DFD5;
  }

  .card--feature .card__media { aspect-ratio: 16 / 10; }
  .card--feature .card__header { font-size: clamp(24px, 3vw, 34px); }
  .card--feature .card__body { justify-content: center; }

  .card__media {
    position: relative;
    aspect-ratio: 4 / 2;
    overflow: hidden;
    background: #EEEEEE; /* #E4DFD5 */
    border-radius: 2px;
  }

  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .card:hover .card__media img { transform: scale(1.04); }

  .card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #8B3A2F;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
  }

  .card__body {
    display: flex;
    flex-direction: column;
    padding-top: 18px;
  }

  .card__meta {
    display: 		flex;
    align-items: 	center;
    gap: 			10px;
    font-size: 		12px;
    color: 			#5B6360;
    font-weight: 	600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 	10px;
  }

  .card__meta .dot {
    width: 			4px;
    height: 		4px;
    border-radius: 	50%;
    background: 	#ff491c;
    opacity: 		1;
  }

  .card__meta .date { color: #5B6360; font-weight: 500; }
  
  .content__header {
    font-weight: 		700;
    font-size: 			21px;
    line-height: 		1.25;
    letter-spacing: 	-0.01em;
    margin: 			0 0 16px;
  }

  .card__header {
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
	display: 			-webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow:			 hidden;
  }

  .card__preamble {
    font-size: 			14.5px;
    line-height: 		1.6;
    color: 				#5B6360;
    margin: 			0;
    display: 			-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:			 hidden;
  }
  
  .card__content {
	white-space: pre-line;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5B6360;
    margin: 0;
   overflow: hidden;
    
  }

  .card--feature .card__preamble {
    -webkit-line-clamp: 4;
    font-size: 16px;
  }

  .card__read {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1F2421;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .card__read::after {
    content: "→";
    transition: transform 0.25s ease;
  }

  .card:hover .card__read::after { transform: translateX(4px); }

.contentPreviewItem {
	margin:				0px;
	padding:			10px;
}

.contentPreviewItem:hover .contentPreviewItemHeader {
	text-decoration:	underline;
}

.contentPreviewItemImage {
	position: relative;
  display: inline-block; /* or block, depending on your layout */
}

.contentPreviewItemImage img {
	display: 			block;
	width: 				100%;
	height:				auto;
}

.contentPreviewItemImageOverlay {
	position: 			absolute;
	bottom: 			0;
	left: 				0;
	padding: 			10px;
	color: 				white;
	z-index: 			1px;
}

.contentPreviewBarHeader {
	text-align:			center;
	padding:			30px;
	background-color:	#eed9c4;
	
	font-weight: 		500;
	font-style: 		normal;
	font-size:			1.6em;
}

.contentPreviewBar {
	padding:			20px 50px;
	background-color:	#faf0e6
}
.contentPreviewContainer {
	margin:				auto;
	max-width:			1400px;
}

.contentPreviewItemHeader {
	float: 				left; 
	margin-top: 		4px;
	color: 				#FFFFFF;
	line-height: 		140%; 
	text-transform: 	capitalize;
}

.contentPreviewType {
	margin-top:			5px;
	padding:			0px 10px;
	font-size:			0.7em;
	font-weight:		500;
	background-color:	#444444;
}

.contentPreviewItemPreamble {
	color:				#000000;
	margin:				5px 0px 10px 0px;
	padding-bottom:		5px;
	padding:			0px 10px 10px 10px;
	font-size:			0.8em;
	font-weight:		600;
	height:				36px;
	overflow: 			hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    text-overflow: 		ellipsis;
}

.contentPreviewItemAuthor {
	font-size:			0.7em;
	font-weight:		400px;
	color:				#ababab;
	padding:			2px 20px 0px 20px;
}

/* Needed for contentSystem */
.contentSystemContainer {
	
}

.contentSystemBars {
	height: 			inherit;
	max-width:			300px;
}

.contentSystemBarsContainer {
	width:				250px;
	margin:				10px;
	padding-top:		10px;
	text-align:			center;
	border-radius: 		0px;
	font-size: 			1em;
	position: 			sticky;
	top: 				30px;
}

.contentSystemHeader {
	padding:			10px 0px;
	font-weight: 		700;
	font-style: 		normal;
	font-size:			1.8em;
}

.contentSystemAuthorContainer {
	margin-top:			20px;
	padding:			20px 10px;
	border-top:			1px solid #ececec;
}

.contentSystemSection {
	padding: 			3px 6px; 
	display: 			inline; 
	box-decoration-break: clone; 
	-webkit-box-decoration-break: clone;
	font-size: 			18px;
	font-weight: 		500;
	border-left: 		4px solid #FA4616;
	color:				#000000;
	background-color:	#EEEEEE;
}

.contentSystemSection2 {
	padding: 			3px 6px; 
	display: 			inline; 
	box-decoration-break: clone; 
	-webkit-box-decoration-break: clone;
	font-size: 			14px;
	font-weight: 		500;
	border-left: 		2px solid #FA4616;
	color:				#000000;
	background-color:	#EEEEEE;
}

.contentSystemLink {
	color:				#000000;
}
.contentSystemLink:hover {
	text-decoration:	underline;
}

.sectionItem {
	text-align:			left;
	padding:			2px 10px;
	margin:				2px;
	border-left: 		2px solid white;
	cursor:				pointer;
	color:				#000000;
	background-color:	#FFFFFF;
	font-size:			1em;
	font-weight: 		500;
	font-style: 		normal;
}

.sectionItem2 {
	text-align:			left;
	padding:			2px 10px 2px 25px;
	margin:				2px;
	border-left: 		2px solid white;
	cursor:				pointer;
	color:				#000000;
	background-color:	#FFFFFF;
	font-size:			0.8em;
	font-weight: 		400;
	font-style: 		normal;
}

.sectionItemActive {
	border-left: 		2px solid #FA4616;
	color:				#000000;
	background-color:	#EEEEEE;
}

.authorHeader {
	font-size:			0.8em;
	font-weight: 		500;
	font-style: 		normal;
}

.authorAbout {
	margin-top:			10px;
	font-size:			0.8em;
	font-weight: 		300;
	font-style: 		normal;
}

.articleCopy {
	background-color:	#1F1F1F;
	padding:			2px 4px;
	margin:				6px 0px;
}

.top10pct {
	width:				60px;
	font-size:			12px;
	text-align:			right;
}

.top10value {
	font-size:			12px;
}

.top10name {
	font-size:			12px;
}

.top10info {
	color:				#868686;
}

.top10 {
	padding:			1px 2px;
}

.top10:hover {
	background-color:	#353535;
}

.headerText {
	color: 				#FFFFFF; 
	border-bottom: 		0px solid #36373f;
	background-color: 	#000000; 
	padding: 			3px 8px; 
	font-weight: 		600; 
	font-size: 			14px; 
	line-height: 		140%; 
	letter-spacing: 	-0.02em; 
	text-transform: 	uppercase;
	border-radius:		12px;
}

.pageHeaderOptions {
	font-family: 			"Roboto Flex", serif;
	font-optical-sizing: 	auto;
	font-weight: 			400;
	font-style: 			normal;
	font-size:				16px;
	padding:				12px 10px 10px 10px;
}

.pageHeaderText {
	font-family: 			"Roboto Flex", serif;
	font-optical-sizing: 	auto;
	font-weight: 			700;
	font-style: 			normal;
	font-size:				24px;
	line-height:			1;
	padding:				10px;
}

.pageHeaderDescription {
	font-weight: 			600;
	font-size: 				16px;
	line-height: 			140%;
	color:					#868686;
	text-transform: 		uppercase;
}

.estimateHeaderContainer {
	height:					inherit;
	margin:					5px 5px;
	overflow:				hidden;
	background-color:		#16171F;
	border: 				0px solid #36373f;
	border-radius:			6px;
}

.estimateHeaderHeader {
	font-weight: 			600;
	font-size: 				14px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	text-align: 			center;
}

.estimatesHeader {
	height:					calc(100% - 10px);
	padding:				0px 0px;
	overflow:				hidden;
	font-size:				12px;
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	color:					#868686;
}

.name {
	font-weight: 			500;
	font-size: 				18px;
	line-height: 			1;
}

.ticker {
	font-size:				12px;
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		1px;
	text-transform: 		uppercase;
	color:					#868686;
}

.brand {
	font-weight: 			700;
	font-size: 				14px;
	line-height: 			100%;
	letter-spacing: 		-0.02em;
}

.model {
	font-weight: 			700;
	font-size: 				14px;
	line-height: 			100%;
	letter-spacing: 		-0.02em;
}

.roi {
	font-size:				12px;
	color:					#96979f;
}

a.shopLink {
  display: 					flex;
  align-items: 				center;
  height: 					60px;
  padding: 					0px 8px;
  margin: 					0px 0px 10px 0px;
  background-color: 		#f4f3f2;
  border: 					1px solid #f4f3f2;
  text-decoration: 			none;
}
a.shopLink:hover {
  border: 					1px solid #AAAAAA;
}

.shopList {
	height:					inherit;
	width: 					100%;
}

.categoryHeader {
	color: 					#000000; 
	background-color: 		#FFFFFF; 
	padding: 				0px 8px; 
	font-family: 			"Bebas Neue", sans-serif;
	font-weight: 			400;
	font-style: 			normal;
	font-size: 				24px; 
	line-height: 			140%; 
	letter-spacing: 		0.02em; 
	text-transform: 		capitalize;
}

.specHeader {
	color: 					#000000; 
	background-color: 		#FFFFFF; 
	padding: 				0px 0px; 
	font-family: 			"Bebas Neue", sans-serif;
	font-weight: 			400;
	font-style: 			normal;
	font-size: 				16px; 
	line-height: 			140%; 
	letter-spacing: 		0.02em; 
	text-transform: 		capitalize;
}

.specText {
	text-align:				left;
	width: 					50%;
	font-weight: 			500;
	background-color:		#f4f3f2;
	border: 				none;
	border-top: 			1px solid #e8e7e6;
	border-bottom: 			1px solid #e8e7e6;
}

.specData {
	text-align:				left;
	width: 					50%;
	border: 				none;
	border-top: 			1px solid #e8e7e6;
	border-bottom: 			1px solid #e8e7e6;
	background-color:		#ffffff;
}

.estimates {
	font-weight: 			400;
	font-size: 				13px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
}

.estimatesDescription {
	font-weight: 			600;
	font-size: 				9px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	color:					#868686;
}

.estimatesModel {
	height:					80px;
	display: 				flex;
	align-items: 			center;
}

.estimatesPartner {
	height:					40px;
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
}

.estimatesLogo {
	text-align:				center;
	width:					50px;
	height:					80px;
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
}

.estimatesCurrent {
	overflow:				hidden;
	margin:					0px 3px;
	height:					40px;
	padding-top:			3px;
}

.estimates24h {
	overflow:				hidden;
	border-top: 			0px solid #36373f;
	height:					40px;
	margin:					0px 3px;
	padding-top:			3px;
}

.inStock {
	border-radius: 			8px;
	padding: 				2px 6px;
	height: 				21px;
	background: 			rgba(17, 227, 62, 0.16);
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color: 					#11e33e;
}

.outOfStock {
	border-radius: 			8px;
	padding: 				2px 6px;
	height: 				21px;
	background: 			rgba(227, 62, 17, 0.16);
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color: 					#e33e11;
}

.blueBadge {
	border-radius: 8px;
	padding: 2px 6px;
	height: 21px;
	background: rgba(17, 62, 227, 0.30); /* light blue background */
	font-weight: 600;
	font-size: 12px;
	line-height: 140%;
	letter-spacing: 0.02em;
	color: #118EE3; /* blue text */
}

.buyNow {
	padding: 				6px 10px;
	height: 				38px;
	background-color:		#e33e11;
	font-weight: 			600;
	font-size: 				14px;
	line-height: 			160%;
	letter-spacing: 		0.02em;
	text-align: 			center;
}

.calculatorItemContainer {
	min-height:				36px;
	margin:					5px;
	padding:				5px;
	background-color:		#161616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.calculatorItemContainer:hover {
	background-color:		#1f1f1f;
	border: 				0px solid #56575f;
}

.calculatorStatsContainer {
	margin: 				3px;
	padding: 				5px; 
	background-color: 		#222222;
	font-size:				12px;
	text-align:				center;
}

.calculatorStatsHeader {
	font-weight:			700;
}

.calculatorStatsText {
	background-color:		#36373f;
	border: 				1px solid #56575f;
	margin-bottom:			1px;
}

.slider-container {
	display: 				flex;
	flex-direction: 		column;
	width: 					100%;
}
.slider-value {
	text-align:				center;
	font-size: 				12px;
}

.resetFilters {
	display:        	block;
	padding:        	5px 10px;
	font-size:      	13px;
	font-weight:    	400;
	color:          	#FFFFFF;
	background-color: 	#ff491c;
	text-align:     	center;
	cursor:         	pointer;
	border:     		1px solid #ff491c;
	border-radius:		8px;
	transition:     	background .1s;
}

.resetFilters:hover {
	color:          	#000000;
	background-color:	#FFFFFF;
}

.slider-button {
	width:					100px;
	margin-top:				5px;
	padding:				0px;
	color:					#FFFFFF;
	background-color:		#36373f;
	border: 				1px solid #56575f;
	border-radius:			6px;
	cursor:					pointer;
}

.watermark {
	margin-top:				20px;
	padding:				10px;
    width: 					100%;
    height: 				100%;
    display: 				flex;
    justify-content: 		center;
    align-items: 			center;
    background: 			url('https://new.hashrate.no/gfx/logo.png') no-repeat center center;
	background-size: 		250px;
    position: 				relative;
	background-color: 		rgba(22, 22, 22, 0.8);
    background-blend-mode: 	multiply;
}

.legends {
	border-top: 			1px solid #292929;
	background-color: 		rgba(22, 22, 22, 0.8);
	padding: 				20px 24px;
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			100%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
}

.scrollHorizontal {
	min-width:				0px;
	max-width:				100%;
	overflow-x: 			auto;
	scrollbar-color: 		#16171f #36373f;
}

.estimateInfo {
	border: 				0px solid #353535;
	padding: 				0px 2px;
	text-align: 			left;
	font-size:				11px;
	line-height: 			1;
	color:					#C3C3C3;
}

.estimateData {
	border: 				0px solid #353535;
	padding: 				0px 2px;
	text-align: 			left;
	font-size:				11px;
	line-height: 			1;
	color:					#FFFFFF;
}

table {
	border-collapse: 		collapse;
	font-size:				12px;
	white-space: 			nowrap;
	width:					100%;
}

th, td {
	border: 				1px solid #CACACA;
	padding: 				8px;
	text-align: 			center;
}

th {
	border: 				1px solid #CACACA;
	background-color: 		#E0E0E0;
	color:					#353535;
	font-weight: 			700;
	font-size: 				11px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	text-align: 			center;
	cursor: 				pointer;
	position: 				relative;
	padding-right: 			20px;
}

th:hover {
	background-color: 		#CACACA;
}

tr:hover {
	background-color: 		#E0E0E0;
}

.sort-indicator {
	display: inline-block;
	width: 12px; /* Fixed width so it doesn't shift */
	text-align: left;
	visibility: hidden; /* Hide by default but keep space */
}
th.sorted .sort-indicator {
	visibility: visible; /* Show when sorting */
}

/* Own buttons */
.buttonGrey {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#1f1f1f;
	color:					#FFFFFF;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

.buttonWhite {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Default button styles */
button {
	cursor: 				pointer;
	transition: 			background 0.2s ease-in-out;
	padding: 				8px 12px;
	background-color:		#1f1f1f;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#1f1f1f;
	color:					#FFFFFF;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Active dataset button */
button.toggle-dataset.active {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Active metric button */
button.toggle-metric.active {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

.map-container {
	position: 				relative;
	width: 					100%;
	
}

svg {
	width: 					100%;
	height: 				auto;
}

.continent {
	fill: 					#3D77B0;
	stroke: 				white;
	stroke-width: 			1px;
	transition: 			fill 0.3s ease-in-out;
	cursor: 				pointer;
}

.continent:hover {
	fill: 					#FA4616;
}

/* Tooltip Styling */
.tooltip {
	display:				none;
	position: 				absolute;
	border: 				1px solid #56575f;
	background-color: 		rgba(0,0,0,0.8);
	padding: 				8px;
	border-radius: 			5px;
	box-shadow: 			0px 0px 5px rgba(0,0,0,0.3);
	font-size: 				14px;
	pointer-events: 		none;
	transition: 			opacity 0.2s ease-in-out;
	transform: 				translate(-50%, -50%); /* ✅ Center the tooltip */
}

.disclaimer {
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.04em;
	color:					#666666;
}

.footerContainer {
	position: 				absolute;
	width: 					100%;
	background-color:		#FFFFFF;
	border-top: 			1px solid #D6D6D6;
}

.footerBarContainer {
	width:					100%;
	height:					74px;
	border-bottom: 			1px solid #D6D6D6;
}

.footerBar {
	height:					inherit;
}

.footerBarLogo {
	padding:				4px 12px;
}

.footerBarItem {
	justify-content:		center;
	border-left: 			1px solid #D6D6D6;
}

.footerOptions {
	z-index:				120;
	position: 				relative;
	font-size:				12px;
	margin:					0px 25px 0px 25px;
	padding: 				0px 0px 0px 0px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
}


.footer {
	max-width:				1280px;
	margin:					auto;
}
.footerContent {
	padding:				0px 15px 0px 15px;
	margin:					30px 0px;
}

.footerMenuHeader {
	margin-bottom:			6px;
	font-weight: 			500;
	font-size: 				16px;
	line-height: 			120%;
	letter-spacing: 		0.02em;
}

.footerMenuContent {
	display:				inline-block;
	margin-bottom:			8px;
	color:					#868686;
	font-weight: 			500;
	font-size:				14px;
	line-height: 			120%;
	letter-spacing: 		0.02em;
}

.footerDisclaimer {
	border-top: 			1px solid #D6D6D6;
	text-align:				center;
	color:					#666666;
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	text-align: 			center;
	padding:				0px 15px 0px 15px;
	margin:					0px 0px 110px 0px;
}

.estimate {
	min-height:				90px;
	margin:					5px;
	padding:				5px;
	background-color:		#161616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.estimate:hover {
	background-color:		#1f1f1f;
	border: 				0px solid #56575f;
}

.estimateWarning {
	min-height:				90px;
	margin:					5px;
	padding:				5px;
	background-color:		#301616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.estimateWarning:hover {
	background-color:		#4a1f1f;
	border: 				0px solid #56575f;
}

.raleway-normal {
  font-family: 				"Raleway", serif;
  font-optical-sizing: 		auto;
  font-weight: 				400;
  font-style: 				normal;
}

.raleway-bold {
  font-family: 				"Raleway", serif;
  font-optical-sizing: 		auto;
  font-weight: 				700;
  font-style: 				normal;
}

.roboto-flex-normal {
  font-family: "Roboto Flex", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

.flash-green {
	animation: 			flash-green 2s forwards;
}

@keyframes flash-green {
	0% { background-color: #66b95d; } 
	100% { background-color: transparent; }
}

.flash-orange {
	animation: 			flash-orange 2s forwards;
}

@keyframes flash-orange {
	0% { background-color: #FA4616; } 
	100% { background-color: transparent; }
}

.flash-yellow {
	animation: 			flash-yellow 2s forwards;
}

@keyframes flash-yellow {
	0% { background-color: #ffc600; } 
	100% { background-color: transparent; }
}

.login-text {
	font-size:				12px;
    font-weight: 			700;
}

.login-input {
    display: 				flex;
    align-items: 			center;
    background: 			#FFFFFF;
    border: 				1.5px solid #ff491c;
    border-radius: 			8px;
    padding: 				6px 12px;
    transition: 			border-color .2s;
	width:					100%;
}

.wrap {
	display: 			flex;
	flex-direction: 	column;
	align-items: 		center;
	gap: 				2rem;
	padding: 			3rem 2rem;
	background: 		#fff;
	border-radius: 		12px;
	border: 			1px solid #e0e0e0;
}

.search-container {
    border:          	1px solid #c6c6c6;
    border-radius:   	8px;
    margin:          	2px;
    padding:         	0px;
    display:         	flex;
    flex-direction:  	column;
	height:				238px;
}
.search-container:hover .search-image img {
    transform: scale(1.10);
}
.search-image {
    display:         	flex;
    justify-content: 	center;
    align-items:     	center;
    height:          	120px;
    flex:            	0 0 150px;
    overflow:        	hidden;
	background-color:	#EEEEEE;
	border-radius:   	8px;
}
.search-image img {
    transition: transform 0.2s ease;
    max-height: 100%;
    max-width:  100%;
}
.search-name {
    font-size:      13px;
	font-weight:	500;
    color:          #000000;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
	padding:		4px 8px;
}
.search-subtitle {
    font-size: 		0.75rem;
    color:     		#888;
	padding:		0px 8px;
}
.search-icons {
    margin-top: auto;
}
.search-icons .w3-col {
    display:         flex;
    justify-content: center;
    align-items:     center;
}

.gpu-intro {
  margin: 				1rem 0 4rem 0;
  padding: 				0 1.5rem;
  color: 				#222;
}

.gpu-intro h1 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.75rem;
  letter-spacing: -0.02em;
  color: #111;
}

.gpu-intro p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.25rem 0;
  color: #333;
  white-space: pre-line;
}

.gpu-intro p:last-of-type {
  margin-bottom: 2.5rem;
}

.gpu-search-wrap {
  position:       relative;
  width:          100%;
}

.gpu-search-inner {
  display:        flex;
  align-items:    center;
  background:     #FFFFFF;
  border:         1.5px solid #ff491c;
  border-radius:  8px;
  padding:        0 16px;
  transition:     border-color .2s;
}
.gpu-search-inner:focus-within {
  border-color:   #ff491c;
  box-shadow:     0 0 0 3px rgba(255,73,28,.12);
}

.gpu-search-icon {
  width:          18px; height: 18px;
  color:          #000000;
  flex-shrink:    0;
  margin-right:   12px;
}

.gpu-search-input {
  flex:           1;
  background:     none;
  border:         none;
  outline:        none;
  font-size:      16px;
  color:          #000000;
  padding:        8px 0;
  caret-color:    #5b8cff;
}
.gpu-search-input::placeholder { color: #7a7f8e; }

.gpu-clear-btn {
  display:        none;
  background:     none;
  border:         none;
  color:          #7a7f8e;
  cursor:         pointer;
  padding:        4px;
  border-radius:  6px;
  line-height:    0;
  transition:     color .15s;
}
.gpu-clear-btn:hover { color: #000000; }
.gpu-clear-btn.visible { display: flex; align-items: center; }

.gpu-suggestions {
  display:        none;
  position:       absolute;
  top:            calc(100% + 8px);
  left:           0;
  right:          0;
  background:     #FFFFFF;
  border:         1px solid #ff491c;
  border-radius:  12px;
  overflow:       hidden;
  z-index:        100;
  box-shadow:     0 16px 40px rgba(0,0,0,.5);
}

.gpu-sug-item {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        11px 16px;
  cursor:         pointer;
  transition:     background .1s;
  border-bottom:  1px solid #ff491c;
}
.gpu-sug-item:last-child { border-bottom: none; }
.gpu-sug-item:hover, .gpu-sug-item.active { background: #f4f4f4; }

.gpu-sug-ico {
  width:          50px; height: 30px;
  border-radius:  8px;
  background:     #1f2228;
  border:         1px solid #2a2d35;
  display:        flex; align-items: center; justify-content: center;
  flex-shrink:    0;
  font-size:      14px;
}

.gpu-sug-name {
  flex:           1;
  font-size:      14px;
  color:          #000000;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.gpu-sug-name em {
  font-style:     normal;
  color:          #ff491c;
  font-weight:    600;
}

.gpu-sug-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gpu-sug-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gpu-sug-subtitle {
    font-size: 0.75rem;
    color: #888;
}

.gpu-sug-arrow {
  color:          #7a7f8e;
  font-size:      16px;
  flex-shrink:    0;
}

.gpu-sug-arrow.collected {
  color: #ff491c;
}

.gpu-sug-empty {
  padding:        16px;
  font-size:      13px;
  color:          #7a7f8e;
  text-align:     center;
}
.gpu-sug-badges {
  display: 			flex;
  flex-direction: 	column;
  align-items: 		center;
  justify-content: 	center;
  gap: 				0px;
  line-height:		0.6;
}

.gpu-sug-footer {
  display:        	block;
  padding:        	11px 16px;
  font-size:      	13px;
  font-weight:    	600;
  color:          	#FFFFFF;
  background-color: #ff491c;
  text-align:     	center;
  cursor:         	pointer;
  border-top:     	1px solid #ff491c;
  transition:     	background .1s;
}
.gpu-sug-footer:hover, .gpu-sug-footer.active { background: #e63d12; }

/* Founder quote — matches intro's spacing/color system */
.quote {
  margin: 		0 auto;
  padding: 		2rem 1.5rem;
  border-left: 4px solid #444;
  background: #f9f9f9;
  font-style: italic;
}

.founder-quote p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #222;
  margin: 0 0 1rem 0;
  quotes: "“" "”";
}

.founder-quote p::before {
  content: open-quote;
}

.founder-quote p::after {
  content: close-quote;
}

.founder-quote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  text-align: right;
  color: #666;
  font-size: 0.95rem;
}

@media print {
  .gpu-intro,
  .founder-quote {
    color: #000;
  }
  .founder-quote {
    border-left: 4px solid #000;
    background: none;
  }
}

@media (max-width: 600px) {
  .gpu-intro h1 {
    font-size: 1.75rem;
  }
  .founder-quote {
    padding: 1.5rem;
  }
}

@media print {
  .founder-quote {
    white-space: pre-line;
    border-left: 4px solid #000;
    background: none;
  }
}

    .otp-label {
		margin:			auto;
		font-size: 		13px;
		max-width:		400px;
    }

    .otp-inputs {
      display: flex;
      gap: 10px;
    }

    .otp-inputs input {
      width: 48px;
      height: 58px;
      text-align: center;
      font-size: 22px;
      font-weight: 500;
      font-family: ui-monospace, monospace;
      color: #111;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      caret-color: transparent;
    }

    .otp-inputs input:focus {
      border-color: #888;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    }

    .otp-inputs input.filled {
      border-color: #555;
    }

    .otp-inputs input.submitted {
      border-color: #1D9E75;
      box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
      color: #0F6E56;
    }

    .otp-status {
      font-size: 14px;
      color: #888;
      min-height: 20px;
      margin: 0;
    }

    .otp-status.success {
      color: #1D9E75;
      display: flex;
      align-items: center;
      gap: 6px;
    }
	
	.resend-btn {
      font-size: 13px;
      color: #555;
      background: none;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .resend-btn:hover:not(:disabled) {
      background: #f5f5f5;
      border-color: #bbb;
    }

    .resend-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
	
.user-selection {
	display: 			flex;
	flex-direction: 	column;
	align-items: 		center;
	gap: 				2rem;
	padding: 			3rem 2rem;
	background: 		#fff;
	border-radius: 		12px;
	border: 			1px solid #e0e0e0;
}

.user-selection:hover {
	border: 			1px solid #000000;
}

.alerts-container {
	gap: 				2rem;
	padding: 			0px 24px 0px 12px;
	background: 		#fff;
	border-radius: 		12px;
	border: 			1px solid #e0e0e0;
}

.custom-select {
    position: relative;
    width: 180px;
    font-size: 13px;
    user-select: none;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.custom-select-trigger:hover {
    border-color: #888;
}

.custom-select.open .custom-select-trigger {
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}

.custom-select-arrow {
    font-size: 10px;
    color: #888;
    margin-left: 8px;
    transition: transform 0.15s ease;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
}

.custom-select.open .custom-select-options {
    display: block;
}

.custom-select-option {
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.custom-select-option:hover {
    background: #f0f6ff;
}

.custom-select-option.selected {
    background: #e8f1ff;
    font-weight: 600;
}

.opt-count {
    color: #999;
    font-size: 0.85em;
    font-weight: 400;
    margin-left: 3px;
}

.modal-overlay {
  display: 			none;
  position: 		fixed;
  inset: 			0;
  background: 		rgba(0, 0, 0, 0.55);
  z-index: 			1000;
  align-items: 		center;
  justify-content: 	center;
}

.modal {
  background: 		#fff;
  padding: 			1.5rem;
  border-radius: 	8px;
  width: 			100%;
  max-width: 		420px;
}

.modal h2 {
  font-size: 		16px;
  font-weight: 		600;
  margin-bottom: 	1.25rem;
}

.modal label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-bottom: 5px;
}

.modal input[type="number"],
.modal textarea,
.modal input {
  width: 			100%;
  padding: 			0 10px;
  border: 			1.5px solid #ff491c;
  border-radius: 	6px;
  font-size: 		14px;
  box-sizing: 		border-box;
}

.modal input[type="number"] {
  height: 			36px;
}

.modal textarea input {
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal textarea,
.modal input {
  outline: 			none;
  border:   	1px solid #ff491c;
  box-shadow:     	0 0 0 3px rgba(255,73,28,.12);
}

.modal input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

.modal button {
  height: 			36px;
  padding: 			0 16px;
  border-radius: 	6px;
  font-size: 		14px;
  cursor: 			pointer;
  border: 			1px solid #ddd;
  color:			#000000;
  background: 		#fff;
  margin-right: 	8px;
}

.modal button:last-of-type {
	color:			#FFFFFF;
	background: 	#ff491c;
	border-color: 	#ff491c;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 24px;
	line-height: 1;
	color: #868686;
	cursor: pointer;
	transition: color 0.15s ease;
}
.modal-close:hover {
	color: #222;
}

.toast {
	display:		none;
  background: 		#1a1a1a;
  color: 			#FFFFFF;
  font-size: 		13px;
  padding: 			0.6rem 1.2rem;
  border-radius: 	8px;
  z-index: 			2000;
}

.write-review-link {
	padding:			4px 8px;
	font-weight:		600;
	cursor: 			pointer;
	transition: 		opacity 0.15s ease;
}
.write-review-link:hover {
  opacity: 			0.7;
}

.toggle-reviews-link {
	cursor: 		pointer;
	font-size: 		13px;
	color: 			#ff491c;
	transition: 	opacity 0.15s ease;
}
.toggle-reviews-link:hover {
	opacity: 0.7;
}

.star-rating.static .star {
	display: inline-block;
	color: #d8d8d8;
	font-size: 16px;
	line-height: 1;
}
.star-rating.static .star.filled {
	color: #f5a623;
}
.star-rating.static .star.half {
	background: linear-gradient(90deg, #f5a623 50%, #d8d8d8 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.star-rating {
	display: inline-flex;
	gap: 2px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.star-rating .star {
	color: #d8d8d8;
	transition: color 0.1s ease;
}
.star-rating .star.filled {
	color: #f5a623;
}
.star-rating .star:hover {
	transform: scale(1.05);
}