/**
 * Phase 1: Currency & Network Selection Styles
 * Exact copy from provided design
 *
 * @package CryptoPay
 * @subpackage Styles
 * @since 1.0.0
 */

.blue-header {
	background: linear-gradient(to right, #2563eb, #1d4ed8);
	padding: 1.5rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	color: white;
}

.blue-header h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.25rem !important;
	line-height: 1.75rem !important;
	font-weight: 700 !important;
	color: white !important;
	text-align: left !important;
	border: none !important;
}

.blue-header p {
	margin: 0.25rem 0 0 0 !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	color: #93c5fd !important;
	font-weight: normal !important;
}

.timer-section {
	background-color: #eff6ff;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid #bfdbfe;
	display: none; /* Hidden until payment is created */
}

.timer-section.active {
	display: block; /* Show when payment is active */
}

.timer-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.timer-text {
	font-size: 0.875rem;
	font-weight: 500;
	color: #2563eb;
}

.amount-section {
	padding: 1.5rem;
	text-align: center;
	border-bottom: 1px solid #f3f4f6;
}

.amount-label {
	font-size: 0.875rem;
	color: #4b5563;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.amount-usd {
	font-size: 1.5rem;
	font-weight: 600;
	background: linear-gradient(to right, #111827, #374151);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.amount-crypto {
	font-size: 0.875rem;
	font-weight: 500;
	background: linear-gradient(to right, #2563eb, #60a5fa);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 0.5rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.amount-crypto.visible {
	opacity: 1;
}

.content {
	padding: 1.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.select-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	margin: 0 !important;
}

.select-label {
	display: block !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	font-weight: 500 !important;
	color: #374151 !important;
	margin: 0 0 0.5rem 0 !important;
	padding: 0 !important;
}

.custom-select {
	position: relative !important;
}

#network-select.custom-select {
	position: relative !important;
	/* Ensure dropdown positions relative to this */
}

.select-trigger {
	width: 100% !important;
	padding: 0.625rem 1rem !important;
	background: white !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.375rem !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	color: #374151 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	transition: background-color 0.2s !important;
	box-shadow: none !important;
	text-align: left !important;
	font-weight: normal !important;
}

.select-trigger:hover {
	background: #f9fafb !important;
}

.select-trigger svg {
	flex-shrink: 0 !important;
	color: currentColor !important;
}

.select-content {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	background: white !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.375rem !important;
	margin-top: 0.25rem !important;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
	z-index: 50 !important;
	display: none !important;
	max-height: 300px !important;
	overflow-y: auto !important;
	padding: 0 !important;
}

.select-content.open {
	display: block !important;
}

#crypto-list,
#network-list {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* Network dropdown - ensure compact size and proper display */
#network-content.select-content {
	padding: 0 !important;
	max-height: 250px !important; /* Reasonable max, will auto-size for fewer items */
	min-height: auto !important;
	height: auto !important;
	/* Force these styles - they should already be inherited from .select-content */
	background: white !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.375rem !important;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 50 !important;
}

#network-content #network-list {
	padding: 0 !important;
	margin: 0 !important;
	min-height: auto !important;
}

#network-content .select-item {
	margin: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	font-weight: normal !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#network-content .select-item span {
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	color: #374151 !important;
	font-weight: normal !important;
}

#network-content .select-item:first-child {
	margin-top: 0 !important;
}

#network-content .select-item:last-child {
	margin-bottom: 0 !important;
}

.search-container {
	position: sticky !important;
	top: 0 !important;
	background: white !important;
	padding: 0.5rem !important;
	border-bottom: 1px solid #e5e7eb !important;
}

.search-wrapper {
	position: relative !important;
}

.search-icon {
	position: absolute !important;
	left: 0.5rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #6b7280 !important;
}

.search-input {
	width: 100% !important;
	padding: 0.5rem 0.5rem 0.5rem 2rem !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0.375rem !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
}

.search-input:focus {
	outline: none !important;
	border-color: #2563eb !important;
	box-shadow: 0 0 0 1px #2563eb !important;
}

.select-item {
	padding: 0.5rem 1rem !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
}

.select-item:hover {
	background: #f3f4f6 !important;
}

.crypto-icon {
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	min-width: 24px !important;
	width: 24px !important;
	height: 24px !important;
}

.crypto-svg {
	min-width: 24px !important;
	width: 24px !important;
	height: 24px !important;
	object-fit: contain !important;
}

.crypto-name {
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	color: #374151 !important;
}

.selected-crypto {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-size: 0.875rem !important;
	color: #374151 !important;
}

.selected-network {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-size: 0.875rem !important;
	color: #374151 !important;
}

.no-results {
	padding: 1.5rem !important;
	text-align: center !important;
	color: #6b7280 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
}

.footer {
	padding: 0.5rem 1.5rem 1.5rem !important;
}

.payment-button {
	width: 100% !important;
	padding: 0.75rem !important;
	background: linear-gradient(to right, #334155, #1e293b) !important;
	color: white !important;
	border: none !important;
	border-radius: 0.375rem !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
	text-decoration: none !important;
	margin: 0 !important;
}

.payment-button:hover:not(:disabled) {
	background: linear-gradient(to right, #1e293b, #0f172a) !important;
}

.payment-button:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.progress-steps {
	display: flex !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin-top: 1rem !important;
	padding-top: 1rem !important;
}

.step {
	height: 0.5rem !important;
	width: 1.5rem !important;
	border-radius: 9999px !important;
}

.step.active {
	background: #2563eb !important;
}

.step.inactive {
	background: #e5e7eb !important;
}

.step-text {
	text-align: center !important;
	color: #6b7280 !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	margin-top: 0.5rem !important;
}

.select-content::-webkit-scrollbar {
	width: 6px !important;
}

.select-content::-webkit-scrollbar-track {
	background: #f1f5f9 !important;
}

.select-content::-webkit-scrollbar-thumb {
	background-color: #94a3b8 !important;
	border-radius: 3px !important;
}

/* Hidden state for search filtering - must use !important to override display: flex !important */
.select-item.cryptopay-hidden {
	display: none !important;
}