/**
 * Responsive Media Queries & Touch Ergonomics
 *
 * @package AL_Muslim_Hindi
 */

/* Skeleton Loading Common */
.almuslim-skeleton-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.skeleton-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.skeleton-line {
	height: 14px;
	border-radius: var(--radius-sm);
	background: linear-gradient(90deg, #F0F0F0 25%, #E4E4E4 50%, #F0F0F0 75%);
	background-size: 200% 100%;
	animation: skeletonPulse 1.5s infinite ease-in-out;
}

.skeleton-badge {
	width: 80px;
	height: 18px;
	border-radius: var(--radius-full);
}

.skeleton-title {
	width: 75%;
	height: 20px;
}

.skeleton-text {
	width: 100%;
}

.skeleton-text.short {
	width: 60%;
}

@keyframes skeletonPulse {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Empty & Error States */
.almuslim-empty-state, .almuslim-error-state {
	text-align: center;
	padding: 48px 16px;
	background-color: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.empty-icon-wrap, .error-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background-color: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
}

.empty-title, .error-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

.empty-message, .error-message {
	font-size: 0.92rem;
	color: var(--color-text-secondary);
	max-width: 420px;
}

.empty-btn, .btn-retry {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--color-accent);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.88rem;
	padding: 8px 18px;
	border-radius: var(--radius-full);
	margin-top: 6px;
}

.empty-btn:hover, .btn-retry:hover {
	background-color: var(--color-accent-hover);
}

/* Responsive Touch Sizes */
@media (max-width: 480px) {
	.hero-brand-name {
		font-size: 2.2rem;
	}
	.search-input-inner {
		height: 48px;
	}
	.action-pill-btn {
		padding: 7px 14px;
		font-size: 0.82rem;
	}
	.single-title {
		font-size: 1.5rem;
	}
}