/* ==========================================================================
   Joomla 6.2 Cashback Template - User Overrides & Centered Layout Fix
   ========================================================================== */

/* 1. Global Viewport Centering & Reset */
html {
    overflow-x: hidden;
}

body.site {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f4f6f7 !important;
}

/* Outer layout wrapper: flex centers the 1000px content and holds the side sticky wings */
.site-outer-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 16px 40px 16px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

/* Central 1000px content block */
.site-main-content {
    width: 100% !important;
    max-width: 1000px !important;
    flex: 0 1 1000px !important;
    box-sizing: border-box !important;
}

.body {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Container: Exactly 1000px wide, centered with equal margins */
.container,
.body > .container,
.body > .container-fluid,
.footer > .container,
.footer > .container-fluid {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
}

.body > .container,
.body > .container-fluid {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 28px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* 3. Sticky Wings (Left and Right Ad/Banner Areas, up to 320px width & full 600px height) */
.sticky-wing {
    width: auto !important;
    min-width: 120px !important;
    max-width: 320px !important;
    min-height: 600px !important;
    flex: 0 0 auto !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}

.sticky-wing-inner {
    width: 100% !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.sticky-wing img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
}

.sticky-wing ins.adsbygoogle {
    display: block !important;
    min-height: 600px !important;
    width: 100% !important;
}

.sticky-wing iframe {
    max-width: 100% !important;
    border: none !important;
}

.sticky-wing .moduletable,
.sticky-wing .card,
.sticky-wing .well,
.sticky-wing .mod-cashback-code {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    min-height: 620px !important;
}

/* Responsive adjustment for sticky wings:
   - >= 1680px: bis zu 320px (perfekt fuer 300x600 Half-Page Ads)
   - 1400px - 1679px: 160px Skyscraper
   - 1260px - 1399px: 120px Skyscraper
   - < 1260px: Ausblenden, damit der 1000px Inhaltsblock unkomprimiert bleibt
*/
@media (min-width: 1680px) {
    .sticky-wing {
        width: 300px !important;
        max-width: 320px !important;
    }
}

@media (max-width: 1679px) and (min-width: 1400px) {
    .sticky-wing {
        width: 160px !important;
        max-width: 200px !important;
    }
}

@media (max-width: 1399px) and (min-width: 1260px) {
    .sticky-wing {
        width: 120px !important;
        max-width: 140px !important;
    }
}

@media (max-width: 1259px) {
    .sticky-wing {
        display: none !important;
    }
    .site-outer-wrapper {
        padding: 20px 12px 30px 12px !important;
        gap: 0 !important;
    }
}

/* 4. Header & Logo (50% larger: from 55px to 85px) */
.header {
    margin-bottom: 16px !important;
}
.header .brand img.site-logo {
    max-height: 85px !important;
    width: auto !important;
    display: block !important;
}

/* 5. Navigation Menu - Compact Height, Equal Spacing Left & Right */
.navigation.navbar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 5px 8px !important;
}

.navigation .navbar-inner,
.navigation .container,
.navigation .container-fluid {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    min-height: auto !important;
}

.navigation .navbar-collapse {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .mod-menu,
.navigation ul.nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 4px !important;
}

.navigation ul.nav > li,
.navigation .mod-menu > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation ul.nav > li > a,
.navigation .mod-menu > li > a {
    display: inline-block !important;
    padding: 6px 14px !important;
    line-height: 20px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
}

.navigation ul.nav > li.active > a,
.navigation .mod-menu > li.active > a,
.navigation ul.nav > li > a:hover,
.navigation .mod-menu > li > a:hover {
    background: #0088cc !important;
    color: #ffffff !important;
}

/* 6. Content Grid (Main & Sidebars) & Spacing to Headline */
.navigation.navbar + .row.row-fluid,
.navigation.navbar + * {
    margin-top: 0 !important;
}

#system-message-container:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

main#content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main#content > :first-child,
main#content .blog-featured > :first-child,
main#content .items-leading > :first-child,
main#content .leading-0 > :first-child,
main#content .item-page > :first-child,
main#content h1:first-child,
main#content h2:first-child,
main#content .page-header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.row.row-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    gap: 24px !important;
}

/* Full Width when no sidebar */
.row.row-fluid > main#content.col-12,
.row.row-fluid > main#content.span12 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

/* With Sidebar */
.row.row-fluid > main#content.col-lg-9,
.row.row-fluid > main#content.span9 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

.row.row-fluid > #aside.col-lg-3,
.row.row-fluid > #aside.span3 {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

@media (max-width: 991px) {
    .row.row-fluid > #aside.col-lg-3,
    .row.row-fluid > #aside.span3 {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* 7. Footer */
footer.footer {
    width: 100% !important;
    margin-top: auto !important;
}
footer.footer .container,
footer.footer .container-fluid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}