/* -----------------------------------------------------------------------------
   SignupStyle.css
   Page-specific overrides for the /signup flow views:
     - Signup.cshtml         (.signup-page)
     - Checkout.cshtml       (#stepperOverlay, .checkout-page not required)
     - ConfirmEmail.cshtml   (.confirm-email-page)
     - SignupError.cshtml    (.signup-error-page)
     - ThankYou.cshtml       (.thank-you-page)

   Loaded per-view via:
       @section styles { <link href="/css/SignupStyle.css?v=@(Configuration.Version)" rel="stylesheet" /> }

   NOTE: site-wide rules still live in /css/style.css (built from style.scss).
   Only signup-flow-specific overrides belong in this file. The Checkout iframe
   html/body scroll-lock rules remain inline in Checkout.cshtml because they
   would leak to every page if loaded site-wide.
   ----------------------------------------------------------------------------- */


/* =============================================================================
   Mobile container overrides (<=991.98px)
   -----------------------------------------------------------------------------
   The global `.container { min-width: 640px !important }` rule in style.css
   forces every container to be >=640px wide on phones and causes horizontal
   overflow. Each signup page carries a page-scoped class so we can neutralize
   that rule without affecting other pages. Desktop (>=992px) parity is
   preserved because these rules are scoped to <992px only.
   ============================================================================= */
@media (max-width: 991.98px) {
    .signup-page,
    .confirm-email-page,
    .signup-error-page,
    .thank-you-page {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ConfirmEmail: long, unbreakable email addresses must wrap on narrow
       viewports or they overflow the 280px hero-image column. */
    .confirm-email-page .fw-bold {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* =============================================================================
   Signup.cshtml — desktop (>=992px) width restores
   -----------------------------------------------------------------------------
   The mobile-first `.signup-page { max-width:100% !important }` above is
   restored to the original desktop widths here. `.w-lg-auto` is referenced in
   the markup (`w-100 w-lg-auto`) but not defined in this codebase's CSS, so we
   define it here scoped to the signup page so the "Create account" free-trial
   button restores to content-width at desktop.
   ============================================================================= */
@media (min-width: 992px) {
    .signup-page { max-width: 710px !important; }
    .signup-page.signup-with-plan { max-width: 1200px !important; }
    .signup-page .signup-form-inner { max-width: calc(100% - 40px); }
    .signup-page .signup-summary-col { padding-top: 3.5rem; }
    .signup-page .signup-free-terms-label { width: 400px; white-space: nowrap; }
    .signup-page .btn-primary.w-lg-auto { width: auto !important; }

    /* mosaic-foundations.css redefines Bootstrap's lg breakpoint to 1440px,
       so col-lg-7/col-lg-5 don't apply at common desktop widths (992-1439px).
       Force the signup two-column layout to activate at 992px. */
    .signup-page.signup-with-plan .row > .col-lg-7 {
        flex: 0 0 auto;
        width: 58.3333333%;
    }
    .signup-page.signup-with-plan .row > .col-lg-5 {
        flex: 0 0 auto;
        width: 41.6666667%;
    }

    /* Desktop CTAs: button + login link visible inside form column;
       mobile-only CTA block (below order summary) hidden. */
    .signup-page.signup-with-plan .signup-cta-desktop { display: flex !important; }
    .signup-page.signup-with-plan .signup-login-desktop { display: block !important; }
    .signup-page.signup-with-plan .signup-cta-mobile { display: none !important; }
}

/* Mobile/small (<992px): hide the in-form desktop CTA and login link.
   The mobile CTA block (signup-cta-mobile) renders below the order summary. */
@media (max-width: 991.98px) {
    .signup-page.signup-with-plan .signup-cta-desktop { display: none !important; }
    .signup-page.signup-with-plan .signup-login-desktop { display: none !important; }
}


/* =============================================================================
   Stepper responsive reflow (<=991.98px)
   -----------------------------------------------------------------------------
   Signup.cshtml stepper (.signup-stepper / .signup-stepper-item/-label/-connector)
   and Checkout.cshtml overlay stepper (#stepperOverlay / .cb-stepper-item/-label/
   -connector) share the same visual reflow: circle-above-label, all three steps
   on a single row, labels kept on one horizontal line (no wrap), connectors
   aligned to each circle's vertical center.

   The two stepper containers have different structural wrappers (Signup is a
   normal flex row; Checkout's #stepperOverlay is an absolutely-positioned
   overlay above the Chargebee iframe) so their container rules differ. The
   per-item rules are identical and combined via comma selectors.
   ============================================================================= */
@media (max-width: 991.98px) {
    /* Signup container */
    .signup-page .signup-stepper {
        align-items: flex-start !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        row-gap: 0 !important;
    }

    /* Checkout overlay container: widen to full width and strip the fixed
       22% left padding that centers the stepper at desktop. */
    #stepperOverlay {
        width: 100% !important;
        padding: 12px 8px 0 8px !important;
        justify-content: center !important;
    }
    #stepperOverlay > .d-flex { align-items: flex-start !important; }

    /* Shared item/label/connector rules */
    .signup-page .signup-stepper-item,
    #stepperOverlay .cb-stepper-item {
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        text-align: center;
    }
    .signup-page .signup-stepper-label,
    #stepperOverlay .cb-stepper-label {
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    /* Connectors: align to circle vertical center (circle = 22px, so top ~= 10px) */
    .signup-page .signup-stepper-connector,
    #stepperOverlay .cb-stepper-connector {
        align-self: flex-start !important;
        margin: 10px 6px 0 6px !important;
        width: 18px !important;
    }
}

/* Ultra-narrow fallback (<=380px, e.g. iPhone SE): if three nowrap labels +
   connectors don't fit on a single row, allow labels to wrap to 2 lines and
   shrink connectors further so nothing overflows. */
@media (max-width: 380px) {
    .signup-page .signup-stepper-label,
    #stepperOverlay .cb-stepper-label { white-space: normal !important; }
    .signup-page .signup-stepper-item,
    #stepperOverlay .cb-stepper-item { max-width: 80px; }
    .signup-page .signup-stepper-connector,
    #stepperOverlay .cb-stepper-connector { width: 12px !important; margin: 10px 4px 0 4px !important; }
    /* Signup-specific label font-size shrink (Checkout stepper keeps default). */
    .signup-page .signup-stepper-label { font-size: 0.85rem; }
}


/* =============================================================================
   Signup.cshtml — mobile form tweaks (<=767.98px)
   -----------------------------------------------------------------------------
   iOS Safari zooms the viewport when a user focuses an input with font-size
   <16px. Forcing 16px on the signup inputs prevents that jarring zoom.
   Primary CTA min-height enforces the 44px tap target required for AC #4.
   ============================================================================= */
@media (max-width: 767.98px) {
    .signup-page .form-control,
    .signup-page input[type="text"].form-control,
    .signup-page input[type="email"].form-control,
    .signup-page input[type="password"].form-control { font-size: 16px; }
    .signup-page .btn-primary { min-height: 44px; }
}


/* =============================================================================
   Signup.cshtml — button/checkbox reflow (<=991.98px only)
   -----------------------------------------------------------------------------
   Desktop parity is preserved: these rules are scoped to <992px so MDB's
   default button alignment and Bootstrap's float-left checkbox layout are
   retained on desktop.
   ============================================================================= */
@media (max-width: 991.98px) {
    /* Global `.btn` renders as `display:inline-flex; justify-content:space-between`
       (MDB's btn-primary styling). With a single text node inside, space-between
       pushes the label to the left edge of a full-width button. Center the label
       on signup CTAs. */
    .signup-page .btn-primary,
    .signup-page button.btn-primary,
    .signup-page a.btn-primary { justify-content: center !important; }

    /* Terms-and-conditions checkbox row:
       Bootstrap's .form-check uses `float:left` on the input + `display:inline-block`
       on the label, which on narrow viewports causes the label text to sit on the
       baseline of the checkbox ("below" it) with an awkward indent. Reflow as a
       flex row so checkbox and label are side-by-side, top-aligned. */
    .signup-page .form-check {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        padding-left: 0;
    }
    .signup-page .form-check .form-check-input {
        float: none;
        margin: 2px 0 0 0;
        flex: 0 0 auto;
    }
    .signup-page .form-check .form-check-label {
        display: block;
        /* flex:1 1 0 (not auto) so the base size starts at 0 and grow distributes
           remaining space to the label — otherwise flex-basis:auto uses max-content
           as base, sees overflow, and shrinks back to the longest word's width. */
        flex: 1 1 0;
        min-width: 0;
        /* Zero out margin AND padding — MDB's default .form-check-label has
           padding-top:8px which pushes the first line below the checkbox top
           (very visible when text wraps to 2+ lines). The input's margin-top
           above aligns the first glyph baseline with the checkbox. */
        margin: 0;
        padding: 0;
        line-height: 1.4;
    }
    /* Terms validation message sits outside .form-check so JS controls its
       visibility directly via $("#terms-feedback").css("display", ...).
       MDB's mosaic-foundations.css sets .invalid-feedback { position:absolute }
       which causes it to float over the checkbox label. Override to static so
       it flows in block layout below the .form-check row. */
    .signup-page #terms-feedback {
        position: static !important;
        margin-top: 8px;
    }
    /* MDB's .form-outline wrapper dynamically injects a .form-notch sibling
       (used for the outlined text-input border trick). On a checkbox row it
       serves no purpose and steals flex space from the label. */
    .signup-page .form-check .form-notch { display: none !important; }
}


/* =============================================================================
   Navbar brand — shared mobile tweak (<=767.98px)
   -----------------------------------------------------------------------------
   The shared _Navbar.cshtml .navbar-brand carries inline `ms-5 ps-5` (6rem
   left offset) which wastes phone width and can push the hamburger onto a
   second row. Zero the offset on narrow viewports across every signup view.
   (The hamburger toggle itself is enabled by _Navbar.cshtml wrapping the
   signup nav in <div class="collapse navbar-collapse" id="signupNavbarCollapse">.)
   ============================================================================= */
@media (max-width: 767.98px) {
    header .navbar-brand {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-right: auto !important;
    }
}


/* =============================================================================
   SignupError.cshtml — mobile tap target (<=767.98px)
   -----------------------------------------------------------------------------
   The external-link icon is the only actionable element on this page; ensure
   it meets the 44px minimum tap target on mobile (AC #2).
   ============================================================================= */
@media (max-width: 767.98px) {
    .signup-error-page a[target="_blank"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0 8px;
    }
}


/* =============================================================================
   ConfirmEmail.cshtml — hero image responsive scaling
   -----------------------------------------------------------------------------
   Full size (280px) at >=992px; at narrower widths scale down smoothly toward
   210px (25% smaller) so the image doesn't dominate small screens. clamp()
   with a viewport-width middle term interpolates continuously between
   breakpoints rather than snapping. !important overrides the inline
   width:280px on the <img>.
   ============================================================================= */
.confirm-email-page .confirm-email-hero {
    width: clamp(210px, calc(210px + (100vw - 430px) * 0.125), 280px) !important;
}