/* Brixzly Social Login Styles */

.brixzly-social-login-container {
    margin: 20px 0;
    text-align: center;
}

.brixzly-social-login-divider {
    position: relative;
    margin: 20px 0;
    text-align: center;
}

.brixzly-social-login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    z-index: 1;
}

.brixzly-social-login-divider span {
    background: #fff;
    padding: 0 15px;
    color: #666;
    font-size: 14px;
    position: relative;
    z-index: 2;
}

.brixzly-social-login-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-width: none;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.brixzly-social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #fff;
    color: #333;
}

/* Icon-only button styles for compact layout */
.brixzly-social-login-btn-icon-only {
    padding: 12px !important;
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

.brixzly-social-login-btn-icon-only .brixzly-social-login-icon {
    margin-right: 0 !important;
}

.brixzly-social-login-btn-icon-only .brixzly-social-login-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.brixzly-social-login-btn:hover {
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.brixzly-social-login-btn:active {
    transform: translateY(0);
}

.brixzly-social-login-icon {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.brixzly-social-login-text {
    flex: 1;
}

/* Provider-specific styles */
.brixzly-social-login-btn-google {
    border-color: #dadce0;
    color: #3c4043;
}

.brixzly-social-login-btn-google:hover {
    border-color: #c1c7cd;
    background: #f8f9fa !important;
    color: #3c4043;
}

.brixzly-social-login-btn-google:hover .brixzly-social-login-icon svg,
.brixzly-social-login-btn-google:hover .brixzly-social-login-icon svg path {
    fill: #3c4043 !important;
}

.brixzly-social-login-btn-facebook {
    border-color: #1877f2;
    background: #1877f2;
    color: #fff;
}

.brixzly-social-login-btn-facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 111, 229, 0.3);
}

.brixzly-social-login-btn-linkedin {
    border-color: #0a66c2;
    background: #0a66c2;
    color: #fff;
}

.brixzly-social-login-btn-linkedin:hover {
    background: #f5f5f5 !important;
    border-color: #0a66c2;
    color: #0a66c2;
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.2);
}

.brixzly-social-login-btn-linkedin:hover .brixzly-social-login-icon svg,
.brixzly-social-login-btn-linkedin:hover .brixzly-social-login-icon svg path {
    fill: #0a66c2 !important;
}

.brixzly-social-login-btn-apple {
    border-color: #000000;
    background: #000000;
    color: #fff;
}

.brixzly-social-login-btn-apple:hover {
    background: #f5f5f5 !important;
    border-color: #000000;
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brixzly-social-login-btn-apple:hover .brixzly-social-login-icon svg,
.brixzly-social-login-btn-apple:hover .brixzly-social-login-icon svg path {
    fill: #000000 !important;
}

/* Microsoft Sign In Button */
.brixzly-social-login-btn-microsoft {
    background: #ffffff !important;
    color: #5e5e5e !important;
    border: 1px solid #a1a1a1 !important;
}

.brixzly-social-login-btn-microsoft:hover {
    background: #f8f9fa !important;
    color: #3c4043 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.brixzly-social-login-btn-microsoft:hover .brixzly-social-login-icon svg,
.brixzly-social-login-btn-microsoft:hover .brixzly-social-login-icon svg path {
    fill: #3c4043 !important;
}

/* Responsive design */
@media (max-width: 479px) {
    .brixzly-social-login-buttons {
        flex-direction: column;
        max-width: 300px;
    }
    
    .brixzly-social-login-btn {
        flex: none;
    }
}

@media (min-width: 480px) {
    .brixzly-social-login-btn {
        flex: 1;
        min-width: 0;
    }
}

/* Error states */
.brixzly-social-login-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

/* Loading states */
.brixzly-social-login-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

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

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

/* Integration with PMPro login form */
.pmpro_login_form .brixzly-social-login-container {
    margin-top: 20px;
}

/* PMPro checkout page specific styles */
#pmpro_social_login .pmpro_form_field {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

#pmpro_social_login .pmpro_form_field .brixzly-social-login-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon-only buttons for checkout page */
#pmpro_social_login .pmpro_form_field .brixzly-social-login-btn-icon-only {
    flex: 0 0 auto !important;
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 12px !important;
}

/* Responsive styles for checkout page */
@media (max-width: 820px) and (min-width: 481px) {
    #pmpro_social_login .pmpro_form_field {
        flex-direction: row !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    #pmpro_social_login .pmpro_form_field .brixzly-social-login-btn-icon-only {
        flex: 0 0 auto !important;
        min-width: 48px !important;
        width: 48px !important;
    }
}

@media (max-width: 480px) {
    #pmpro_social_login .pmpro_form_field {
        flex-direction: row !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    #pmpro_social_login .pmpro_form_field .brixzly-social-login-btn-icon-only {
        flex: 0 0 auto !important;
        min-width: 48px !important;
        width: 48px !important;
        height: 48px !important;
        padding: 12px !important;
    }
    
    #pmpro_social_login .pmpro_form_field .brixzly-social-login-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Fallback for other PMPro contexts */
.pmpro_form_field .brixzly-social-login-buttons,
.pmpro_checkout .brixzly-social-login-buttons,
.pmpro_login_form .brixzly-social-login-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    max-width: none !important;
    margin: 0 auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.pmpro_form_field .brixzly-social-login-btn,
.pmpro_checkout .brixzly-social-login-btn,
.pmpro_login_form .brixzly-social-login-btn {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .brixzly-social-login-divider::before {
        background: #444;
    }
    
    .brixzly-social-login-divider span {
        background: #1a1a1a;
        color: #ccc;
    }
    
    .brixzly-social-login-btn {
        background: #2a2a2a;
        border-color: #444;
        color: #fff;
    }
    
    .brixzly-social-login-btn-google {
        background: #2a2a2a;
        border-color: #444;
        color: #fff;
    }
    
    .brixzly-social-login-btn-google:hover {
        background: #333 !important;
        border-color: #555;
        color: #ffffff;
    }
    
    .brixzly-social-login-btn-google:hover .brixzly-social-login-icon svg,
    .brixzly-social-login-btn-google:hover .brixzly-social-login-icon svg path {
        fill: #ffffff !important;
    }
    
    .brixzly-social-login-btn-linkedin {
        background: #0a66c2;
        border-color: #0a66c2;
        color: #fff;
    }
    
    .brixzly-social-login-btn-linkedin:hover {
        background: #444444 !important;
        border-color: #0a66c2;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(10, 102, 194, 0.3);
    }
    
    .brixzly-social-login-btn-linkedin:hover .brixzly-social-login-icon svg,
    .brixzly-social-login-btn-linkedin:hover .brixzly-social-login-icon svg path {
        fill: #ffffff !important;
    }
    
    .brixzly-social-login-btn-apple {
        background: #000000;
        border-color: #000000;
        color: #fff;
    }
    
    .brixzly-social-login-btn-apple:hover {
        background: #444444 !important;
        border-color: #000000;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
    
    .brixzly-social-login-btn-apple:hover .brixzly-social-login-icon svg,
    .brixzly-social-login-btn-apple:hover .brixzly-social-login-icon svg path {
        fill: #ffffff !important;
    }
    
    .brixzly-social-login-btn-microsoft:hover {
        background: #333 !important;
        border-color: #555 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .brixzly-social-login-btn-microsoft:hover .brixzly-social-login-icon svg,
    .brixzly-social-login-btn-microsoft:hover .brixzly-social-login-icon svg path {
        fill: #ffffff !important;
    }
}

/* PMPro Checkout Billing: prevent overflow and enforce wrapping */
#pmpro_billing_address_fields .pmpro_card,
#pmpro_billing_address_fields .pmpro_card_content {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

#pmpro_billing_address_fields .pmpro_form_fields.pmpro_cols-2 {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--pmpro--base--spacing--medium, 16px) !important;
}

#pmpro_billing_address_fields .pmpro_cols-2 > * {
	flex: 1 1 calc(50% - 10px) !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

#pmpro_billing_address_fields .pmpro_form_field .pmpro_form_input,
#pmpro_billing_address_fields .pmpro_form_field input,
#pmpro_billing_address_fields .pmpro_form_field select,
#pmpro_billing_address_fields .pmpro_form_field textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Stack billing fields on narrow screens */
@media (max-width: 820px) {
	#pmpro_billing_address_fields .pmpro_cols-2 > * {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* Ensure very small screens don't overflow */
@media (max-width: 480px) {
	#pmpro_billing_address_fields .pmpro_card_content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}