/* ==========================================================================
   QEMOSA redesign - FOOTER LAYER
   Author: TEDBG - https://tedbg.com
   Loaded after Journal's generated CSS (and after qemosa-r-base.css), so it
   wins at equal specificity. Selectors are prefixed with "html body" and use
   !important on the properties that must beat Journal's generated rules.

   Owns four bottom-of-homepage blocks:
   1. Brands / manufacturers grid   (module-manufacturers-38)
   2. Social buttons under the banner image (see NOTE in section 2)
   3. Newsletter form                (module-newsletter-67)
   4. Site footer (background, column headings, links, copyright bar)

   Sections 1-2 are scoped with body.route-common-home because they are
   homepage-only modules. Section 3 (newsletter) and section 4 (footer) are
   NOT scoped to the homepage: in the live DOM the newsletter module sits
   INSIDE the <footer> element, and the footer renders on every route.
   ========================================================================== */


/* ================================================================
   1. BRANDS - "Пазарувай по марка" (module-manufacturers-38)
   Homepage only. Plain grid of logo tiles, grayscale -> colour on hover.
   ================================================================ */

/* remove the carousel arrows - dots (swiper-pagination) are left alone */
html.route-common-home body div[class*='module-manufacturers-'] .swiper-buttons,
html.route-common-home body div[class*='module-manufacturers-'] .swiper-button-prev,
html.route-common-home body div[class*='module-manufacturers-'] .swiper-button-next {
    display: none !important;
}

/* Приведено към макета (бележка на клиента 34, 2026-08-04).
   Беше: рамката стоеше на .manufacturer-layout, а клетките се допират, което
   правеше от секцията таблица с разчертани квадратчета; логото беше 60px с
   opacity .55 и почти не се четеше. Journal ползва .manufacturer-layout като
   клетка с padding вместо gap, а видимата плочка е .manufacturer-thumb -
   затова рамката вече е на нея и плочките имат въздух помежду си.
   Броят колони и логата (6, по 3 на ред) идват от настройките на модул 38. */
html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-grid {
    flex-wrap: wrap !important;
    transform: none !important;
    justify-content: center !important;
}

@media (min-width: 992px) {
    html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-grid {
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-layout {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
}

html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb {
    width: 100% !important;
    height: auto !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border: 1px solid var(--qr-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb .image,
html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb .image a {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Логото се чете - пълна плътност, само обезцветено, вписано в плочката. */
html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb .image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 56px !important;
    object-fit: contain !important;
    filter: grayscale(100%) contrast(1.15) !important;
    opacity: 1 !important;
    transition: filter .25s ease !important;
}

html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-layout:hover .manufacturer-thumb .image img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

@media (max-width: 767px) {
    html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-layout {
        padding: 3px !important;
    }

    html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb {
        min-height: 78px !important;
        padding: 12px 10px !important;
    }

    html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb .image img {
        max-height: 42px !important;
    }
}

/* small muted caption under the logo, not removed, just quiet */
html.route-common-home body div[class*='module-manufacturers-'] .caption {
    margin-top: 10px !important;
    text-align: center !important;
}

html.route-common-home body div[class*='module-manufacturers-'] .caption .name a {
    font-size: 11px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--qr-muted) !important;
}


/* ================================================================
   2. SOCIAL BUTTONS under the banner image
   ================================================================
   NOTE - flag for the client / next edit:
   The brief names module-banners_grid-487 ("FOLLOW US ON SOCIAL MEDIA"
   image) and module-blocks-319 ("Следвайте ни") as the location of the two
   coloured Facebook/Instagram buttons. In the captured live DOM neither of
   those modules actually contains any buttons:
     - module-banners_grid-487 is a single plain <img> with no text layer
       and nothing below it (the "FOLLOW US..." wording, if present at all,
       is baked into the photo itself, not real markup).
     - module-blocks-319 ("Следвайте ни") is empty in the footer (only a
       stray <br>).
   The ONLY Facebook + Instagram button pair that actually exists on the
   homepage is a .slide-button-group with .slide-button-1 (Facebook) and
   .slide-button-2 (Instagram), which lives on a DIFFERENT banner slide
   ("QEMOSA COMMUNITY", module-banners_grid-486). The footer separately has
   a plain icon pair (icons-menu-269) with no button chrome at all - that
   one is covered by "social icons stay white" in section 4.
   To be useful, this section styles the real .slide-button-group markup,
   generically, wherever it appears inside any homepage banners_grid module,
   so it applies correctly today (banner 486) and keeps working if the
   banner is later reassigned to id 487. If the intent was truly a NEW pair
   of buttons under module 487's image, that needs a Journal template/
   layout change (adding a slide-button subitem to that banner), not CSS.
   ================================================================ */

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
}

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 54px !important;
    line-height: 54px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: var(--qr-w-medium) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .btn span {
    color: #fff !important;
}

/* if the markup ever uses an <img> logo instead of text, keep it centered */
html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .btn img {
    display: block !important;
    max-height: 22px !important;
    width: auto !important;
    margin: 0 auto !important;
}

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .slide-button-1 {
    background: #1877F2 !important;
}

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .slide-button-2 {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
}

html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group .btn:hover {
    opacity: .9 !important;
}


/* ================================================================
   3. NEWSLETTER - module-newsletter-67
   ================================================================
   NOTE: the brief lists this as a homepage module, but in the captured DOM
   module-newsletter-67 sits INSIDE the sitewide <footer> (footer grid-row-1),
   so it is NOT scoped to body.route-common-home here - it needs to look
   right on every page, same as the rest of the footer.
   Title (uppercase/centered/size) is left to base.css as instructed; only
   its COLOUR is patched below in section 4, because base.css paints titles
   in var(--qr-ink) (near-black), which would be invisible once this file
   turns the footer background dark.
   ================================================================ */

html body footer .module-newsletter-67 .module-body {
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 0 20px 30px !important;
}

html body footer .module-newsletter-67 .newsletter-text {
    color: rgba(255, 255, 255, .8) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 0 20px !important;
}

html body footer .module-newsletter-67 .newsletter-form {
    text-align: center !important;
}

/* Journal държи .input-group на фиксирана височина (реликва от вида, в който
   бутонът стои ВЪТРЕ в полето). При колона бутонът излизаше извън кутията и
   лягаше върху чекбокса за съгласие отдолу - затова височината е auto. */
html body footer .module-newsletter-67 .newsletter-form .input-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto 16px !important;
}

html body footer .module-newsletter-67 .newsletter-form .newsletter-email {
    width: 100% !important;
    height: 48px !important;
    line-height: 46px !important;
    border: 1px solid var(--qr-line) !important;
    background: #fff !important;
    color: var(--qr-ink) !important;
    border-radius: 3px !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

html body footer .module-newsletter-67 .newsletter-form .input-group-btn {
    display: block !important;
    width: 100% !important;
}

/* the button renders its envelope icon and the text as separate boxes -
   force a single centered flex row so the icon sits next to the label and
   the label always fits inside the black button */
html body footer .module-newsletter-67 .newsletter-form .btn.btn-primary {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 1 !important;
    padding: 0 20px !important;
    /* Journal слага margin-left:12px (от вида, в който бутонът стои вдясно от
       полето) - на колона това го изнасяше 12px извън формата. */
    margin: 10px 0 0 !important;
    background: var(--qr-ink) !important;
    border: 1px solid var(--qr-ink) !important;
    color: #fff !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    white-space: nowrap !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

html body footer .module-newsletter-67 .newsletter-form .btn.btn-primary:before {
    position: static !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html body footer .module-newsletter-67 .newsletter-form .btn.btn-primary span {
    color: #fff !important;
}

html body footer .module-newsletter-67 .checkbox {
    text-align: center !important;
    max-width: 480px !important;
    margin: 12px auto 0 !important;
}

/* Текстът и линкът се пренасяха като две отделни колони, защото label беше
   flex - при flex всеки текстов възел става самостоятелен елемент. Блоков
   ред със "закачено" квадратче чете нормално на един ред. */
html body footer .module-newsletter-67 .checkbox label {
    display: block !important;
    color: rgba(255, 255, 255, .75) !important;
    font-size: 12px !important;
    font-weight: var(--qr-w-regular) !important;
    line-height: 1.5 !important;
}

html body footer .module-newsletter-67 .checkbox label input[type="checkbox"] {
    display: inline-block !important;
    position: relative !important;
    top: 2px !important;
    margin: 0 6px 0 0 !important;
    vertical-align: baseline !important;
}

html body footer .module-newsletter-67 .checkbox .agree {
    color: rgba(255, 255, 255, .9) !important;
    text-decoration: underline !important;
}


/* ================================================================
   4. SITE FOOTER - background, column headings, links, copyright bar
   NOT scoped to the homepage - the footer renders on every route.
   ================================================================ */

/*
   NOTE on the background rule below:
   The captured DOM sample only contains <body> markup (no <head>), and the
   footer's row-bg divs have no inline style in that sample, so the exact
   selector Journal itself uses for the current olive-green fill could not
   be confirmed directly (it is most likely a per-row colour generated by
   the "Row background" layout setting, output as either a page-level
   <style> block or an inline style on .row-bg). Forcing it here with
   !important on "footer" and every ".row-bg" inside it will beat both a
   plain stylesheet rule and a non-!important inline style, which covers
   the normal case. If the olive green persists after this file loads, the
   colour is being set with its own !important or reapplied by JS after
   load, and the fix belongs in Journal's admin layout settings (Row
   background colour on each footer row), not in CSS.
*/
/* Dark grey on the footer shell and on the newsletter (row 1) and link
   columns (row 3) rows only. Row 2 is the "ВАШАТА ИСТОРИЯ НА НАВИГИРАНЕ"
   recently-viewed strip and row 4 is the copyright bar - both stay light,
   handled in the FOOTER ROW BACKGROUNDS block at the end of this file
   (placed last so it wins the equal-specificity fight against these). */
html body footer,
html body footer > .grid-rows,
html body footer .grid-row-1 .row-bg,
html body footer .grid-row-3 .row-bg {
    background-color: var(--qr-footer-bg) !important;
}

/* newsletter title turns white to stay legible on the new dark footer -
   size/weight/case/centering still come from base.css, only colour here */
html body footer .module-newsletter-67 .module-title {
    color: #fff !important;
}

/* column headings: Информация / За клиенти / Контакт / Следвайте ни
   NOTE: no class named "module-footer_menu" exists in the captured DOM -
   these four headings are actually .links-menu modules (links-menu-76,
   links-menu-75, links-menu-369) plus one empty .module-blocks (319), so
   the selectors below target those real classes instead. */
html body footer .links-menu .module-title,
html body footer .module-blocks .module-title {
    color: #fff !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-align: left !important;
    margin: 0 0 16px !important;
}

/* the mock has no rule under the headings, at any width */
html body footer .links-menu .module-title:after,
html body footer .module-blocks .module-title:after {
    display: none !important;
    content: none !important;
}

/* footer link lists */
html body footer .links-menu .module-body {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body footer .links-menu .module-body li.menu-item {
    padding: 5px 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

html body footer .links-menu .module-body a,
html body footer .links-menu .module-body a .links-text {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

html body footer .links-menu .module-body a:hover,
html body footer .links-menu .module-body a:hover .links-text {
    color: #fff !important;
}

/* copyright bar - "Qemosa.com | Web : Tedbg.com" */
html body footer .grid-row-4 .links-menu .module-body {
    text-align: center !important;
}

html body footer .grid-row-4 .links-menu-item {
    padding: 14px 0 !important;
    text-align: center !important;
}

html body footer .grid-row-4 .links-menu-item a,
html body footer .grid-row-4 .links-menu-item .links-text,
html body footer .grid-row-4 .links-menu-item a a {
    color: var(--qr-ink) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* social icons in the footer (icons-menu-269) stay white */
html body footer .icons-menu a,
html body footer .icons-menu a:before,
html body footer .icons-menu a:after {
    color: #fff !important;
}


/* ================================================================
   DESKTOP - min-width: 992px
   ================================================================ */
@media (min-width: 992px) {

    /* brands: a little more breathing room once tiles are wider. Padding-ът
       на клетката е само разстоянието между плочките - вътрешният въздух е
       на .manufacturer-thumb (секция 1). */
    html.route-common-home body div[class*='module-manufacturers-'] .manufacturer-thumb {
        min-height: 118px !important;
        padding: 26px 22px !important;
    }

    /* social buttons: keep them from stretching full-bleed on wide banners */
    html.route-common-home body div[class*='module-banners_grid-'] .slide-button-group {
        max-width: 360px !important;
    }

    /* newsletter: input and button sit side by side, button next to input */
    html body footer .module-newsletter-67 .newsletter-form .input-group {
        flex-direction: row !important;
        max-width: 560px !important;
    }

    html body footer .module-newsletter-67 .newsletter-form .newsletter-email {
        border-radius: 3px 0 0 3px !important;
        border-right: 0 !important;
    }

    html body footer .module-newsletter-67 .newsletter-form .input-group-btn {
        display: block !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    html body footer .module-newsletter-67 .newsletter-form .btn.btn-primary {
        width: auto !important;
        min-width: 200px !important;
        margin: 0 !important;
        border-radius: 0 3px 3px 0 !important;
    }

}


/* stacked on phones the four link columns run into each other - the mock
   has clear air before every heading, so space them apart (row 3 = the
   link columns; the first column needs no top gap) */
@media (max-width: 991px) {
    html body footer .grid-row-3 .links-menu {
        margin-top: 30px !important;
    }

    html body footer .grid-row-3 .grid-col-1 .links-menu {
        margin-top: 0 !important;
    }
}


/* ================================================================
   FOOTER ROW BACKGROUNDS - keep this block LAST in the file.
   Row 2 (recently viewed / "ВАШАТА ИСТОРИЯ НА НАВИГИРАНЕ") and row 4
   (copyright) sit on the light page colour with dark text; rows 1 and 3
   stay dark (set further up). The selectors repeat Journal's own generated
   chain (footer > .grid-rows > .grid-row-N > .row-bg) so nothing outranks
   them, and being last wins any equal-specificity tie inside this file.
   ================================================================ */
html body footer .grid-row-2,
html body footer .grid-row-2 .row-bg,
html body footer > .grid-rows > .grid-row-2,
html body footer > .grid-rows > .grid-row-2 > .row-bg,
html body footer .grid-row-4,
html body footer .grid-row-4 .row-bg,
html body footer > .grid-rows > .grid-row-4,
html body footer > .grid-rows > .grid-row-4 > .row-bg {
    background-color: var(--qr-bg) !important;
    background-image: none !important;
}

/* row 2 content is on light background - dark readable text */
html body footer .grid-row-2 .module-title {
    color: var(--qr-ink) !important;
}

html body footer .grid-row-2 .caption,
html body footer .grid-row-2 .caption a,
html body footer .grid-row-2 .name,
html body footer .grid-row-2 .name a {
    color: var(--qr-ink) !important;
}

/* copyright bar - dark text on the light strip, centered. The generic
   white-link rule higher up is "...footer .links-menu .module-body a
   .links-text" (specificity 0,3,4), so these selectors must include the
   "a" element too or they lose the tie. */
html body footer .grid-row-4 .links-menu-item,
html body footer .grid-row-4 .links-menu-item a,
html body footer .grid-row-4 .links-menu-item a .links-text,
html body footer .grid-row-4 .links-menu-item a .links-text a {
    color: var(--qr-ink) !important;
    text-align: center !important;
    opacity: 1 !important;
}

/* the copyright line is not a link list - it must escape the uppercase rule
   above, which matches at (0,3,4) via ".links-menu .module-body a .links-text",
   so this override needs the same element depth and to come later in the file */
html body footer .grid-row-4 .links-menu .module-body a,
html body footer .grid-row-4 .links-menu .module-body a .links-text,
html body footer .grid-row-4 .links-menu-item a .links-text a {
    text-transform: none !important;
    letter-spacing: 0 !important;
}