/**
 * Portal PWA — Full-site PWA styles.
 *
 * Covers: connectivity bar, install banner, page transitions,
 * pull-to-refresh, standalone mode adjustments, and
 * My Account bottom tab navigation (mobile only).
 *
 * @package CPM_Theme
 * @since   2.0.0
 */

/* =====================================================================
   Connectivity indicator bar
   ===================================================================== */

.cpm-portal-connectivity {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	text-align: center;
	font-size: var(--cpm-font-size-sm);
	font-weight: 600;
	color: #fff;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 300ms ease, padding 300ms ease;
}

.cpm-portal-connectivity--visible {
	max-height: 48px;
	padding: 8px 16px;
}

.cpm-portal-connectivity--offline {
	background: var(--cpm-danger, #E82027);
}

.cpm-portal-connectivity--online {
	background: var(--cpm-success, #4FB248);
}

/* =====================================================================
   Install banner
   ===================================================================== */

.cpm-portal-install {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	background: var(--cpm-gray-900, #212529);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	transform: translateY(100%);
	transition: transform 300ms ease;
}

.cpm-portal-install--visible {
	transform: translateY(0);
}

.cpm-portal-install__text {
	flex: 1;
	font-size: var(--cpm-font-size-sm);
	line-height: 1.4;
}

.cpm-portal-install__btn {
	background: var(--cpm-primary, #0760A9);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--cpm-radius-md, 8px);
	font-size: var(--cpm-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	min-height: 44px;
}

.cpm-portal-install__btn:active {
	background: var(--cpm-primary-dark, #054D87);
}

.cpm-portal-install__close {
	background: none;
	border: none;
	color: var(--cpm-gray-500, #ADB5BD);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =====================================================================
   Page transitions — Cross-document View Transitions API (Chrome 126+)
   ===================================================================== */

/*
 * Enable cross-document (MPA) View Transitions via CSS-only approach.
 * This is the CORRECT method for multi-page WordPress sites.
 *
 * How it works:
 * - Browser automatically captures snapshots during navigation
 * - Animates between old/new page using ::view-transition pseudo-elements
 * - No JavaScript required, no click flash, works for all navigation types
 * - Gracefully degrades on unsupported browsers (instant navigation, no flash)
 *
 * Browser support: Chrome 126+, Edge 126+ (May 2024)
 * Unsupported browsers: ignore this rule and navigate instantly (no harm)
 */
@view-transition {
	navigation: auto;
}

/* Animation keyframes */
@keyframes cpmPortalFadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes cpmPortalFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Apply fade animation to outgoing page */
::view-transition-old(root) {
	animation: cpmPortalFadeOut 150ms ease-out;
}

/* Apply fade animation to incoming page */
::view-transition-new(root) {
	animation: cpmPortalFadeIn 200ms ease-in;
}

/* =====================================================================
   Pull-to-refresh indicator (standalone mode only)
   ===================================================================== */

.cpm-portal-pull-indicator {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	z-index: 9997;
	background: var(--cpm-white, #fff);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	box-shadow: var(--cpm-shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 200ms ease;
	pointer-events: none;
}

.cpm-portal-pull-indicator--active {
	transform: translateX(-50%) translateY(16px);
}

.cpm-portal-pull-indicator__spinner {
	width: 20px;
	height: 20px;
	border: 3px solid var(--cpm-gray-300, #DEE2E6);
	border-top-color: var(--cpm-primary, #0760A9);
	border-radius: 50%;
	animation: cpmPortalSpin 600ms linear infinite;
}

@keyframes cpmPortalSpin {
	to { transform: rotate(360deg); }
}

/* =====================================================================
   Standalone mode adjustments
   ===================================================================== */

.cpm-portal-standalone {
	overscroll-behavior-y: contain;
}

/* Safe-area insets for notched devices */
.cpm-portal-standalone .site-header {
	padding-top: env(safe-area-inset-top, 0);
}

/* =====================================================================
   Touch optimization — mobile UX
   ===================================================================== */

@media (max-width: 767px) {
	.cpm-portal-pwa input,
	.cpm-portal-pwa select,
	.cpm-portal-pwa textarea,
	.cpm-portal-pwa button,
	.cpm-portal-pwa .button,
	.cpm-portal-pwa [type="submit"] {
		min-height: 48px;
		font-size: 16px; /* Prevent iOS zoom */
	}
}

/* =====================================================================
   Version indicator
   ===================================================================== */

.cpm-portal-version {
	text-align: center;
	font-size: var(--cpm-font-size-xs, 0.75rem);
	color: var(--cpm-gray-500, #ADB5BD);
	padding: 8px 0 16px;
}

/* =====================================================================
   My Account — Bottom tab navigation (mobile only)
   ===================================================================== */

.cpm-portal-bottom-nav {
	display: none;
}

@media (max-width: 767px) {
	.cpm-portal-account .cpm-portal-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9990;
		display: flex;
		align-items: stretch;
		/* Scroll horizontally when there are more tabs than fit */
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		background: var(--cpm-white, #FFFFFF);
		border-top: 1px solid var(--cpm-gray-200, #E9ECEF);
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
		transition: transform 300ms ease;
	}
	.cpm-portal-account .cpm-portal-bottom-nav::-webkit-scrollbar {
		display: none;
	}

	.cpm-portal-bottom-nav--hidden {
		transform: translateY(100%);
	}

	/* Tab items — flex: 1 spreads evenly when all fit; min-width enables scroll when many */
	.cpm-portal-bottom-nav__tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1 0 auto;
		min-width: 52px;
		max-width: 90px;
		min-height: 56px;
		padding: 6px 4px;
		text-decoration: none;
		color: var(--cpm-gray-600, #6C757D);
		font-size: 11px;
		font-weight: 500;
		transition: color var(--cpm-transition-fast, 150ms ease);
		-webkit-tap-highlight-color: transparent;
	}

	.cpm-portal-bottom-nav__tab:hover,
	.cpm-portal-bottom-nav__tab:focus {
		color: var(--cpm-primary, #0760A9);
		text-decoration: none;
	}

	.cpm-portal-bottom-nav__tab--active {
		color: var(--cpm-primary, #0760A9);
	}

	/* Rx tab: red accent when active */
	.cpm-portal-bottom-nav__tab--rx.cpm-portal-bottom-nav__tab--active {
		color: var(--cpm-accent, #E82027);
	}

	/* Logout tab: muted color */
	.cpm-portal-bottom-nav__tab--logout {
		color: var(--cpm-gray-600, #6C757D);
		opacity: 0.7;
	}

	.cpm-portal-bottom-nav__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 2px;
	}

	.cpm-portal-bottom-nav__label {
		display: block;
		line-height: 1.2;
	}

	/* Hide sidebar nav on My Account when bottom nav is present */
	.cpm-portal-account .cpm-account-nav-wrapper {
		display: none;
	}

	/* Bottom padding to prevent content overlap with bottom nav */
	.cpm-portal-account .woocommerce-MyAccount-content {
		padding-bottom: 80px;
		width: 100%;
	}

	/* Version indicator above bottom nav */
	.cpm-portal-account .cpm-portal-version {
		padding-bottom: 80px;
	}

	/* Standalone mode: hide site footer on My Account */
	.cpm-portal-standalone.cpm-portal-account .site-footer {
		display: none;
	}
}

/* Desktop: ensure bottom nav stays hidden, sidebar visible */
@media (min-width: 768px) {
	.cpm-portal-bottom-nav {
		display: none !important;
	}
}

/* =====================================================================
   Install banner — move above bottom nav on My Account mobile
   ===================================================================== */

@media (max-width: 767px) {
	.cpm-portal-account .cpm-portal-install {
		bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}