/*
 * FilmParty animated brand logos — sizing only (completion layer)
 * Sources: storage/public/logo/animated_logo.svg + payment_logo.svg
 * Served via /brand/mark and /brand/payment (direct /storage/ blocked).
 */

.fp-brand-logo {
    display: block;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transform: none !important;
}

/* Square mark — all topbar pages (same size everywhere) */
.fp-brand-logo--topbar,
.fp-brand-logo--home {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

/* Subscription plan picker */
.fp-brand-logo--subscription {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    filter: drop-shadow(0 16px 34px rgba(255, 215, 107, 0.16));
}

/* Payment / subscription page — horizontal animation (payment_logo.svg) */
.fp-brand-logo--payment {
    width: min(360px, 72vw);
    height: auto;
    max-width: min(360px, 72vw);
    max-height: 112px;
    aspect-ratio: 1000 / 640;
    filter: drop-shadow(0 16px 34px rgba(255, 215, 107, 0.16));
}

/* Prevent step94 mobile overflow/max-width + nudge from cropping the logo */
html body .topbar-glass .topbar-right {
    overflow: visible !important;
}

html body .topbar-glass .topbar-right .brand-small.fp-logo-no-chip {
    overflow: visible !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding-inline-start: 2px;
}

html body .topbar-glass .brand-small.fp-logo-no-chip > .fp-brand-logo,
html body .topbar-glass .brand-small.fp-logo-no-chip > img.fp-brand-logo {
    transform: none !important;
}

/* Mobile: hide desktop hamburger — logo takes that slot (home + all topbars) */
@media (max-width: 768px) {
    html body .topbar-glass .topbar-right .desktop-menu-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: 0 !important;
    }

    html body .topbar-glass .topbar-right .brand-small.fp-logo-no-chip {
        padding-inline-start: 0 !important;
        margin-inline-start: 0 !important;
    }

    html body .topbar-glass .brand-small.fp-logo-no-chip .fp-brand-logo--topbar,
    html body .topbar-glass .brand-small.fp-logo-no-chip .fp-brand-logo--home,
    html body .topbar-glass .brand-small.fp-logo-no-chip > img.fp-brand-logo {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }
}

@media (max-width: 640px) {
    .fp-brand-logo--subscription {
        width: 56px;
        height: 56px;
        max-width: 56px;
        max-height: 56px;
    }

    .fp-brand-logo--payment {
        width: min(300px, 84vw);
        max-width: min(300px, 84vw);
        max-height: 96px;
    }
}

/* Subscription header — bottom-aligned, grows upward (no bottom crop, no layout push) */
.fp-subx-logo .fp-brand-logo--payment {
    position: absolute;
    bottom: -58px;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 1000 / 640;
    object-fit: contain;
    object-position: bottom center;
    z-index: 2;
    filter: drop-shadow(0 16px 34px rgba(255, 215, 107, 0.16));
}

@media (min-width: 641px) {
    .fp-subx-logo .fp-brand-logo--payment {
        bottom: -64px;
    }
}

@media (max-width: 640px) {
    .fp-subx-logo .fp-brand-logo--payment {
        bottom: -48px;
    }
}

@media (max-width: 390px) {
    .fp-subx-logo .fp-brand-logo--payment {
        bottom: -42px;
    }

    html body .topbar-glass .brand-small.fp-logo-no-chip .fp-brand-logo--topbar,
    html body .topbar-glass .brand-small.fp-logo-no-chip .fp-brand-logo--home,
    html body .topbar-glass .brand-small.fp-logo-no-chip > img.fp-brand-logo {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }

    html body .fp-subx-page .fp-subx-top {
        min-height: 40px;
    }

    html body .fp-subx-page .fp-subx-logo {
        width: auto;
        max-width: calc(100% - 178px);
        height: 40px;
    }
}

.fp-subx-logo {
    pointer-events: auto;
}

.fp-subx-logo .fp-brand-logo {
    pointer-events: none;
}