/* 1xBet typography + content layout fix for Bludit landings */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Condensed:wght@300;400;700&display=swap');

:root {
    --1x-font: "Roboto", sans-serif;
    --1x-font-condensed: "Roboto Condensed", "Roboto", sans-serif;
    --1x-text: #ffffff;
    --1x-text-muted: #b7c4d4;
    --1x-link: #6db3ff;
    --1x-link-hover: #9dceff;
    --1x-accent: #7eac2f;
    --1x-panel: #1a3350;
    --1x-panel-soft: rgba(0, 0, 0, 0.18);
    --1x-measure: 52rem; /* ~832px readable line length */
}

html,
body {
    font-family: var(--1x-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Layout: keep wrap centered, content fills it ── */
.front-container {
    width: 100%;
    overflow-x: hidden;
}

.front-container > .wrap {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.content-area {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px !important;
    background: var(--1x-panel) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.content-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--1x-accent) 0%, #1d4268 100%);
    z-index: 1;
}

.content-area .home-content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 28px 32px 36px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.content-area article {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

.content-area .page-content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--1x-font) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: var(--1x-text) !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* ── Typography ── */
.content-area,
.content-area .home-content,
.content-area .page-content,
.content-area article {
    font-family: var(--1x-font) !important;
    color: var(--1x-text) !important;
}

.content-area h1,
.content-area .page-content h1,
.content-area article > h1,
.content-area .home-content > h1 {
    font-family: var(--1x-font) !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
    color: var(--1x-text) !important;
    margin: 0 0 16px !important;
    padding: 0 0 14px !important;
    border-bottom: 2px solid rgba(126, 172, 47, 0.35) !important;
    position: relative;
}

.content-area h1::after,
.content-area .page-content h1::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--1x-accent);
}

.content-area h2,
.content-area .page-content h2 {
    font-family: var(--1x-font) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: var(--1x-text) !important;
    margin: 28px 0 12px !important;
    padding: 0 0 0 14px !important;
    border-left: 3px solid var(--1x-accent) !important;
}

.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6,
.content-area .page-content h3,
.content-area .page-content h4,
.content-area .page-content h5,
.content-area .page-content h6 {
    font-family: var(--1x-font) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: var(--1x-text) !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    text-transform: none !important;
}

.content-area p,
.content-area .page-content p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--1x-text) !important;
    margin: 0 0 12px !important;
    max-width: 100%;
}

.content-area a,
.content-area .page-content a,
.content-area .home-content a {
    color: var(--1x-link) !important;
    text-decoration: none !important;
}

.content-area a:hover,
.content-area .page-content a:hover {
    color: var(--1x-link-hover) !important;
    text-decoration: underline !important;
}

.content-area strong,
.content-area b {
    font-weight: 700 !important;
    color: var(--1x-text) !important;
}

/* Lists: keep theme bullets/numbers, fix spacing */
.content-area ul,
.content-area ol,
.content-area .page-content ul,
.content-area .page-content ol {
    margin: 12px 0 16px !important;
    max-width: 100%;
}

.content-area ul li,
.content-area .page-content ul li {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--1x-text) !important;
    margin-bottom: 8px !important;
    padding-left: 16px !important;
}

.content-area ol li,
.content-area .page-content ol li {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--1x-text) !important;
    margin-bottom: 12px !important;
    padding-left: 40px !important;
}

.content-area ul li:before {
    background: var(--1x-accent) !important;
}

.content-area ol li:before {
    background: #276aa5 !important;
    color: #fff !important;
}

/* TOC */
.content-area #toc,
.content-area nav#toc,
.content-area nav.toc {
    display: block;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 18px;
    box-sizing: border-box;
}

.content-area #toc p,
.content-area #toc li,
.content-area nav.toc li {
    margin-bottom: 6px !important;
}

.content-area #toc ul,
.content-area nav.toc ul,
.content-area nav.toc ol {
    margin: 0 !important;
}

/* Tables */
.content-area table,
.content-area .page-content table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 18px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--1x-text) !important;
}

.content-area th,
.content-area td,
.content-area .page-content th,
.content-area .page-content td {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 10px 12px !important;
    text-align: left;
    vertical-align: top;
    color: var(--1x-text) !important;
}

.content-area th,
.content-area .page-content th {
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

/* Sections / FAQ / hub */
.content-area section,
.content-area .page-content section {
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
}

.content-area img,
.content-area .page-content img {
    max-width: 100%;
    height: auto;
}

/* Header / footer UI captions */
.header,
.sitenav,
.btn-header,
.header-stat__label,
.header-stat__value,
#footer,
.footer-feature,
.copyright {
    font-family: var(--1x-font) !important;
}

.sitenav a,
.btn-header {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}

.header-stat__label {
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
}

.header-stat__value {
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
}

.footer-feature strong,
.pics__title {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

/* Responsive */
@media (max-width: 767px) {
    .content-area .home-content {
        padding: 20px 16px 24px 22px !important;
    }

    .content-area h1,
    .content-area .page-content h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .content-area h2,
    .content-area .page-content h2 {
        font-size: 15px !important;
    }

    .content-area .page-content,
    .content-area p,
    .content-area li {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}

@media (min-width: 992px) {
    .content-area .home-content {
        padding: 32px 40px 36px 48px !important;
    }
}


/* Fill panel width; no orphan left column */
.content-area .page-content > *,
.content-area article > * {
    max-width: 100%;
}

.content-area .page-content p,
.content-area .page-content li,
.content-area .page-content h1,
.content-area .page-content h2,
.content-area .page-content h3,
.content-area .page-content table,
.content-area .page-content #toc,
.content-area .page-content section {
    width: auto;
    max-width: 100%;
}