body {
	font-family: 'Outfit', sans-serif;
	background-color: #0D0E12;
	overflow-x: hidden;
}

.noise-background {
	z-index: 99;
	opacity: 0.03;
	pointer-events: none;
	background-image: url('../img/noise-bg.png');
	background-position: 0 0;
	background-size: auto;
	width: 100%;
	height: 100%;
	position: fixed;
}



.solana-button {
	position: relative;
	padding: 0.5rem 1.5rem;
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	color: white;
	background: #0D0E12;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	z-index: 1;
	transition: background 0.3s ease;
}

#commandDropdown
{
	margin-top:10px;
}

#commandDropdown > div:hover {
	background-color: #2f2f36;
	color: white;
  }

  #commandDropdown > div {
	border-bottom: 1px solid #2f2f36;
  }
  
  #commandDropdown > div:last-child {
	border-bottom: none;
  }
  

.gradient-border-button {
	position: relative;
	padding: 0.5rem 1.5rem;
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	color: white;
	background: #0D0E12;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	z-index: 1;
	overflow: hidden;
	transition: color 0.3s ease;
}

.gradient-border-button::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
	padding: 2px;
	background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	z-index: -1;
	transition: padding 0.3s ease;
	/* twice as fast */
}

.gradient-border-button::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
	transform: scale(0);
	opacity: 1;
	transform-origin: center;
	transition: transform 0.3s ease;
	/* faster fill */
	z-index: -2;
}

.gradient-border-button:hover::before {
	padding: 0;
}

.gradient-border-button:hover::after {
	transform: scale(1);
}

.gradient-border-button:hover {
	color: white;
}

.trixi-footer {
	margin-top: 20px;
}

.buttons-area {
	display: inline-flex;
	align-items: center;
	justify-content: center;

}

.logo img {
	max-width: 180px;
}


@media screen and (max-device-width: 480px) and (orientation: portrait) {
	.gradient-border-button {
		white-space: nowrap;
		font-size: 0.95rem;
		/* optional tweak to help fit smaller screens */
	}

	.margin-fix-ios
{
	margin-left:5px!important;
}
    #settings-btn
	{
		margin-left:5px;
	}
}

/* Ensure the panel is aligned to the right */
#wallet-panel-wrapper {
	display: flex;
	justify-content: flex-end;
	/* Align the wallet address display to the right */
	width: 100%;
	height: 60px;
}

#wallet-address-display {
	width: 100%;
	max-width: 400px;
	/* Adjust the max width as needed */
	text-align: right;
	/* Ensure the content is aligned to the right inside the panel */
}

/* Inactive (faded) button style */
.inactive-button {
	opacity: 0.5;
	pointer-events: none;
	/* Prevent clicks */
	cursor: not-allowed;
	/* Change cursor to indicate it's disabled */
}

/* Inactive state for all buttons with 'inactive-button' class */
.inactive-button {
	opacity: 0.5;
	pointer-events: none;
	/* Prevent clicks */
	cursor: not-allowed;
	/* Change cursor to indicate it's disabled */
}


/* Default button style for the Settings button (desktop) */
#settings-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.5rem;
	/* Larger padding for desktop */
}

/* By default, hide the SVG cog icon container (on desktop) */
.settings-icon-container {
	display: none;
	/* Hide the cog icon by default */
}

/* On mobile screens, hide the text and only show the icon */
@media (max-width: 560px) {

	/* Hide the text on mobile */
	.settings-text {
		display: none;
		/* Hide text on mobile */
	}

	/* Show the cog icon container on mobile */
	.settings-icon-container {
		display: inline-block;
		/* Show the cog icon container */
	}

	/* Adjust the button size for mobile */
	#settings-btn {
		padding: 0.3rem 0.5rem;
		/* Smaller padding for mobile */
	}
}

#trixi1,
#trixi2,
#token-price {
	display: none;
}

#primary-panel {
	min-height: 360px;
	margin-top: 0px;
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

.hide-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: none !important;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: inset 0 0 5px #00FFA3 !important; /* inner neon glow */
  transition: box-shadow 0.2s ease-in-out;
}

#runBtn.ring {
	transition: box-shadow 0.3s ease-in-out;
	box-shadow: 0 0 0 2px #00FFA3;
  }
  


/* === Panels CSS (Final, Fade-In Version) === */

/* Panel 1 inactive state 
.panel-inactive {
	margin-top: -70px !important;
	opacity: 0.5;
	pointer-events: none;
	filter: grayscale(100%);
	transition: height 0.25s ease-in-out;
	height: 160px !important;
}*/

/* Wallet panel fade-in */
#wallet-panel-wrapper {
	opacity: 0;
	transition: opacity 150ms linear;
	will-change: opacity;
}

#wallet-panel-wrapper.visible {
	opacity: 1;
}

/* Toggle message visibility */
#primary-panel .panel-message-inactive {
	display: none;
}

#primary-panel.panel-inactive .panel-message-inactive {
	display: inline;
}

#primary-panel .panel-message-active {
	display: inline;
}

#primary-panel.panel-inactive .panel-message-active {
	display: none;
}

/* === Panel Fade Animation === */

/* Base fade state for all panels */
.info-panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Panel 2 */
.fade-delay-0 {
	transition-delay: 0ms;
}

#primary-panel:not(.panel-inactive)~#info-panels-wrapper .fade-delay-0 {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0ms;
}

#primary-panel.panel-inactive~#info-panels-wrapper .fade-delay-0 {
	opacity: 0;
	visibility: hidden;
	transition-delay: 500ms;
}

/* Panel 3 */
.fade-delay-1 {
	transition-delay: 250ms;
}

#primary-panel:not(.panel-inactive)~#info-panels-wrapper .fade-delay-1 {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 250ms;
}

#primary-panel.panel-inactive~#info-panels-wrapper .fade-delay-1 {
	opacity: 0;
	visibility: hidden;
	transition-delay: 250ms;
}

/* Panel 4 */
.fade-delay-2 {
	transition-delay: 500ms;
}

#primary-panel:not(.panel-inactive)~#info-panels-wrapper .fade-delay-2 {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 500ms;
}

#primary-panel.panel-inactive~#info-panels-wrapper .fade-delay-2 {
	opacity: 0;
	visibility: hidden;
	transition-delay: 0ms;
}

/* === End Panels CSS === */

/* Fingerprint scanner */

.fingerprint-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	border-radius: 17px;

}

/* solana border, off for now 

.solana-border {
  background:
    linear-gradient(#1C1E26, #1C1E26) padding-box,
    linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF) border-box;
  border: 2px solid transparent; 
}

*/

.wallet-gate-text span {
	display: block;
  }

@media (max-width: 640px) {
	#wallet-message {
	  padding: 4rem;
	  width: 100vw !important;
	  max-width: 100vw !important;
	  left: 50% !important;
	  transform: translateX(-50%) translateY(-50%) !important;
	}
  
  }

  .wallet-panel-transition {
	transition: height 0.4s ease, opacity 0.3s ease;
	height: 0;
  }
  
  .wallet-bar-green {
	color: #00FFA3;
}
.wallet-bar-blue {
	color: #03E1FF;
}
.wallet-bar-white {
	color: #FFFFFF;
}
.wallet-bar-pink {
	color: #DC1FFF;
}


  .wallet-bar-spacer
  {
width: 10px;
  }

  #loader-wrapper {
	transform: translateX(20px) ; 
  }
  

  @keyframes spin-gradient {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }
  
  #selected-trixi {
	position: fixed;
	overflow: hidden;
	bottom: 7rem;
	right: 1.5rem;
	width: 6rem;
	height: 6rem;
	border-radius: 999px;
	background-position: center;
	background-size: cover;
	background-color: black;
	z-index: 1000;
	padding: 3px;
	background-clip: padding-box;
	opacity: 0;
	transform: translateX(150%);
	transition: opacity 0.5s ease, transform 0.3s ease;
	pointer-events: auto;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }

  #selected-trixi::after {
	content: '';
	position: absolute;
	top: -30px;
	left: 0;
	width: 100%;
	height: 30px; /* Smaller shimmer height */
	background: linear-gradient(
	  to top,
	  rgba(0, 255, 163, 0.5) 0%,
	  rgba(0, 255, 163, 0) 100%
	);
	animation: scanline 2s linear infinite;
	pointer-events: none;
	
	overflow: hidden;
	z-index: 1;
  }
  
  @keyframes scanline {
	0% {
	  top: -100%;
	}
	100% {
	  top: 100%;
	}
  }
  
  
  #selected-trixi.visible {
	opacity: 1;
	transform: translateX(0);
  }

  #selected-trixi:hover {
	transform: scale(1.05);
  }
  
  #selected-trixi::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 9999px;
	padding: 3px;
	background: conic-gradient(#00FFA3, #03E1FF, #DC1FFF, #00FFA3);
	-webkit-mask: 
	  linear-gradient(#fff 0 0) content-box,
	  linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	animation: spin-gradient 8s linear infinite;
  }

/* Hover effect: border expands */
#selected-trixi.hover-border {
	outline: 2px solid #00FFA3;
	outline-offset: 2px;
  }
  
  /* Info box animation classes */
  #trixi-info-box {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }
  
  #trixi-info-box.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
  }
  
  .trixi-option {
	opacity: 0.6;
	transition: opacity 0.2s ease;
  }
  
  .trixi-option.selected {
	opacity: 1 !important;
  }

  .no-scrollbar::-webkit-scrollbar {
	display: none;
  }
  .no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
  }
  
  #trixi-choices {
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	display: flex;
  }
  
  #trixi-choices img {
	flex: 0 0 auto; /* Prevent images from shrinking */
  }
  
  .no-scrollbar::-webkit-scrollbar {
	display: none;
  }
  .no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
  }