
/* ======================================================
   CHASEMYFOOD OWNER AUTH
   SHARED LOGIN + SIGNUP LAYOUT
====================================================== */


/* ======================================================
   DESKTOP
====================================================== */

@media (min-width: 951px) {

    /*
     * SAME LEFT / RIGHT SPLIT ON BOTH PAGES
     */

    .page {
        grid-template-columns:
            44% 56% !important;

        min-height:
            100vh;
    }


    /*
     * SAME BRAND SCALE
     */

    .brand.chasemyfood-real-brand img {
        width:
            180px !important;

        max-width:
            180px !important;

        height:
            auto !important;
    }


    /*
     * SAME DARK MARKETING PANEL
     */

    .visual-side {
        position:
            relative;

        display:
            flex !important;

        align-items:
            center !important;

        padding:
            32px 40px !important;

        box-sizing:
            border-box;
    }


    .visual-content {
        position:
            relative;

        width:
            100% !important;

        max-width:
            none !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        display:
            block !important;
    }


    /*
     * SMALL TOP BADGE
     */

    .visual-badge {
        display:
            inline-flex !important;

        align-items:
            center;

        width:
            auto !important;

        max-width:
            max-content !important;

        padding:
            7px 12px !important;

        margin:
            0 0 18px 0 !important;

        border-radius:
            20px;

        font-size:
            12px !important;

        line-height:
            1.2;

        white-space:
            nowrap;
    }


    /*
     * FREE BADGE
     */

    .owner-free-badge {
        position:
            absolute !important;

        top:
            0 !important;

        right:
            0 !important;

        width:
            180px !important;

        min-height:
            100px;

        padding:
            15px 16px !important;

        box-sizing:
            border-box;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        margin:
            0 !important;

        transform:
            rotate(2deg) !important;
    }


    .owner-free-badge span {
        font-size:
            12px !important;

        line-height:
            1.2;
    }


    .owner-free-badge strong {
        font-size:
            44px !important;

        line-height:
            .95 !important;

        margin:
            5px 0 7px !important;
    }


    .owner-free-badge small {
        font-size:
            10px !important;

        line-height:
            1.3 !important;

        max-width:
            145px;
    }


    /*
     * MAIN SALES HEADLINE
     */

    .visual-title,
    .owner-sales-title {
        display:
            flex !important;

        flex-direction:
            column;

        gap:
            0 !important;

        width:
            auto !important;

        max-width:
            650px !important;

        padding-right:
            200px !important;

        margin:
            0 0 15px 0 !important;

        font-size:
            42px !important;

        line-height:
            1.04 !important;

        font-weight:
            800;
    }


    .owner-sales-title span {
        display:
            block;
    }


    /*
     * INTRO TEXT
     */

    .visual-text,
    .owner-sales-text {
        width:
            auto !important;

        max-width:
            700px !important;

        margin:
            0 !important;

        font-size:
            15px !important;

        line-height:
            1.5 !important;
    }


    /*
     * ORANGE BENEFITS HEADING
     */

    .benefits-heading {
        display:
            block !important;

        width:
            100% !important;

        box-sizing:
            border-box;

        margin:
            20px 0 0 0 !important;

        padding:
            8px 12px !important;

        font-size:
            12px !important;

        line-height:
            1.2;

        border-radius:
            5px;
    }


    /*
     * EXACT SAME 4 x 2 GRID
     */

    .features.owner-benefits {
        display:
            grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        width:
            100% !important;

        margin:
            13px 0 0 0 !important;

        gap:
            12px !important;
    }


    /*
     * EXACT SAME CARD SIZE
     */

    .owner-benefits .feature {
        box-sizing:
            border-box;

        width:
            100%;

        min-width:
            0;

        height:
            112px !important;

        min-height:
            112px !important;

        padding:
            14px !important;

        display:
            flex !important;

        align-items:
            flex-start !important;

        gap:
            10px !important;

        border-radius:
            12px;
    }


    .owner-benefits .feature-icon {
        flex:
            0 0 28px;

        width:
            28px !important;

        margin:
            0 !important;

        font-size:
            22px !important;

        line-height:
            1.2;

        text-align:
            center;
    }


    .owner-benefits .feature-body {
        flex:
            1 1 auto;

        min-width:
            0;
    }


    .owner-benefits .feature-title {
        margin:
            0 0 5px 0 !important;

        font-size:
            14px !important;

        line-height:
            1.2 !important;

        font-weight:
            800;
    }


    .owner-benefits .feature-text {
        margin:
            0 !important;

        font-size:
            11px !important;

        line-height:
            1.42 !important;
    }


    /*
     * SAME TRUST ROW
     */

    .owner-trust-row {
        display:
            grid !important;

        grid-template-columns:
            repeat(3, 1fr) !important;

        width:
            100%;

        gap:
            8px !important;

        margin:
            15px 0 0 0 !important;
    }


    .owner-trust-row div {
        box-sizing:
            border-box;

        min-height:
            48px;

        padding:
            9px 8px !important;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;
    }


    .owner-trust-row strong {
        font-size:
            11px !important;

        line-height:
            1.2 !important;
    }


    .owner-trust-row span {
        margin-top:
            3px !important;

        font-size:
            9px !important;

        line-height:
            1.2 !important;
    }


    /*
     * LOGIN BOTTOM CTA
     */

    .owner-register-cta {
        box-sizing:
            border-box;

        width:
            100% !important;

        min-height:
            50px;

        margin:
            14px 0 0 0 !important;

        padding:
            13px 18px !important;

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        font-size:
            14px !important;

        line-height:
            1.2;

        border-radius:
            8px;
    }


    /*
     * SIGNUP BOTTOM CTA
     * SAME DIMENSIONS AS LOGIN CTA
     */

    .signup-ready-callout {
        box-sizing:
            border-box;

        width:
            100% !important;

        min-height:
            50px !important;

        margin:
            14px 0 0 0 !important;

        padding:
            8px 18px !important;

        display:
            flex !important;

        flex-direction:
            row !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            10px;

        border-radius:
            8px !important;

        background:
            #ff641e !important;

        border:
            none !important;
    }


    .signup-ready-callout strong {
        display:
            inline !important;

        margin:
            0 !important;

        color:
            #ffffff !important;

        font-size:
            12px !important;

        line-height:
            1.2 !important;
    }


    .signup-ready-callout span {
        display:
            inline !important;

        margin:
            0 !important;

        color:
            #ffffff !important;

        font-size:
            11px !important;

        line-height:
            1.2 !important;
    }


    /*
     * SAME TAGLINE
     */

    .owner-tagline {
        width:
            100%;

        margin:
            11px 0 0 0 !important;

        font-size:
            13px !important;

        line-height:
            1.2;

        text-align:
            center;
    }

}


/* ======================================================
   TABLET / MOBILE
====================================================== */

@media (max-width: 950px) {

    .page {
        grid-template-columns:
            1fr !important;
    }


    .visual-side {
        display:
            flex !important;

        padding:
            38px 24px !important;
    }


    .visual-content {
        width:
            100% !important;

        max-width:
            680px !important;

        margin:
            0 auto !important;
    }


    .owner-free-badge {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        width:
            180px !important;

        margin:
            0 0 18px 0 !important;

        transform:
            none !important;
    }


    .visual-title,
    .owner-sales-title {
        padding-right:
            0 !important;
    }


    .features.owner-benefits {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }


    .owner-benefits .feature {
        height:
            auto !important;

        min-height:
            105px !important;
    }

}


@media (max-width: 600px) {

    .brand.chasemyfood-real-brand img {
        width:
            145px !important;

        max-width:
            145px !important;
    }


    .visual-title,
    .owner-sales-title {
        font-size:
            35px !important;
    }


    .features.owner-benefits {
        grid-template-columns:
            1fr !important;
    }


    .signup-ready-callout {
        flex-direction:
            column !important;

        gap:
            3px;
    }

}



/* ======================================================
   AUTH TYPOGRAPHY COMFORT FIX
   LOGIN + SIGNUP
====================================================== */

@media (min-width: 951px) {

    .visual-badge {
        line-height: 1.35 !important;
    }

    .owner-free-badge span {
        line-height: 1.35 !important;
    }

    .owner-free-badge strong {
        line-height: 1.08 !important;
    }

    .owner-free-badge small {
        line-height: 1.45 !important;
    }

    .visual-title,
    .owner-sales-title {
        line-height: 1.13 !important;
    }

    .visual-text,
    .owner-sales-text {
        line-height: 1.62 !important;
    }

    .benefits-heading {
        line-height: 1.4 !important;
    }

    .owner-benefits .feature-title {
        line-height: 1.35 !important;
    }

    .owner-benefits .feature-text {
        line-height: 1.58 !important;
    }

    .owner-trust-row strong {
        line-height: 1.35 !important;
    }

    .owner-trust-row span {
        line-height: 1.4 !important;
    }

    .owner-register-cta {
        line-height: 1.4 !important;
    }

    .signup-ready-callout strong,
    .signup-ready-callout span {
        line-height: 1.4 !important;
    }

    .owner-tagline {
        line-height: 1.4 !important;
    }

}


/* ======================================================
   OWNER BENEFITS READABILITY
   LOGIN + SIGNUP
====================================================== */

@media (min-width: 951px) {

    .owner-benefits .feature {
        height: 126px !important;
        min-height: 126px !important;
        padding: 16px !important;
        gap: 12px !important;
    }

    .owner-benefits .feature-icon {
        flex-basis: 31px !important;
        width: 31px !important;
        font-size: 25px !important;
    }

    .owner-benefits .feature-title {
        font-size: 16px !important;
        line-height: 1.35 !important;
        margin-bottom: 7px !important;
    }

    .owner-benefits .feature-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .owner-trust-row div {
        min-height: 58px !important;
        padding: 10px 8px !important;
    }

    .owner-trust-row strong {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .owner-trust-row span {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }

}

