/**
 * Users Management - OAuth Styles
 *
 * Styles for OAuth login/registration buttons.
 *
 * @package BananaProperty\UsersManagement
 */

/* OAuth Buttons Container */
.um-oauth-buttons {
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.um-oauth-divider {
    text-align: center;
    position: relative;
    margin: 20px 0;
}

.um-oauth-divider span {
    background: #fff;
    padding: 0 10px;
    color: #666;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.um-oauth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
}

/* OAuth Button Base */
.um-oauth-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
}

.um-oauth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.um-oauth-button:active {
    transform: translateY(0);
}

.um-oauth-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Google OAuth Button */
.um-oauth-button--google {
    background-color: #4285f4;
    color: #fff;
}

.um-oauth-button--google:hover {
    background-color: #357ae8;
}

.um-oauth-button--google::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTkuNiAxMC4yMjdjMC0uNzA5LS4wNjQtMS4zOS0uMTgyLTIuMDQ1SDEwdjMuODY4aDUuMzgyYy0uMjMyIDEuMjI3LS45MzYgMi4yNjgtMS45OTYgMi45NjR2Mi41MTRoMy4yMzJjMS44OTEtMS43NDEgMi45ODItNC4zIDIuOTgyLTcuMzAxeiIgZmlsbD0iIzQyODVGNCIvPjxwYXRoIGQ9Ik0xMCAxOS45OThjMi43IDAgNC45NjQtLjg5NSA2LjYxOC0yLjQyM2wtMy4yMzItMi41MTRjLS44OTUuNi0yLjA0MS45NTUtMy4zODYuOTU1LTIuNjA1IDAtNC44MTQtMS43NTktNS42MDUtNC4xMDlIMS4yNzd2Mi41OTZDMi45MTQgMTcuMzg3IDYuMTkxIDE5Ljk5OCAxMCAxOS45OTh6IiBmaWxsPSIjMzRBODUzIi8+PHBhdGggZD0iTTQuMzk1IDExLjkwN2MtLjIwNS0uNi0uMzIzLTEuMjQxLS4zMjMtMS45MDdzLjExOC0xLjMwNy4zMjMtMS45MDdWNS40OTdIMS4yNzdBOS45NTkgOS45NTkgMCAwIDAgMCAxMGMwIDEuNjE0LjM4NiAzLjE0MSAxLjA3NyA0LjUwM2wzLjMxOC0yLjU5NnoiIGZpbGw9IiNGQkJDMDUiLz48cGF0aCBkPSJNMTAgMy45OTFjMS40NjggMCAyLjc4Ni41MDUgMy44MjMgMS40OTVsMi44NjgtMi44NjhDMTQuOTU5LjkxNCAxMi42OTUgMCAxMCAwIDYuMTkxIDAgMi45MTQgMi42MTIgMS4yNzcgNi40OTdsMy4xMTggMi41OTZjLjc5MS0yLjM1IDMtNC4xMDIgNS42MDUtNC4xMDJ6IiBmaWxsPSIjRUE0MzM1Ii8+PC9nPjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Facebook OAuth Button */
.um-oauth-button--facebook {
    background-color: #1877f2;
    color: #fff;
}

.um-oauth-button--facebook:hover {
    background-color: #166fe5;
}

.um-oauth-button--facebook::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwIDEwYzAtNS41MjMtNC40NzctMTAtMTAtMTBTMCA0LjQ3NyAwIDEwYzAgNC45OTEgMy42NTcgOS4xMjggOC40MzggOS44Nzh2LTYuOTg3SDUuODk4VjEwaDIuNTRWNy43OTdjMC0yLjUwNiAxLjQ5Mi0zLjg5IDMuNzc3LTMuODkgMS4wOTQgMCAyLjIzOC4xOTUgMi4yMzguMTk1djIuNDZoLTEuMjYxYy0xLjI0MyAwLTEuNjMuNzcyLTEuNjMgMS41NjNWMTBoMi43NzNsLS40NDMgMi44OWgtMi4zM3Y2Ljk4OEMxNi4zNDMgMTkuMTI4IDIwIDE0Ljk5MSAyMCAxMHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Loading State */
.um-oauth-loading {
    position: relative;
    color: transparent !important;
}

.um-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: um-spin 0.6s linear infinite;
}

@keyframes um-spin {
    to { transform: rotate(360deg); }
}

/* OAuth Messages */
.um-oauth-error,
.um-oauth-success {
    padding: 12px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 14px;
    display: none;
}

.um-oauth-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.um-oauth-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Responsive Design */
@media (min-width: 768px) {
    .um-oauth-buttons-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .um-oauth-button {
        margin: 0;
    }
}

/* Admin OAuth Connections View */
.um-oauth-connections-table .um-oauth-provider-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.um-oauth-provider-google {
    background-color: #4285f4;
    color: white;
}

.um-oauth-provider-facebook {
    background-color: #1877f2;
    color: white;
}