@tailwind base;
@tailwind components;
@tailwind utilities;

body {
	@apply ap-bg-slate-50;
}

#ajaxpress-app {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Slider styles */
#ajaxpress-app .ajaxpress-slider {
	@apply ap-w-full ap-h-1 ap-cursor-pointer ap-border-none ap-bg-slate-400 ap-bg-opacity-20 ap-border ap-border-slate-400 ap-outline-none ap-appearance-none ap-rounded ap-transition focus:ap-outline-none;
}

#ajaxpress-app .ajaxpress-slider::-webkit-slider-thumb {
	@apply ap-appearance-none ap-cursor-grab active:ap-cursor-grabbing ap-ring-0 ap-w-4 ap-h-4 ap-bg-indigo-500 hover:ap-bg-indigo-600 ap-border ap-border-slate-600 ap-rounded-sm ap-outline-none ap-shadow-sm ap-transition ap-duration-150;
}

#ajaxpress-app .ajaxpress-slider::-moz-range-thumb {
	@apply ap-appearance-none ap-cursor-grab active:ap-cursor-grabbing ap-ring-0 ap-w-4 ap-h-4 ap-bg-indigo-500 hover:ap-bg-indigo-600 ap-border ap-border-slate-600 ap-rounded-sm ap-outline-none ap-shadow-sm ap-transition ap-duration-150;
}

#ajaxpress-app .ajaxpress-slider.ajaxpress-opacity {
	@apply ap-bg-transparent ap-shadow-sm ap-w-44 ap-ring-inset ap-bg-gradient-to-r ap-ring-1 ap-ring-current ap-from-transparent ap-to-current ap-h-6 ap-overflow-hidden !important;
}

#ajaxpress-app .ajaxpress-slider.ajaxpress-opacity::-webkit-slider-thumb {
	@apply ap-w-1 ap-h-6 ap-rounded-none;
}

#ajaxpress-app .ajaxpress-slider.ajaxpress-opacity::-moz-range-thumb {
	@apply ap-w-1 ap-h-6 ap-rounded-none;
}

/* Locked feature overlay */
#ajaxpress-app .ajaxpress-locked {
	@apply ap-relative ap-z-0 ap-cursor-not-allowed;
}

#ajaxpress-app .ajaxpress-locked > * {
	@apply ap-pointer-events-none;
}

#ajaxpress-app .ajaxpress-locked.full {
	@apply ap-w-full;
}

#ajaxpress-app .ajaxpress-locked:not(.full) {
	@apply ap-w-max;
}

#ajaxpress-app .ajaxpress-locked:before {
	content: '';
	@apply ap-opacity-30 ap-transition ap-duration-100 ap-absolute ap-w-[105%] ap-h-[110%] ap-left-1/2 ap-top-1/2 ap--translate-x-1/2 ap--translate-y-1/2 ap-bg-black ap-bg-opacity-30 ap-z-20 ap-rounded ap-pointer-events-none;
}

#ajaxpress-app .ajaxpress-locked.ajaxpress-locked-fit {
	@apply ap-w-full;
}

#ajaxpress-app .ajaxpress-locked.ajaxpress-locked-fit:before {
	@apply ap-w-full ap-h-full;
}

#ajaxpress-app .ajaxpress-locked:after {
	content: '🔒 Unlock';
	@apply ap-opacity-100 ap-scale-0 ap-transition ap-text-xs ap-font-medium ap-tracking-wide ap-duration-100 ap-absolute ap-top-1/2 ap-left-1/2 ap--translate-x-1/2 ap--translate-y-1/2 ap-flex ap-items-center ap-justify-center ap-z-20 ap-bg-indigo-500 ap-text-white ap-px-4 ap-py-1.5 ap-rounded-3xl ap-cursor-pointer hover:ap-bg-indigo-400;
}

#ajaxpress-app .ajaxpress-locked:hover:after,
#ajaxpress-app .ajaxpress-locked:hover:before {
	@apply ap-opacity-100;
}

#ajaxpress-app .ajaxpress-locked:hover:after {
	@apply ap-scale-100;
}

/* Input styles */
#ajaxpress-app .ajaxpress-input-text {
	@apply ap-w-full ap-transition ap-text-sm ap-px-3 ap-h-7 ap-flex ap-items-center ap-justify-center ap-rounded ap-border-slate-200 focus:ap-border-transparent focus:ap-ring-[2px] focus:ap-ring-indigo-500 disabled:ap-opacity-75 disabled:ap-cursor-not-allowed disabled:ap-bg-slate-200 !important;
}

#ajaxpress-app .ajaxpress-input-text.input-error {
	@apply ap-ring-[2px] ap-ring-red-500 !important;
}

#ajaxpress-app .ajaxpress-textarea {
	@apply ap-w-full ap-transition ap-text-sm ap-px-3 ap-py-2 ap-flex ap-items-center ap-justify-center ap-rounded ap-border-slate-200 focus:ap-border-transparent focus:ap-ring-[2px] focus:ap-ring-indigo-500 disabled:ap-opacity-75 disabled:ap-cursor-not-allowed disabled:ap-bg-slate-200 !important;
}

/* Toast timer animation */
#ajaxpress-app .ajaxpress-toast-timer {
	animation: toast-timer linear forwards;
	animation-duration: var(--ajaxpress-toast-duration, 4s);
	width: 100%;
	transform-origin: left;
}

@keyframes toast-timer {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

/* Search result highlight animation */
#ajaxpress-app .search-highlight {
	animation: search-highlight-pulse 2s ease-out;
	border-radius: 8px;
}

@keyframes search-highlight-pulse {
	0% {
		background-color: rgba(99, 102, 241, 0.3);
		box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
	}
	100% {
		background-color: transparent;
		box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
	}
}

/* Sidebar navigation overrides */
#ajaxpress-app .ajaxpress-sidebar a {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

#ajaxpress-app .ajaxpress-sidebar a:focus,
#ajaxpress-app .ajaxpress-sidebar a:active,
#ajaxpress-app .ajaxpress-sidebar a:focus-visible {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* WordPress sidebar expanded (160px) - above 960px */
body:not(.folded) #ajaxpress-app .ajaxpress-sidebar {
	@media (min-width: 961px) {
		left: 160px !important;
		top: 32px !important;
		height: calc(100vh - 32px) !important;
	}
}

body:not(.folded) #ajaxpress-app .ap-flex-1.ap-flex.ap-flex-col {
	@media (min-width: 961px) {
		margin-left: 0 !important;
	}
}

/* WordPress sidebar collapsed/folded (36px) */
body.folded #ajaxpress-app .ajaxpress-sidebar {
	@media (min-width: 783px) {
		left: 36px !important;
		top: 32px !important;
		height: calc(100vh - 32px) !important;
	}
}

body.folded #ajaxpress-app .ap-flex-1.ap-flex.ap-flex-col {
	@media (min-width: 783px) {
		margin-left: 0 !important;
	}
}

/* Auto-fold range: WP sidebar is collapsed between 783px and 960px */
@media (min-width: 783px) and (max-width: 960px) {
	body:not(.folded) #ajaxpress-app .ajaxpress-sidebar {
		left: 36px !important;
		top: 32px !important;
		height: calc(100vh - 32px) !important;
	}
}

/* Mobile - below 783px */
@media (max-width: 782px) {
	#ajaxpress-app .ajaxpress-sidebar {
		left: -250px !important;
	}

	#ajaxpress-app .ajaxpress-sidebar.mobile-sidebar-open {
		left: 0 !important;
	}
}

/* Sidebar positioning transition */
#ajaxpress-app .ajaxpress-sidebar {
	@media (min-width: 783px) {
		transition: left 0.3s ease-in-out !important;
	}
}

/* Progress bar styles */
.ajaxpress-progressbar {
	@apply ap-fixed ap-left-0 ap-z-[9999] ap-w-0;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.ajaxpress-progressbar.preview {
	@apply ap-absolute;
}

.ajaxpress-progressbar-hidden {
	@apply ap-opacity-0 ap-z-0;
}

/* Spinner styles */
.ajaxpress-spinner {
	@apply ap-fixed ap-z-30 ap-hidden ap-left-0 ap-top-0 ap-w-full ap-h-full ap-items-center ap-justify-center ap-transition-all ap-duration-500;
}

.ajaxpress-spinner-hidden {
	animation: fade-out 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.ajaxpress-spinner:not(.ajaxpress-spinner-hidden) {
	@apply ap-flex;
}

.ajaxpress-spinner-overlay {
	@apply ap-absolute ap-left-0 ap-top-0 ap-w-full ap-h-full ap-z-30;
}

.ajaxpress-spinner-content {
	@apply ap-flex ap-items-center ap-justify-center ap-z-40 ap-transition-all;
}

.ajaxpress-spinner-image {
	@apply ap-transition-all ap-h-auto;
}

.ajaxpress-spinner-text {
	@apply ap-transition-all ap-text-center;
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}
}

/* ===== FADE ===== */
.ajaxpress-animate-fade-out {
	animation: ap-fade-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-fade-in {
	animation: ap-fade-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes ap-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ===== SLIDE ===== */
.ajaxpress-animate-slide-out {
	animation: ap-slide-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-slide-in {
	animation: ap-slide-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-slide-out {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-30px); opacity: 0; }
}

@keyframes ap-slide-in {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ===== FLIP ===== */
.ajaxpress-animate-flip-out {
	animation: ap-flip-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-flip-in {
	animation: ap-flip-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-flip-out {
	from { transform: perspective(800px) rotateX(0); opacity: 1; }
	to { transform: perspective(800px) rotateX(90deg); opacity: 0; }
}

@keyframes ap-flip-in {
	from { transform: perspective(800px) rotateX(-90deg); opacity: 0; }
	to { transform: perspective(800px) rotateX(0); opacity: 1; }
}

/* ===== SCALE ===== */
.ajaxpress-animate-scale-out {
	animation: ap-scale-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-scale-in {
	animation: ap-scale-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-scale-out {
	from { transform: scale(1); opacity: 1; }
	to { transform: scale(0.9); opacity: 0; }
}

@keyframes ap-scale-in {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* Bottom drawer slide-up animation */
.ap-animate-slide-up {
	animation: ap-slide-up 0.3s ease-out forwards;
}

@keyframes ap-slide-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* Segmented control slider animation */
.segmented-slider {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.segmented-slider-animate {
	animation: segmented-squish 0.35s ease-out forwards;
}

@keyframes segmented-squish {
	0%, 100% {
		scale: 1 1;
		border-radius: 0.375rem;
	}
	25% {
		scale: 1.08 0.88;
		border-radius: 0.5rem;
	}
	50% {
		scale: 0.95 1.05;
		border-radius: 0.35rem;
	}
	75% {
		scale: 1.02 0.98;
		border-radius: 0.375rem;
	}
}

/* Cursor animation */
.ajaxpress-animate-cursor,
.ajaxpress-animate-cursor * {
	cursor: var(--ajaxpress-cursor-mode);
}

/* Comment form processing */
.ajaxpress-comment-form-processing {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
	cursor: progress;
	position: relative;
}

.ajaxpress-comment-form-processing:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ajaxpress-color-background, #fff);
	opacity: 0.5;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	background-image: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: ajaxpress-comment-shimmer 1.2s linear infinite;
	pointer-events: none;
}

@keyframes ajaxpress-comment-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Screen reader only */
.ajaxpress-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border-width: 0 !important;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.ajaxpress-animate-fade-out,
	.ajaxpress-animate-fade-in,
	.ajaxpress-animate-slide-out,
	.ajaxpress-animate-slide-in,
	.ajaxpress-animate-flip-out,
	.ajaxpress-animate-flip-in,
	.ajaxpress-animate-scale-out,
	.ajaxpress-animate-scale-in {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ajaxpress-progressbar {
		transition: none !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}

/* Switch component styles */
.switch-container {
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-container:active:not(:disabled) {
	transform: scale(0.96);
}

.switch-track {
	will-change: background-color;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-track-on {
	background-color: #6366f1;
}

.switch-track-off {
	background-color: #e5e7eb;
}

.switch-overlay {
	will-change: transform;
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-thumb {
	will-change: transform;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Dropdown animation */
.dropdown-animation {
	animation: dropdown-enter 0.15s ease-out;
}

@keyframes dropdown-enter {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Promo transformer button styles */
#ajaxpress-app .promo-transformer button,
.promo-transformer button {
	color: #4f46e5 !important;
}

#ajaxpress-app .promo-transformer button:hover,
.promo-transformer button:hover {
	background: #eef2ff !important;
}

/* Close button override */
#ajaxpress-app .promo-transformer button.ap-bg-black\/20,
.promo-transformer button.ap-bg-black\/20 {
	color: #fff !important;
	background: rgba(0, 0, 0, 0.2) !important;
}

#ajaxpress-app .promo-transformer button.ap-bg-black\/20:hover,
.promo-transformer button.ap-bg-black\/20:hover {
	background: rgba(0, 0, 0, 0.3) !important;
}

/* Promo shake animation */
.promo-transformer.promo-shake.promo-collapsed {
	animation: promo-shake 0.6s ease;
}

@keyframes promo-shake {
	0%, 100% {
		transform: translateY(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateY(-8px);
	}
	20%, 40%, 60%, 80% {
		transform: translateY(4px);
	}
}

/* Promo Transformer - morphs between banner and modal */
.promo-backdrop {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.promo-backdrop.promo-backdrop-visible {
	pointer-events: auto;
	opacity: 1;
}

.promo-transformer {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
	background-size: 300% 300%;
	animation: promo-gradient-shift 8s ease infinite;
	overflow: hidden;
	/* Use left:50% + translateX for horizontal centering in both states */
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-transformer .promo-content {
	transition: padding 0.4s ease, gap 0.4s ease;
}

.promo-transformer .promo-title {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.promo-transformer .promo-row {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes promo-gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Collapsed state - bottom banner (compact) */
.promo-transformer.promo-collapsed {
	bottom: 0;
	width: calc(100% - var(--sidebar-left, 0px));
	margin-left: calc(var(--sidebar-left, 0px) / 2);
	border-radius: 0;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.promo-transformer.promo-collapsed .promo-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
}

.promo-transformer.promo-collapsed .promo-title {
	display: none;
}

.promo-transformer.promo-collapsed .promo-row {
	flex-shrink: 0;
}

.promo-transformer.promo-collapsed .promo-row-header {
	flex: 1;
	min-width: 0;
}

/* Hide message on small screens in collapsed */
@media (max-width: 640px) {
	.promo-transformer.promo-collapsed .promo-message {
		display: none;
	}
}

/* Expanded state - centered modal */
.promo-transformer.promo-expanded {
	bottom: calc(50% - 100px);
	width: min(360px, calc(100% - 2rem));
	margin-left: 0;
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.promo-transformer.promo-expanded .promo-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.promo-transformer.promo-expanded .promo-title {
	display: block;
}

.promo-transformer.promo-expanded .promo-row-header {
	display: none;
}

.promo-transformer.promo-expanded .promo-row-countdown .ap-flex {
	font-size: 0.75rem;
	padding: 0.5rem 0.75rem;
}

.promo-transformer.promo-expanded .promo-row-countdown .ap-bg-white\/20 {
	padding: 0.375rem 0.5rem;
}

.promo-transformer.promo-expanded .promo-cta-btn {
	width: 100%;
	padding: 0.875rem 1.5rem;
	font-size: 0.9375rem;
	border-radius: 0.625rem;
}

/* Slider input custom styles */
.slider-input,
.ajaxpress-slider-input {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.slider-input::-webkit-slider-runnable-track,
.ajaxpress-slider-input::-webkit-slider-runnable-track {
	background: transparent;
	height: 4px;
	border: none;
	width: 100%;
	max-width: 300px;
}

.slider-input::-moz-range-track,
.ajaxpress-slider-input::-moz-range-track {
	background: transparent;
	height: 4px;
	border: none;
	width: 100%;
	max-width: 300px;
}

.slider-input::-webkit-slider-thumb,
.ajaxpress-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	border: 4px solid #6366f1;
	margin-top: -8px;
}

.slider-input::-moz-range-thumb,
.ajaxpress-slider-input::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 4px solid #6366f1;
	cursor: pointer;
	background: #fff;
}

/* Progress bar wave animation */
.progressbar-wave {
	background: linear-gradient(
		45deg,
		var(--progressbar-color) 0%,
		color-mix(in srgb, var(--progressbar-color) 50%, white) 25%,
		var(--progressbar-color) 50%,
		color-mix(in srgb, var(--progressbar-color) 50%, white) 75%,
		var(--progressbar-color) 100%
	);
	background-size: 200% 200%;
	animation: progressbar-wave var(--animation-speed, 1.5s) linear infinite;
}

@keyframes progressbar-wave {
	0% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 100% 0%;
	}
}


#wpfooter {
    display: none;
}

/* Bottom padding for fixed bars */
#ajaxpress-app .ajaxpress-main-content.has-promo-bar {
	padding-bottom: 100px !important;
}

#ajaxpress-app .ajaxpress-main-content.has-diagnostic-bar {
	padding-bottom: 110px !important;
}

#ajaxpress-app .ajaxpress-main-content.has-both-bars {
	padding-bottom: 150px !important;
}

/* Tour Guide Animations */
.tour-tooltip-enter {
	animation: tour-tooltip-enter 0.15s ease-out;
}

@keyframes tour-tooltip-enter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}