/**
 * MUI Conflict Resolution CSS - Frontend Views
 *
 * This file contains CSS fixes for MUI components on frontend views
 * (Home, Catalogue, Product pages)
 *
 * Add any custom CSS overrides needed for frontend React apps here.
 */


body.com-nextextmanager #sp-main-body, body.com-nextextmanager #sp-component{
    padding: 0px;
}

body.com-nextextmanager #sp-main-body > div{
    max-width: 100%;
    padding-top: 0px;
}

/* Prevent header/footer flash before React apps render */
#nextextmanager-home-root,
#nextextmanager-catalogue-root,
#nextextmanager-cp-root,
#nextextmanager-product-root,
#nextextmanager-services-root {
    min-height: 100vh;
}

/* When using NextSoftware template, reduce min-height since template provides header/footer */
.nxt-main #nextextmanager-home-root,
.nxt-main #nextextmanager-catalogue-root,
.nxt-main #nextextmanager-product-root,
.nxt-main #nextextmanager-services-root,
.nxt-main #nextextmanager-news-root,
.nxt-main #nextextmanager-docs-root {
    min-height: calc(100vh - var(--nxt-header-height, 64px));
}

/* SEO skeleton content — visible until React mounts and replaces it */
[id$="-root"] > h1 {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.167;
    color: rgb(15, 23, 42);
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 8px;
}
[id$="-root"] > p {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgb(71, 85, 105);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Homepage hero skeleton — matches React hero section layout */
.nxt-seo-hero {
    min-height: calc(100vh - var(--nxt-header-height, 64px));
    display: flex;
    align-items: center;
    background: #fff;
    padding: 64px 24px 80px;
}
.nxt-seo-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.nxt-seo-badge {
    display: inline-block;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgb(30, 64, 175);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid rgb(191, 219, 254);
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 24px;
}
.nxt-seo-hero h1 {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.64px;
    color: rgb(15, 23, 42);
    margin: 0 0 16px;
    padding: 0;
    max-width: 600px;
}
.nxt-seo-hero p {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: rgb(71, 85, 105);
    line-height: 1.6;
    margin: 0 0 32px;
    padding: 0;
    max-width: 560px;
}
.nxt-seo-cta {
    display: inline-block;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgb(245, 158, 11) 0%, rgb(217, 119, 6) 100%);
    border-radius: 12px;
    padding: 12px 32px;
    text-decoration: none;
}
.nxt-seo-cta:hover {
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}

body.com-nextextmanager input[type=text]:not(.form-control),
body.com-nextextmanager input[type=email]:not(.form-control),
body.com-nextextmanager input[type=url]:not(.form-control), input[type=date]:not(.form-control),
body.com-nextextmanager input[type=password]:not(.form-control),
body.com-nextextmanager input[type=search]:not(.form-control),
body.com-nextextmanager input[type=tel]:not(.form-control),
body.com-nextextmanager input[type=number]:not(.form-control),
body.com-nextextmanager select:not(.form-select):not(.form-control){
    border: initial;
}