/**
 * Google Auth Styles
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   One Tap Container
   ========================================================================== */

.ksq-one-tap-container {
	position: fixed;
	z-index: 100001;
}

.ksq-one-tap--top-right {
	top: 80px;
	right: 20px;
}

.ksq-one-tap--top-left {
	top: 80px;
	left: 20px;
}

.ksq-one-tap--bottom-right {
	bottom: 20px;
	right: 20px;
}

.ksq-one-tap--bottom-left {
	bottom: 20px;
	left: 20px;
}

/* ==========================================================================
   Login/Register Form Integration
   ========================================================================== */

.ksq-google-login-divider {
	display: flex;
	align-items: center;
	margin: 25px 0;
	text-align: center;
}

.ksq-google-login-divider::before,
.ksq-google-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.ksq-google-login-divider span {
	padding: 0 15px;
	color: #6b7280;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ksq-google-login-wrapper {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

/* Custom Google Button Styling */
.ksq-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 320px;
	padding: 12px 24px;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #3c4043;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ksq-google-btn:hover {
	background: #f8f9fa;
	border-color: #c6c9cc;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ksq-google-btn:active {
	background: #f1f3f4;
}

.ksq-google-btn svg {
	width: 18px;
	height: 18px;
}

.ksq-google-btn--loading {
	opacity: 0.7;
	pointer-events: none;
}

/* ==========================================================================
   Checkout Google Login
   ========================================================================== */

.ksq-checkout-google-login {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 30px;
	text-align: center;
}

.ksq-checkout-google-login p {
	margin: 0 0 15px;
	color: #374151;
	font-size: 14px;
}

.ksq-checkout-google-login .ksq-google-login-wrapper {
	margin: 0;
}

/* ==========================================================================
   My Account - Google Link Section
   ========================================================================== */

.ksq-google-link-section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 30px;
}

.ksq-google-link-section h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.ksq-google-link-section h3 svg {
	width: 24px;
	height: 24px;
}

.ksq-google-linked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px;
	background: #f0fdf4;
	border: 1px solid #22c55e;
	border-radius: 8px;
}

.ksq-google-linked-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ksq-google-linked-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.ksq-google-linked-email {
	font-size: 14px;
	color: #374151;
}

.ksq-google-linked-status {
	font-size: 12px;
	color: #22c55e;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ksq-google-unlink-btn {
	background: #fff;
	border: 1px solid #ef4444;
	color: #ef4444;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ksq-google-unlink-btn:hover {
	background: #fef2f2;
}

.ksq-google-not-linked {
	text-align: center;
	padding: 20px;
}

.ksq-google-not-linked p {
	color: #6b7280;
	margin-bottom: 15px;
}

/* ==========================================================================
   Status Messages
   ========================================================================== */

.ksq-google-message {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 15px;
	font-size: 14px;
}

.ksq-google-message--success {
	background: #f0fdf4;
	border: 1px solid #22c55e;
	color: #166534;
}

.ksq-google-message--error {
	background: #fef2f2;
	border: 1px solid #ef4444;
	color: #991b1b;
}

.ksq-google-message--loading {
	background: #f0f9ff;
	border: 1px solid #0ea5e9;
	color: #0369a1;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.ksq-one-tap--top-right,
	.ksq-one-tap--top-left {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.ksq-one-tap--bottom-right,
	.ksq-one-tap--bottom-left {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.ksq-google-linked {
		flex-direction: column;
		text-align: center;
	}

	.ksq-google-linked-info {
		flex-direction: column;
	}
}