/* =============================================================
   KARTOOSH FOOTER
   Geometry measured live from the real runtime DOM at 390x844 and
   1600x900 (m.kartoosh.bet/fr + www.kartoosh.bet/fr). The real
   footer is IDENTICAL on both breakpoints apart from text wrapping:

     .layout-footer-holder-bc   full width, no padding, no border
     .footerWrapper             padding 10px 16px 0   -> 358 / 1568
     welcome box               bg rgba(0,0,0,.15), radius 4px
       p                       12px / 14px  fw400  rgba(255,255,255,.5)
     .footerHeader             padding 16px 0, wraps to 118px tall
       support button          full width, 32px, radius 4px,
                               bg rgb(22,135,99), 14px/16px #fff
       .footerSocialLinks      4 x 30x30, gap 8, radius 4,
                               bg rgba(255,255,255,.15)
       language dropdown       115x35, right aligned
     .footerLinksSection       padding 24px 0 8px
       .footerLinkCols         single stacked column, full width
         title                 12px / 14px  fw700  rgba(255,255,255,.7)
         links                 one inline wrapped row
     .footerPartners           padding 16px 0
       .sliderTitle            12px / 14px  fw700
     .copyRightBlock           padding 16px 0, centred
   ============================================================= */

.layout-footer-holder-bc {
    width: 100%;
    background: #18232d;
    padding: 0;
    border: 0;
    font-family: Roboto, 'Cairo', Arial, Helvetica, sans-serif;
}

/* the real footer is full-bleed: no top gap, no side inset, no max-width.
   Neutralise legacy .site-footer rules from modern.css / style.css /
   mobile.css, which load earlier but would otherwise cap and inset it. */
.layout-footer-holder-bc,
.layout-footer-holder-bc.site-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footerWrapper {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 10px 16px 0;
}

/* ---- clear the fixed mobile tab bar ----
   nav.tab-navigation-w-bc is position:fixed, 72px tall, pinned to the bottom
   (measured at 390x844: y772..844). Without extra room the last footer lines -
   "www.novabet24.com est détenu et exploité par ..." and the copyright - sit
   underneath it once the page is scrolled to the end and cannot be read.

   This MUST come after the .footerWrapper rule above: that rule uses the
   `padding` shorthand, so an earlier padding-bottom would be wiped by it.
   Mobile only: the tab bar does not exist on desktop. */
@media (max-width: 1024px) {
    .footerWrapper {
        padding-bottom: 88px;
    }
}

.footerContainerWrapper,
.footerContainer {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

/* ---------- welcome ---------- */
.expandableContentWrapper {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.expandableContentData .container {
    width: 100%;
    padding: 0;
}
.expandableContentData .container p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
}

/* ---------- header: support button / socials / language ---------- */
.footerHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 0;
    padding: 16px 0;
}

.footerTopButtonGroup {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.footerTopButtonGroup .supportButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 1px 15px;
    border: 0;
    border-radius: 4px;
    background: rgb(22, 135, 99);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.footerTopButtonGroup .supportButton:hover { filter: brightness(1.08); }
.footerTopButtonGroup .supportButton:active { filter: brightness(0.95); }

.footerInnerLeftCol { display: flex; align-items: center; }

.footerSocialLinks {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* real: each item is a 38x38 box holding a 4px-inset 30x30 button */
.footerSocialLink {
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 4px;
}
.footerSocialLink a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
.footerSocialLink a svg { display: block; width: 16px; height: 16px; }
.footerSocialLink a:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

.footerInfoColumn {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* language dropdown : flag + code button, 115x35, popup list of languages */
.languageDropdown.compact-mode {
    position: relative;
    display: block;
    width: 115px;
    height: 35px;
}

.languageDropdown__btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 100%;
    padding: 0 10px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 12px;
    line-height: 14px;
    text-align: left;
    cursor: pointer;
}
.languageDropdown__btn:focus-visible { outline: none; border-color: rgba(255, 255, 255, 0.34); }
.languageDropdown__code { letter-spacing: 0.04em; }
.languageDropdown__flag { display: inline-flex; align-items: center; flex: 0 0 auto; }
.languageDropdown__flag svg { display: block; width: 22px; height: 14px; border-radius: 2px; }

.languageDropdown__menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 148px;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: #18232d;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.languageDropdown__menu[hidden] { display: none; }

.languageDropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 14px;
    text-decoration: none;
}
.languageDropdown__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.languageDropdown__item.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; }

.languageDropdown__chevron {
    margin-left: auto;
    display: flex;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
.languageDropdown__chevron svg { display: block; width: 12px; height: 12px; }
.languageDropdown.is-open .languageDropdown__btn { border-color: rgba(255, 255, 255, 0.34); }
.languageDropdown.is-open .languageDropdown__chevron svg { transform: rotate(180deg); }

/* ---------- link columns : single stacked column, links inline ---------- */
.footerLinksSection {
    display: flex;
    width: 100%;
    padding: 24px 0 8px;
}

.footerLinkCols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    min-height: 0;
}

.footerLinkCol {
    display: block;
    width: 100%;
    text-align: left;
}

.footerLinkColTitle {
    display: flex;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}
.footerLinkColTitle a { color: inherit; text-decoration: none; }
.footerLinkColTitle a:hover { color: rgba(255, 255, 255, 0.9); }

.footerLinkColLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerLinkColEl {
    margin: 0;
    font-size: 12px;
    line-height: 19px;
}

.footerLinkColEl a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    line-height: 19px;
    text-decoration: none;
}
.footerLinkColEl a:hover { color: rgba(255, 255, 255, 0.7); }

/* ---------- partners / licences ---------- */
.sliderSingleElWrapper { display: block; margin: 0 0 16px; min-height: 0; }
.sliderSingleElWrapper:last-child { margin-bottom: 0; }
.sliderSingleEl { display: flex; align-items: center; gap: 12px; min-height: 0; }
.ftr-copy-rights-bc { color: rgba(255,255,255,.5); font-size: 12px; line-height: 16px; }

/* ---------- copyright : centred ---------- */
.copyRightBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.footerCopyrights {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    text-align: center;
}