/**
 * WooCommerce Google Login — style przycisku (metodologia BEM).
 * Zgodny z Google Brand Guidelines i WCAG 2.1 AA.
 *
 * Blok: .wcgl-btn
 * Elementy: .wcgl-btn__icon, .wcgl-btn__text
 * Modyfikatory: .wcgl-btn--default, .wcgl-btn--outline, .wcgl-btn--minimal
 */

/* =========================================================
   Wrapper
   ========================================================= */

.wcgl-btn-wrapper {
	display: block;
	margin: 12px 0;
}

/* =========================================================
   Blok podstawowy
   ========================================================= */

.wcgl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 4px;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	box-sizing: border-box;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

/* Focus visible — WCAG 2.1 AA */
.wcgl-btn:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* Fallback focus dla starszych przeglądarek */
.wcgl-btn:focus {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* Ukryj outline przy focusie myszką (tylko klawiatura) */
.wcgl-btn:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================
   Element: ikona (SVG logo Google)
   ========================================================= */

.wcgl-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.wcgl-btn__icon svg {
	display: block;
}

/* =========================================================
   Element: tekst
   ========================================================= */

.wcgl-btn__text {
	flex: 1;
}

/* =========================================================
   Modyfikator: default (biały, wypełniony)
   Zgodny z Google Brand Guidelines — jasne tło z cieniem
   ========================================================= */

.wcgl-btn--default {
	background-color: #ffffff;
	color: #3c4043;
	border: 1px solid #dadce0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wcgl-btn--default:hover {
	background-color: #f8f9fa;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	border-color: #c5c8ca;
	color: #3c4043;
	text-decoration: none;
}

.wcgl-btn--default:active {
	background-color: #f1f3f4;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   Modyfikator: outline (tylko obramowanie)
   ========================================================= */

.wcgl-btn--outline {
	background-color: transparent;
	color: #1a73e8;
	border: 2px solid #1a73e8;
	box-shadow: none;
}

.wcgl-btn--outline:hover {
	background-color: rgba(26, 115, 232, 0.06);
	border-color: #1558b0;
	color: #1558b0;
	text-decoration: none;
}

.wcgl-btn--outline:active {
	background-color: rgba(26, 115, 232, 0.12);
}

/* =========================================================
   Modyfikator: minimal (tekst + logo, bez tła)
   ========================================================= */

.wcgl-btn--minimal {
	background-color: transparent;
	color: #5f6368;
	border: none;
	box-shadow: none;
	padding: 8px 12px;
}

.wcgl-btn--minimal:hover {
	background-color: rgba(0, 0, 0, 0.04);
	color: #3c4043;
	text-decoration: none;
}

.wcgl-btn--minimal:active {
	background-color: rgba(0, 0, 0, 0.08);
}

/* =========================================================
   Checkout — specyficzny kontener
   ========================================================= */

.wcgl-checkout-login {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 24px;
}

.wcgl-checkout-login__message {
	margin: 0 0 12px;
	color: #5f6368;
	font-size: 14px;
}

/* =========================================================
   Responsywność — pełna szerokość na mobilnych
   ========================================================= */

@media (max-width: 480px) {
	.wcgl-btn {
		width: 100%;
		justify-content: center;
	}

	.wcgl-btn-wrapper {
		width: 100%;
	}
}

/* =========================================================
   Integracja z WooCommerce — wyrównanie z innymi elementami
   ========================================================= */

.woocommerce .wcgl-btn-wrapper {
	margin: 16px 0;
}

.woocommerce-form-login .wcgl-btn,
.woocommerce-form-register .wcgl-btn {
	display: inline-flex;
}

/* =========================================================
   Strona wp-login.php
   ========================================================= */

#login .wcgl-btn-wrapper,
.login .wcgl-btn-wrapper {
	margin: 0;
}

#login .wcgl-btn--default,
.login .wcgl-btn--default {
	width: 100%;
	justify-content: center;
}

/* =========================================================
   Admin — strona ustawień
   ========================================================= */

.wcgl-admin-wrap .wcgl-btn {
	pointer-events: none;
	opacity: 0.85;
}

/* =========================================================
   Tryb ciemny (Dark Mode)
   ========================================================= */

@media (prefers-color-scheme: dark) {
	.wcgl-btn--default {
		background-color: #1e1e1e;
		color: #e8eaed;
		border-color: #5f6368;
	}

	.wcgl-btn--default:hover {
		background-color: #2d2d2d;
	}

	.wcgl-btn--minimal {
		color: #9aa0a6;
	}

	.wcgl-btn--minimal:hover {
		background-color: rgba(255, 255, 255, 0.08);
		color: #e8eaed;
	}
}

/* =========================================================
   High contrast mode — dostępność
   ========================================================= */

@media (forced-colors: active) {
	.wcgl-btn {
		border: 2px solid ButtonText;
		color: ButtonText;
		background: ButtonFace;
	}

	.wcgl-btn:hover {
		border-color: Highlight;
		color: Highlight;
	}
}