/**
 * Frontend Social Login Buttons Styles
 * Styles for social login buttons displayed on frontend
 *
 * @package Codemoy_Social_Login
 * @since 1.4.0 - Converted to CSS Variables
 */

@import '../variables.css';

/* Social Login Container */
.cmsl-social-login-container {
    margin: var(--cmsl-space-lg) 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Form Divider */
.cmsl-form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--cmsl-space-lg) 0;
    color: var(--cmsl-text-secondary);
    font-size: var(--cmsl-text-base);
}

.cmsl-form-divider::before,
.cmsl-form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--cmsl-border-light);
}

.cmsl-form-divider span {
    padding: 0 var(--cmsl-space-md);
}

/* Social Login Buttons Container */
.cmsl-social-login-buttons {
    display: grid;
    gap: var(--cmsl-btn-gap);
    margin: var(--cmsl-space-md) 0;
    grid-template-columns: repeat(auto-fit, minmax(var(--cmsl-btn-min-width, 140px), var(--cmsl-btn-max-width, 1fr)));
    width: 100%;
    box-sizing: border-box;
}

/* Social Button Base */
.cmsl-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmsl-btn-gap);
    padding: var(--cmsl-btn-padding-y) var(--cmsl-btn-padding-x);
    border: 1px solid var(--cmsl-border-light);
    border-radius: var(--cmsl-radius-md);
    background: var(--cmsl-bg-card);
    color: var(--cmsl-text-primary);
    text-decoration: none;
    font-size: var(--cmsl-text-md);
    font-weight: var(--cmsl-weight-medium);
    transition: all var(--cmsl-transition-base);
    cursor: pointer;
}

.cmsl-social-button:hover {
    background: var(--cmsl-bg-hover);
    border-color: var(--cmsl-border-medium);
    text-decoration: none;
    color: var(--cmsl-text-primary);
}

.cmsl-social-button:active {
    transform: scale(0.98);
}

/* Social Icon */
.cmsl-social-icon {
    width: var(--cmsl-icon-size);
    height: var(--cmsl-icon-size);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Provider-specific button styles */
.cmsl-button-google {
    border: 1px solid var(--cmsl-border-dark, #c3c4c7);
    color: var(--cmsl-google);
}

.cmsl-button-google:hover {
    background: var(--cmsl-google);
    color: var(--cmsl-white);
    border-color: var(--cmsl-google);
}

.cmsl-button-google .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23DB4437" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="%230F9D58" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="%23F4B400" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="%23DB4437" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>');
}

.cmsl-button-youtube {
    border: 1px solid var(--cmsl-border-dark, #c3c4c7);
    color: var(--cmsl-youtube);
}

.cmsl-button-youtube:hover {
    background: var(--cmsl-youtube);
    color: var(--cmsl-white);
    border-color: var(--cmsl-youtube);
}

.cmsl-button-youtube .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}

.cmsl-button-kakao {
    border-color: var(--cmsl-kakao);
    background: var(--cmsl-kakao);
    color: var(--cmsl-kakao-text);
}

.cmsl-button-kakao:hover {
    background: var(--cmsl-kakao-hover);
    border-color: var(--cmsl-kakao-hover);
    color: var(--cmsl-kakao-text);
}

.cmsl-button-kakao .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000000" d="M12 3c5.799 0 10.5 3.664 10.5 8.185 0 4.52-4.701 8.184-10.5 8.184a13.5 13.5 0 0 1-1.727-.11l-4.408 2.883c-.501.265-.678.236-.472-.413l.892-3.678c-2.88-1.46-4.785-3.99-4.785-6.866C1.5 6.665 6.201 3 12 3z"/></svg>');
}

.cmsl-button-naver {
    border-color: var(--cmsl-naver);
    background: var(--cmsl-naver);
    color: var(--cmsl-white);
}

.cmsl-button-naver:hover {
    background: var(--cmsl-naver-hover);
    border-color: var(--cmsl-naver-hover);
    color: var(--cmsl-white);
}

.cmsl-button-naver .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/></svg>');
}

.cmsl-button-facebook {
    border-color: var(--cmsl-facebook);
    background: var(--cmsl-facebook);
    color: var(--cmsl-white);
}

.cmsl-button-facebook:hover {
    background: var(--cmsl-facebook-hover);
    border-color: var(--cmsl-facebook-hover);
    color: var(--cmsl-white);
}

.cmsl-button-facebook .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>');
}

.cmsl-button-apple {
    border-color: var(--cmsl-apple);
    background: var(--cmsl-apple);
    color: var(--cmsl-white);
}

.cmsl-button-apple:hover {
    background: var(--cmsl-apple-hover);
    border-color: var(--cmsl-apple-hover);
    color: var(--cmsl-white);
}

.cmsl-button-apple .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>');
}

.cmsl-button-line {
    border-color: var(--cmsl-line);
    background: var(--cmsl-line);
    color: var(--cmsl-white);
}

.cmsl-button-line:hover {
    background: var(--cmsl-line-hover);
    border-color: var(--cmsl-line-hover);
    color: var(--cmsl-white);
}

.cmsl-button-line .cmsl-social-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>');
}

/* GDPR/Terms Consent */
.cmsl-gdpr-consent,
.cmsl-terms-consent {
    margin-top: var(--cmsl-space-md);
}

.cmsl-gdpr-consent label,
.cmsl-terms-consent label {
    display: flex;
    align-items: flex-start;
    font-size: var(--cmsl-text-sm);
    line-height: var(--cmsl-leading-normal);
    color: var(--cmsl-text-secondary);
    cursor: pointer;
}

.cmsl-gdpr-consent input[type="checkbox"],
.cmsl-terms-consent input[type="checkbox"] {
    margin-right: var(--cmsl-space-sm);
    margin-top: 2px;
    flex-shrink: 0;
}

.cmsl-gdpr-consent a,
.cmsl-terms-consent a {
    color: var(--cmc-theme-link-color);
    text-decoration: none;
}

.cmsl-gdpr-consent a:hover,
.cmsl-terms-consent a:hover {
    text-decoration: underline;
}

/* Responsive - minmax handles column count automatically based on container width */
/* No need for fixed column classes - grid adapts to available space */

/* ==========================================================================
   CM User Kit Integration
   Styles for social login when displayed within User Kit forms
   ========================================================================== */

/* Social login section within User Kit form wrapper */
.cmuk-form-wrapper .cmuk-social-login-section {
    margin-top: 1.5rem;
    padding-top: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Reset container styling when inside User Kit */
.cmuk-form-wrapper .cmsl-social-login-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Divider styling within User Kit */
.cmuk-form-wrapper .cmsl-form-divider {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--cmsl-text-muted);
}

.cmuk-form-wrapper .cmsl-form-divider::before,
.cmuk-form-wrapper .cmsl-form-divider::after {
    border-bottom-color: var(--cmsl-border-light);
}

/* Buttons layout within User Kit - minmax will auto-adjust based on form width */
.cmuk-form-wrapper .cmsl-social-login-buttons {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Button styling within User Kit forms */
.cmuk-form-wrapper .cmsl-social-button {
    box-sizing: border-box;
}

/* ==========================================================================
   WooCommerce Integration
   Styles for social login when displayed within WooCommerce forms
   ========================================================================== */

/* WooCommerce My Account login/register forms - container */
.woocommerce-form-login .cmsl-social-login-container,
.woocommerce-form-register .cmsl-social-login-container,
.woocommerce form.login .cmsl-social-login-container,
.woocommerce form.register .cmsl-social-login-container,
.woocommerce-account .cmsl-social-login-container,
.u-columns .u-column1 .cmsl-social-login-container,
.u-columns .u-column2 .cmsl-social-login-container,
form.woocommerce-form .cmsl-social-login-container {
    margin: 1rem 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* WooCommerce forms - minmax will auto-adjust based on form width */
.woocommerce-form-login .cmsl-social-login-buttons,
.woocommerce-form-register .cmsl-social-login-buttons,
.woocommerce form.login .cmsl-social-login-buttons,
.woocommerce form.register .cmsl-social-login-buttons,
.u-columns .cmsl-social-login-buttons,
form.woocommerce-form .cmsl-social-login-buttons {
    width: 100%;
    max-width: 100%;
}

/* Divider styling within WooCommerce */
.woocommerce-form-login .cmsl-form-divider,
.woocommerce-form-register .cmsl-form-divider,
.woocommerce form.login .cmsl-form-divider,
.woocommerce form.register .cmsl-form-divider,
form.woocommerce-form .cmsl-form-divider {
    margin: 1rem 0;
    font-size: 0.875rem;
}

/* Button styling within WooCommerce forms */
.woocommerce-form-login .cmsl-social-button,
.woocommerce-form-register .cmsl-social-button,
.woocommerce form.login .cmsl-social-button,
.woocommerce form.register .cmsl-social-button,
.u-columns .cmsl-social-button,
form.woocommerce-form .cmsl-social-button {
    box-sizing: border-box;
}

/* ==========================================================================
   Container Width Adaptive Layout
   minmax() handles column count automatically - no media queries needed
   ========================================================================== */

/* ==========================================================================
   WooCommerce Checkout Social Login Box
   ========================================================================== */

.cmsl-checkout-box {
    margin-bottom: var(--cmuk-space-lg, 20px);
    padding: var(--cmuk-space-lg, 20px);
    border: 2px solid var(--cmc-theme-primary-color, #0073aa);
    background: var(--cmc-theme-bg-light, #f0f8ff);
    border-radius: var(--cmuk-radius-lg, 8px);
}