/* =============================================================================
   File: auth-panels.css
   Description: The combined sign-in / register page — two cards side by side.

   Extracted from the two @@section Styles blocks that Login.cshtml and
   Register.cshtml each carried. They were near-identical copies, and both pages
   now render both cards, so keeping one stylesheet is the only way the two stay
   in step. It also means the CSS is cacheable instead of inlined twice.

   Everything the cards themselves need (.fantasy-form-card, .fantasy-form-header,
   .divider-text, .btn-social-*, .btn-quest) is already global in
   fantasy-marketing.css — only the layout, the social row and the hero tweaks
   live here.
============================================================================= */

/* Full-page hero background (extends .fantasy-hero from fantasy-marketing.css).
   min-height, not height: with two stacked cards on a phone the content is
   taller than the viewport and a fixed height would clip it. */
.auth-hero {
    min-height: calc(100vh - var(--navbar-height, 62px));
    padding: 3rem 1rem;
    justify-content: center;
}

/* Extra star-like sparkle dots beyond what .fantasy-hero provides. */
.auth-hero::after {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 70% 50%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 85% 30%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1.5px 1.5px at 20% 85%, rgba(201, 168, 76, 0.3), transparent),
        radial-gradient(1px 1px at 60% 90%, rgba(255, 255, 255, 0.2), transparent);
}

/* =============================================================================
   The two-card layout
============================================================================= */

/* Grid rather than flex so both cards share a row height without either being
   stretched by the other's content. align-items:start keeps a short card from
   growing to match the tall registration form. */
.auth-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .auth-panels {
        /* Registration is wider: it has seven fields to sign-in's two, and it is
           the path most people arriving from a Subscribe button need. */
        grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
        max-width: 1040px;
        gap: 2rem;
    }
}

.auth-panels .auth-card {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* The card that isn't being acted on is dialled back slightly — enough to show
   which one the page is about, not enough to look disabled. Both are fully
   usable, so this stays subtle: no opacity on the controls themselves. */
.auth-panels .auth-card.is-secondary {
    box-shadow: none;
}

.auth-panels .auth-card.is-secondary .fantasy-form-header h2 {
    font-size: 1.35rem;
}

/* Ordering: on a narrow screen the emphasised card comes first, since it is the
   one the visitor is most likely to want and scrolling past a form you don't
   need is the worst of the two options. */
@media (max-width: 991.98px) {
    .auth-panels .auth-card.is-primary { order: 1; }
    .auth-panels .auth-card.is-secondary { order: 2; }
}

/* =============================================================================
   Bits the cards need that aren't global
============================================================================= */

.social-buttons {
    display: flex;
    gap: 0.75rem;
}

.social-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm, 0.25rem);
}

.auth-card .forgot-link {
    font-size: 0.85rem;
    text-decoration: none;
}

.auth-card .forgot-link:hover {
    text-decoration: underline;
}

/* Alerts inside the parchment card need the card's own text colour rather than
   Bootstrap's, which assumes a light page background. */
.auth-card .alert {
    font-size: 0.9rem;
    padding: 0.65rem 0.9rem;
}

.auth-card .form-text {
    font-size: 0.8rem;
}

/* Labels, help text and validation messages read left-aligned. They were centred,
   because .fantasy-hero sets text-align:center and .fantasy-form-body never reset
   it — which was survivable on the old single-card page and looks plainly wrong
   with two dense forms side by side. The header keeps its centring.

   Scoped to .auth-card rather than fixed on .fantasy-form-body globally, since the
   other pages using that card (forgot-password, reset-password) aren't verified
   here; they likely want the same treatment. */
.auth-card .fantasy-form-body {
    text-align: left;
}

.auth-card .fantasy-form-body .divider-text,
.auth-card .fantasy-form-body .d-grid {
    text-align: center;
}