/* CSS for authCombine */
#auth-combine-modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0 0 0 / 50%);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 10;
 overflow-y: auto;
 padding: 10px 0;
 box-sizing: border-box;
}

#auth-combine-wrapper {
 background-color: white;
 border-radius: var(--shape-border-radius-2);
 width: 100%;
 max-width: 800px;
 min-height: max-content;
 margin: 0 10px;
 box-sizing: border-box;
 max-height: 90vh;
 overflow-y: auto;

 @supports (height: 90svh) {
  max-height: 90svh;
 }
}

/* ACCOUNT PANEL */
.account-panel {
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 width: max-content;
 min-width: 300px;
 max-width: 90%;
 background-color: var(--background-color);
 z-index: 10;
 box-shadow: var(--shape-shadow-2);
 transform: translateX(-100%);
 transition: transform 0.3s ease-in-out;
 overflow-y: auto;
 padding: var(--spacing-medium);
 box-sizing: border-box;
}

.account-panel.active {
 transform: translateX(0);
}

/* Optional overlay when account panel is active */
.account-panel-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(0 0 0 / 50%);
 z-index: 9;
 display: none;
}

.account-panel-overlay.active {
 display: block;
}

.grecaptcha-badge {
 margin-top: 20px;
 z-index: 3;
}