/* MIA_PUBLIC_COMIC_SHELL_V1 */

:root {
    --mia-navy:#06121c;
    --mia-navy2:#0a1c29;
    --mia-panel:#102a3b;
    --mia-panel2:#0c2130;

    --mia-blue:#00a9e8;
    --mia-cyan:#43d6ff;
    --mia-yellow:#ffd91a;
    --mia-lime:#9cff18;
    --mia-orange:#ff981a;

    --mia-white:#ffffff;
    --mia-ink:#071018;
    --mia-muted:#9fb3c0;
}

html,
body.mia-public {
    margin:0;
    min-height:100%;
}

body.mia-public {
    color:var(--mia-white);
    background:
        radial-gradient(
            circle at 10% 4%,
            rgba(0,169,232,.22),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(255,217,26,.09),
            transparent 23%
        ),
        radial-gradient(
            circle at 70% 95%,
            rgba(156,255,24,.06),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #07131d,
            #040a10 62%,
            #06121c
        ) !important;
    font-family:Arial,Helvetica,sans-serif;
}

/*
 * subtle comic halftone texture
 */
body.mia-public::before {
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.18;
    background-image:
        radial-gradient(
            rgba(255,255,255,.22) 1px,
            transparent 1px
        );
    background-size:8px 8px;
    content:"";
}

body.mia-public a {
    transition:
        transform .12s ease,
        filter .12s ease,
        background .12s ease;
}

/* ----------------------------------------------------------
   SHARED LOGO
---------------------------------------------------------- */

.mia-public-logo {
    margin:12px auto 13px;
    text-align:center;
}

.mia-public-logo img {
    display:inline-block;
    width:min(360px,88vw);
    height:auto;
    filter:
        drop-shadow(0 5px 0 rgba(0,0,0,.45))
        drop-shadow(0 0 12px rgba(0,183,255,.16));
}

/* ----------------------------------------------------------
   SHARED CARDS
---------------------------------------------------------- */

body.mia-public .login-box,
body.mia-public .logout-card,
body.mia-public .ez-card,
body.mia-public .card {
    border:3px solid var(--mia-ink) !important;
    border-radius:8px !important;
    background:
        linear-gradient(
            145deg,
            rgba(18,48,67,.98),
            rgba(8,25,37,.99)
        ) !important;
    box-shadow:
        7px 7px 0 rgba(0,0,0,.48),
        0 0 0 1px rgba(67,214,255,.16) inset !important;
}

/* ----------------------------------------------------------
   COMIC HEADINGS
---------------------------------------------------------- */

body.mia-public h1,
body.mia-public h2,
body.mia-public h3 {
    font-weight:1000 !important;
    letter-spacing:-.025em;
}

body.mia-public h1 {
    color:#fff !important;
    text-shadow:
        2px 2px 0 #071018,
        4px 4px 0 rgba(0,0,0,.3);
}

body.mia-public .brand,
body.mia-public .ez-green,
body.mia-public .mia-eyebrow {
    color:var(--mia-yellow) !important;
    font-weight:1000 !important;
}

/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

body.mia-public .button,
body.mia-public .login-button,
body.mia-public .ez-cta,
body.mia-public .top-button,
body.mia-public button[type="submit"],
body.mia-public input[type="submit"] {
    border:3px solid var(--mia-ink) !important;
    border-radius:6px !important;
    background:
        linear-gradient(
            180deg,
            #ffe94b,
            var(--mia-yellow)
        ) !important;
    color:#071018 !important;
    font-weight:1000 !important;
    text-transform:uppercase;
    box-shadow:
        4px 4px 0 rgba(0,0,0,.45) !important;
}

body.mia-public .button:hover,
body.mia-public .login-button:hover,
body.mia-public .ez-cta:hover,
body.mia-public .top-button:hover,
body.mia-public button[type="submit"]:hover,
body.mia-public input[type="submit"]:hover {
    filter:brightness(1.05);
    transform:translate(-1px,-1px);
}

/* ----------------------------------------------------------
   FORMS
---------------------------------------------------------- */

body.mia-public input[type="text"],
body.mia-public input[type="email"],
body.mia-public input[type="password"],
body.mia-public input[type="url"],
body.mia-public textarea,
body.mia-public select,
body.mia-public .input {
    border:2px solid #244b61 !important;
    border-radius:6px !important;
    background:#07141e !important;
    color:#fff !important;
    box-shadow:none !important;
}

body.mia-public input:focus,
body.mia-public textarea:focus,
body.mia-public select:focus,
body.mia-public .input:focus {
    border-color:var(--mia-cyan) !important;
    outline:0 !important;
    box-shadow:
        0 0 0 3px rgba(67,214,255,.14) !important;
}

/* ----------------------------------------------------------
   LOGIN
---------------------------------------------------------- */

body.mia-public.mia-login .login-shell {
    width:min(1180px,calc(100% - 24px));
}

body.mia-public.mia-login .login-box {
    width:min(560px,100%);
}

body.mia-public.mia-login .login-accent {
    height:8px;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--mia-blue) 0 18px,
            var(--mia-yellow) 18px 36px,
            var(--mia-lime) 36px 54px
        ) !important;
}

body.mia-public.mia-login .login-content {
    padding:26px 34px;
}

body.mia-public.mia-login .subtitle,
body.mia-public.mia-login .help {
    color:var(--mia-muted) !important;
}

body.mia-public.mia-login .help a {
    color:var(--mia-cyan) !important;
}

/* Hide old standalone EZ login ad layout.
   We will replace it with the shared network strip next. */
body.mia-public.mia-login .login-ads {
    display:none !important;
}

/* ----------------------------------------------------------
   LOGOUT
---------------------------------------------------------- */

body.mia-public.mia-logout .logout-shell {
    width:min(1180px,calc(100% - 24px));
}

body.mia-public.mia-logout .logout-card {
    width:min(680px,100%);
    padding:30px;
}

body.mia-public.mia-logout .logout-icon {
    width:70px;
    height:70px;
    border:3px solid var(--mia-ink);
    border-radius:50%;
    background:var(--mia-lime) !important;
    color:#102000 !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.4);
}

/* old pre-network logout placements */
body.mia-public.mia-logout .ad-area {
    display:none !important;
}

/* ----------------------------------------------------------
   CELEBRATION
---------------------------------------------------------- */

body.mia-public.mia-celebration .ez-shell,
body.mia-public.mia-celebration main {
    width:min(1180px,calc(100% - 24px));
    margin-left:auto;
    margin-right:auto;
}

body.mia-public.mia-celebration .ez-card {
    overflow:hidden;
}

body.mia-public.mia-celebration .ez-step {
    border:3px solid var(--mia-ink) !important;
    border-radius:7px !important;
    background:#f8fcff !important;
    color:#071018 !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.3) !important;
}

body.mia-public.mia-celebration .ez-step-num {
    border:3px solid var(--mia-ink) !important;
    background:var(--mia-yellow) !important;
    color:#071018 !important;
    font-weight:1000 !important;
}

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

body.mia-public.mia-profile .profile-top {
    min-height:78px;
    padding:10px 24px;
    border-bottom:4px solid var(--mia-blue) !important;
    background:#06131d !important;
    box-shadow:0 5px 0 rgba(0,0,0,.35);
}

body.mia-public.mia-profile .profile-top img {
    width:min(330px,55vw) !important;
}

body.mia-public.mia-profile .profile-shell {
    width:min(1280px,calc(100% - 24px)) !important;
    margin-top:24px;
}

body.mia-public.mia-profile .profile-grid {
    grid-template-columns:minmax(0,1fr) 330px;
}

body.mia-public.mia-profile .identity {
    border-top:7px solid var(--mia-yellow) !important;
}

body.mia-public.mia-profile .member-level-badge {
    border:3px solid var(--mia-ink);
    clip-path:none !important;
    border-radius:8px;
    background:
        linear-gradient(
            145deg,
            var(--mia-yellow),
            var(--mia-orange)
        ) !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.4);
}

body.mia-public.mia-profile .member-medallion,
body.mia-public.mia-profile .featured-photo {
    border-color:var(--mia-yellow) !important;
}

body.mia-public.mia-profile .level-pill {
    border:2px solid #285368;
    border-radius:5px !important;
    background:#092130 !important;
    color:var(--mia-cyan) !important;
}

body.mia-public.mia-profile .section-card h2::after,
body.mia-public.mia-profile .side-card h2::after {
    height:5px !important;
    background:var(--mia-yellow) !important;
}

body.mia-public.mia-profile .snapshot,
body.mia-public.mia-profile .program-link,
body.mia-public.mia-profile .featured-item {
    border:2px solid #24495d !important;
    border-radius:6px !important;
    background:#071924 !important;
}

body.mia-public.mia-profile .program-link:hover,
body.mia-public.mia-profile .featured-item:hover {
    border-color:var(--mia-yellow) !important;
}

body.mia-public.mia-profile .profile-footer {
    color:#7f98a8;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:760px) {

    .mia-public-logo img {
        width:min(300px,88vw);
    }

    body.mia-public.mia-profile .profile-grid {
        grid-template-columns:1fr;
    }

    body.mia-public.mia-login .login-content {
        padding:20px 18px;
    }

    body.mia-public.mia-logout .logout-card {
        padding:23px 17px;
    }
}

/* MIA_COMPLETE_PROFILE_COMIC_V1 */

body.mia-public.mia-complete-profile {
    display:block !important;
    min-height:100vh;
    padding:22px 12px 45px !important;
}

body.mia-public.mia-complete-profile .card {
    width:min(780px,100%) !important;
    margin:18px auto 0;
    overflow:hidden;
    border:4px solid var(--mia-ink) !important;
    border-radius:8px !important;
    background:
        linear-gradient(
            145deg,
            rgba(17,47,66,.99),
            rgba(6,20,30,.99)
        ) !important;
    box-shadow:
        9px 9px 0 rgba(0,0,0,.5) !important;
}

body.mia-public.mia-complete-profile .accent {
    height:9px !important;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--mia-blue) 0 22px,
            var(--mia-yellow) 22px 44px,
            var(--mia-lime) 44px 66px
        ) !important;
}

body.mia-public.mia-complete-profile .inside {
    padding:30px 38px 35px !important;
}

body.mia-public.mia-complete-profile .mia-complete-logo {
    margin:0 auto 17px !important;
    text-align:center;
}

body.mia-public.mia-complete-profile .mia-complete-logo img {
    display:inline-block;
    width:min(390px,88%);
    height:auto;
    filter:
        drop-shadow(0 5px 0 rgba(0,0,0,.45));
}

body.mia-public.mia-complete-profile .step {
    display:table;
    margin:0 auto 10px !important;
    padding:5px 10px;
    border:2px solid var(--mia-ink);
    border-radius:4px;
    background:var(--mia-yellow);
    color:#071018 !important;
    font-size:10px !important;
    font-weight:1000 !important;
    box-shadow:3px 3px 0 rgba(0,0,0,.34);
}

body.mia-public.mia-complete-profile h1 {
    margin-bottom:12px !important;
    font-size:clamp(30px,5vw,48px) !important;
}

body.mia-public.mia-complete-profile .lead {
    color:#bbceda !important;
    font-size:14px;
}

body.mia-public.mia-complete-profile label {
    color:#fff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

body.mia-public.mia-complete-profile input {
    min-height:48px;
    margin-bottom:16px !important;
}

body.mia-public.mia-complete-profile button {
    min-height:54px !important;
    font-size:15px !important;
}

body.mia-public.mia-complete-profile .error {
    border:2px solid #8f2121 !important;
    border-left:7px solid #ff5555 !important;
    border-radius:5px !important;
    background:#351316 !important;
}

body.mia-public.mia-complete-profile .field-help,
body.mia-public.mia-complete-profile .note {
    color:#91a8b6 !important;
}

@media(max-width:600px) {
    body.mia-public.mia-complete-profile {
        padding:10px 8px 28px !important;
    }

    body.mia-public.mia-complete-profile .inside {
        padding:22px 16px 25px !important;
    }
}

/* MIA_PUBLIC_UTILITY_COMIC_V2 */

body.mia-public.mia-utility {
    min-height:100vh;
}

/*
 * Existing site header/footer remain intact.
 * This layer makes the center page content match
 * the My Instant Ads comic-book shell.
 */

body.mia-public.mia-utility .access-card,
body.mia-public.mia-utility .forgot-card,
body.mia-public.mia-utility .reset-card,
body.mia-public.mia-utility .verify-card,
body.mia-public.mia-utility .policy-shell,
body.mia-public.mia-utility .policy-card,
body.mia-public.mia-utility .signup-card,
body.mia-public.mia-utility .card {
    border:4px solid #071018 !important;
    border-radius:8px !important;

    box-shadow:
        8px 8px 0 rgba(0,0,0,.45) !important;
}

/*
 * Comic top accent used on utility cards.
 */
body.mia-public.mia-utility .access-card::before,
body.mia-public.mia-utility .forgot-card::before,
body.mia-public.mia-utility .reset-card::before,
body.mia-public.mia-utility .verify-card::before,
body.mia-public.mia-utility .signup-card::before {
    display:block;
    height:7px;

    background:
        linear-gradient(
            90deg,
            #00b8ef,
            #62e445,
            #b2ff00,
            #ffd51a,
            #ff981a
        );

    content:"";
}

/*
 * Eyebrow/pill labels.
 */
body.mia-public.mia-utility .eyebrow,
body.mia-public.mia-utility .badge,
body.mia-public.mia-utility .secure-label,
body.mia-public.mia-policy .policy-eyebrow {
    border:2px solid #24485b !important;
    border-radius:5px !important;

    background:#092334 !important;
    color:#43d6ff !important;

    font-weight:1000 !important;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/*
 * Main buttons use comic yellow rather than
 * legacy lime/green.
 */
body.mia-public.mia-utility button,
body.mia-public.mia-utility input[type="submit"],
body.mia-public.mia-utility .primary-button,
body.mia-public.mia-utility .btn-primary {
    border:3px solid #071018 !important;
    border-radius:6px !important;

    background:#ffd91a !important;
    color:#071018 !important;

    font-weight:1000 !important;

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

/*
 * Secondary outline buttons.
 */
body.mia-public.mia-utility .secondary-button,
body.mia-public.mia-utility .btn-secondary {
    border:3px solid #24495d !important;
    border-radius:6px !important;

    background:#071923 !important;
    color:#fff !important;
}

/*
 * Policy page.
 */
body.mia-public.mia-policy .policy-shell,
body.mia-public.mia-policy .policy-card {
    overflow:hidden;
}

body.mia-public.mia-policy .policy-tabs a {
    border:2px solid #29495c !important;
    border-radius:5px !important;
}

body.mia-public.mia-policy .policy-tabs a:hover,
body.mia-public.mia-policy .policy-tabs a.active {
    border-color:#ffd91a !important;
    background:#ffd91a !important;
    color:#071018 !important;
}

body.mia-public.mia-policy h2,
body.mia-public.mia-policy h3 {
    color:#9cff18 !important;
}

body.mia-public.mia-policy .notice,
body.mia-public.mia-policy .important-notice {
    border:2px solid #ff981a !important;
    border-left:7px solid #ff981a !important;
    border-radius:6px !important;
}

/*
 * Account recovery/access links.
 */
body.mia-public.mia-forgot a,
body.mia-public.mia-access-denied a {
    font-weight:900;
}

/*
 * Mobile.
 */
@media(max-width:700px) {

    body.mia-public.mia-utility .access-card,
    body.mia-public.mia-utility .forgot-card,
    body.mia-public.mia-utility .reset-card,
    body.mia-public.mia-utility .verify-card,
    body.mia-public.mia-utility .signup-card {
        width:calc(100% - 18px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}