/**
 * PWA Tutorial PAD — Estilos do modal, barra de notificação e botão.
 *
 * IMPORTANTE: usamos !important nas propriedades estruturais (display,
 * position, z-index) porque o frontend roda dentro do tema (Foxiz) e de
 * outros plugins que podem ter CSS genérico de alta prioridade, sem uma
 * ordem de carregamento previsível como acontece no admin. Isso garante
 * que o modal sempre apareça corretamente independente da ordem de
 * enqueue dos demais estilos do site.
 */

.ptpad-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba( 0, 0, 0, 0 ) !important;
	-webkit-backdrop-filter: blur( 0px ) !important;
	backdrop-filter: blur( 0px ) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	padding: 16px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	transition: background 0.2s ease-out, opacity 0.2s ease-out, -webkit-backdrop-filter 0.2s ease-out, backdrop-filter 0.2s ease-out !important;
}

.ptpad-overlay[hidden] {
	display: none !important;
}

.ptpad-overlay.ptpad-visible {
	background: rgba( 0, 0, 0, 0.6 ) !important;
	-webkit-backdrop-filter: blur( 4px ) !important;
	backdrop-filter: blur( 4px ) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body.ptpad-modal-open {
	overflow: hidden !important;
}

.ptpad-overlay .ptpad-modal {
	--ptpad-accent-color: #0052cc;
	--ptpad-bg-color: #ffffff;
	width: 100% !important;
	max-width: 26rem !important;
	max-height: 88vh !important;
	overflow-y: auto !important;
	background: var( --ptpad-bg-color ) !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 24px rgba( 0, 0, 0, 0.18 ) !important;
	position: relative !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	transform: translateY( 12px ) !important;
	opacity: 0 !important;
	transition: transform 0.15s ease-out, opacity 0.15s ease-out !important;
}

.ptpad-overlay.ptpad-visible .ptpad-modal {
	transform: translateY( 0 ) !important;
	opacity: 1 !important;
}

.ptpad-overlay .ptpad-modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-sizing: border-box !important;
}

.ptpad-overlay .ptpad-modal-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	color: #1f2937 !important;
	line-height: 1.4 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.ptpad-overlay .ptpad-modal-close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	flex-shrink: 0 !important;
	background: #f3f4f6 !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: #1f2937 !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: background 0.1s ease !important;
}

.ptpad-overlay .ptpad-modal-close:hover {
	background: #e5e7eb !important;
}

.ptpad-overlay .ptpad-modal-body {
	padding: 20px 16px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Card de informações do app (ícone + nome + descrição) */
.ptpad-overlay .ptpad-app-info {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: #f3f4f6 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	padding: 10px !important;
	margin: 0 0 16px !important;
	box-sizing: border-box !important;
}

.ptpad-overlay .ptpad-app-icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 10px !important;
	flex-shrink: 0 !important;
	object-fit: cover !important;
}

.ptpad-overlay .ptpad-app-info-texts {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.ptpad-overlay .ptpad-app-info-name {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1f2937 !important;
	margin: 0 !important;
}

.ptpad-overlay .ptpad-app-info-desc {
	font-size: 12.5px !important;
	color: #6b7280 !important;
	line-height: 1.4 !important;
	margin: 2px 0 0 !important;
}

/* Loading (spinner enquanto detecta capacidade de instalação) */
.ptpad-overlay .ptpad-tutorial-loading {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px 0 !important;
}

.ptpad-overlay .ptpad-spinner {
	width: 32px !important;
	height: 32px !important;
	border: 3px solid #f3f4f6 !important;
	border-top-color: var( --ptpad-accent-color ) !important;
	border-radius: 50% !important;
	animation: ptpad-spin 0.6s linear infinite !important;
}

@keyframes ptpad-spin {
	to { transform: rotate( 360deg ); }
}

.ptpad-overlay .ptpad-loading-text {
	margin-top: 12px !important;
	font-size: 13.5px !important;
	color: #374151 !important;
}

/* Botão nativo de instalação (quando o navegador suporta beforeinstallprompt) */
.ptpad-overlay .ptpad-native-install-wrap {
	margin-top: 4px !important;
}

/* Lista de passos do tutorial (estilo timeline) */
.ptpad-overlay .ptpad-steps {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	counter-reset: ptpad-step !important;
}

.ptpad-overlay .ptpad-step {
	position: relative !important;
	padding-left: 2.7rem !important;
	padding-bottom: 1.7rem !important;
	box-sizing: border-box !important;
}

.ptpad-overlay .ptpad-step:last-child {
	padding-bottom: 0 !important;
}

.ptpad-overlay .ptpad-step:last-child::after {
	display: none !important;
}

.ptpad-overlay .ptpad-step::after {
	content: '' !important;
	position: absolute !important;
	top: 2.2rem !important;
	bottom: 0.4rem !important;
	left: 0.95rem !important;
	width: 1px !important;
	background-color: #e5e7eb !important;
}

.ptpad-overlay .ptpad-step-icon {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.9rem !important;
	height: 1.9rem !important;
	border-radius: 999px !important;
	background-color: #f3f4f6 !important;
	color: #1f2937 !important;
}

.ptpad-overlay .ptpad-step-icon svg {
	width: 1.1rem !important;
	height: 1.1rem !important;
	flex-shrink: 0 !important;
}

.ptpad-overlay .ptpad-step-title {
	display: block !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	color: #1f2937 !important;
}

.ptpad-overlay .ptpad-step-desc {
	font-size: 12.5px !important;
	color: #6b7280 !important;
	line-height: 1.45 !important;
	margin: 3px 0 0 !important;
}

/* Botão de copiar link (fallback para navegadores não suportados) */
.ptpad-overlay .ptpad-copy-url-btn {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	width: 100% !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
	font-size: 12.5px !important;
	padding: 9px 12px !important;
	border-radius: 8px !important;
	border: 1px solid #e5e7eb !important;
	background-color: #ffffff !important;
	color: #1f2937 !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 ) !important;
	cursor: pointer !important;
	margin-top: 6px !important;
	box-sizing: border-box !important;
	transition: background 0.1s ease !important;
}

.ptpad-overlay .ptpad-copy-url-btn:hover {
	background-color: #f9fafb !important;
}

.ptpad-overlay .ptpad-copy-url-text {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.ptpad-overlay .ptpad-copy-url-icon {
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
}

.ptpad-overlay .ptpad-copy-url-icon svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

.ptpad-overlay .ptpad-copy-url-icon .ptpad-icon-success {
	display: none !important;
	color: var( --ptpad-accent-color ) !important;
}

.ptpad-overlay .ptpad-copy-url-btn.ptpad-copied .ptpad-icon-default {
	display: none !important;
}

.ptpad-overlay .ptpad-copy-url-btn.ptpad-copied .ptpad-icon-success {
	display: block !important;
}

.ptpad-overlay .ptpad-modal-footer {
	display: none !important;
	padding: 4px !important;
	border-top: 1px solid #e5e7eb !important;
	margin: 0 !important;
}

.ptpad-overlay .ptpad-modal-footer.ptpad-footer-visible {
	display: block !important;
}

.ptpad-overlay .ptpad-btn,
.ptpad-topbar .ptpad-btn,
.ptpad-menu-bar .ptpad-btn {
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	width: 100% !important;
	margin: 0 !important;
	transition: opacity 0.15s ease, background 0.1s ease !important;
}

.ptpad-overlay .ptpad-btn:hover,
.ptpad-topbar .ptpad-btn:hover,
.ptpad-menu-bar .ptpad-btn:hover {
	opacity: 0.9 !important;
}

.ptpad-overlay .ptpad-btn-primary,
.ptpad-topbar .ptpad-btn-primary,
.ptpad-menu-bar .ptpad-btn-primary {
	background: var( --ptpad-accent-color ) !important;
	color: #ffffff !important;
}

.ptpad-overlay .ptpad-btn-secondary,
.ptpad-topbar .ptpad-btn-secondary {
	background: #ffffff !important;
	color: #1f2937 !important;
}

.ptpad-overlay .ptpad-btn-secondary:hover {
	background: #f3f4f6 !important;
	opacity: 1 !important;
}

/* ----------------------------------------------------------------
   Bottom-sheet no mobile: o modal desliza de baixo para cima e
   fica colado na borda inferior da tela, em vez de centralizado.
   ---------------------------------------------------------------- */
@media ( max-width: 700px ) {
	.ptpad-overlay .ptpad-modal {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 85vh !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		border-radius: 16px 16px 0 0 !important;
		box-shadow: none !important;
		transform: translateY( 100% ) !important;
		opacity: 1 !important;
	}

	.ptpad-overlay.ptpad-visible .ptpad-modal {
		transform: translateY( 0 ) !important;
	}
}

/* ----------------------------------------------------------------
   Botão customizável (shortcode [ptpad_button] / bloco Gutenberg)
   ---------------------------------------------------------------- */

.ptpad-cta-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	cursor: pointer !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	margin: 0 !important;
	transition: opacity 0.15s ease, transform 0.1s ease !important;
}

.ptpad-cta-button:hover {
	opacity: 0.9 !important;
}

.ptpad-cta-button:active {
	transform: scale( 0.98 ) !important;
}

/* Formatos */
.ptpad-cta-button.ptpad-shape-rounded {
	border-radius: 8px !important;
}

.ptpad-cta-button.ptpad-shape-pill {
	border-radius: 999px !important;
}

.ptpad-cta-button.ptpad-shape-square {
	border-radius: 0 !important;
}

/* Tamanhos */
.ptpad-cta-button.ptpad-size-small {
	font-size: 12px !important;
	padding: 8px 14px !important;
}

.ptpad-cta-button.ptpad-size-medium {
	font-size: 14px !important;
	padding: 11px 20px !important;
}

.ptpad-cta-button.ptpad-size-large {
	font-size: 16px !important;
	padding: 14px 28px !important;
}

/* ----------------------------------------------------------------
   Barra de notificação (formato alternativo ao modal)
   ---------------------------------------------------------------- */

/*
 * Barra de notificação PWA — sticky, acompanha o menu ao rolar.
 *
 * Todas as cores usam variáveis CSS injetadas pelo PHP a partir das
 * configurações do painel admin (Aparência > Barra de notificação):
 *   --ptpad-bar-bg        : fundo da barra
 *   --ptpad-bar-text      : cor do título e da mensagem
 *   --ptpad-bar-btn-bg    : fundo do botão
 *   --ptpad-bar-btn-text  : texto do botão
 */

.ptpad-topbar {
	--ptpad-bar-bg: #5b21b6;
	--ptpad-bar-text: #ffffff;
	--ptpad-bar-btn-bg: transparent;
	--ptpad-bar-btn-text: #ffffff;
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 999998 !important;
	background: var( --ptpad-bar-bg ) !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	transition: max-height 0.3s ease, opacity 0.25s ease !important;
}

.ptpad-topbar.ptpad-visible {
	max-height: 200px !important;
	opacity: 1 !important;
}

.ptpad-topbar[hidden] {
	display: none !important;
}

.ptpad-topbar-inner {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	max-width: 1200px !important;
	min-height: 64px !important;
	margin: 0 auto !important;
	padding: 16px 24px !important;
	box-sizing: border-box !important;
}

/* Ícone circular com borda semitransparente na cor do texto */
.ptpad-topbar-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	border: 2px solid color-mix( in srgb, var( --ptpad-bar-text ) 60%, transparent ) !important;
	flex-shrink: 0 !important;
	object-fit: cover !important;
	background: color-mix( in srgb, var( --ptpad-bar-text ) 15%, transparent ) !important;
	padding: 2px !important;
	box-sizing: border-box !important;
}

.ptpad-topbar-text {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	line-height: 1.35 !important;
}

.ptpad-topbar-headline {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var( --ptpad-bar-text ) !important;
	margin: 0 !important;
}

.ptpad-topbar-message {
	font-size: 13px !important;
	color: color-mix( in srgb, var( --ptpad-bar-text ) 80%, transparent ) !important;
	margin: 2px 0 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* Botão com cor configurável via painel — pill shape */
.ptpad-topbar .ptpad-topbar-btn {
	width: auto !important;
	flex-shrink: 0 !important;
	padding: 9px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	background: var( --ptpad-bar-btn-bg ) !important;
	color: var( --ptpad-bar-btn-text ) !important;
	border: 2px solid var( --ptpad-bar-btn-text ) !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease !important;
	white-space: nowrap !important;
}

.ptpad-topbar .ptpad-topbar-btn:hover {
	opacity: 0.85 !important;
}

/* X de fechar: usa a cor do texto da barra */
.ptpad-topbar-close {
	background: transparent !important;
	border: none !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: color-mix( in srgb, var( --ptpad-bar-text ) 75%, transparent ) !important;
	padding: 4px 6px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	border-radius: 6px !important;
	transition: color 0.15s ease !important;
}

.ptpad-topbar-close:hover {
	color: #ffffff !important;
	background: rgba( 255, 255, 255, 0.12 ) !important;
}

/* Em telas pequenas, esconde a mensagem secundária */
@media ( max-width: 600px ) {
	.ptpad-topbar-message {
		display: none !important;
	}

	.ptpad-topbar-headline {
		font-size: 14px !important;
	}

	.ptpad-topbar .ptpad-topbar-btn {
		padding: 8px 16px !important;
		font-size: 13px !important;
	}

	.ptpad-topbar-inner {
		gap: 12px !important;
		min-height: 56px !important;
		padding: 13px 16px !important;
	}
}

/* ----------------------------------------------------------------
   Bloco do menu mobile ([ptpad_menu_bar])

   Visualmente equivalente à barra de notificação acima, mas estático:
   não é injetado via JS nem controlado por hidden/visible — fica sempre
   visível onde o shortcode for inserido (normalmente dentro do menu
   mobile do tema), sem botão de fechar.
   ---------------------------------------------------------------- */

.ptpad-menu-bar {
	--ptpad-accent-color: #0052cc;
	--ptpad-bg-color: #ffffff;
	display: block !important;
	background: var( --ptpad-bg-color ) !important;
	border: 1px solid rgba( 0, 0, 0, 0.08 ) !important;
	border-radius: 10px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.ptpad-menu-bar-inner {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px !important;
	box-sizing: border-box !important;
}

.ptpad-menu-bar-icon {
	width: 28px !important;
	height: 28px !important;
	border-radius: 6px !important;
	flex-shrink: 0 !important;
	object-fit: cover !important;
}

.ptpad-menu-bar-text {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	line-height: 1.25 !important;
}

.ptpad-menu-bar-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	margin: 0 !important;
}

.ptpad-menu-bar-message {
	font-size: 12px !important;
	color: #666 !important;
	margin: 0 !important;
	display: block !important;
	white-space: normal !important;
}

.ptpad-menu-bar .ptpad-menu-bar-btn {
	width: auto !important;
	flex-shrink: 0 !important;
	padding: 8px 14px !important;
	font-size: 12.5px !important;
}

/* Em telas bem estreitas, a mensagem some para o bloco caber em uma
   linha só dentro do menu mobile, priorizando título + botão. */
@media ( max-width: 380px ) {
	.ptpad-menu-bar-message {
		display: none !important;
	}

	.ptpad-menu-bar .ptpad-menu-bar-btn {
		padding: 7px 10px !important;
		font-size: 12px !important;
	}
}

/* ── App já rodando como instalado (standalone/TWA) ──────────────────────────
 * Mesma técnica do Progressify: a classe é aplicada no <html> pelo detect.js
 * de forma síncrona, antes da pintura da página, então não há "flash" do
 * botão antes de ser ocultado. Cobre o botão [ptpad_button], o bloco
 * [ptpad_menu_bar] e a barra/modal automáticos — nenhum CTA de instalação
 * é exibido quando o app já está instalado e em uso.
 * O JS (modal.js) reforça isso ocultando via inline style, para o caso de
 * um tema sobrescrever ou remover este CSS.
 */
.ptpad-running-as-app [data-ptpad-open-modal],
.ptpad-running-as-app .ptpad-menu-bar,
.ptpad-running-as-app #ptpad-topbar,
.ptpad-running-as-app #ptpad-modal-overlay {
	display: none !important;
}