body {
    /* font-family: "Poppins"; */
    font-weight: 500;
    font-style: normal;
    background: #fff;
}

/* ── Global: Remove default blue HTML focus ring ── */
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
}
.sidebarbussiness .active > a {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.all_product_button button {
    margin-right: 13px;
}
.first_top_main, .first_top_main_1 {
    display: flex;
}
@media screen and (max-width: 389px) {
    .first_top_main, .first_top_main_1 {
        display: inline !important;
    }
}
@media screen and (max-width: 633px) {
    .align-items-center.all_product_button {
        display: inline-block;
    }
}
.all_product_button {
    display: flex;
}
.btn.btn-primary:hover {
    border: 1px solid #bf6072;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 0px!important;
    outline: 0;
}
.btn.btn-primary:active {
    box-shadow: none!important;
}
.btn.btn-primary:focus-visible {
    color: white!important;
    border: 1px solid #d98494!important;
    box-shadow: 0px 0px 0px 0rem rgba(49, 132, 253, .5)!important;
    background: #d98494!important;
}
.btn.btn-primary:focus {
    background: #d98494;
    border: 1px solid #d98494;
}
.select2-container--default .select2-selection--multiple {
    background-color: white;
   border: 0px solid #aaa;
    border-radius: 29px;
    cursor: text;
    padding-bottom: 5px;
    padding: 10px 5px 14px 15px;
    position: relative;
}
.modal {
    background: #0000009c;
}
.bttttt {
   background: #ec8992;
    text-align: start !important;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #ec8992;
    padding: 12px 20px;
    color: #fff;
}
.conditions_4 {
    color: #6685c1;
    margin-top: 0pc !important;
    text-align: start;
}
.conditions_4 p {
    color: #313334;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}
.coupan_numberdf p {
    font-size: 16px;
    font-weight: 600;
    color: #ec8992;
    text-align: start;
    margin-top: -11px;
}
.all_product_button a {
    background: #fca9a1;
    color: white;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 7px;
}

.d-flex.align-items-center.all_product_button a:hover {
    color: white;
}

.side_iconssd i {
    margin-top: -19px;
}

span.d-sm-inline {
    font-size: 16px;
    font-weight: 400;
    margin-left: 3px;
}

.side_iconssd {
    display: flex;
    align-items: center;
    height: 192px;
    font-size: 17px;
    color: #a0a0a0;
    justify-content: space-around;
}

div#multi-dropdown {
    width: 100%;
}

.coupan_texts img {
    width: 125px !important;
    height: 40px;
    margin-top: 6px;
    float: left;
    object-fit: fill;
}

.bar_genrate {
    width: 260px !important;
    height: 70px !important;
    margin: auto;
    border-radius: 0 !important;
}

@media only screen and (max-width: 1238px) and (min-width: 992px) {
    .catalogueContainers {
        width: 50% !important;
    }
}

@media screen and (max-width: 460px) {
    li.nav-item.change_category button {
        padding: 19px 0px 21px 6px !important;
        font-size: 10px !important;
    }
}

@media only screen and (max-width: 320px) {
    .swiper-wrapper {
        margin-left: 71px !important;
    }
}

@media only screen and (max-width: 375px) {
    .swiper-wrapper {
        margin-left: 91px;
    }
}

@media only screen and (max-width: 1024px) {
    .swiper-wrapper {
        margin-left: 5pc;
    }
}

@media only screen and (max-width: 639px) {
    .swiper-slide img {
        margin-left: 24px;
    }
}

@media only screen and (max-width: 378px) {
    .swiper-slide img {
        margin-left: 0px;
    }
}

@media only screen and (max-width: 968px) {
    .main_catalogoue {
        height: 100% !important;
    }
}

.tem_image {
    position: absolute;
    top: 6px;
    left: 5px;
    background: #6685c1;
    border-radius: 100px;
    width: 100%;
    max-width: 232px;
    height: auto;
    aspect-ratio: 232 / 229;
}

img.d-none.data {
    border-radius: 102px;
    border: 1px solid #ada0a063;
    width: 38px;
    height: 38px;
    padding: 3px 3px 3px 3px;
}

.old_images_edit img {
    width: 100%;
    max-width: 236px;
    height: auto;
    aspect-ratio: 236 / 144;
    border-radius: 14px;
}

.tem_image img {
    width: 100%;
    max-width: 184px;
    position: absolute;
}

.menuss {
    display: none;
}

.blurss {
    display: block;
}

.menuss {
    display: block;
    position: fixed;
    height: 100%;
    top: 0;
    width: 300px;
    left: -310px;
    transition: all 0.5s ease;
    z-index: 9999;
    background: #fff;
    box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
}

.blurss {
    left: 0;
}

.change_button_withf svg {
    position: absolute;
    top: -186px;
    bottom: 0;
    left: 16px;
    right: 0;
}

.barcode_images img {
    width: 200px !important;
    height: 100px !important;
    margin-bottom: 1pc;
}

.form-control-one:focus {
    border: none !important;
    box-shadow: 5px 0px 7px 5px #f7f7f7;
}

.form-control-one {
    border-radius: 8px;
    border: none !important;
    box-shadow: 0px 0px 6px 5px #f1f5fc;
    width: 100% !important;
    height: 49px;
}

.vertical-scroll {
    overflow-y: scroll;
    height: 90vh;
}

.vertical-scroll::-webkit-scrollbar {
    width: 4px;
}

.vertical-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.vertical-scroll::-webkit-scrollbar-thumb {
    background: #888;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.vertical-scroll::-webkit-scrollbar-button {
    display: none;
}

.card.card_1.position-relative.magzin_image img {
    height: 175px;
}

.card.add_sh.position-relative.magazin_card {
    height: 260px;
}

.magazin_text a p {
    font-size: 16px;
}

.accordion-body span,
a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

.accordion-body span,
a:hover {
    color: #000;
}

a.new_btns_pluse {
    color: white;
    text-decoration: none;
    padding: 0px 8px;
    cursor: pointer;
}

a.new_btns_min {
    text-decoration: none;
    color: white;
    padding: 0px 8px;
    cursor: pointer;
}

.under_text a {
    text-decoration: none;
    color: #000;
}

.icons_social a {
    color: #000;
}

.coupon-card:before {
    content: "";
    position: absolute;
    width: calc(100% + 12px);
    height: 173px;
    left: -8px;
    right: 1px;
    bottom: -107px;
    background: linear-gradient(to bottom, #ffffff00 0%, #ffffff calc(47% - 1px), #6585c0 45%, #ffffff calc(50% + 1px), #ffffff 100%);
}

.copy button {
    border: 1px solid #0000003b;
   padding: 3px 21px;
    border-radius: 4px;
    font-size: 11px;
}

.nextpages {
    margin: auto;
}

.doller_1 {
    color: brown;
    font-size: 20px;
    margin-right: 0px;
}

.add_more {
    position: relative;
}

.add_more:after {
    content: "";
    width: 90px;
    height: 90px;
    background: url(../../frontends-assets/img/footer-image.png) no-repeat right;
    background-size: contain;
    position: absolute;
    top: 0px !important;
    bottom: 0;
    overflow: hidden;
    left: 0px;
    border-radius: 5px 0 0 0;
}

#barcodeNumber {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='black' stroke-width='2' stroke-dasharray='6%2c14' stroke-dashoffset='13' stroke-linecap='square'/%3e%3c/svg%3e");
    text-transform: uppercase;
    width: 195px;
    height: 160px;
    display: block;
    margin: auto;
    padding: 24px;
    max-width: 900px;
    max-height: 900px;
}

.copy {
    margin-bottom: 7px;
}

.boxx-1 {
    margin: 0px 0px 0px -27px;
    width: 79px !important;
}

.coupan_imagess {
    padding-left: 24px;
}

.box-3 {
    width: 200px;
    display: flex;
    align-items: center;
    position: relative;
}

.logos.admin_logo img {
    float: right;
    /* margin-right: -14px; */
    border-radius: 102px;
    border: 1px solid #ada0a063;
    width: 44px;
    height: 44px;
    padding: 3px 3px 3px 3px;
    margin-top: 21px;
}

.coupan_textss img {
    width: 295px !important;
    height: 136px !important;
    margin: auto;
}


.buttondd {
    background: #fca9a1;
    padding: 7px 42px;
    border-radius: 6px;
    color: white;
    margin-top: 18px;
    width: 195px;
    height: 43px;
}

.buttondd:hover {
    background: #ff968c;
    color: #fff;
}

.card h1 {
    font-weight: revert;
    color: #ec8992;
    text-align: center;
    padding: 25px 20px;
}

@media (max-width: 600px) {
    .add_more:after {
        content: "";
        width: 82px;
        height: 82px;
        background: url(../../frontends-assets/img/footer-image.png) no-repeat right;
        background-size: contain;
        position: absolute;
        top: 2px !important;
        bottom: 0;
        overflow: hidden;
        left: 0px;
        z-index: 9999;
        border-radius: 5px 0 0 0;
        display: none;
    }
}

@media (max-width: 600px) {
    .coupan_number h2 {
        font-size: 15px !important;
    }

    .tabh {
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}

button.ms-3.new_signup a,
button.ms-3.new_signup_1 a {
    font-size: 14px;
    font-weight: 500;
}

button.ms-3.btn.btn-primary.new_login a {
    font-size: 15px;
    font-weight: 600;
}

.modal-footer {
    display: flex;
    justify-content: center !important;
}

.modal-footer.text-center button {
    padding: 3px 26px;
    border-radius: 13px;
}

.ffg {
    width: 100% !important;
}

.container-fluid.slider_main_box {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ── Global Slider Images ── */
.carousel_item {
    padding: 0 5px;
}
.carousel_item_image {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    display: block;
}
@media (max-width: 768px) {
    .carousel_item_image {
        max-height: 280px;
        border-radius: 8px;
    }
    .carousel_item {
        padding: 0 3px;
    }
}
@media (max-width: 480px) {
    .carousel_item_image {
        max-height: 200px;
        border-radius: 6px;
    }
}

.image_bot {
    align-items: center;
}

.ft_text p {
    font-weight: 300;
    margin: 5px 0px;
    font-size: 14px;
}

p.footer_big_text {
    font-weight: 400;
}

div#multi-dropdown ul li a {
    font-weight: 400;
}

/* button#multiLevelDropdownButton {
    box-shadow: 0px 0px 17px 0px #d0d0ffb8;
    margin-top: 1.6pc !important;
    width: 100%;
} */

button#multiLevelDropdownButton {
    box-shadow: 0px;
    margin-top: 1.6pc !important;
    width: 100% !important;
    border: 1px solid #dee2e6 !important;
    height: 43px !important;
}

ul.space-y-2.sidebar_pap li a img {
    width: 22px;
}

button.ms-3.new_signup a,
button.ms-3.new_signup_1 a {
    font-size: 14px;
    font-weight: 500;
}

button.ms-3.btn.btn-primary.new_login a {
    font-size: 15px;
    font-weight: 600;
}

.modal-footer {
    display: flex;
    justify-content: center !important;
    border: none !important;
}

.tabs {
    display: flex;
    padding: 20px 18px;
    color: #fff !important;
    text-decoration: none;
}

.business ul {
    list-style: none;
    padding: 0;
}

.business {
    width: 302px !important;
    background-color: #6685c1;
    color: #fff;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    overflow-y: scroll;
}

.sidebarbussiness::-webkit-scrollbar {
    width: 4px;
}

.sidebarbussiness::-webkit-scrollbar-track {
    background: transparent;
}

.sidebarbussiness::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
}

.sidebarbussiness::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.45);
}

.sidebarbussiness {
    width: 240px;
    background: linear-gradient(180deg, #6685c0, #8ba3d4 60%, #eea59e);
    color: #fff;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 0;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
    box-shadow: 4px 0 20px rgba(0,0,0,0.08);
}

.sidebarbussiness ul {
    list-style: none;
    padding: 0;
}

.sidebarbussiness li {
    justify-content: left;
    padding: 12px 20px;
    position: relative;
}

.sidebarbussiness li a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.sidebarbussiness li a:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.1);
}

.bussiness ul {
    list-style: none;
    padding: 0;
}

.business li {
    cursor: pointer;
    justify-content: right;
    padding: 7px 30px;
    position: relative;
}

.bussiness li {
    cursor: pointer;
    display: flex;
    justify-content: right;
    padding: 20px 30px;
    position: relative;
}

.icon_text {
    color: #ec8992;
    font-size: 27px;
    margin-left: -7px;
    margin-top: 18px;
}

.text {
    text-align: left !important;
}

.bttn {
    background: #ec8992;
    color: #fff;
    text-align: center;
    margin-left: 58px;
    margin-top: 11px;
    padding: 10px 20px 10px 20px;
    border: 1px solid;
    border-radius: 7px;
}

.sidebarbussiness h3 {
    margin-left: 14px;
    font-size: 19px;
    margin-top: 0;
}

.business h3 {
    margin-left: 14px;
    font-size: 16px;
    margin-top: 0;
    font-weight: 400;
}

.sidebarbussiness li.active:after {
    display: none; /* replaced by coral border-left highlight */
}

.business li.active:after {
    content: "";
    background: url(../../frontends-assets/img/menu-icon.png) no-repeat right;
    background-size: contain;
    height: 185px;
    position: absolute;
    right: -43px;
    top: -47px;
    width: 86px;
}

.tabs:hover {
    color: #fff;
}

.sidebarbussiness .active h3 {
    font-size: 15px;
}

input#basic-url3:focus {
    border-color: #dee2e6;
    box-shadow: none !important;
    ;
}

.tabs:hover {
    text-decoration: none;
}

.logos img {
    height: 61px;
    width: auto;
    margin-left: 34px;
    margin-top: 11px;
    display: inline;
}

.menu-btnx,
.close-btn {
    background: transparent;
    border: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: 11px;
    top: 8px;
    display: none;
    cursor: pointer;
}

.menu-btnx {
    left: 3px;
}

@media (max-width: 900px) {
    .logos img {
        margin-left: 74px !important;
    }

    .blurrrrr {
        background: rgba(0, 0, 0, 0.6);
        filter: initial;
        left: 0 !important;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
    }

    .side-se {
        display: block !important;
    }

    .header .menu .drawer {
        box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
        padding-top: 50px;
        height: 100%;
        width: 299px;
        background: #fff;
        flex-direction: column;
        position: fixed;
        left: -321px;
        transition: all 200ms linear;
        overflow: hidden;
    }

    .header .menu .drawer a {
        padding: 20px;
    }

    .menu-btnx,
    .close-btn {
        display: block;
    }

    .header .logo {
        margin-left: 17px;
    }

    .drawer-visible {
        left: 0 !important;
    }
}

.cus_container {
    max-width: 1440px;
    margin: auto !important;
    position: relative;
    padding: 0;
}

/* Remove the legacy 80px section padding from theme CSS (styles.css line 133) */
@media (min-width: 901px) {
    /* `~ main > section`: pages sit inside <main id="main"> since the a11y landmark (#36) */
    .desktop-header-wrap ~ section,
    .desktop-header-wrap ~ main > section {
        padding-top: 0;
    }
}
/* Mobile: no 80px top padding — desktop header is hidden, gap is unnecessary */
@media (max-width: 900px) {
    section {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }
}

.modal-backdrop.fade {
    position: relative;
}

.col-lg-6.side {
    width: 853px;
}

@media screen and (min-width: 900px) and (max-width: 1326px) {
    .nav-align-top .new_add {
        width: 208px;
    }

    .menu .last_login_url a {
        padding: 5px 7px !important;
    }

    .nav-align-top .new_add {
        width: 233px !important;
    }

    .menu .last_login_url a {
        padding: 5px 1px;
    }
}

@media only screen and (max-width:900px) {

    .sidebarbussiness {
        display: none
    }

    .navbar {
        height: 194px !important;
        background: #fff !important;
    }

    .menu .last_login_url {
        display: none !important;
    }

    .cata {
        display: block !important;
        margin-top: -27px;
        text-align: center;
        font-size: 19px;
    }

    .menu {
        display: block !important;
    }

    .nav-align-top .new_add {
        margin: auto !important;
    }

    .menu .search {
        margin: auto;
        margin-top: 13px !important;
        width: 100% !important;
    }

    .menus-btn {
        display: block !important;
    }

    .header_logo_1 {
        display: none;
    }

    .data {
        display: block !important;
        margin-top: -34px;
        width: 34px;
        float: right;
        border-radius: 30px;
    }

}

.first {
    color: #6685c1;
    text-decoration: none;
}

.first:hover {
    color: #6685c1;
    text-decoration: none;
}

.secondbtn {
    background: #6685c1;
    box-shadow: 0px 1px 6px -3px #000;
    width: 100px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
}

.last_login_url2 {
    position: absolute;
    bottom: 26px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
}

.lastbtn {
    width: 100px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    background: #fca9a1;
    color: white;
    border-radius: 6px;
}

.drawer {
    padding: 16px;
}

.menus-btn svg {
    height: 36px;
    width: 31px;
    fill: #fcafa7;
}

.close-btn i {
    font-size: 24px;
    margin-left: -23px;
}

.menus {
    display: block;
    position: fixed;
    height: 100%;
    top: 0;
    width: 300px;
    left: -310px;
    transition: all 0.5s ease;
    z-index: 9999;
    background: #fff;
    box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
}

.blurs {
    left: 0px;
}

.first span i {
    color: #000;
    float: right;
    margin-right: 6px;
}

.your-new-class {
    background: rgba(0, 0, 0, 0.6);
    left: 0px;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
}

.nav-align-top ul li a {
    font-size: 11px;
}

.nav-align-top .new_add .menual_change,
.nav-align-top .new_add .menual_change:hover {
    font-weight: bold;
    color: #333333;
}

.nav-align-top .new_add .menual_change.active {
    color: white;
}

.navbar.header.cus_container {
    margin: auto;
}

menu a:hover {
    color: #000 !important;
}

.new_add li a:hover {
    color: #000;
}

@media only screen and (max-width: 1440px) and (min-width: 901px) {
    .resp {
        flex: 0 0 auto !important;
        width: 16.66666667% !important;
    }

    .resp2 {
        flex: 0 0 auto !important;
        width: 83.33333333% !important;
    }
}

@media (min-width: 1001px) and (max-width: 1140px) {
    .btns {
        padding: 12px 22px 12px 22px !important;
    }

    .application h3 {
        font-size: 20px !important;
    }
}

@media (min-width: 1141px) and (max-width: 1246px) {
    .btnss {
        padding: 12px 37px 12px 37px !important;
    }
}

@media (min-width: 901px) and (max-width: 1000px) {
    .btnss {
        padding: 12px 20px 12px 19px !important;
    }

    .text img {
        margin-left: -3px !important;
        width: 88px;
    }

    .application h3 {
        font-size: 17px !important;
    }
}

.btnss:hover {
    color: #fff;
    background-color: #ec8992;
    border-color: #ec8992;
}

.btnss:focus {
    box-shadow: 0 0 0 0.25rem rgb(255 255 255);
}

.btnss:active:focus {
    box-shadow: 0 0 0 0.25rem rgb(255 255 255);
}

.menu-btns {
    display: none;
    color: white;
    border: none;
    background: #ec8f98;
    border-radius: 7px;
    padding: 12px 20px 12px 30px;
    font-size: 16px;
    cursor: pointer;
}

.sidebars {
    width: 335px;
    background-color: #fff;
    color: white;
    box-shadow: 1px 19px 16px 8px #eee;
    padding-top: 20px;
    position: fixed;
    height: 100%;
    z-index: 11;
    right: -345px;
    transition: right 0.3s ease-in-out;
}

.collapse {
    visibility: inherit;
}

.sidebars a {
    color: white;
    text-decoration: none;
}

.content {
    flex: 1;
    padding: 20px;
}

.side-section {
    background: #fff;
    margin-left: -10px;
    box-shadow: 1px 19px 16px 8px #eee;
}

.side-sect {
    background: #fff;
    box-shadow: 1px 19px 16px 8px #eee;
}

.panel-default {
    border-color: #fff !important;
}

.scroll-container {
    margin-left: 0px !important;
    overflow-x: hidden;
}

.accordion-body ul {
    list-style: none;
    margin: -15px 0px 5px -22px;
}

.accordion-button {
    font-weight: 400;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #fff !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(255 255 255) !important;
}

.accordion-button::after {
    color: black !important;
}

.accordion-item {
    background-color: #fff;
    margin-left: -2px;
    border: 1px solid rgb(255 255 255) !important;
}

.accordion-button:not(.collapsed) {
    color: #565353 !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 -1px 0 rgb(255 255 255) !important;
}

#style-10::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
    border-radius: 10px;
}

#style-10::-webkit-scrollbar {
    width: 7px;
    background-color: #f5f5f5;
}

#style-10::-webkit-scrollbar-thumb {
    background-color: #aaa;
    margin-right: 10px;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg, rgb(193 193 193) 25%, #bfb9b9 25%, #bfb9b9 50%, rgb(191 185 185) 40%, rgb(191 185 185) 75%, #bfb9b9 75%, #bfb9b9);
}

#style-11::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
    border-radius: 10px;
}

#style-11::-webkit-scrollbar {
    width: 7px;
    background-color: #f5f5f5;
}

#style-11::-webkit-scrollbar-thumb {
    background-color: #aaa;
    margin-right: 10px;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg, rgb(193 193 193) 25%, #bfb9b9 25%, #bfb9b9 50%, rgb(191 185 185) 40%, rgb(191 185 185) 75%, #bfb9b9 75%, #bfb9b9);
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    background-image: url(frontends-assets/img/dropdown.png) !important;
}

.accordion-button::after {
    background-image: var(--bs-accordion-btn-active-icon);
    background-image: url(frontends-assets/img/dropdown.png) !important;
}

.panel {
    border: 1px solid#fff !important;
    margin-left: 20px !important;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 0%) !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 0%) !important;
}

.text img {
    margin-left: 16px;
    width: 88px;
}

.text h2 {
    font-size: 16px;
    margin-top: 35px;
    font-weight: 500;
    margin-left: 19px;
}

.header {
    position: relative !important;
    padding: 0px 15px;

}

.accordion-headmer button {
    font-size: 15px !important;
}

.accordion {
    margin-left: -15px;
}

.icon {
    font-size: 17px;
    margin-right: 10px;
    color: #000;
}

.accordion-body ul li a {
    font-size: 12px !important;
    text-decoration: none;
    color: #565353;
    font-weight: 400;
}

.icon_box {
    font-size: 12px;
    margin-right: 13px;
    color: #a1a1a1;
    margin-top: 21px;
}

.application {
    color: #222222;
    text-align: center;
}

.application h3 {
    font-size: 22px;
    font-weight: 500;
    margin: 13px 2px 8px 3px;
}

.application p {
    color: #000000c7;
    font-size: 14px;
    font-weight: 400;
    margin: -5px 5px 0px 5px;
}

.collapse-container {
    border: 1px solid #ccc;
    margin: 20px;
    padding: 10px;
}

.collapse-header {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.collapse-icon {
    margin-right: 10px;
}

.collapse-content {
    display: none;
    padding: 10px;
}

.heading {
    font-size: 18px !important;
}

.section_hr {
    height: 0px;
    border-top: 2px solid rgb(221 55 39);
    margin-top: 4px;
    margin: 9px 4px 8px 11px;
    margin-left: 11px;
    margin-bottom: 18px;
    margin-right: 4px;
}

@media (max-width: 900px) {
    .sidebars {
        box-shadow: none !important;
    }

    .col-lg-6.side {
        width: 100% !important;
    }

    .side-sect {
        display: none !important;
    }

    .blure {
        background: rgba(0, 0, 0, 0.6);
        left: 0;
        display: flex;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 300;
    }

    .menu-btns {
        display: block;
        width: 94%;
    }

    .sidebars {
        right: -335px;
        height: 100%;
        z-index: 9999;
        width: 288px !important;
        display: block !important;
        margin-top: -210px;
    }

    .text_time img {
        margin-left: -75px !important;
    }

    .text {
        text-align: center;
    }

    .btnss {
        margin-left: 90px !important;
    }

    .scrol-container {
        width: 100%;
    }

    .side-section {
        box-shadow: none;
        width: 100% !important;
        display: contents;
    }

    .create-list {
        display: none !important;
    }

    .application h3 {
        margin-left: 0px !important;
    }

    .text_item img {
        margin-left: 0px !important;
    }

    .application p {
        margin-left: 0px !important;
    }

    .application {
        margin-top: 0px !important;
    }

    .slide-team {
        margin-top: 0px !important;
    }

    .side-sect {
        box-shadow: none;
        width: 100% !important;
        margin-left: 10px !important;
    }
}

.btns {
    background: #ec8992;
    border: 1px solid #ec8992;
    padding: 15px 0px 15px 0px !important;
    border: 1px solid;
    border-radius: 7px;
    color: #fff;
    margin-top: -13px;
    margin-left: 0px !important;
    letter-spacing: 0px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.create {
    color: #6585c0;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.localiz {
    padding: 0px 14px 0px 15px;
    background: #fcfcfc;
    margin-top: 8px;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between
}

.localiz.open_active {
    background: #e3e9f3;
}

.side {
    width: 55% !important;
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #fff;
}

.modal-body {
    padding-bottom: 30px;
}

.slide-content span {
    font-size: 12px;
    color: #767676;
}

.swiper-slide img {
    width: 63% !important;
    object-fit: unset;
    border-radius: 7px;
    height: 475px !important;
}

.side_content_withside {
    margin-left: 5pc;
    margin-left: 0;
    width: 55px;
    position: absolute;
    right: 10px;
    height: 130px;
}

.slide-content p {
    font-size: 17px;
}

.swiper {
    width: unset;
    height: unset;
}

@media screen and (max-width: 373px) {
    .coupan_text {
        margin-top: 0px !important;
    }

    .conditions_1 {
        margin-top: -31px !important
    }
}

.modal-backdrop {
    z-index: 4 !important;
}

.screen-btn {
    background: #6585c0;
    color: #fff;
    border-radius: 9px;
    border-radius: 20px;
}

.screen-btn:hover {
    background: #6585c0;
    color: #fff;
    border-radius: 9px;
    border-radius: 20px;
}

.modal-header {
    border: none;
}

.modal_hesd {
    border-bottom: 1px solid #dee2e6;
}

.modal.show .modal-dialog {
    width: 97%px;
    transform: none;
    display: flex;
    padding: 146px 7px;
    overflow: hidden;
    min-height: 450px;
    align-items: start;
}

.modals.show .modal-dialog {
    padding: 0;
    position: fixed;
    max-width: 96%;
    top: 5px;
    bottom: 5px;
    left: 10px;
    right: 10px;
    min-height: 450px;
    align-items: start;
}

.modal-dialog .modal-content {
    min-height: 450px;
    margin: auto;
}

.modal-backdrop {
    --bs-backdrop-zindex: 0;
}

.flow {
    display: flex;
}

@media screen and (max-width: 991px) {
    .modals.show .modal-dialog {
        overflow-y: scroll;
    }
.owl-carousel .owl-item img {
   
    height: 180px;
}
    .slide-content {
        margin-top: 13px;
    }

    .vertical-scroll {
        overflow-y: hidden;
        height: -webkit-fill-available;
    }
}

@media screen and (max-width: 501px) {
    .swiper-slide img {
        width: 49% !important;
        object-fit: contain;
        border-radius: 7px;
    }
}

@media screen and (max-width: 1380px) {}

.under_text a p {
    text-transform: capitalize;
}

.under_text.d-flex.justify-content-between.py-1.px-1 {
    z-index: 1;
}

.new_under_text.px-1 {
    z-index: 1;
}

.card.card_1.position-relative img {
    border-radius: 11px 11px 9px 9px;
    width: 100%;
    height: 232px;
    z-index: 11;
    object-fit: fill;
}

.card.card_1.card_10.position-relative img {
    border-radius: 11px 11px 9px 9px;
    width: 100%;
    height: 283px;
    z-index: 11;
}

.coupan_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px;
}

.coupan_image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto;
}

ul.space-y-2.sidebar_pap li a {
    color: #50525d;
    font-weight: 400;
}

.new_under_text.px-1 p {
    font-size: 13px;
    font-weight: 400;
    color: #606060;
}

.card.resolutions::before{
    content: "";
    position: absolute;
    width: calc(100% + 2px);
    height: 225px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 97%);
    bottom: -1px;
    left: -1px;
border-radius: 20px;
}

.re_images img {
    object-fit: fill;
    height: 189px;
    width: 37%;
    max-width: 180px;
    max-height: 180px;
}

@media only screen and (max-width: 1199px) and (min-width: 957) {
    .box_res {
        width: 49.666667%;
    }
}

@media screen and (max-width: 1199px) {
    .card.resolutions {
        margin-top: 15px;
        width: 493px;
    }
}

@media only screen and (max-width: 958) and (min-width: 768px) {
    .box_res {
        width: 49.666667%;
    }
}

@media screen and (max-width: 575px) {
    .coupan_image img {
        margin-top: 0px !important;
    }

    .image_ft img {
        width: 43%;
        margin-left: 3px;
    }

    .image_ft {
        display: block;
        margin-top: 0px;
    }

    .border_rr {
        padding: 30px 15px;
    }

}

@media screen and (max-width: 757px) {
    .card.resolutions {
        width: 100%;
    }
}

.coupon {
    border-bottom: white;
    box-shadow: 0px 2px 0px color(prophoto-rgb 0.43 0.45 0.67 / 0.1);
    background: #6585c0;
    padding: 2px;
    border-radius: 15px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .box_ress {
        width: 29%;
    }
}

.city_11 ul li a {
    text-decoration: none;
    color: black;
    font-size: 14px;
    font-weight: 600;
}

button.nt_button.btn {
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
    width: auto;
    height: auto;
}

.reduction_12.ms-4 {
    font-size: 11px;
}

.conditions p {
    font-size: 13px;
    text-decoration: underline;
}

.coupon-card {
    background: #fff;
    text-align: center;
    border-radius: 13px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    min-height: 155px;
    height: auto;
    overflow: hidden;
}

.col-md-3.nice {
    border-right: 2px dotted;
    height: auto;
    min-height: 153px;
}

.coupon-card h3 {
    font-size: 28px;
    font-weight: 400;
    line-height: 40px;
}

.coupon-card p {
    font-size: 12px;
    font-weight: 400;
}

.coupon-row {
    display: flex;
    align-items: center;
    margin: 25px auto;
    width: fit-content;
}

#cpnCode {
    border: 1px dashed #fff;
    padding: 10px 20px;
    border-right: 0;
}

#cpnBtn {
    border: 1px solid #fff;
    background: #fff;
    padding: 10px 20px;
    color: #7158fe;
    cursor: pointer;
}

.circle1,
.circle2 {
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #6585c0;
}

.circle1 {
    left: -25px;
}

.circle2 {
    right: -25px;
}

.coupan_text span {
    margin-top: 0.4rem !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.coupan_number h2 {
    font-size: 15px;
    font-weight: 700;
    color: #ec8992;
    text-align: start;
    margin: 0;
    line-height: 1.2;
}

.conditions_1 p a {
    font-size: 11px;
    text-decoration: none;
}

.conditions_1 p {
    margin: 0;
}

@media screen and (max-width: 577px) {
    .cate_change {
        margin-left: 0.5rem;
    }
}

@media screen and (max-width: 500px) {
    input.form-control.search {
        padding: 11px 13px 11px 35px;
        border-radius: 101px;
        color: gray;
        box-shadow: 0px 0px 14px 0px #bfcded;
        border: 2px solid #6685c0;
        width: 377px;
    }

    .button_catalogue button {
        width: 120px !important;
    }

    .main_catalogoue:after {
        width: 37px !important;
    }

    .side_content_withside {
        margin-left: 0pc;
    }
}

@media screen and (max-width: 455px) {

    .reduction_respo {
        margin-left: -29px;
    }


    .reset-btn {
        width: 95% !important;
    }

    .drop-btn {
        display: inherit !important;
    }

    .reduction_respo {
        display: flex;
        margin-top: 12px;
        justify-content: space-between;
    }

    .re_images img {
        width: 100%important;
        object-fit: fill;
        max-width: 180px;
        max-height: 180px;

    }
}

.coupon {
    margin-top: 1.5rem;
}

@media screen and (max-width: 397px) {
    .coupan_image {
        margin-top: 27px !important;
    }

    .card.resolution::after {
        width: 333px;
    }
}

.navbar-collapse.collapseing {
    display: block;
}

.media_menu {
    display: none;
}

p.tc.text-primary {
    font-size: 11px;
    cursor: pointer;
}

.reduction_12.ms-4 h4 {
    font-size: 22px;
    text-transform: capitalize;
}

.reduction_12 span {
    font-size: 15px;
}

.reduction_12.ms-4 {
    margin-left: 34px !important;
}

.card.resolution::after {
    content: "";
    position: absolute;
    width: calc(100% + 12px);
    height: 225px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 97%);
    bottom: 0px;
    left: -1px;
}

@media only screen and (max-width: 1198px) and (min-width: 900px) {
    .sidebar_side {
        width: 20%;
    }

    .multi_respo {
        width: 80%;
    }
}

.card.card_1.position-relative::after {
    content: "";
    position: absolute;
    width: calc(100% + 22px);
    height: 207px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgb(255 255 255 / 58%) 50%, rgb(255 255 255) 100%);
    left: -9px;
    bottom: 1px;
    box-shadow: 0px 0px 19px 0px white;
}

li.nav-item.change_category button {
    font-size: 14px;
}

.conditionsss p a {
    font-size: 11px;
    text-decoration: none;
}

.card.card_1.position-relative::after {
    content: "";
    position: absolute;
    background: red;
    background: linear-gradient(to bottom, #ec899200 0%, #fffffff0 100%, #ffffff 100%, #ffffff 100%);
    left: -3px;
    bottom: 0;
    box-shadow: 0px 0px 19px 0px white;
    width: calc(100% + 5px);
    height: 40px;
}

.d-flex.main_coupan {
    flex-wrap: nowrap;
    flex-direction: row;
    height: 100%;
    cursor: pointer;
    gap: 4px;
}

.box_res {
    max-width: 445px;
}

.box-2 {
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-1 {
    border-right: 2px dotted;
    padding: 0px 7px 0px 1px;
    width: 66px;
    display: flex;
    align-items: center;
    border-right-style: dashed;
    border-right-color: #333333b5;
}

.coupan_imagess p {
    transform: rotate(270deg);
    font-size: 13px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.chages_cupon {
    background: #ec8992;
    border-bottom: white;
    box-shadow: 0px 2px 0px #ec89920f !important;
    cursor: pointer;
}

.conditions_1 {
    color: #6685c1;
    margin-top: 1pc !important;
    text-align: start;
}

.coupan_textes span {
    font-size: 14px;
    font-weight: 400;
}

.conditionsss {
    color: #6685c1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.chages_cupon_cricle {
    border: 2px solid #ec8992;
}

.conditionsss p {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

.coupan_images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 4px 8px;
}

.coupan_images img {
    width: 59px;
    height: 50px;
    object-fit: contain;
}

.coupan_texts {
    font-size: 10px;
}

.coupan_texts p {
    font-size: 13px;
}

.coupan_texts span {
    font-size: 11px;
    line-height: 1.2;
    display: block;
    margin-bottom: 2px;
}

#ivLargeImage {
    cursor: zoom-out;
    visibility: visible;
}

.re_images img {
    object-fit: fill;
    max-width: 180px;
    max-height: 180px;
}

/* ========================================================================
   Liflio Catalogue Cards - New Design System
   Background: #F6F7F8 | Cards: white, 20px radius | Fonts: Bricolage Grotesque / DM Sans
   ======================================================================== */

/* Section header */
.liflio-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0;
}

.liflio-section-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.liflio-section-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fef2f0;
    border-radius: 10px;
    flex-shrink: 0;
}

.liflio-section-header__title {
    font-size: 22px;
    font-weight: 700;
    color: #1A1D2E;
    font-family: 'Bricolage Grotesque', sans-serif;
    margin: 0;
    line-height: 1.3;
}

.liflio-section-header__link {
    font-size: 13px;
    font-weight: 500;
    color: #6c8dc6;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.liflio-section-header__link:hover {
    color: #6685c0;
    text-decoration: underline;
}

/* Card grid */
.liflio-catalogue-grid {
    gap: 0;
}

/* Catalogue card */
.liflio-catalogue-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.liflio-catalogue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.liflio-catalogue-card--expired {
    filter: grayscale(60%);
    opacity: 0.75;
}

.liflio-catalogue-card--expired:hover {
    filter: grayscale(30%);
    opacity: 0.9;
}

/* Image frame - relative container for badge overlay */
.liflio-catalogue-card__image-frame {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #F6F7F8;
}

/* x-optimized-img wraps the image in <picture> to offer a WebP srcset.
   <picture> is an INLINE element with auto height, so height:100% on the
   image below would resolve against the wrapper instead of the 200px frame
   and the card would collapse. Give the wrapper the frame's box so the
   percentage resolves the way it did before the wrapper existed. */
.liflio-catalogue-card__image-frame picture {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-city-card picture {
    display: block;
}

.liflio-catalogue-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.liflio-catalogue-card:hover .liflio-catalogue-card__image {
    transform: scale(1.03);
}

/* Badge overlay (absolute positioned on image) */
.liflio-catalogue-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.liflio-catalogue-card__badge-value {
    display: inline-block;
    background: #6685c0;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    line-height: 1.3;
}

.liflio-catalogue-card__badge-status {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    line-height: 1.3;
    width: fit-content;
}

.liflio-catalogue-card__badge-status--active {
    background: #eea59e;
    color: #FFFFFF;
}

.liflio-catalogue-card__badge-status--expired {
    background: #9CA3AF;
    color: #FFFFFF;
}

.liflio-catalogue-card__badge-status--coming-soon {
    background: #F59E0B;
    color: #FFFFFF;
}

/* ── Boost tier badges ──────────────────────────────────────────── */

/* Expiring soon (bientôt) — amber pulse */
.liflio-catalogue-card__badge-status--expiring-soon {
    background: #F59E0B;
    color: #FFFFFF;
    animation: liflio-pulse 2s ease-in-out infinite;
}

/* Standard tier: "A la une" / Featured — coral with subtle glow */
.liflio-boost-badge--featured {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #eea59e 0%, #e8847b 100%);
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    line-height: 1.3;
    animation: liflio-glow 3s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(238, 165, 158, 0.4);
}

/* Featured tier: "Offre phare" / Hot deal — red-orange with pulse */
.liflio-boost-badge--hot_deal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    line-height: 1.3;
    animation: liflio-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Premium tier: "Spotlight" — gold with shimmer */
.liflio-boost-badge--spotlight {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
    background-size: 200% 100%;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    line-height: 1.3;
    animation: liflio-shimmer 3s linear infinite;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

/* ── Badge animations ───────────────────────────────────────────── */

@keyframes liflio-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

@keyframes liflio-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(238, 165, 158, 0.3); }
    50% { box-shadow: 0 0 14px rgba(238, 165, 158, 0.6); }
}

@keyframes liflio-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Boost badge inside coupon/reduction cards ──────────────────── */

.liflio-boost-badge-inline {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

/* ── Date-driven status badges ──────────────────────────────────── */

/* "Nouveau" — green with entrance animation */
.liflio-badge--new {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #FFFFFF;
    animation: liflio-badge-enter 0.4s ease-out;
}

/* "Dernières heures!" — red with urgent pulse */
.liflio-badge--last-hours {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #FFFFFF;
    animation: liflio-urgent-pulse 1s ease-in-out infinite;
}

@keyframes liflio-badge-enter {
    0% { opacity: 0; transform: scale(0.8) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes liflio-urgent-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* ── Time remaining progress bar ────────────────────────────────── */

.liflio-time-bar {
    width: 100%;
    height: 3px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    margin: 2px 0 4px;
}

.liflio-time-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

.liflio-time-bar__fill--urgent {
    animation: liflio-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes liflio-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Card entrance animations (staggered) ───────────────────────── */

.catalogueContainer,
.col-xl-6.mb-3.wds,
.col-xl-6.col-md-6.col-12 {
    animation: liflio-card-enter 0.4s ease-out both;
}

.catalogueContainer:nth-child(1), .col-xl-6.mb-3.wds:nth-child(1) { animation-delay: 0s; }
.catalogueContainer:nth-child(2), .col-xl-6.mb-3.wds:nth-child(2) { animation-delay: 0.05s; }
.catalogueContainer:nth-child(3), .col-xl-6.mb-3.wds:nth-child(3) { animation-delay: 0.1s; }
.catalogueContainer:nth-child(4), .col-xl-6.mb-3.wds:nth-child(4) { animation-delay: 0.15s; }
.catalogueContainer:nth-child(5), .col-xl-6.mb-3.wds:nth-child(5) { animation-delay: 0.2s; }
.catalogueContainer:nth-child(6), .col-xl-6.mb-3.wds:nth-child(6) { animation-delay: 0.25s; }
.catalogueContainer:nth-child(7), .col-xl-6.mb-3.wds:nth-child(7) { animation-delay: 0.3s; }
.catalogueContainer:nth-child(8), .col-xl-6.mb-3.wds:nth-child(8) { animation-delay: 0.35s; }

@keyframes liflio-card-enter {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Card hover micro-interactions ──────────────────────────────── */

.liflio-catalogue-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.liflio-catalogue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card.resolutions {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.resolutions:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.coupon.chages_cupon {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coupon.chages_cupon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .catalogueContainer,
    .col-xl-6.mb-3.wds,
    .col-xl-6.col-md-6.col-12,
    .liflio-boost-badge--featured,
    .liflio-boost-badge--hot_deal,
    .liflio-boost-badge--spotlight,
    .liflio-badge--last-hours,
    .liflio-catalogue-card__badge-status--expiring-soon,
    .liflio-time-bar__fill--urgent {
        animation: none !important;
    }
    .liflio-catalogue-card:hover,
    .card.resolutions:hover,
    .coupon.chages_cupon:hover {
        transform: none;
    }
}

/* Card body */
.liflio-catalogue-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.liflio-catalogue-card__brand {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.liflio-catalogue-card__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1A1D2E;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.liflio-catalogue-card__date {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
}

.liflio-catalogue-card__view-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6c8dc6;
    margin: 0;
    margin-top: auto;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.liflio-catalogue-card:hover .liflio-catalogue-card__view-link {
    color: #6685c0;
}

/* Meta row: view count + page count */
.liflio-catalogue-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
}

.liflio-catalogue-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6685c0;
    line-height: 1;
}

.liflio-catalogue-card__meta-item svg {
    stroke: #6685c0;
}

/* Load more button */
.liflio-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #6685c0;
    border: 1.5px solid #6685c0;
    border-radius: 12px;
    padding: 10px 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.liflio-load-more-btn:hover {
    background: #6685c0;
    color: #FFFFFF;
}

.liflio-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================================================
   Mobile App View - Hide old desktop elements
   Breakpoint: 900px to match existing mobile layout rules in this file
   ======================================================================== */
@media (max-width: 900px) {
    .desktop-header-wrap {
        display: none !important;
    }
    .sb-mobile-cats {
        display: none !important;
    }
    .hm-tabs-wrap {
        display: none !important;
    }
    .sidebar_side {
        display: none !important;
    }
    .liflio-section-header {
        display: none !important;
    }
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
    .liflio-section-header__title {
        font-size: 18px;
    }

    .liflio-catalogue-card__image-frame {
        height: 170px;
    }

    .liflio-catalogue-card__title {
        font-size: 14px;
    }
}

@media screen and (max-width: 575px) {
    .liflio-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .liflio-catalogue-card__image-frame {
        height: 200px;
    }
}

/* Header login link.
   The links in .menu .last_login_url are styled by POSITION in main.css
   (:first-child, :nth-child(2), :last-child). Two links were added to that row
   after those rules were written — the merchant bridge and the shopping list —
   which pushed "Se connecter" into a slot no rule covers. It then fell back to
   the base rule's color:#fff and went invisible against the white header, with
   only the #f4f7fe hover tint hinting it was there.
   Styled by class now, so adding another link to the row cannot blank it again. */
.menu .last_login_url a.header-login-link {
    color: #2e5da8;
    font-weight: 600;
    padding: 7px 16px;
    border: 1px solid #c9d6ee;
    border-radius: 50px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.menu .last_login_url a.header-login-link:hover,
.menu .last_login_url a.header-login-link:focus-visible {
    background: #eef3fc;
    border-color: #6685c1;
    color: #1f4586;
}