/* Bedrock Login Button Styling */

/* All login buttons should have borders */
.bedrock-login-btn {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: white !important;
    transition: border-color 0.2s ease !important;
}

.bedrock-login-btn:hover {
    border-color: #00FF7F !important;
}

/* Social buttons (Google, Apple, Email) */
.bedrock-login-btn {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bedrock-login-btn svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

/* Wallet button special styling */
.wallet-btn {
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 8px !important;
}

/* Remove internal borders from wallet button */
.wallet-btn * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force all buttons in auth modal to have borders */
#bedrock-auth-container button,
.bedrock-auth-modal button {
    border: 1px solid #d1d5db !important;
}

#bedrock-auth-container button:hover,
.bedrock-auth-modal button:hover {
    border-color: #00FF7F !important;
}

/* Remove internal borders from all buttons */
#bedrock-auth-container button *,
.bedrock-auth-modal button * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Auth modal background with blur effect */
#bedrock-auth-container,
.bedrock-auth-modal {
    background: rgba(22, 39, 44, 0.68) !important;
    border-radius: 0.75rem !important;
}

/* Remove conflicting backgrounds from panel */
.rounded-xl.border-2.border-\[#00FF7F\],
[class*="rounded-xl"][class*="border-2"][class*="border-[#00FF7F]"] {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Fix OR separator - remove background and divide line */
[class*="text-center"][class*="text-sm"][class*="text-gray-500"],
[class*="relative"][class*="text-center"],
[class*="flex"][class*="items-center"][class*="text-sm"][class*="text-gray-500"] {
    background: transparent !important;
    color: white !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Remove background from OR text container */
[class*="bg-black"],
[class*="bg-gray-900"],
[class*="bg-opacity-100"],
[class*="bg-opacity-75"] {
    background: transparent !important;
}

/* Divide the line around OR - create gaps */
[class*="border-t"][class*="border-gray-300"],
[class*="border-b"][class*="border-gray-300"],
[class*="border"][class*="border-gray-300"] {
    position: relative !important;
}

[class*="border-t"][class*="border-gray-300"]::before,
[class*="border-b"][class*="border-gray-300"]::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #d1d5db !important;
    z-index: 1 !important;
}

/* Create gaps in the line around OR text */
[class*="text-center"][class*="text-sm"][class*="text-gray-500"]::before,
[class*="relative"][class*="text-center"]::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: -20px !important;
    width: 20px !important;
    height: 1px !important;
    background: #d1d5db !important;
    z-index: 1 !important;
}

/* Remove bottom margin/padding from .mb-6 utility class */
.mb-6, [class*="mb-6"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove the line under the OR separator (only keep the left line) */
[class*="text-center"][class*="text-sm"][class*="text-gray-500"]::after,
[class*="relative"][class*="text-center"]::after {
    display: none !important;
    content: none !important;
}

/* Re-enable logo - show any hidden logo elements */
[class*="hidden"],
[class*="invisible"],
[class*="opacity-0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure logo container is visible */
[class*="logo"],
[class*="brand"],
[class*="header"],
[class*="title"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force logo to be visible if it exists */
img[class*="logo"],
img[class*="brand"],
svg[class*="logo"],
svg[class*="brand"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}