/* Firebase SSOプラグイン CSS */

/* SSOボタンスタイル */
.firebase-sso-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #4285f4;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.firebase-sso-button:hover {
    background-color: #357ae8;
    color: #fff;
    text-decoration: none;
}

.firebase-sso-button:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.firebase-sso-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ユーザー情報表示エリア */
.firebase-sso-user-info {
    padding: 15px;
    background-color: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: 6px;
    margin: 10px 0;
}

.firebase-sso-user-info p {
    margin: 5px 0;
    color: #2e7d32;
}

.firebase-sso-user-info strong {
    font-weight: 600;
}

/* ステータスメッセージ */
.firebase-sso-status {
    padding: 10px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
    margin: 10px 0;
}

.firebase-sso-error {
    padding: 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    margin: 10px 0;
}

/* Google風のボタンスタイル（代替） */
.firebase-sso-button.google-style {
    background-color: #fff;
    color: #757575;
    border: 1px solid #dadce0;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.firebase-sso-button.google-style:hover {
    background-color: #f8f9fa;
    color: #3c4043;
    box-shadow: 0 1px 3px rgba(0,0,0,0.24);
}

.firebase-sso-button.google-style:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNy42NCA5LjIwNWMwLS42MzktLjA1Ny0xLjI1Mi0uMTY0LTEuODQxSDl2My40ODFoNC44NDRjLS4yMDkgMS4xMjUtLjg0MyAyLjA3OC0xLjc5NiAyLjcxN3YyLjI1OGgMi45MDhjMS43MjgtMS40NSAyLjcyOC0zLjU4NyAyLjcyOC02LjYxNXoiIGZpbGw9IiM0Mjg1RjQiLz48cGF0aCBkPSJNOSAxOGMtMi40MyAwLTQuNDY3LS43OTMtNS45NTYtMi4xNDVsLTMuMDA5LTIuMzE3QzEuMjE2IDExLjkzNSAxIDEwLjI0NCAxIDguNWMwLTEuNzQ0LjIxNi0zLjQzNS42MzUtNC4wMzhsMy4wMDktMi4zMTdDNi41MzMuNzk0IDguNTcgMCA5IDBjMi4wNTkgMCAzLjc3LjcgNS4wNzQgMS42NDNsLTIuNDc4IDIuMzc4QzEwLjMxMiAzLjQyIDkuNzY5IDMuMjUgOSAzLjI1Yy0xLjI1NyAwLTIuMzIyLjcxMS0yLjg2NCAxLjc2aDIuNDc4djEuOTFIMy4xODdDMy4wNjcgNy4zNDUgMyA3LjkxMyAzIDguNXMuMDY3IDEuMTU1LjE4NyAxLjc3NkEzIDMgMCAwIDEgOSAxNGMuNzY5IDAgMS4zMTItLjE3IDEuNTk2LS43MjFsLTIuNDc4IDIuMzc4QzYuOTY5IDE2LjI3MyA1LjIzMyAxOCA5IDE4eiIgZmlsbD0iIzM0QTg1MyIvPjxwYXRoIGQ9Ik0zLjE4NyAxMC4yNzZoNS44ODV2Mi4yMTdIMy4xODd6IiBmaWxsPSIjRkJCQzA1Ii8+PHBhdGggZD0iTTkgNi42NzVjMS42MzkgMCAyLjk3MS0uNTI3IDMuNTU4LTEuNDY5bDIuNjUzIDIuNTI2QzEzLjk4MSA4LjcgMTEuNzQ4IDkgOSA5Yy0xLjUzNyAwLTIuOTQyLS4yOTUtNC4wODMtLjY1OWwtMi42NTMtMi41MjZDMy4yODIgNC40NiA0LjkxMSAzIDkgM3YxLjE0NkgzLjU4NWwuNTkgMi41Mjl6IiBmaWxsPSIjRUE0MzM1Ii8+PC9nPjwvc3ZnPg==');
    background-size: 18px 18px;
    vertical-align: middle;
    margin-right: 8px;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .firebase-sso-button {
        width: 100%;
        text-align: center;
        padding: 15px;
    }
    
    .firebase-sso-user-info {
        font-size: 14px;
    }
}

/* WordPress管理画面での調和 */
.wp-admin .firebase-sso-button {
    margin-left: 0;
    vertical-align: baseline;
}

.wp-admin .firebase-sso-user-info {
    max-width: 500px;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .firebase-sso-user-info {
        background-color: #1e3a1e;
        border-color: #4caf50;
        color: #a5d6a7;
    }
    
    .firebase-sso-status {
        background-color: #3e2723;
        border-color: #8d6e63;
        color: #d7ccc8;
    }
}