/** * Critical CSS for Auth Button * This file MUST be included in BEFORE any other styles * to prevent layout shift and flickering */ /* Force stable dimensions for auth button container */ .h_r_b_sign_btn, .h_r_b_sign, .header-sign-btn { display: inline-block !important; min-width: 140px !important; height: auto !important; vertical-align: middle !important; } /* Force stable dimensions for auth button link */ .h_r_b_sign_btn a, .h_r_b_sign a, .header-sign-btn a, a.auth-button-ready, [class*="sign_btn"] a, [class*="sign-btn"] a { /* Layout */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; /* Dimensions */ min-width: 140px !important; width: auto !important; height: auto !important; box-sizing: border-box !important; /* Text */ white-space: nowrap !important; text-align: center !important; /* Prevent jumping */ vertical-align: middle !important; line-height: normal !important; /* Smooth transitions */ transition: background-color 0.2s ease, color 0.2s ease !important; } /* Force text to not wrap */ .h_r_b_sign_btn a span, .h_r_b_sign a span, .header-sign-btn a span, [class*="sign_btn"] a span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: inline-block !important; max-width: 200px !important; vertical-align: middle !important; } /* Ensure images don't cause layout shift */ .h_r_b_sign_btn a img, .h_r_b_sign a img, .header-sign-btn a img { display: inline-block !important; vertical-align: middle !important; flex-shrink: 0 !important; width: auto !important; height: auto !important; max-height: 24px !important; } /* Prevent FOUC (Flash of Unstyled Content) */ .h_r_b_sign_btn:not(.auth-ready) a, .h_r_b_sign:not(.auth-ready) a { min-width: 140px !important; position: relative !important; } /* Override any conflicting styles */ .h_r_b_sign_btn a:hover, .h_r_b_sign a:hover { text-decoration: none !important; } /* Ensure container doesn't collapse */ .h_r_b, .header_right_block, [class*="header"][class*="right"] { min-height: 40px !important; } /* Prevent any animations on initial load */ @media (prefers-reduced-motion: no-preference) { .h_r_b_sign_btn a, .h_r_b_sign a { animation: none !important; } }