/**
 * Wallex Service Status Widget Stylesheet
 *
 * Designed according to Wallex Token Style design system.
 * Supports light mode and dark mode via CSS variable tokens.
 *
 * @package Wallex_Core
 * @since   2.0.3
 */

.wallex-service-status {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--color-text-1, #F7F7F7);
	direction: rtl;
	text-align: right;
}

.wallex-service-status *,
.wallex-service-status *::before,
.wallex-service-status *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Header: Title & Status Indicator
   ========================================================================== */

.wallex-service-status__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacingM, 16px);
	margin-bottom: var(--spacingM, 16px);
}

.wallex-service-status__title {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	font-weight: 500;
	color: var(--color-text-1, #F7F7F7);
}

.wallex-service-status__clock {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXS, 8px);
	font-size: var(--caption-size, 12px);
	line-height: 20px;
	font-weight: 500;
	color: var(--color-text-1, #F7F7F7);
}

.wallex-service-status__clock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-approveBg, #00B88A);
	box-shadow: 0 0 10px rgba(0, 184, 138, 0.8);
	animation: wallex-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	flex-shrink: 0;
}

@keyframes wallex-pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(0.85);
	}
}

.wallex-service-status__clock-time {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.5px;
	color: var(--color-text-1, #F7F7F7);
}

/* ==========================================================================
   Markets Section (2-Column Grid)
   ========================================================================== */

.wallex-service-status__markets-section {
	margin-bottom: var(--spacingL, 24px);
}

.wallex-service-status__markets-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacingS, 12px);
}

.wallex-service-status__market-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.05));
	border-radius: var(--cornerRadiusMNudge, 10px);
	padding: var(--spacingM, 16px) var(--spacingS, 12px);
	min-height: 88px;
	background: var(--color-negativeGlassBg, rgba(255, 255, 255, 0.02));
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	color: inherit;
}

.wallex-service-status__market-card:hover {
	border-color: var(--color-stroke-3, rgba(255, 255, 255, 0.15));
}

.wallex-service-status__market-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacingXS, 8px);
	margin-bottom: var(--spacingS, 12px);
	width: 100%;
}

.wallex-service-status__market-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--color-primaryBrandText, #007AFF);
	flex-shrink: 0;
}

.wallex-service-status__market-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.wallex-service-status__market-icon svg path[fill^="var(--color-text-2"] {
	fill: var(--color-text-1);
}

.wallex-service-status__market-title {
	font-size: var(--body-size, 14px);
	line-height: 20px;
	font-weight: 500;
	color: var(--color-text-1, #F7F7F7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Status Badges (Pills)
   ========================================================================== */

.wallex-service-status__badge {
	border-radius: var(--cornerRadiusCircular, 1000px);
	font-size: var(--caption-size, 12px);
	line-height: 20px;
	font-weight: 500;
	user-select: none;
	display: inline-flex;
	height: 24px;
	padding: var(--spacingXXXS, 2px) var(--spacingXXS, 4px) var(--spacingXXXS, 2px) var(--spacingXS, 8px);
	justify-content: center;
	align-items: center;
	gap: var(--spacingXXXS, 2px);
	box-sizing: border-box;
}

.wallex-service-status__badge-label {
	text-align: center;
	font-size: var(--caption-size, 12px);
	font-weight: 500;
	line-height: 20px;
}

.wallex-service-status__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.wallex-service-status__badge-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Available / Success (Green) */
.wallex-service-status__badge--approve {
	background: var(--color-approveBg-3, rgba(0, 184, 138, 0.12));
	color: var(--color-approveText, #00B88A);
}

/* Warning / Partial (Yellow/Amber) */
.wallex-service-status__badge--warning {
	background: var(--color-negativeGlassBg-2, rgba(255, 255, 255, 0.1));
	color: var(--color-text-1, #F7F7F7);
}

/* Critical / Unavailable (Red) */
.wallex-service-status__badge--critical {
	background: var(--color-criticalBg-3, rgba(246, 85, 85, 0.12));
	color: var(--color-criticalText, #F65555);
}

/* ==========================================================================
   Services Section (List Rows)
   ========================================================================== */

.wallex-service-status__services-section {
	margin-bottom: var(--spacingXL, 32px);
}

.wallex-service-status__services-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wallex-service-status__service-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.05));
}

.wallex-service-status__service-item:last-child {
	border-bottom: none;
}

.wallex-service-status__service-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
	padding: 8px 12px;
	color: inherit;
	border-radius: var(--cornerRadiusM, 8px);
	transition: background-color 0.15s ease;
}

.wallex-service-status__service-main {
	display: flex;
	align-items: center;
	gap: var(--spacingXS, 8px);
}

.wallex-service-status__service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--color-text-1, #F7F7F7);
	flex-shrink: 0;
}

.wallex-service-status__service-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.wallex-service-status__service-icon svg path[fill^="var(--color-text-2"] {
	fill: var(--color-text-1);
}

.wallex-service-status__service-title {
	font-size: var(--body-size, 14px);
	line-height: 20px;
	font-weight: 500;
	color: var(--color-text-1, #F7F7F7);
}

/* ==========================================================================
   Good to know ("خوبه بدونی...") with Dynamic Rotation
   ========================================================================== */

.wallex-service-status__promo-section {
	margin-bottom: var(--spacingXL, 32px);
}

.wallex-service-status__promo-card {
	display: block;
	position: relative;
	overflow: hidden;
	background-image: radial-gradient(circle, var(--color-bg-4, #2E3A50) -55%, var(--color-bg, #11161D) 45%);
	border: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.06));
	border-radius: var(--cornerRadiusXL, 16px);
	padding: 16px;
	text-align: center;
	color: inherit;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wallex-service-status__promo-card[data-has-link="true"] {
	cursor: pointer;
}

.wallex-service-status__promo-topo-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	color: var(--color-text-1, #FFFFFF);
	opacity: 0.6;
}

.wallex-service-status__promo-topo-bg svg {
	width: 100%;
	height: 100%;
}

.wallex-service-status__promo-content {
	position: relative;
	z-index: 1;
}

.wallex-service-status__promo-title {
	margin: 0 0 6px;
	font-size: var(--headline-size, 18px);
	font-weight: 700;
	color: var(--color-text-1, #F7F7F7);
}

.wallex-service-status__promo-slider {
	position: relative;
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wallex-service-status__promo-item {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: right;
	direction: rtl;
	unicode-bidi: isolate;
	width: auto;
	max-width: 100%;
	text-decoration: none;
	color: var(--color-text-2, rgba(255, 255, 255, 0.6));
	font-size: var(--body-size, 14px);
	line-height: var(--body-line-height, 24px);
	opacity: 0;
	transition: opacity 0.3s ease, color 0.2s ease;
}

.wallex-service-status__promo-item.is-active {
	display: inline-flex;
	opacity: 1;
}

.wallex-service-status__promo-box {
	display: inline-grid;
	grid-template-columns: 1fr;
	align-items: center;
	position: relative;
	direction: rtl;
	text-align: right;
	max-width: 100%;
}

.wallex-service-status__promo-ghost {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	font-weight: inherit;
	direction: rtl;
}

.wallex-service-status__promo-text-wrap {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	direction: rtl;
	white-space: nowrap;
	gap: 2px;
	max-width: 100%;
}

.wallex-service-status__promo-text {
	display: inline-block;
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.wallex-service-status__promo-caret {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	background-color: var(--color-primaryBrandText, #007AFF);
	opacity: 0;
	border-radius: 1px;
	flex-shrink: 0;
	vertical-align: middle;
	transition: opacity 0.15s ease;
}

.wallex-service-status__promo-item.is-typing .wallex-service-status__promo-caret,
.wallex-service-status__promo-item.is-waiting .wallex-service-status__promo-caret {
	opacity: 1;
	animation: wallex-promo-caret-blink 0.9s steps(1, end) infinite;
}

@keyframes wallex-promo-caret-blink {

	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

@media (max-width: 600px) {

	.wallex-service-status__promo-ghost,
	.wallex-service-status__promo-text-wrap,
	.wallex-service-status__promo-text {
		white-space: normal;
		word-break: break-word;
	}
}

.wallex-service-status__promo-item--linked {
	cursor: pointer;
}

/* Stretched link overlay covering the entire promo card */
.wallex-service-status__promo-item--linked.is-active::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
	border-radius: inherit;
}

/* When hovering over the promo card, change promo text color and shift link icon */
.wallex-service-status__promo-card:hover .wallex-service-status__promo-text {
	color: var(--color-primaryBrandText);
}

.wallex-service-status__promo-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: currentColor;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* ==========================================================================
   Official Communication Channels ("کانال‌های ارتباطی رسمی والکس")
   ========================================================================== */

.wallex-service-status__socials-section {
	margin-bottom: var(--spacingXL, 32px);
}

.wallex-service-status__socials-title {
	margin: 0 0 var(--spacingM, 16px);
	font-size: 16px;
	line-height: 28px;
	font-weight: 500;
	text-align: right;
}

.wallex-service-status__socials-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacingS, 12px);
	justify-content: center;
}

.wallex-service-status__social-btn {
	flex: 1 1 calc(33.333% - 12px);
	min-width: 100px;
	max-width: 100%;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacingXS, 8px);
	padding: 0 var(--spacingM, 14px);
	background: var(--color-bg-2, #171D26);
	border: 1px solid var(--color-stroke-2, rgba(255, 255, 255, 0.08));
	border-radius: var(--cornerRadiusL, 12px);
	color: var(--color-text-1, #F7F7F7);
	font-size: var(--body-size, 14px);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.wallex-service-status__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.wallex-service-status__social-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

@media (max-width: 480px) {
	.wallex-service-status__markets-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacingXS, 8px);
	}

	.wallex-service-status__market-card {
		padding: var(--spacingS, 12px) var(--spacingXXS, 6px);
	}

	.wallex-service-status__market-title {
		font-size: 13px;
	}

	.wallex-service-status__social-btn {
		flex: 1 1 calc(50% - 8px);
		min-width: 120px;
		padding: var(--spacingS, 10px) var(--spacingXXS, 6px);
		font-size: 13px;
	}
}