@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

:root {
    --bg: #080808;
    --panel: #111;
    --panel2: #171717;
    --text: #fff;
    --muted: #aaa;
    --red: #e10600;
    --red2: #ff2a22;
    --line: #272727;
    --ok: #23c16b;
    --radius: 22px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Montserrat, Arial, sans-serif;
    line-height: 1.55
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

.container {
    width: min(1180px, 92vw);
    margin: auto
}

.section {
    padding: 88px 0
}

.eyebrow {
    color: var(--red2);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase
}

.title {
    font-family: Oswald, Impact, sans-serif;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
    line-height: 1.2;
    text-transform: uppercase;
    margin: .4rem 0 1rem
}

.lead {
    color: #c7c7c7;
    font-size: 1.08rem;
    max-width: 740px
}

.muted {
    color: var(--muted)
}

.topbar {
    background: #fff;
    color: #111;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
    padding: 8px 12px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 8, 8, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff
}

.brand strong {
    font-family: Oswald, sans-serif;
    letter-spacing: .08em
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: .9rem;
    font-weight: 700
}

.nav-links a {
    color: #ddd
}

.nav-links a:hover,
.nav-links a.active {
    color: #fff
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 12px;
    padding: 13px 18px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s transform, .25s background, .25s border-color
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-red {
    background: var(--red);
    color: #fff
}

.btn-red:hover {
    background: var(--red2)
}

.btn-dark {
    background: #181818;
    border: 1px solid #2b2b2b;
    color: #fff
}

.btn-light {
    background: #fff;
    color: #111
}

.cart-pill {
    position: relative
}

.cart-count {
    position: absolute;
    right: -6px;
    top: -8px;
    background: var(--red);
    color: white;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    font-size: .7rem;
    display: grid;
    place-items: center
}

.menu-btn {
    display: none;
    background: transparent;
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 1.2rem
}

.hero {
    min-height: calc(100vh - 110px);
    display: grid;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 75% 45%, rgba(225, 6, 0, .22), transparent 27%), linear-gradient(135deg, #090909 0%, #0b0b0b 56%, #151515 100%)
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to right, black, transparent)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: 55px;
    position: relative;
    z-index: 1
}

.hero-copy {
    padding: 70px 0
}

.team-mike {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--red2);
    font-family: Oswald, Impact, sans-serif;
    font-size: clamp(4rem, 10vw, 8.2rem);
    font-weight: 700;
    line-height: .84;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-shadow: 0 0 26px rgba(225, 6, 0, .18)
}

.tesla-t {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: .7em;
    height: .92em;
    margin-right: .04em
}

.tesla-t:before {
    content: "";
    position: absolute;
    top: .07em;
    left: .06em;
    right: .06em;
    height: .12em;
    background: currentColor;
    border-radius: 80% 80% 30% 30%
}

.tesla-t:after {
    content: "";
    position: absolute;
    top: .12em;
    width: .11em;
    height: .62em;
    background: currentColor;
    border-radius: 0 0 50% 50%;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%)
}

.hero-subtitle {
    font-family: Oswald, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.45rem);
    text-transform: uppercase;
    margin: 22px 0 14px
}

.hero p {
    max-width: 650px;
    color: #c9c9c9
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 38px;
    padding-top: 25px;
    border-top: 1px solid #2b2b2b
}

.stat strong {
    display: block;
    font-size: 1.45rem
}

.stat span {
    font-size: .76rem;
    color: #8f8f8f;
    text-transform: uppercase;
    letter-spacing: .08em
}

.trainer-card {
    position: relative;
    min-height: 650px;
    border-radius: 36px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    background: #0d0d0d;
    box-shadow: var(--shadow)
}

.trainer-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.002)
}

.trainer-photo-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .04) 48%, rgba(0, 0, 0, .68) 100%)
}

.trainer-card .badge {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    background: rgba(8, 8, 8, .78);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px 20px;
    border-radius: 18px
}

.trainer-card .badge strong {
    font-size: 1.15rem
}

.trainer-card .badge p {
    font-size: .82rem;
    margin: .3rem 0 0;
    color: #aaa
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px
}

.card {
    background: linear-gradient(180deg, #151515, #0f0f0f);
    border: 1px solid #282828;
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .16)
}

/***
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(225, 6, 0, .13);
    color: #ff413a;
    font-size: 1.3rem;
    margin-bottom: 20px
}
***/
.home-page.card-icon {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #5b5b5b29;
    color: #ff413a;
    font-size: 1.3rem;
    margin: 0;
    margin-bottom: 20px;
}

.home-page.card-icon img {
    height: inherit;
    display: block;
}

.card h3 {
    margin: .2rem 0 .6rem
}

.card p {
    color: #a9a9a9;
    margin: 0
}

.step-number {
    font-family: Oswald, sans-serif;
    font-size: 4.2rem;
    color: #292929;
    line-height: .8
}

.evolution {
    background: #0d0d0d
}

.evolution-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 42px
}

.evolution-line:before {
    content: "";
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #333, var(--red), #333)
}

.evo-item {
    position: relative;
    text-align: center
}

.evo-dot {
    width: 18px;
    height: 18px;
    background: var(--red);
    border: 5px solid #0d0d0d;
    box-shadow: 0 0 0 2px var(--red);
    border-radius: 50%;
    margin: 20px auto 22px
}

.evo-item h4 {
    margin: .2rem 0;
    font-size: 20px;

}

.evo-item p {
    font-size: .85rem;
    color: #8f8f8f
}

.product-card {
    padding: 0;
    overflow: hidden
}

.product-visual {
    height: 210px;
    background: linear-gradient(140deg, #1f1f1f, #0a0a0a);
    display: flex;
    align-items: flex-end;
    padding: 22px;
    position: relative
}

.product-visual:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border: 28px solid rgba(225, 6, 0, .18);
    border-radius: 50%;
    right: -35px;
    top: -35px
}

.product-tag {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .68rem;
    font-weight: 900
}

.product-body {
    padding: 24px
}

.price {
    font-family: Oswald, sans-serif;
    font-size: 2rem
}

.price small {
    font-family: Montserrat;
    font-size: .75rem;
    color: #888
}

.product-actions {
    display: flex;
    gap: 9px;
    margin-top: 18px
}

.product-actions .btn {
    flex: 1
}

.plans .card {
    position: relative
}

.plans .featured {
    border-color: var(--red);
    transform: translateY(-8px)
}

.ribbon {
    position: absolute;
    right: 18px;
    top: 18px;
    background: var(--red);
    font-size: .68rem;
    font-weight: 900;
    padding: 6px 9px;
    border-radius: 99px
}

.features {
    list-style: none;
    padding: 0;
    margin: 22px 0
}

.features li {
    padding: 9px 0;
    border-bottom: 1px solid #242424;
    color: #c2c2c2;
    font-size: .9rem
}

.features li:before {
    content: "✓";
    color: var(--red2);
    font-weight: 900;
    margin-right: 10px
}

.partner-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.partner {
    border-radius: 22px;
    padding: 28px;
    border: 1px solid #2b2b2b
}

.partner.myprotein {
    background: linear-gradient(135deg, #0c0c0c, #1a1a1a)
}

.partner.fgm {
    background: linear-gradient(135deg, #171717, #0f0f0f)
}

.coupon {
    display: inline-flex;
    margin-top: 16px;
    border: 1px dashed #666;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 900
}

.coupon b {
    color: var(--red2)
}

.app-showcase {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
    align-items: center
}

.phone {
    width: min(340px, 82vw);
    margin: auto;
    border: 10px solid #242424;
    border-radius: 50px;
    background: #050505;
    padding: 12px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .45)
}

.phone-screen {
    border-radius: 36px;
    min-height: 610px;
    background: linear-gradient(#141414, #080808);
    padding: 22px;
    overflow: hidden
}

.app-logo {
    width: 72px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 20px
}

.app-menu {
    display: grid;
    gap: 10px;
    margin-top: 24px
}

.app-menu div {
    padding: 16px;
    border-radius: 14px;
    background: #151515;
    border: 1px solid #262626
}

.app-menu small {
    color: #888;
    display: block
}

.page-hero {
    padding: 75px 0 55px;
    border-bottom: 1px solid #202020;
    background: radial-gradient(circle at 80% 20%, rgba(225, 6, 0, .13), transparent 25%)
}

.breadcrumbs {
    font-size: .8rem;
    color: #8d8d8d;
    margin-bottom: 18px
}

.breadcrumbs span {
    color: #fff
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.field {
    display: grid;
    gap: 7px
}

.field label {
    font-size: .78rem;
    color: #aaa;
    font-weight: 700
}

.input,
.textarea,
.select {
    width: 100%;
    background: #111;
    border: 1px solid #2b2b2b;
    color: #fff;
    border-radius: 12px;
    padding: 14px 15px;
    outline: none
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: #666
}

.textarea {
    min-height: 140px;
    resize: vertical
}

.contact-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 26px
}

.contact-card {
    padding: 22px;
    border-bottom: 1px solid #262626
}

.contact-card:last-child {
    border: 0
}

.legal {
    max-width: 900px
}

.legal h2 {
    font-family: Oswald, sans-serif;
    margin-top: 2.2rem
}

.legal p,
.legal li {
    color: #b2b2b2
}

.notice {
    padding: 14px 16px;
    background: #151515;
    border-left: 4px solid var(--red);
    border-radius: 8px;
    color: #bcbcbc;
    font-size: .85rem
}

.cart-layout {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 28px
}

.cart-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid #252525
}

.cart-thumb {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: linear-gradient(135deg, #242424, #0c0c0c);
    display: grid;
    place-items: center;
    font-weight: 900
}

.cart-controls {
    display: flex;
    gap: 7px;
    align-items: center
}

.qty {
    width: 38px;
    height: 34px;
    background: #161616;
    border: 1px solid #303030;
    color: #fff;
    border-radius: 9px
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: #bbb
}

.summary-total {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    border-top: 1px solid #333;
    margin-top: 8px;
    padding-top: 16px
}

.empty {
    text-align: center;
    padding: 60px 20px;
    color: #999
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px
}

.stripe-box {
    padding: 16px;
    border-radius: 14px;
    background: #fafafa;
    color: #111
}

.stripe-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 800
}

.secure {
    font-size: .72rem;
    color: #666
}

.checkout-alert {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(35, 193, 107, .12);
    border: 1px solid rgba(35, 193, 107, .4);
    color: #83e7af
}

.footer {
    border-top: 1px solid #242424;
    padding: 52px 0 24px;
    background: #070707
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 35px
}

.footer h4 {
    margin: 0 0 14px
}

.footer a {
    display: block;
    color: #9f9f9f;
    font-size: .85rem;
    margin: 8px 0
}

.footer a:hover {
    color: #fff
}

.footer-brand img {
    width: 76px;
    background: #fff;
    border-radius: 50%;
    margin-bottom: 14px
}

.socials {
    display: flex;
    gap: 9px;
    margin-top: 16px
}

.socials a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #2a2a2a;
    display: grid;
    place-items: center;
    margin: 0;
    color: #fff
}

.copyright {
    border-top: 1px solid #202020;
    margin-top: 34px;
    padding-top: 22px;
    color: #777;
    font-size: .75rem;
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: .7s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@media(max-width:980px) {
    .nav-links {
        position: fixed;
        top: 109px;
        left: 4vw;
        right: 4vw;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: #111;
        border: 1px solid #2b2b2b;
        border-radius: 18px;
        padding: 16px
    }

    .nav-links.open {
        display: flex
    }

    .menu-btn {
        display: block
    }

    .nav-actions .btn-red {
        display: none
    }

    .hero-grid,
    .app-showcase,
    .contact-layout,
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr
    }

    .trainer-card {
        min-height: 500px
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .hero {
        min-height: auto
    }

    .hero-copy {
        padding-top: 55px
    }

    .trainer-card {
        margin-bottom: 55px
    }

    .plans .featured {
        transform: none
    }
}

@media(max-width:650px) {
    .trainer-photo {
        object-position: center 38%;
    }

    .section {
        padding: 65px 0
    }

    .grid-3,
    .grid-2,
    .partner-strip,
    .form-grid {
        grid-template-columns: 1fr
    }

    .evolution-line {
        grid-template-columns: 1fr 1fr
    }

    .evolution-line:before {
        display: none
    }

    .nav {
        height: 70px
    }

    .brand strong {
        display: none
    }

    .brand img {
        width: 47px;
        height: 47px
    }

    .nav-links {
        top: 101px
    }

    .team-mike {
        font-size: 3.9rem
    }

    .hero-stats {
        gap: 15px;
        flex-wrap: wrap
    }

    .trainer-card {
        min-height: 430px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .copyright {
        flex-direction: column
    }

    .cart-item {
        grid-template-columns: 56px 1fr
    }

    .cart-item>div:last-child {
        grid-column: 2
    }

    .product-actions {
        flex-direction: column
    }
}


/* ================================================================
   TEAM MIKE CMS COMPATIBILITY LAYER
   Mantiene classi legacy / Bootstrap del CMS senza modificare logica server.
   ================================================================ */
:root {
    --tm-red: #e10600;
    --tm-red-2: #ff241c;
    --tm-black: #070707;
    --tm-panel: #111;
    --tm-panel-2: #171717;
    --tm-line: #282828;
    --tm-white: #fff;
    --tm-muted: #a7a7a7;
    --primary-root-color: #070707;
    --secondary-root-color: #f4f4f4;
    --terziary-root-color: #e10600;
    --penta-root-color: #e10600
}

html {
    scroll-behavior: smooth
}

body.teammike-theme {
    background: #070707;
    color: #fff
}

.w3-main-page,
.teammike-main-page {
    min-height: 55vh;
    background: #070707
}

/* legacy utility compatibility */
a {
    text-decoration: none
}

.w3-noview {
    display: none
}

.w3-z-99 {
    z-index: 99
}

.w3-top-1 {
    top: 0
}

.w3-position-sticky {
    position: sticky
}

.w3-link-nostyle {
    color: inherit
}

.w3-li-nodot {
    list-style: none
}

.w3-ul-list {
    list-style: none;
    padding: 0;
    margin: 0
}

/* Legacy Vital pages reskinned to Team Mike */
.vital-home-hero,
.vital-home-section,
.vital-contact-page,
.vital-login-page,
.vital-error-page {
    --vital-dark: #070707 !important;
    --vital-light: #f4f4f4 !important;
    --vital-orange: #e10600 !important;
    --vital-green: #e10600 !important;
    --primary-root-color: #070707 !important;
    --secondary-root-color: #f4f4f4 !important;
    --terziary-root-color: #e10600 !important;
    --penta-root-color: #e10600 !important
}

.vital-home-hero,
.vital-login-page,
.vital-error-page,
.vital-contact-page {
    background: radial-gradient(circle at 85% 15%, rgba(225, 6, 0, .18), transparent 30rem), linear-gradient(135deg, #070707 0%, #111 55%, #050505 100%) !important
}

.vital-home-title span,
.vital-login-kicker,
.vital-contact-title strong,
.vital-section-kicker,
.vital-section-eyebrow,
.vital-error-title span {
    color: #e10600 !important
}

.vital-home-btn-primary,
.vital-login-submit,
.vital-btn-main,
.vital-error-btn.primary {
    background: #e10600 !important;
    color: #fff !important;
    border-color: #e10600 !important;
    box-shadow: none !important
}

.vital-home-btn-primary:hover,
.vital-login-submit:hover,
.vital-btn-main:hover {
    background: #ff241c !important;
    transform: translateY(-2px)
}

.vital-home-btn-soft,
.vital-btn-dark,
.vital-error-btn {
    background: #171717 !important;
    color: #fff !important;
    border: 1px solid #303030 !important
}

.vital-feature-card,
.vital-path-card,
.vital-contact-panel,
.vital-info-card,
.vital-login-card,
.vital-error-card,
.vital-final-cta,
.vital-orbit-card {
    background: #111 !important;
    border: 1px solid #282828 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    color: #fff !important
}

.vital-section-text,
.vital-home-lead,
.vital-login-text,
.vital-contact-lead,
.vital-error-text,
.vital-feature-card p,
.vital-path-card p,
.vital-info-card p {
    color: #a7a7a7 !important
}

.vital-feature-icon,
.vital-info-icon,
.vital-process-step,
.vital-error-code {
    background: rgba(225, 6, 0, .12) !important;
    color: #e10600 !important;
    border-color: rgba(225, 6, 0, .35) !important
}

.vital-kicker span,
.vital-eyebrow-line::before,
.vital-error-code::before {
    background: #e10600 !important;
    box-shadow: 0 0 0 .3rem rgba(225, 6, 0, .14) !important
}

.vital-login-brand-panel {
    background: linear-gradient(145deg, #111, #090909) !important
}

.vital-login-brand-panel::after {
    border-color: rgba(225, 6, 0, .16) !important
}

.vital-form-label {
    color: #fff !important
}

.vital-form-group input,
.vital-login-form input,
.vital-contact-form input,
.vital-contact-form select,
.vital-contact-form textarea {
    background: #0b0b0b !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important
}

.vital-contact-form input:focus,
.vital-contact-form select:focus,
.vital-contact-form textarea:focus,
.vital-login-form input:focus {
    border-color: #e10600 !important;
    box-shadow: 0 0 0 3px rgba(225, 6, 0, .12) !important
}

.vital-contact-section {
    background: #f4f4f4 !important;
    color: #111 !important
}

.vital-contact-section .vital-section-title {
    color: #111 !important
}

.vital-contact-section .vital-section-text {
    color: #626262 !important
}

.pages-editor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 4vw !important;
    color: #d7d7d7;
    background: #070707
}

.w3-top-page {
    padding: 65px 4vw 25px;
    background: #0d0d0d;
    border-bottom: 1px solid #242424
}

.w3-title-page {
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    font-weight: 900;
    letter-spacing: -.04em
}

.pages-editor h1,
.pages-editor h2,
.pages-editor h3 {
    color: #fff
}

.pages-editor a {
    color: #ff302a
}

/* generic forms/components in dynamic pages */
body.teammike-theme .form-control,
body.teammike-theme .form-select {
    background: #0c0c0c;
    color: #fff;
    border-color: #333
}

body.teammike-theme .form-control:focus,
body.teammike-theme .form-select:focus {
    border-color: #e10600;
    box-shadow: 0 0 0 .2rem rgba(225, 6, 0, .12)
}

/* admin identity layer */
body.tm-admin {
    background: #ececec
}

.tm-admin .navbar {
    background: #090909 !important;
    color: #fff !important
}

.tm-admin .navbar-brand {
    color: #fff !important
}

.tm-admin .primary-btn-panel {
    background: #e10600 !important;
    border-color: #e10600 !important
}

.tm-admin .left-slide-panel {
    background: #111 !important;
    color: #ddd !important;
    border-right: 1px solid #292929
}

.tm-admin .left-slide-panel a {
    color: #ddd
}

.tm-admin .left-slide-panel a:hover,
.tm-admin .left-slide-panel .active {
    background: #e10600 !important;
    color: #fff !important
}

.tm-admin .card.dashboard {
    border: 1px solid #ddd !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .05) !important
}

.tm-admin .btn-primary {
    background: #e10600 !important;
    border-color: #e10600 !important
}

.tm-admin .text-primary {
    color: #e10600 !important
}

.tm-admin .nav-tabs .nav-link.active {
    color: #e10600 !important;
    border-bottom-color: #e10600 !important
}

@media(max-width:980px) {
    .pages-editor {
        padding: 40px 20px !important
    }

    .w3-top-page {
        padding: 45px 20px 20px
    }
}














a.w3-bar-item.w3-button.w3-padding-large.w3-hide-small.w3-hover-white {
    padding: 6px;
}

a.w3-bar-item.w3-button.w3-padding-large.w3-white.w3-active {
    background: #ffffff29;
    padding: 6px;
    border-radius: 8px;
}

.title-card {
    color: var(--muted);
}





/* =========================================================
   TEAM MIKE — USER ACCOUNT MENU FRONTEND
   ========================================================= */


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar .container,
.navbar .container-fluid {
    flex-wrap: nowrap !important;
}

.navbar .navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}


/* =========================================================
   NASCONDI "AREA CLIENTI" QUANDO L'UTENTE È LOGGATO
   ========================================================= */

/*
 * Quando nella navbar è presente il menu dell'utente autenticato,
 * il CTA "Area clienti" diventa ridondante e viene nascosto.
 */
.navbar:has(.user-welcome-msg) .area-clienti-cta {
    display: none !important;
}


/* =========================================================
   USER WELCOME
   ========================================================= */

.user-welcome-msg {
    position: relative;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;
    padding: 4px 6px 4px 12px;

    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;

    background: rgba(255, 255, 255, .035);
    color: #fff;

    font-family: Montserrat, Arial, sans-serif;

    white-space: nowrap;

    transition:
        background-color .18s ease,
        border-color .18s ease;
}

.user-welcome-msg:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
}


/* =========================================================
   TESTO UTENTE
   ========================================================= */

.user-welcome-msg .welcome.message {
    margin: 0;

    color: #c8c8c8;

    font-family: Montserrat, Arial, sans-serif;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 500;

    white-space: nowrap;
}

.user-welcome-msg .welcome.message b {
    color: #fff;
    font-weight: 700;
}


/* =========================================================
   FRECCIA
   ========================================================= */

.user-welcome-msg .arrow-down-icon {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;

    fill: #8e8e8e;

    transition:
        fill .18s ease,
        transform .18s ease;
}

.user-welcome-msg:hover .arrow-down-icon {
    fill: #fff;
    transform: translateY(1px);
}


/* =========================================================
   LOGOUT
   ========================================================= */

.user-welcome-msg #ButtonUserLogout {
    min-height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin-left: 4px;
    padding: 0 10px !important;

    border: 1px solid rgba(239, 16, 16, .22) !important;
    border-radius: 8px !important;

    background: rgba(239, 16, 16, .08) !important;
    color: #ef1010 !important;

    font-family: Montserrat, Arial, sans-serif;
    font-size: .72rem !important;
    line-height: 1;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.user-welcome-msg #ButtonUserLogout:hover {
    transform: translateY(-1px);

    border-color: #ef1010 !important;
    background: #ef1010 !important;
    color: #fff !important;
}

.user-welcome-msg #ButtonUserLogout i {
    font-size: .78rem;
}


/* =========================================================
   DROPDOWN ACCOUNT
   ========================================================= */

.user-welcome-msg .w3-small-menu-hover {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 99999;

    width: 245px;
    padding: 7px;

    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;

    background:
        radial-gradient(circle at 100% 0%,
            rgba(239, 16, 16, .07),
            transparent 35%),
        #111214;

    color: #fff;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .32);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(7px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}


/* Apertura dropdown */

.user-welcome-msg:hover .w3-small-menu-hover,
.user-welcome-msg .w3-small-menu-hover:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* Ponte invisibile tra trigger e dropdown */

.user-welcome-msg .w3-small-menu-hover::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: -10px;

    height: 10px;
}


/* Accento superiore TEAM MIKE */

.user-welcome-msg .w3-small-menu-hover::after {
    content: "";

    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;

    height: 2px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(90deg,
            transparent,
            #ef1010,
            transparent);
}


/* =========================================================
   VOCI MENU
   ========================================================= */

.user-welcome-msg .w3-small-menu-hover .w3-list-item {
    margin: 0;
    padding: 0;
}

.user-welcome-msg .w3-small-menu-hover .w3-list-item+.w3-list-item {
    margin-top: 2px;
}

.user-welcome-msg .w3-small-menu-hover .w3-list-item>a {
    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border-radius: 8px !important;

    background: transparent;
    color: #c7c9ce;

    font-family: Montserrat, Arial, sans-serif;
    font-size: .77rem;
    line-height: 1.25;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.user-welcome-msg .w3-small-menu-hover .w3-list-item>a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);

    transform: translateX(2px);
}


/* Icone */

.user-welcome-msg .w3-small-menu-hover .w3-list-item>a svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    fill: #7d8086;

    transition: fill .16s ease;
}

.user-welcome-msg .w3-small-menu-hover .w3-list-item>a:hover svg {
    fill: #ef1010;
}

body.teammike-theme[data-page="home"] .btn-bottom-xy {
    position: absolute;
    bottom: 12px;
    width: 86%;
    margin: auto;
    left: 0;
    right: 0;
}

body.teammike-theme[data-page="home"] .card.reveal.visible {
    padding-bottom: 75px;
}

.vital-btn.vital-collapsable-btn {
    background: #181818;
    border: 1px solid #2b2b2b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 12px;
    padding: 13px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s transform, .25s background, .25s border-color;
}

.vital-btn.vital-collapsable-btn svg {
    fill: #ffffff;
    width: 22px;
}

.vital-div-collapsable {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .35s ease;
}
.vital-hide {
    display: none!important;
}

/* =========================================================
   TABLET / DESKTOP COMPATTO
   ========================================================= */

@media (min-width: 992px) and (max-width: 1450px) {

    .navbar .navbar-nav {
        gap: 2px !important;
    }

    .navbar .nav-link {
        padding-left: .72rem !important;
        padding-right: .72rem !important;
    }

    .user-welcome-msg {
        gap: 6px;
        padding-left: 10px;
    }

    .user-welcome-msg #ButtonUserLogout {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


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

@media (max-width: 767.98px) {

    .user-welcome-msg {
        gap: 6px;
        padding-left: 9px;
    }

    .user-welcome-msg .welcome.message {
        max-width: 135px;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-welcome-msg .w3-small-menu-hover {
        right: 0;

        width: min(245px,
                calc(100vw - 24px));
    }

    .user-welcome-msg #ButtonUserLogout {
        padding: 0 8px !important;
    }





    .trainer-card .badge {
        white-space: break-spaces;
        padding-bottom: 2px;
    }

    .trainer-card .badge strong {
        font-size: .97rem!important;
    }

    .trainer-card .badge p {
        font-size: .74rem!important;
    }
}