/**
 * Frontend styles for Social Login ForAll
 *
 * @package Social_Login_ForAll
 */

/* Social Login Buttons Container */
.social-login-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 15px 0;
	width: 100%;
	max-width: 300px;
}

.login .social-login-buttons,
.register .social-login-buttons,
.woocommerce-form-login .social-login-buttons,
.woocommerce-form-register .social-login-buttons {
	margin: 15px auto;
}

/* Individual Button */
.social-login-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	width: 100%;
	position: relative;
}

.social-login-button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button Sizes */
.social-login-size-small {
	padding: 8px 15px;
	font-size: 13px;
}

.social-login-size-medium {
	padding: 10px 18px;
	font-size: 14px;
}

.social-login-size-large {
	padding: 12px 20px;
	font-size: 15px;
}

/* VK Button */
.social-login-vk {
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dddddd;
}

.social-login-vk:hover {
	background-color: #f5f5f5;
	border-color: #cccccc;
}

/* Telegram Button */
.social-login-telegram {
	background-color: #24A1DE;
	color: #ffffff;
}

.social-login-telegram:hover {
	background-color: #1f8fc7;
}

/* Yandex Button */
.social-login-yandex {
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dddddd;
}

.social-login-yandex:hover {
	background-color: #f5f5f5;
	border-color: #cccccc;
}

/* Google Button */
.social-login-google {
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dddddd;
}

.social-login-google:hover {
	background-color: #f5f5f5;
	border-color: #cccccc;
}

/* SberID Button */
.social-login-sberid {
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #dddddd;
}

.social-login-sberid:hover {
	background-color: #f5f5f5;
	border-color: #cccccc;
}

/* Button Icon */
.social-login-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.social-login-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.social-login-size-small .social-login-icon img {
	width: 20px;
	height: 20px;
}

.social-login-size-medium .social-login-icon img {
	width: 22px;
	height: 22px;
}

/* Button Text */
.social-login-text {
	display: inline-block;
}

/* Separator */
.social-login-separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 20px 0;
	width: 100%;
	max-width: 300px;
}

.login .social-login-separator,
.register .social-login-separator {
	margin: 20px auto;
}

.social-login-separator::before,
.social-login-separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ddd;
}

.social-login-separator span {
	padding: 0 10px;
	color: #666;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Telegram Widget Wrapper */
.social-login-telegram-wrapper {
	display: inline-block;
}

/* Style Variations */
.social-login-style-default .social-login-button {
	border-radius: 5px;
}

.social-login-style-rounded .social-login-button {
	border-radius: 25px;
}

.social-login-style-square .social-login-button {
	border-radius: 0;
}

/* Outline Style */
.social-login-style-outline .social-login-button {
	background-color: transparent;
	border: 2px solid currentColor;
	color: #333;
}

.social-login-style-outline .social-login-vk {
	color: #333333;
	border-color: #333333;
}

.social-login-style-outline .social-login-telegram {
	color: #24A1DE;
	border-color: #24A1DE;
}

.social-login-style-outline .social-login-yandex {
	color: #333333;
	border-color: #333333;
}

.social-login-style-outline .social-login-sberid {
	color: #333333;
	border-color: #333333;
}

/* Responsive */
@media (max-width: 480px) {
	.social-login-buttons {
		max-width: 100%;
	}
	
	.social-login-button {
		padding: 10px 15px;
		font-size: 14px;
	}
}

/* Login Page Specific */
body.login .social-login-buttons {
	max-width: 320px;
	margin: 20px auto;
}

body.login .social-login-separator {
	max-width: 320px;
}

/* WooCommerce Specific */
.woocommerce-form-login .social-login-buttons,
.woocommerce-form-register .social-login-buttons {
	width: 100%;
	max-width: none;
}

/* Error Messages */
.social-login-error {
	background-color: #f8d7da;
	color: #721c24;
	padding: 12px 15px;
	border-radius: 4px;
	margin: 15px 0;
	border: 1px solid #f5c6cb;
	font-size: 14px;
}

/* Loading State */
.social-login-button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.social-login-button.loading .social-login-text::after {
	content: '...';
	animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
	0%, 20% { content: '.'; }
	40% { content: '..'; }
	60%, 100% { content: '...'; }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	.social-login-separator span {
		color: #aaa;
	}

	.social-login-separator::before,
	.social-login-separator::after {
		border-bottom-color: #444;
	}

	.social-login-style-outline .social-login-button {
		color: #fff;
	}
}

/* Compact Icons Style */
.social-login-compact {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin: 15px 0;
	width: auto;
	max-width: none;
	justify-content: center;
}

.social-login-compact .social-login-button {
	width: auto;
	padding: 10px;
	border-radius: 50%;
	justify-content: center;
}

.social-login-compact .social-login-icon {
	width: 32px;
	height: 32px;
}

.social-login-compact .social-login-icon img {
	width: 24px;
	height: 24px;
}

.social-login-compact .social-login-text {
	display: none;
}

.social-login-compact .social-login-button:hover {
	transform: scale(1.1);
}

/* Compact size variations */
.social-login-compact.social-login-size-small .social-login-button {
	padding: 8px;
}

.social-login-compact.social-login-size-small .social-login-icon {
	width: 28px;
	height: 28px;
}

.social-login-compact.social-login-size-small .social-login-icon img {
	width: 20px;
	height: 20px;
}

.social-login-compact.social-login-size-large .social-login-button {
	padding: 12px;
}

.social-login-compact.social-login-size-large .social-login-icon {
	width: 40px;
	height: 40px;
}

.social-login-compact.social-login-size-large .social-login-icon img {
	width: 28px;
	height: 28px;
}

/* LatePoint Integration */
.latepoint-customer-auth-options-wrapper .social-login-compact {
	margin: 10px 0;
	padding: 10px 0;
}

.latepoint-customer-auth-options-wrapper .social-login-compact .social-login-button {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.latepoint-customer-auth-options-wrapper .social-login-compact .social-login-icon {
	width: 24px;
	height: 24px;
}

.latepoint-customer-auth-options-wrapper .social-login-compact .social-login-icon img {
	width: 20px;
	height: 20px;
}

.latepoint-customer-auth-options-wrapper .social-login-compact .social-login-button:hover {
	transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* LatePoint modern auth flow */
.latepoint-step-content .social-login-compact {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 15px 0;
}

/* LatePoint separator */
.latepoint-step-content .os-social-or {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 15px 0;
}

.latepoint-step-content .os-social-or::before,
.latepoint-step-content .os-social-or::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ddd;
}

.latepoint-step-content .os-social-or span {
	padding: 0 10px;
	color: #666;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Dark mode support for LatePoint */
@media (prefers-color-scheme: dark) {
	.latepoint-step-content .os-social-or::before,
	.latepoint-step-content .os-social-or::after {
		border-bottom-color: #444;
	}

	.latepoint-step-content .os-social-or span {
		color: #aaa;
	}
}