@charset "UTF-8";
.headerlang {
    font-size: 18px;
    list-style: none;
}

ul.ul-headerlang {
    margin-bottom: -5px !important;
}

.ccbuttons>li.cctelefoane, .cctelefoane {
    top: -28px;
    font-size: 14px;
    padding: 4px 10px;
}

.green-line {
    height: 20px;
}

.breakingNews ul li {
    font-size: 16px;
    font-weight: bold;
}

.tyre-hint {
    margin-left: 108px;
}

.tyre-hint img {
    opacity: .8;
}

.new-line-search {
    clear: both;
    float: left;
    margin-top: 10px;
    width: 100%;
}

/* responsive rules */
@media screen and (max-width: 600px) {
    .headerlang {
        font-size: 14px;
    }

    .ccbuttons>li.cctelefoane, .cctelefoane {
        top: 6px;
    }

    ul.ul-headerlang {
        margin-bottom: 10px !important;
    }
}

/* season banners on the used-tyres page: three in one row */
.season-banners a {
    display: inline-block;
    width: 32%;
}

.season-banners img {
    width: 100%;
    height: auto;
}

/* season banners: one per line on mobile */
@media screen and (max-width: 767px) {
    .season-banners a {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 10px;
    }
}

/* ===================== redesign 2026-10 (from responsive.preview.css) ===================== */

/* ---------- tire cards: home page grid ---------- */
#productlist li {
    border: 1px solid #e4e4e4;
    border-radius: 7px;
    background: #fff;
    margin: 8px;
    padding: 8px 5px 10px; /* 5px sides: card is 160px incl. padding, photo is 148px */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

#productlist li:hover {
    border-color: #cfe9cc;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}

/* tiles share the row: 4 per row on desktop, 3 on tablet, as wide as the space allows.
   Phones keep the old 160px tiles. */
@media (min-width: 768px) {
    #productlist {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #productlist li {
        width: calc(33.333% - 16px);
    }
}

@media (min-width: 992px) {
    #productlist li {
        width: calc(25% - 16px);
    }
}

#productlist .image {
    border-radius: 5px;
}

#productlist .price,
#productlist .price span {
    font-size: 18px !important; /* overrides inline 16px */
    font-weight: 700;
    color: #42933b;
}

/* ---------- tire cards: lists (search, summer/winter, similar) ---------- */
#productlistlist li {
    border: 1px solid #e4e4e4;
    border-radius: 7px;
    background: #fff;
    margin-bottom: 14px;
    padding: 12px 15px 12px; /* photo and button no longer touch the card edge */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease, border-color .2s ease;
}

#productlistlist li:hover {
    border-color: #cfe9cc;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

#productlistlist a.image img {
    border-radius: 5px;
}

#productlistlist .price {
    font-weight: 700;
    color: #42933b;
}

/* ---------- buttons: "Преглед" and "Виж подробно" look the same ---------- */
#productlist .btn-success,
#productlistlist .btn-success {
    background: #51b748;
    background-image: linear-gradient(to bottom, #5fc556, #42933b);
    border: 1px solid #42933b;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    height: auto;      /* site CSS forces .btn to 46px */
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(66, 147, 59, .25);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* small arrow after the text (plain character: Font Awesome font files are missing on the server) */
#productlist .btn-success:after,
#productlistlist .btn-success:after {
    content: "\203A"; /* › */
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
    display: inline-block;
    vertical-align: -1px;
    transition: transform .2s ease;
}

/* hover: the site's blue (same as the tire titles) */
#productlist .btn-success:hover,
#productlist .btn-success:focus,
#productlistlist .btn-success:hover,
#productlistlist .btn-success:focus {
    background: #1b75ba;
    background-image: none;
    border-color: #1b75ba;
    color: #fff;
    box-shadow: 0 3px 8px rgba(27, 117, 186, .3);
}

#productlist .btn-success:hover:after,
#productlistlist .btn-success:hover:after {
    transform: translateX(3px);
}

@media (max-width: 468px) {
    #productlist li {
        margin: 0 0 8px;
    }
}

/* ---------- tire search form (header) ---------- */
#search-container.white-line {
    background: linear-gradient(135deg, #f2faf1 0%, #eef5fb 100%);
    border: 1px solid #e1ece0;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    padding: 14px 0 6px;
}

#search-form:before {
    content: "Намерете вашите гуми";
    display: block;
    margin-bottom: 10px;
    color: #42933b;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

#search-form select {
    height: 44px;
    padding: 0 30px 0 12px;
    border: 1px solid #d5dde3;
    border-radius: 7px;
    background-color: #fff;
    /* custom ▾ arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2342933b' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #333;
    font-size: 15px;
    margin-bottom: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#search-form select:hover {
    border-color: #a9d3a4;
}

#search-form select:focus {
    outline: none;
    border-color: #51b748;
    box-shadow: 0 0 0 3px rgba(81, 183, 72, .2);
}

#search-form .btn.dark {
    height: 44px;
    line-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: #231f20; /* the site's original dark search button */
    background-image: linear-gradient(to bottom, #3a3536, #1a1718);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: background-color .2s ease, box-shadow .2s ease;
}

#search-form .btn.dark:hover,
#search-form .btn.dark:focus {
    background: #42933b;
    background-image: none;
    box-shadow: 0 3px 10px rgba(66, 147, 59, .35);
    color: #fff;
}

/* white magnifier instead of the old sprite icon */
#search-form .btn.dark .icon.search {
    width: 18px;
    height: 44px;
    margin-right: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

/* desktop: the fields share the full width (old layout used ~89%) */
@media (min-width: 921px) {
    #search-form {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #search-form:before {
        flex: 0 0 100%;
    }

    #search-form select,
    #search-form .btn.dark {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0 8px 8px 0;
    }

    #search-form .btn.dark {
        flex-grow: 1.2;
        margin-right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* the search sits in a .container inside #page's .container: the inner one has a
   fixed Bootstrap width and overflowed the panel. Let it fit the panel instead. */
#search-container > .container {
    width: auto;
    max-width: 100%;
    padding: 0 14px;
}

/* ---------- top menu ---------- */
/* thin green accent on top of the bar (drawn as a shadow: no layout shift) */
#topheader {
    box-shadow: inset 0 3px 0 #51b748, 0 2px 10px rgba(0, 0, 0, .08);
}

#topheader .navbar-nav > li > a:not(.logotop) {
    position: relative;
    font-weight: 600;
    transition: color .2s ease;
}

#topheader .navbar-nav > li > a:not(.logotop):hover,
#topheader .navbar-nav > li.current > a {
    color: #42933b;
}

/* desktop: green underline that grows from the centre */
@media (min-width: 768px) {
    #topheader .navbar-nav > li > a:not(.logotop):after {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 6px;
        height: 2px;
        border-radius: 1px;
        background: #51b748;
        transition: left .25s ease, right .25s ease;
    }

    #topheader .navbar-nav > li > a:not(.logotop):hover:after,
    #topheader .navbar-nav > li.current > a:after {
        left: 12px;
        right: 12px;
    }
}

/* mobile: green bar on the left of the current page */
@media (max-width: 767px) {
    #topheader .navbar-nav > li.current > a {
        box-shadow: inset 4px 0 0 #51b748;
        padding-left: 18px;
    }
}

/* semi-bold text is wider: tighter side padding so all items stay on one line */
@media (min-width: 992px) {
    #topheader .navbar-nav > li > a:not(.logotop) {
        padding-left: 11px;
        padding-right: 11px;
    }

    #topheader .navbar-nav > li > a:not(.logotop):hover:after,
    #topheader .navbar-nav > li.current > a:after {
        left: 11px;
        right: 11px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #topheader .navbar-nav > li > a:not(.logotop) {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
    }

    #topheader .navbar-nav > li > a:not(.logotop):hover:after,
    #topheader .navbar-nav > li.current > a:after {
        left: 7px;
        right: 7px;
    }
}

/* ---------- contact bar above the search (languages + phone / Viber / WhatsApp) ---------- */
.contact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 10px 0 0;
    padding: 10px 16px;
    background: #eaf3fb;
    border: 1px solid #d3e5f5;
    border-radius: 9px;
    color: #1b75ba;
}

.contact-bar-langs {
    font-size: 14px;
    font-weight: 600;
}

.contact-bar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.contact-bar-label {
    font-size: 14px;
    color: #57585b;
}

.contact-bar .cb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 19px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: filter .2s ease, transform .2s ease;
}

.contact-bar .cb-btn:hover,
.contact-bar .cb-btn:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.contact-bar .cb-btn svg {
    flex: 0 0 auto;
}

.contact-bar .cb-phone { background: #1b75ba; }
.contact-bar .cb-viber { background: #7360f2; }
.contact-bar .cb-whatsapp { background: #25d366; }

/* less gap between the bar and the search panel */
#page .contact-bar + .white-line {
    margin-top: 10px;
}

/* phones: stacked and centred */
@media (max-width: 767px) {
    .contact-bar {
        flex-direction: column;
        text-align: center;
    }

    .contact-bar-links {
        justify-content: center;
    }

    .contact-bar-label {
        flex: 0 0 100%;
    }
}

/* closer to the fixed menu: #page starts 85px from the top (old CSS) */
@media (min-width: 768px) {
    .contact-bar {
        margin-top: -12px;
    }
}

/* contact bar + search panel: full page width (cancel #page's 15px side padding) */
#page > .contact-bar,
#page > #search-container.white-line {
    margin-left: -15px;
    margin-right: -15px;
}

/* softer solid colours (brand colours, a bit lighter and less saturated) */
.contact-bar .cb-btn {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.contact-bar .cb-phone { background: #4a8fc7; }
.contact-bar .cb-viber { background: #8a7be6; }
.contact-bar .cb-whatsapp { background: #3fbf72; }

/* ---------- "ЕКСКЛУЗИВНО" ticker (home page): smaller + rounded ---------- */
#gumata_maruqee.breakingNews {
    height: 38px;
    border-width: 1px;
    border-radius: 5px;
    background: #fff7f7;
    box-shadow: 0 1px 4px rgba(244, 74, 86, .12);
}

#gumata_maruqee > .bn-title {
    height: 38px;
}

#gumata_maruqee > .bn-title > h2 {
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
}

#gumata_maruqee > .bn-title > span {
    top: 9px;
}

#gumata_maruqee > ul,
#gumata_maruqee > ul > li,
#gumata_maruqee > .bn-navi,
#gumata_maruqee > .bn-navi > span {
    height: 38px;
}

#gumata_maruqee > ul > li {
    line-height: 38px;
    font-size: 14px;    /* was 16px bold */
    font-weight: 600;
}

/* ---------- left sidebar cards ---------- */
#sidebar .alert-info {
    background: #e4e4e4; /* original grey: white cards were too faint */
    border: 1px solid #d6d6d6;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    color: #555;
}

#sidebar .alettitle {
    color: #42933b;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 2px solid #e3f2e1;
    margin-bottom: 6px;
}

/* "Меню" box */
#sidebar .panel-menu {
    border: 1px solid #e4e4e4;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

#sidebar .panel-group .panel-heading,
#sidebar .panel-group .panel-heading:hover {
    background: #51b748;
    background-image: linear-gradient(to bottom, #5fc556, #42933b);
    border-radius: 0;
}

#sidebar .panel-title > a {
    color: #fff;
    font-weight: 700;
}

#sidebar .panel-group .panel-heading + .panel-collapse .panel-body {
    background: #e4e4e4;
}

#sidebar .panel-group .panel-heading + .panel-collapse .panel-body ul a {
    font-weight: 600;
    transition: color .2s ease;
}

#sidebar .panel-group .panel-heading + .panel-collapse .panel-body ul a:hover {
    color: #42933b;
    text-decoration: none;
}

/* calculator dropdowns (inline styles in left_side.php, hence !important) */
#calculatorFrom select {
    height: 28px !important;
    padding: 0 4px !important;
    border: 1px solid #d5dde3 !important;
    border-radius: 5px;
    background-color: #fff;
    font-size: 12px !important;
    color: #333 !important;
}

#calculatorFrom select:focus {
    outline: none;
    border-color: #51b748 !important;
    box-shadow: 0 0 0 3px rgba(81, 183, 72, .2);
}

/* ---------- footer ---------- */
/* brand logos strip (desktop only) */
#blocklogos {
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

#manufacturers img {
    max-width: 100%;
    height: auto;
}

/* dark footer with the 3 columns */
/* keeps the original grey background (#666 + footerbg.png from custom.min.css) */
#blockextra {
    border-radius: 9px;
    padding: 28px 10px 18px;
    color: #fff;
}

#blockextra .blockextratitle {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 2px solid #51b748;
    padding-bottom: 6px;
}

#blockextra a,
#blockextra .contactbar li {
    color: #fff;
    transition: color .2s ease;
}

#blockextra a:hover,
#blockextra a:focus {
    color: #b6efaf;
    text-decoration: none;
}

/* menu links: no bullets, small green arrow instead */
#blockextra .suportclienti {
    list-style: none;
    padding-left: 0;
}

#blockextra .suportclienti li {
    margin-bottom: 6px;
}

#blockextra .suportclienti li a:before {
    content: "\203A";
    color: #51b748;
    font-weight: 700;
    margin-right: 8px;
}

/* news thumbnails */
#blockextra .blog img {
    border-radius: 5px;
}

/* phone number stands out */
#blockextra .contactbar .telefon a {
    color: #b6efaf;
    font-weight: 700;
}

/* "Magic Creative" credit line: small and muted */
#blockextra > a {
    display: block;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    text-align: right;
    font-size: 12px;
    color: #e6e6e6;
}

#blockextra > a img {
    opacity: .8;
    vertical-align: middle;
}

/* phones: the news column has inline width: 50% */
@media (max-width: 767px) {
    #blockextra .col-sm-3 {
        width: 100% !important;
        margin-bottom: 18px;
    }
}

/* footer: Viber / WhatsApp buttons (same look as the contact bar) */
#blockextra .footer-messengers {
    clear: both;
    float: left;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

#blockextra .footer-messengers .cb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 19px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    transition: filter .2s ease, transform .2s ease;
}

#blockextra .footer-messengers .cb-btn:hover,
#blockextra .footer-messengers .cb-btn:focus {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

#blockextra .footer-messengers .cb-viber { background: #8a7be6; }
#blockextra .footer-messengers .cb-whatsapp { background: #3fbf72; }

/* footer: label on its own line, then phone / Viber / WhatsApp buttons */
#blockextra .footer-messengers .fm-label {
    flex: 0 0 100%;
}

#blockextra .footer-messengers .cb-phone { background: #4a8fc7; }

/* no blue focus ring on mouse click; keep a green one for keyboard (Tab) users */
#topheader a:focus:not(:focus-visible),
.contact-bar a:focus:not(:focus-visible),
#search-form .btn:focus:not(:focus-visible),
#productlist .btn:focus:not(:focus-visible),
#productlistlist .btn:focus:not(:focus-visible),
#blockextra a:focus:not(:focus-visible) {
    outline: none;
}

#topheader a:focus-visible,
.contact-bar a:focus-visible,
#search-form .btn:focus-visible,
#productlist .btn:focus-visible,
#productlistlist .btn:focus-visible,
#blockextra a:focus-visible {
    outline: 2px solid #51b748;
    outline-offset: 2px;
}

/* ---------- page background: slightly lighter, cooler grey ----------
   bg-cool.jpg = bg.jpg shifted to the same grey (its flat area is exactly #edf1f4) */
body {
    background: #edf1f4 url(../images/bg-cool.jpg) left top no-repeat fixed;
}

/* phones: same pull-up as desktop, otherwise ~30px gap under the mobile menu bar */
@media (max-width: 767px) {
    .contact-bar {
        margin-top: -12px;
    }
}

/* phones: logo vertically centred in the 64px bar (old CSS: 5px from the top) */
@media (max-width: 767px) {
    #topheader a.navbar-brand {
        height: 64px;
        padding-top: 11px;   /* 3px accent line + (64 - 3 - 44) / 2 */
        padding-bottom: 0;
    }
}