/*
 * O tema do site aplica regras globais com !important em <a>, <button>
 * e inputs (menu, botões do WooCommerce, etc.). Por isso este arquivo
 * usa o seletor #grenal-conf-app (ID) combinado com !important nas
 * propriedades visuais, para garantir que o widget sempre apareça
 * como projetado, independente do tema.
 */

#grenal-conf-app {
	--grenal-accent: #6b6b6b;
	--grenal-accent-dark: #565656;
	--grenal-tab-bg: #eeeeef;
	--grenal-tab-inactive-text: #757575;
	--grenal-bg: #f6f6f7;
	--grenal-card: #fafafa;
	--grenal-border: #e3e3e5;
	--grenal-text: #2b2b2b;
	--grenal-muted: #8a8a8a;
	--grenal-success: #4a7c4e;

	max-width: 480px !important;
	margin: 0 auto !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: var(--grenal-text) !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border: 1px solid var(--grenal-border) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

#grenal-conf-app,
#grenal-conf-app * {
	box-sizing: border-box !important;
}

#grenal-conf-app .grenal-conf-header {
	text-align: center !important;
	padding: 26px 16px 16px !important;
	background: none !important;
}

#grenal-conf-app .grenal-conf-header h2 {
	margin: 0 0 6px !important;
	font-size: 1.3rem !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--grenal-text) !important;
}

#grenal-conf-app .grenal-conf-data {
	margin: 0 !important;
	color: var(--grenal-muted) !important;
	font-size: 0.92rem !important;
}

/* Abas */
#grenal-conf-app .grenal-conf-tabs {
	display: flex !important;
	gap: 6px !important;
	margin: 4px 16px 4px !important;
	background: var(--grenal-tab-bg) !important;
	padding: 4px !important;
	border-radius: 12px !important;
	border: none !important;
}

#grenal-conf-app .grenal-conf-tab {
	flex: 1 !important;
	padding: 11px 8px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 9px !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	color: var(--grenal-tab-inactive-text) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

#grenal-conf-app .grenal-conf-tab:hover,
#grenal-conf-app .grenal-conf-tab:focus {
	color: var(--grenal-text) !important;
	background: rgba(255, 255, 255, 0.6) !important;
	outline: none !important;
}

#grenal-conf-app .grenal-conf-tab.is-active,
#grenal-conf-app .grenal-conf-tab.is-active:hover {
	background: #ffffff !important;
	color: var(--grenal-text) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Painéis */
#grenal-conf-app .grenal-conf-panel {
	display: none !important;
	padding: 20px 16px 28px !important;
}

#grenal-conf-app .grenal-conf-panel.is-active {
	display: block !important;
}

/* Formulário */
#grenal-conf-app .grenal-conf-label {
	display: block !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
	font-size: 0.9rem !important;
	color: var(--grenal-text) !important;
}

#grenal-conf-app .grenal-conf-form input[type="text"] {
	width: 100% !important;
	padding: 13px 14px !important;
	font-size: 1rem !important;
	border: 1px solid var(--grenal-border) !important;
	background: var(--grenal-bg) !important;
	border-radius: 10px !important;
	margin-bottom: 16px !important;
	color: var(--grenal-text) !important;
	box-shadow: none !important;
}

#grenal-conf-app .grenal-conf-form input[type="text"]::placeholder {
	color: #b3b3b3 !important;
}

#grenal-conf-app .grenal-conf-form input[type="text"]:focus {
	outline: none !important;
	border-color: var(--grenal-accent) !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(107, 107, 107, 0.12) !important;
}

#grenal-conf-app .grenal-conf-btn {
	width: 100% !important;
	padding: 14px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	background: var(--grenal-accent) !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transition: background 0.15s ease, opacity 0.15s ease !important;
}

#grenal-conf-app .grenal-conf-btn:hover,
#grenal-conf-app .grenal-conf-btn:focus {
	background: var(--grenal-accent-dark) !important;
	color: #ffffff !important;
}

#grenal-conf-app .grenal-conf-btn:active {
	background: var(--grenal-accent-dark) !important;
}

#grenal-conf-app .grenal-conf-btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

#grenal-conf-app .grenal-conf-msg {
	margin: 12px 0 0 !important;
	font-size: 0.88rem !important;
	text-align: center !important;
	min-height: 1.2em !important;
}

#grenal-conf-app .grenal-conf-msg.is-success {
	color: var(--grenal-success) !important;
}

#grenal-conf-app .grenal-conf-msg.is-error {
	color: #a94442 !important;
}

/* Confirmados */
#grenal-conf-app .grenal-conf-count {
	display: flex !important;
	align-items: baseline !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-bottom: 18px !important;
}

#grenal-conf-app .grenal-conf-count-number {
	font-size: 2.2rem !important;
	font-weight: 800 !important;
	color: var(--grenal-text) !important;
	line-height: 1 !important;
}

#grenal-conf-app .grenal-conf-count-label {
	font-size: 0.98rem !important;
	color: var(--grenal-muted) !important;
}

#grenal-conf-app .grenal-conf-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#grenal-conf-app .grenal-conf-list li {
	padding: 12px 14px !important;
	background: var(--grenal-card) !important;
	border: 1px solid var(--grenal-border) !important;
	border-radius: 10px !important;
	margin: 0 0 8px !important;
	font-size: 0.96rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: var(--grenal-text) !important;
}

#grenal-conf-app .grenal-conf-list li::before {
	content: "\2713" !important;
	color: var(--grenal-success) !important;
	font-weight: 700 !important;
}

#grenal-conf-app .grenal-conf-empty {
	text-align: center !important;
	color: var(--grenal-muted) !important;
	padding: 20px 0 !important;
	font-size: 0.92rem !important;
}

@media (min-width: 480px) {
	#grenal-conf-app .grenal-conf-header h2 {
		font-size: 1.5rem !important;
	}
}