/* =========================
   MINIMAL ADDITIONS ONLY
   (Don't override framework.css)
   ========================= */

/* Fix button spacing - only adjust what's needed */
.iridescent-shard {
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}

/* Style for disabled button */
.iridescent-shard:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Style for Forgot password link to be on one line */
.forgot-password-container {
    text-align: center;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Back link styling for bank PIN page */
.back-link-pin {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #39acff !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-family: PF Bague Sans Pro, Helvetica, Arial, sans-serif !important;
}

.back-link-pin:hover {
    text-decoration: underline !important;
}

/* Ensure the "Back to Login" button style matches */
.css-1r6bjh2.efk7upz33 {
    margin: 14px 0 28px !important;
}

.css-1r6bjh2.efk7upz33 .Button.css-1yaapo0.efk7upz1 {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: rgb(57, 172, 255) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.css-1r6bjh2.efk7upz33 .Button.css-1yaapo0.efk7upz1:hover {
    text-decoration: underline !important;
}

/* Fix the game icons display on verification pages */
.stardust-coil {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1px !important;
    margin-bottom: 24px !important;
}

/* Ensure bank PIN page has proper background */
#Page3 .void-cradle {
    background: rgb(11, 17, 26) !important;
}

/* Remove conflicting styles from framework.css that break layout */
@media (min-width: 576px) {
    .obsidian-husk {
        min-height: auto !important;
        height: auto !important;
    }
}

/* =========================
   FIX FOR "OR LOG IN WITH" SPACING - MATCHING REFERENCE IMAGE
   ========================= */

/* Fix the social login buttons container - match spacing from reference */
.nebula-thread {
    gap: 12px !important; /* Increased from 4px to 12px for proper spacing between buttons */
    justify-content: center !important;
    margin: 12px auto !important;
}

/* Keep original button sizes - don't override them */
.radiant-citadel {
    margin: 0 !important; /* Remove any margins, let gap control spacing */
}

/* Keep the "Or log in with" text spacing consistent */
.nimbus-cocoon {
    margin-bottom: 12px !important;
    margin-top: 8px !important;
}

/* Ensure the container doesn't add extra spacing */
.nebula-thread .radiant-citadel:first-child {
    margin-left: 0 !important;
}

.nebula-thread .radiant-citadel:last-child {
    margin-right: 0 !important;
}

/* Responsive adjustment for mobile */
@media (max-width: 576px) {
    .nebula-thread {
        gap: 8px !important; /* Slightly smaller on mobile but still visible spacing */
    }
}