/**
 * BCM Auth Content Wall - Base Layout Styles
 *
 * Wall-specific layout and spacing. Shared element styles (heading, desc,
 * email input, OTP, social buttons, etc.) are inherited from auth-popup.css.
 */

/* ------------------------------------------------------------------ */
/*  Gated Content Container                                            */
/* ------------------------------------------------------------------ */

.bcm-auth-gated-content {
    position: relative;
}

.bcm-auth-visible-content {
    position: relative;
    overflow: hidden;
}

.bcm-auth-content-fade {
    position: relative;
    height: 200px;
    margin-top: -120px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  Wall Container                                                     */
/* ------------------------------------------------------------------ */

.bcm-auth-wall {
    position: relative;
    padding: 48px 24px;
    text-align: center;
    font-family: var(--bcm-auth-font-family);
}

.bcm-auth-wall-inner {
    max-width: 440px;
    margin: 0 auto;
}

.bcm-auth-wall-social {
    margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/*  Wall Steps (login ↔ inline OTP)                                    */
/* ------------------------------------------------------------------ */

.bcm-auth-wall-step {
    animation: bcm-auth-wall-fadein 0.25s ease;
}

@keyframes bcm-auth-wall-fadein {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bcm-auth-wall-step[data-wall-step="otp"] .bcm-auth-submit-btn {
    margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
    .bcm-auth-wall {
        padding: 32px 16px;
    }
}