/* MIA_PUBLIC_UNIFIED_THEME_V1 */

:root{
    --mia-navy:#07131f;
    --mia-cyan:#00cfff;
    --mia-yellow:#ffeb00;
    --mia-cream:#fffdf1;
    --mia-ink:#071525;
}

html,
body{
    min-height:100%;
}

body{
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(0,207,255,.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(255,235,0,.08),
            transparent 18%
        ),
        radial-gradient(
            rgba(62,157,255,.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            #081827 0%,
            #07131f 48%,
            #040b12 100%
        ) !important;

    background-size:
        auto,
        auto,
        13px 13px,
        auto !important;

    color:#f4fbff;
}

/*
 * Normalize old EZ utility cards.
 */
body .card,
body .panel,
body [class*="login-card"],
body [class*="auth-card"],
body [class*="utility-card"],
body [class*="policy-card"],
body [class*="profile-card"],
body [class*="form-card"]{
    background:#fffdf1 !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    box-shadow:
        6px 6px 0 #00cfff !important;
}

body .card *,
body .panel *,
body [class*="login-card"] *,
body [class*="auth-card"] *,
body [class*="utility-card"] *,
body [class*="policy-card"] *,
body [class*="profile-card"] *,
body [class*="form-card"] *{
    color:#071525;
}

/* Comic title/hero areas */
body [class*="hero"],
body [class*="page-title"],
body [class*="profile-top"]{
    background:#00cfff !important;
    color:#071525 !important;

    border-bottom:
        4px solid #111 !important;
}

body [class*="hero"] *,
body [class*="page-title"] *,
body [class*="profile-top"] *{
    color:#071525 !important;
}

/* Forms */
body input,
body textarea,
body select{
    background:#fff !important;
    color:#071525 !important;

    border:
        2px solid #111 !important;
}

body button,
body input[type="submit"],
body .button,
body .btn-primary{
    background:#ffeb00 !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    box-shadow:
        3px 3px 0 #111 !important;

    font-weight:900 !important;
}

/* Tables */
body table{
    color:#071525;
}

body table th{
    background:#00cfff;
    color:#071525;
}

/* Never allow pale text on cream/white cards */
body .card p,
body .card label,
body .card strong,
body .card h1,
body .card h2,
body .card h3,
body .panel p,
body .panel label,
body .panel strong,
body .panel h1,
body .panel h2,
body .panel h3{
    color:#071525 !important;
}

/* Public profile */
body .profile-shell .card{
    background:#fffdf1 !important;
    color:#071525 !important;
}

body .profile-footer{
    color:#9fb1bf !important;
}



/* ==========================================================
   MIA_OFFER_CHECKOUT_THEME_V1
   ========================================================== */

body .ez-checkout-shell{
    width:min(1080px,calc(100% - 28px)) !important;
    margin:28px auto 50px !important;
}

body .ez-checkout-card{
    overflow:hidden !important;

    background:#fffdf1 !important;
    color:#071525 !important;

    border:4px solid #111 !important;
    border-radius:18px !important;

    box-shadow:
        8px 8px 0 #00cfff !important;
}

body .ez-checkout-accent{
    height:9px !important;

    background:
        linear-gradient(
            90deg,
            #00cfff 0 34%,
            #ffeb00 34% 67%,
            #a8ff38 67% 100%
        ) !important;
}

body .ez-checkout-head{
    padding:25px 24px !important;

    background:#00cfff !important;
    color:#071525 !important;

    border-bottom:4px solid #111 !important;
}

body .ez-checkout-head *,
body .ez-product-summary *,
body .ez-checkout-content *{
    color:#071525;
}

body .ez-checkout-brand{
    color:#071525 !important;
    font-weight:900 !important;
}

body .ez-product-summary{
    display:grid !important;
    gap:10px !important;

    margin-top:18px !important;
    padding:17px !important;

    background:#fffdf1 !important;
    color:#071525 !important;

    border:3px solid #111 !important;

    box-shadow:
        4px 4px 0 #ffeb00 !important;
}

body .ez-product-price{
    display:inline-flex !important;
    width:max-content !important;

    padding:9px 14px !important;

    background:#a8ff38 !important;
    color:#071525 !important;

    border:3px solid #111 !important;

    font-size:22px !important;
    font-weight:900 !important;
}

body .ez-checkout-content{
    padding:24px !important;

    background:#fffdf1 !important;
    color:#071525 !important;
}

body .ez-checkout-payment .payment-area{
    background:#ffffff !important;
    color:#071525 !important;

    border:3px solid #111 !important;
    border-radius:12px !important;
}

body .ez-checkout-payment .paymentbutton{
    background:#ffffff !important;
    color:#071525 !important;

    border:3px solid #111 !important;
    border-radius:10px !important;

    box-shadow:
        3px 3px 0 rgba(0,207,255,.55) !important;
}

body .ez-checkout-payment
.paymentbutton:hover{
    transform:translateY(-2px);
    box-shadow:
        4px 5px 0 #ffeb00 !important;
}

body .ez-checkout-payment
.paymentbutton>button{
    background:#ffeb00 !important;
    color:#071525 !important;

    border:3px solid #111 !important;

    font-weight:900 !important;
}

body .ez-checkout-payment .instructions{
    background:#eafaff !important;
    color:#071525 !important;

    border:3px solid #111 !important;
}

body .ez-checkout-payment .attention{
    background:#fff5b8 !important;
    color:#071525 !important;

    border:3px solid #111 !important;
}

body .ez-checkout-back{
    display:inline-flex !important;
    align-items:center !important;

    padding:10px 15px !important;

    background:#10283a !important;
    color:#ffffff !important;

    border:2px solid #269dff !important;
    border-radius:999px !important;

    font-weight:900 !important;
    text-decoration:none !important;
}

body .ez-checkout-skip a{
    color:#075f91 !important;
    font-weight:900 !important;
}


/* ==========================================================
   GENERIC PUBLIC UTILITY PAGE CLEANUP
   ========================================================== */

body > .container,
body .container > .row > [class*="col-"]{
    color:inherit;
}

body .panel,
body .well{
    background:#fffdf1 !important;
    color:#071525 !important;

    border:3px solid #111 !important;
    border-radius:14px !important;

    box-shadow:
        5px 5px 0 rgba(0,207,255,.65) !important;
}

body .panel *,
body .well *{
    color:#071525;
}

body .panel-heading{
    background:#00cfff !important;
    color:#071525 !important;

    border-bottom:
        3px solid #111 !important;

    font-weight:900 !important;
}

body .panel-heading *{
    color:#071525 !important;
}

body .alert{
    color:#071525 !important;
    border:3px solid #111 !important;
}

body .alert *{
    color:#071525 !important;
}



/* ==========================================================
   MIA_HOMEPAGE_BLUE_PUBLIC_BACKGROUND_V1
   Login / Logout / Profile / Utility pages
   ========================================================== */

html{
    background:#0b91d1 !important;
}

body{
    background-color:#0b91d1 !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.12) 1px,
            transparent 1.25px
        ),
        radial-gradient(
            circle at 95% 42%,
            transparent 0,
            transparent 170px,
            rgba(255,255,255,.12) 171px,
            rgba(255,255,255,.12) 240px,
            transparent 241px
        ),
        radial-gradient(
            circle at 5% 92%,
            rgba(0,56,96,.11) 0,
            rgba(0,56,96,.11) 180px,
            transparent 181px
        ),
        linear-gradient(
            135deg,
            #0788ca 0%,
            #149ee0 48%,
            #087fc1 100%
        ) !important;

    background-size:
        12px 12px,
        auto,
        auto,
        auto !important;

    background-attachment:
        fixed !important;
}


/*
 * Remove dark EZ-style background pseudo layers
 * where old public pages created them.
 */
body::before,
body::after{
    box-shadow:
        none !important;
}


/*
 * Login/logout cards remain dark so the logo and
 * yellow buttons continue to pop.
 */
body .login-card,
body .logout-card,
body [class*="login-box"],
body [class*="logout-box"],
body [class*="auth-card"]{
    background:
        linear-gradient(
            180deg,
            #0b3047,
            #071e2e
        ) !important;

    color:#ffffff !important;
}


/*
 * Preserve white text specifically on dark auth cards.
 */
body .login-card *,
body .logout-card *,
body [class*="login-box"] *,
body [class*="logout-box"] *,
body [class*="auth-card"] *{
    color:inherit;
}


/*
 * Inputs remain dark on the login card.
 */
body .login-card input,
body [class*="login-box"] input,
body [class*="auth-card"] input{
    background:#061723 !important;
    color:#ffffff !important;

    border:
        2px solid #1a5b7c !important;
}


/*
 * Yellow CTA buttons remain comic style.
 */
body .login-card button,
body .logout-card button,
body [class*="login-box"] button,
body [class*="logout-box"] button,
body [class*="auth-card"] button{
    background:#ffeb00 !important;
    color:#071525 !important;
}


/*
 * Profile and utility cards retain the light comic look.
 */
body .profile-card,
body .panel,
body .well,
body .card{
    background:#fffdf1 !important;
    color:#071525 !important;
}


/*
 * Public profile outer areas should show MIA blue,
 * not the previous dark/green atmosphere.
 */
body .profile-shell,
body .profile-page,
body [class*="public-profile"]{
    background:
        transparent !important;
}


@media(max-width:760px){

    body{
        background-image:
            radial-gradient(
                circle at 1px 1px,
                rgba(255,255,255,.10) 1px,
                transparent 1.25px
            ),
            linear-gradient(
                160deg,
                #0788ca 0%,
                #149ee0 55%,
                #087fc1 100%
            ) !important;

        background-size:
            12px 12px,
            auto !important;
    }
}



/* ==========================================================
   MIA_PUBLIC_MEMBER_FLOW_SHELL_V4

   Used by:
   - member login
   - logout
   - welcome / celebration
   - complete profile
   - public member profile
   ========================================================== */

html{
    background:#0b96d3 !important;
}

body{
    min-height:100vh !important;
    margin:0 !important;

    background-color:#0b96d3 !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.13) 1px,
            transparent 1.25px
        ),
        radial-gradient(
            circle at 90% 75%,
            transparent 0,
            transparent 170px,
            rgba(255,255,255,.10) 171px,
            rgba(255,255,255,.10) 240px,
            transparent 241px
        ),
        linear-gradient(
            135deg,
            #0788c8,
            #16a0df 52%,
            #087ebe
        ) !important;

    background-size:
        12px 12px,
        auto,
        auto !important;
}


/* Standalone flow pages fill the viewport */
body .login-shell,
body .logout-shell,
body .ez-wrap,
body .ez-celebration-shell,
body .complete-profile-shell,
body .profile-shell{
    width:100% !important;
    max-width:none !important;

    margin:0 auto !important;
    padding:
        0 18px 48px !important;

    background:
        transparent !important;
}


/* Existing logo block becomes the homepage masthead */
body .login-shell > .logo,
body .logout-shell > .logo{
    width:
        calc(100% + 36px) !important;

    min-height:92px !important;

    margin:
        0 -18px 24px !important;

    padding:
        13px 18px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background-color:#06111b !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(61,184,239,.10) 1px,
            transparent 1.2px
        ),
        linear-gradient(
            180deg,
            #081925,
            #040b11
        ) !important;

    background-size:
        12px 12px,
        auto !important;

    border-bottom:
        1px solid rgba(53,185,255,.22) !important;
}

body .login-shell > .logo img,
body .logout-shell > .logo img{
    width:
        min(245px,70vw) !important;

    max-height:
        64px !important;

    object-fit:
        contain !important;
}


/* Dark advertising strip */
body .login-shell .ad-area,
body .logout-shell .ad-area{
    width:
        min(1180px,100%) !important;

    margin:
        18px auto !important;

    padding:
        13px 16px !important;

    background:#071521 !important;
    color:#ffffff !important;

    border:
        1px solid #1a4057 !important;

    border-radius:
        14px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.18) !important;
}


/* Login / logout cards become cream comic panels */
body .login-card,
body .logout-card{
    width:
        min(620px,100%) !important;

    margin:
        22px auto !important;

    padding:
        28px !important;

    background:#fffcef !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    border-radius:
        15px !important;

    box-shadow:
        7px 7px 0 #ffdf16 !important;
}

body .login-card *,
body .logout-card *{
    color:#071525;
}

body .login-card input,
body .logout-card input{
    background:#ffffff !important;
    color:#071525 !important;

    border:
        2px solid #111 !important;
}


/* Yellow main action */
body .login-card button,
body .logout-card .login-button,
body .login-card .login-button{
    background:#ffdf16 !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    box-shadow:
        3px 3px 0 #111 !important;

    font-weight:900 !important;
}


/* Welcome / complete-profile general card shell */
body .ez-wrap > section,
body .ez-celebration-shell > section,
body .complete-profile-shell > section,
body > main > section.ez-card{
    width:
        min(880px,100%) !important;

    margin:
        26px auto !important;

    background:#fffcef !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    border-radius:
        15px !important;

    box-shadow:
        7px 7px 0 #ffdf16 !important;
}


/* ----------------------------------------------------------
   PUBLIC MEMBER PROFILE
   ---------------------------------------------------------- */

body .profile-top{
    min-height:88px !important;

    padding:
        13px max(
            18px,
            calc((100vw - 1180px)/2)
        ) !important;

    background-color:#06111b !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(61,184,239,.10) 1px,
            transparent 1.2px
        ),
        linear-gradient(
            180deg,
            #081925,
            #040b11
        ) !important;

    background-size:
        12px 12px,
        auto !important;

    border-bottom:
        1px solid rgba(53,185,255,.22) !important;
}

body .profile-top img{
    width:
        min(240px,55vw) !important;

    max-height:
        64px !important;

    object-fit:
        contain !important;
}

body .profile-shell{
    width:
        min(1180px,calc(100% - 30px))
        !important;

    margin:
        26px auto 50px !important;

    padding:0 !important;
}

body .profile-shell .card{
    background:#fffcef !important;
    color:#071525 !important;

    border:
        3px solid #111 !important;

    border-radius:
        14px !important;

    box-shadow:
        6px 6px 0 rgba(4,73,105,.32) !important;
}

body .profile-shell .card *{
    color:#071525;
}

body .profile-top .top-button{
    background:#0d2535 !important;
    color:#69cbff !important;

    border:
        1px solid #285875 !important;

    box-shadow:none !important;
}


/* Footer text on blue */
body .footer,
body .profile-footer,
body .ez-bottom{
    color:#e5f5ff !important;
}


/* Remove old green atmosphere */
body::before,
body::after{
    box-shadow:none !important;
}



/* ==========================================================
   MIA_PUBLIC_COMIC_INTERIOR_V5
   Login / Logout / Forgot / Complete Profile / Welcome
   ========================================================== */

html body{
    background-color:
        #139fdb !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.14) 1px,
            transparent 1.25px
        ),
        linear-gradient(
            135deg,
            #0788c9,
            #16a3df 53%,
            #087fc0
        ) !important;

    background-size:
        12px 12px,
        auto !important;
}


/* Shared public header from homepage */
html body
#ez-public-header{
    background-color:
        #139fdb !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.14) 1px,
            transparent 1.2px
        ),
        linear-gradient(
            90deg,
            #118fd0,
            #18a5df
        ) !important;

    background-size:
        12px 12px,
        auto !important;

    border-bottom:
        5px solid #ffdf19 !important;

    box-shadow:
        0 4px 0 #111 !important;
}

html body
#ez-public-header
.ez-public-login{
    background:
        #ffdf19 !important;

    color:
        #07131f !important;

    border:
        3px solid #111 !important;

    border-radius:
        8px !important;

    box-shadow:
        3px 3px 0 #111 !important;
}


/* Standalone login/logout mastheads */
html body
.login-shell > .logo,

html body
.logout-shell > .logo{
    background-color:
        #139fdb !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.14) 1px,
            transparent 1.2px
        ) !important;

    background-size:
        12px 12px !important;

    border-bottom:
        5px solid #ffdf19 !important;
}


/* Main auth / recovery / celebration cards */
html body
.login-card,

html body
.logout-card,

html body
.recovery-card,

html body
.forgot-card,

html body
.complete-card,

html body
.complete-profile-card,

html body
.celebration-card,

html body
.ez-celebration-card,

html body
[class*="recovery-card"],

html body
[class*="complete-card"]{
    background:
        #fffbed !important;

    color:
        #07131f !important;

    border:
        3px solid #111 !important;

    border-radius:
        14px !important;

    box-shadow:
        7px 7px 0 #ffdf19 !important;
}

html body
.login-card *,

html body
.logout-card *,

html body
.recovery-card *,

html body
.forgot-card *,

html body
.complete-card *,

html body
.complete-profile-card *,

html body
.celebration-card *,

html body
.ez-celebration-card *{
    color:
        #07131f;
}


/* Public profile cards */
html body
.profile-shell .card{
    background:
        #fffbed !important;

    color:
        #07131f !important;

    border:
        3px solid #111 !important;

    box-shadow:
        5px 5px 0
        rgba(4,74,106,.34) !important;
}

html body
.profile-shell .card *{
    color:
        #07131f;
}


/* Public forms */
html body input,
html body textarea,
html body select{
    background:
        #ffffff !important;

    color:
        #07131f !important;

    border:
        3px solid #111 !important;
}


/* Public CTA */
html body button,
html body input[type="submit"],
html body .login-button{
    background:
        #ffdf19 !important;

    color:
        #07131f !important;

    border:
        3px solid #111 !important;

    box-shadow:
        3px 3px 0 #111 !important;

    font-weight:
        900 !important;
}



/* ==========================================================
   MIA_PUBLIC_DARK_COMIC_CANVAS_V6
   ========================================================== */

html,
html body{
    background-color:#101719 !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.075) 1.15px,
            transparent 1.35px
        ),
        radial-gradient(
            circle at 0% 26%,
            rgba(0,151,210,.13) 0,
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 34%,
            rgba(95,123,39,.11) 0,
            transparent 33%
        ),
        linear-gradient(
            90deg,
            #071722 0%,
            #111718 52%,
            #171b12 100%
        ) !important;

    background-size:
        18px 18px,
        auto,
        auto,
        auto !important;

    background-attachment:
        fixed !important;
}


/* Homepage-style blue public masthead */
html body
#ez-public-header{
    background-color:#129bd7 !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.14) 1px,
            transparent 1.25px
        ),
        linear-gradient(
            90deg,
            #0c90cf,
            #17a4df
        ) !important;

    background-size:
        12px 12px,
        auto !important;

    border-bottom:
        5px solid #ffdf19 !important;

    box-shadow:
        0 4px 0 #111 !important;
}



/* ==========================================================
   MIA_PUBLIC_NEUTRAL_GRAY_CANVAS_V7
   ========================================================== */

html,
html body{
    background-color:#242424 !important;

    background-image:
        radial-gradient(
            circle at 2px 2px,
            rgba(255,255,255,.075) 1.15px,
            transparent 1.35px
        ),
        linear-gradient(
            180deg,
            #272727 0%,
            #222222 55%,
            #202020 100%
        ) !important;

    background-size:
        18px 18px,
        auto !important;

    background-attachment:
        fixed !important;
}


/* no green or blue ambient glows */
html body::before,
html body::after{
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
}


/* blue MIA public header stays */
html body
#ez-public-header{
    background-color:#149ed9 !important;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(255,255,255,.14) 1px,
            transparent 1.2px
        ),
        linear-gradient(
            90deg,
            #0c91cf,
            #18a5df
        ) !important;

    background-size:
        12px 12px,
        auto !important;

    border-bottom:
        5px solid #ffdf19 !important;
}