/*
Theme Name: AI Tarot Oracle Platform
Theme URI: https://ai-taro.local
Author: AI Tarot Team
Description: Премиальная мистическая тема для ИИ-Таролога с 3D-интерактивным столом, 78 картами и SEO-энциклопедией.
Version: 1.0.0
Text Domain: ai-taro-theme
*/


/* ── HEADER EXTRACTED STYLES ── */
html {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-rendering: optimizeLegibility;
		}
		body {
			overflow-x: clip;
			max-width: 100vw;
		}
		.perspective-1000 { perspective: 1000px; }
		.card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			text-align: center;
			transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
			transform-style: preserve-3d;
		}
		.card-flipped .card-inner { transform: rotateY(180deg); }
		.card-front, .card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			border-radius: 14px;
			overflow: hidden;
		}
		.card-front { transform: rotateY(180deg); }
		.mystic-glow { box-shadow: 0 0 50px -10px rgba(147, 51, 234, 0.3), 0 0 25px -5px rgba(212, 175, 55, 0.2); }
		.gold-glow { box-shadow: 0 0 25px -3px rgba(212, 175, 55, 0.35); }
		.stars-bg {
			background-image: 
				radial-gradient(1px 1px at 25px 5px, white, rgba(255,255,255,0)),
				radial-gradient(1.5px 1.5px at 50px 25px, #d4af37, rgba(255,255,255,0)),
				radial-gradient(1px 1px at 125px 75px, white, rgba(255,255,255,0)),
				radial-gradient(2px 2px at 175px 125px, #c084fc, rgba(255,255,255,0)),
				radial-gradient(1px 1px at 250px 190px, white, rgba(255,255,255,0));
			background-repeat: repeat;
			background-size: 300px 300px;
		}

		html, body {
			overflow-x: clip;
		}
		@media (min-width: 1024px) {
			html, body {
				overflow: visible !important;
				overflow-x: visible !important;
				overflow-y: visible !important;
			}
		}
		#wpadminbar {
			max-width: 100vw !important;
		}
		body.admin-bar aside {
			top: 122px !important;
		}

		/* ── GLOBAL ULTRA-SLEEK MYSTIC SCROLLBARS ──────────────────────── */
		* {
			scrollbar-width: thin;
			scrollbar-color: rgba(212, 175, 55, 0.3) #0d0b18;
		}
		::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}
		::-webkit-scrollbar-track {
			background: #090712;
			border-radius: 8px;
		}
		::-webkit-scrollbar-thumb {
			background: linear-gradient(180deg, #2a244d 0%, #1b1733 100%);
			border-radius: 8px;
			border: 1px solid rgba(212, 175, 55, 0.3);
		}
		::-webkit-scrollbar-thumb:hover {
			background: linear-gradient(180deg, #d4af37 0%, #b45309 100%);
			border-color: rgba(253, 224, 71, 0.8);
			box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
		}

		/* Ornate Tarot Card Back */
		.tarot-card-back-ornate {
			background: linear-gradient(135deg, #181236 0%, #0d0a1e 50%, #201340 100%);
			box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.8), 0 0 12px 1px rgba(212, 175, 55, 0.2);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		}
		.tarot-card-back-ornate:hover {
			box-shadow: 0 16px 35px -5px rgba(0, 0, 0, 0.9), 0 0 25px 3px rgba(253, 224, 71, 0.6);
			transform: translateY(-24px) scale(1.08);
			z-index: 50 !important;
		}

		.deck-scroll-container {
			cursor: grab;
		}
		.deck-scroll-container:active {
			cursor: grabbing;
		}

		/* ── UNIVERSAL ASTRALIS HIGH-CONVERSION BANNER LAYOUT ───────── */
		.astralis-banner-card {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 32px;
			width: 100%;
		}
		.astralis-banner-content {
			flex: 1 1 0% !important;
			min-width: 0 !important;
			width: 100% !important;
		}
		.astralis-banner-action {
			flex: 0 0 auto !important;
			width: auto !important;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
			gap: 10px;
		}
		@media (max-width: 991px) {
			.astralis-banner-card {
				flex-direction: column !important;
				align-items: stretch !important;
				gap: 20px !important;
			}
			.astralis-banner-action {
				align-items: stretch !important;
				width: 100% !important;
			}
		}


/* ── MOBILE DRAWER NAVIGATION (FORCE HIGHEST STACKING & SMOOTH TOUCH SCROLL) ── */
#mobile-drawer-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999998 !important;
	background-color: rgba(0, 0, 0, 0.85) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	backdrop-filter: blur(8px) !important;
}

#mobile-drawer-panel {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 320px !important;
	max-width: 86vw !important;
	height: 100% !important;
	max-height: 100dvh !important;
	z-index: 999999 !important;
	background-color: #070512 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
	touch-action: pan-y !important;
}

/* Drawer scrollbar */
#mobile-drawer-panel::-webkit-scrollbar {
	width: 4px;
}
#mobile-drawer-panel::-webkit-scrollbar-track {
	background: #070512;
}
#mobile-drawer-panel::-webkit-scrollbar-thumb {
	background: rgba(212, 175, 55, 0.25);
	border-radius: 4px;
}

/* Account for WP Admin Bar on mobile screens when admin is logged in */
@media screen and (max-width: 782px) {
	body.admin-bar #mobile-drawer-overlay,
	body.admin-bar #mobile-drawer-panel {
		top: 46px !important;
		height: calc(100% - 46px) !important;
		max-height: calc(100dvh - 46px) !important;
	}
}
@media screen and (min-width: 783px) and (max-width: 1023px) {
	body.admin-bar #mobile-drawer-overlay,
	body.admin-bar #mobile-drawer-panel {
		top: 32px !important;
		height: calc(100% - 32px) !important;
		max-height: calc(100dvh - 32px) !important;
	}
}