.container-header {
    background-color: #2C1A47 !important;
    background-image: none !important;
  }

body {
    background-color: #ece3cd42 !important;
}

ul.coupons li.row.item {
    background-color: #ffffff;
    box-shadow: 0 2px 6px 4px rgba(51, 51, 51, .15);
    border-radius: 10px;
  border: 4px Solid #FFF;  
}

.cmcouponlisting .merchantContainer {
    cursor: pointer;
}

img.dj-icon {
    width: 133px;
}

.copyButton.copied {
  background-color: #0fbec3;
  border-color:
#0fbec3;
  color: white;
}


.couponCode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FAF8F2; /* Светлый голубой фон */
  border: 2px dashed #aaa; /* Пунктирная голубая рамка */
  border-radius: 8px; /* Скругленные углы */
  padding: 8px 12px; /* Внутренние отступы */
  width: fit-content; /* Ширина по содержимому */
  margin: 15px auto;
}

.code {
  font-family: monospace; /* Моноширинный шрифт для кода */
  font-size: 18px; /* Размер шрифта */
  font-weight: bold; /* Жирный шрифт */
  color: #333; /* Темный цвет текста */
  margin-right: 10px; /* Отступ справа от кода */
}

.copyButton {
  background-color: #0fbec3; /* Голубой цвет кнопки (до нажатия) */
  color: white; /* Белый цвет текста */
  border: none; /* Убираем стандартную рамку */
  border-radius: 6px; /* Скругленные углы кнопки */
  padding: 6px 12px; /* Внутренние отступы */
  font-size: 14px; /* Размер шрифта */
  font-weight: 500; /* Полужирный шрифт */
  cursor: pointer; /* Курсор указателя при наведении */
  position: relative; /* Для правильной работы transform */
}

.copyButton:not(.copied):hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Легкая тень для эффекта глубины */
  background-color: #0fbec3; /* Голубой цвет кнопки (до нажатия) */
  color: #FFF;
}

.copyButton:not(.copied):active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Уменьшаем тень при нажатии */
}

.copyButton.copied {
  background-color: #0fbec3; /* Зеленый цвет кнопки после нажатия ("COPIED") */
}

.copyButton.copied:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Тень при наведении */
  background-color: #0fbec3; /* Сохраняем зеленый цвет */
  color: #FFF;
}

.copyButton.copied:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Уменьшаем тень при нажатии */
}

.cmcouponlisting .couponCode {
  font-size: 25px !important;
}

.copyButton {
  font-size: 18px;
}

.cmcouponlisting .couponCodeContainer {
 
  background-color: #F2F0EA !important;
 
}

/* Обычный стиль для компьютеров (как у тебя) */
.couponCode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FAF8F2;
  border: 2px dashed #aaa;
  border-radius: 8px;
  padding: 8px 12px;
  width: fit-content;
  margin: 15px auto;
}

.code {
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

@media (max-width: 600px) {
  .couponCode {
    display: inline-flex; /* !!! Чтобы ширина была по содержимому */
    align-items: center;
    justify-content: space-between;
    background-color: #FAF8F2;
    border: 2px dashed #aaa;
    border-radius: 8px;
    padding: 8px 12px;
    width: auto; /* ширина по содержимому */
    max-width: 80vw; /* но не больше 90% ширины экрана */
    box-sizing: border-box;
    overflow: hidden;
    flex-wrap: nowrap; /* всегда в одну строку */
  }

  .code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-right: 10px;
    flex-grow: 1;
    min-width: 0;
  }

  .copyButton {
    background-color: #0fbec3;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }
}

.couponCode a {
    font-weight: bold;
    color: #e55b0e;
    font-size: 18px;
  }

@media (width >= 768px) {
  .merchantContainer.col-md-3 {
  width: 17% !important;
}
    .col-md-9 {
    width: 80% !important;
  }
}

.merchantLogo img {
  border-radius: 10px;
}

.cmcouponlisting .merchantDetail .merchants .item {
  background-color: #FFFFFFD1 !important;
  border-radius: 10px !important;
  border: 3px Solid #F2F0EA !important;
}

.merchants .name {
  font-weight: 500 !important;
  font-size: 1.5rem !important;
}

.voteContainer.col-8 {
  text-align: right;
  padding: 5px;
}

@media (max-width: 767px) {
    .detailContainer .couponButton {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: fit-content; /* или задайте фиксированную ширину, например, 200px */
    }

    .merchants .merchantContainer {
        flex: 0 0 33.3333%; /* Эквивалент col-4 */
        max-width: 33.3333%;
        padding-right: 10px;
    }
  
    .merchants .detailContainer {
        flex: 0 0 100%; /* Эквивалент col-8 */
        max-width: 66.6667%;
        padding-left: 10px;
    }
    .col-8 {
  flex-grow: 1;
  width:35%
}
  .col-4 {
  flex-shrink: 0;
  width:170px
}

 .merchantLogo:not(.merchantList .merchants .merchantLogo) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Убедитесь, что родительский контейнер имеет определенную высоту */
}

  .merchants {
  font-size: 14px;
}

  .seeCouponsLink.col-md-6 {
  margin-top: 10px;
}
    .seeCouponsLink a {
    display: block;
    width: 100%;
    text-align: center;
  }
}

.merchantList .merchantLogo img{
  margin: 10px 8px;
}
.merchantList .merchants {
  margin-left: -32px;  
}

.merchantList li.row.item {
  background-color: #ffffff;
  box-shadow: 0 2px 6px 4px rgba(51, 51, 51, .15);
  border-radius:
10px;
  border:
4px Solid #FFF;
}

.col-md-7.detailLeft {
  padding:
5px;
}

.col-md-3.detailRight {
  padding: 5px 0px 7px 60px;
}

.btn-primary {
  background-color: #2c1a47 !important;
  border-color: #FFF !important;
  font-weight: 600 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #2c1a47cc !important;
  border-color: #FFF !important;
  font-weight: 600 !important;

}


.mod-breadcrumbs a {
  color: #0b365f;
}
.mod-breadcrumbs a:hover {
  color: #333;
}

@media (min-width: 1350px){
.dj-up.itemid0.first.logo {
  margin-left: -15px !important;
}}

.card-body ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
  background: none;
}

.card-body ul li {
  background-color: #2c1a47;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.card-body ul li:hover {
  transform: translateY(-2px);
}

.card-body ul li a {
  color: #f8f1dc;
  font-weight: 600;
  text-decoration: none;
  padding-left: 40px; /* увеличено для иконки */
  width: 100%;
  font-size: 18px;
  position: relative;
  display: inline-block;
}

/* Округлая иконка через ::before */
.card-body ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 20%;
}

/* WebP иконки */
.card-body ul li a[href*="greatclips"]::before {
  background-image: url('/images/image_store/greatclipshome.jpg');
}

.card-body ul li a[href*="etsy"]::before {
  background-image: url('/images/image_store/eatsy.webp');
}

.card-body ul li a[href*="ubereats"]::before {
  background-image: url('/images/image_store/ubereats.webp');
}

.card-body ul li a[href*="doordash"]::before {
  background-image: url('/images/image_store/doordashhome.png');
}

.card-body ul li a[href*="subway"]::before {
  background-image: url('/images/image_store/subwayhome.png');
}

.card-body ul li a[href*="walgreens"]::before {
  background-image: url('/images/image_store/Walgreens.webp');
}


.card-body ul li a[href*="temu"]::before {
  background-image: url('/images/image_store/temu.webp');
}

.card-body ul li a[href*="amazon"]::before {
  background-image: url('/images/image_store/amazon.webp');
}

.card-body ul li a[href*="grubhub"]::before {
  background-image: url('/images/image_store/grubhub.webp');
}

.card-body ul li a[href*="instacart"]::before {
  background-image: url('/images/image_store/instacart.webp');
}

.card-body ul li a[href*="aliexpress"]::before {
  background-image: url('/images/image_store/AliExpress.webp');
}


.seeCouponsLink a {
  display: inline-block;
  border: 2px solid #e55b0e;
  color: #e55b0e;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.seeCouponsLink a:hover {
  background-color: #e55b0e;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.row.item .name a {
  position: relative;
  color: #333 !important;
  text-decoration: none !important;
}

.row.item .name a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; /* немного отступает вниз от текста */
  width: 0%;
  height: 2px;
  background-color: #333;
  transition: width 0.3s ease;
}

.row.item .name a:hover::after {
  width: 100%;
}
  .col-md-7 {
   
    width: 57% !important;
  }
  .col-md-2 {
   
    width: 18% !important;
  }


@media (min-width: 768px) and (max-width: 819px) {
  .col-md-7 {
    
    width: 51.3333% !important;
  }
  .col-md-2 {
   
    width: 23.6667% !important;
  }
 
  .btn-primary {
 
  padding-left: 11px !important;
  padding-right: 11px !important;
}



  
}
@media (min-width: 820px) and (max-width: 870px) {
  .col-md-7 {
 
    width: 53.3333% !important;
  }
  .col-md-2 {
   
    width: 21.6667% !important;
  }
}

@media (min-width: 871px) and (max-width: 910px) {
  .col-md-7 {
    
    width: 54.3333% !important;
  }
  .col-md-2 {
    
    width: 20.6667% !important;
  }
}


@media (min-width: 911px) and (max-width: 940px) {
  .col-md-7 {
    
    width: 56.0333% !important;
  }
  .col-md-2 {
   
    width: 18.9667% !important;
  }
}

@media (min-width: 941px) and (max-width: 970px) {
  .col-md-7 {
   
    width: 56.8333% !important;
  }
  .col-md-2 {
    
    width: 18.1667% !important;
  }
}

@media (min-width: 971px) and (max-width: 990px) {
  .col-md-7 {
    
    width: 57.1% !important;
  }
  .col-md-2 {
    
    width: 17.9% !important;
  }
}


@media (min-width: 991px) and (max-width: 1070px) {
  .col-md-7 {
   
    width: 51.8333% !important;
  }
  .col-md-2 {
   
    width: 23.1667% !important;
  }

  .btn-primary {
  
  padding-left: 9px !important;
  padding-right: 9px !important;
}


}


@media (min-width: 1071px) and (max-width: 1150px) {
  .col-md-7 {
   
    width: 53.6% !important;
  }
  .col-md-2 {
    
    width: 21.4% !important;
  }
}

@media (min-width: 1151px) and (max-width: 1220px) {
  .col-md-7 {
   
    width: 55% !important;
  }
  .col-md-2 {
    
    width: 20% !important;
  }
}

@media (min-width: 1221px) and (max-width: 1270px) {
  .col-md-7 {
   
    width: 56.4% !important;
  }
  .col-md-2 {
    
    width: 18.6% !important;
  }
}

@media (min-width: 1271px) and (max-width: 1350px) {
  .col-md-7 {
    
    width: 57.1% !important;
  }
  .col-md-2 {
   
    width: 17.9% !important;
  }
}

.cmcouponlisting .detail {
  padding-left: 0.3em !important;
}

.cmcouponlisting .couponCode .text {
  font-size: 18px !important;
}

.footer {
    background-color: #2E2E2E !important;
    background-image: none !important;
    color: #ece3cd !important;
}

.pagination {
    --pagination-active-bg: #1f3459 !important;
    --pagination-active-border-color: #1f3459 !important;
}

.page-link:hover {
    color: #ece3cd !important;
    background-color: #1f3459 !important;
}

#dj-megamenu115 li ul.dj-submenu > li > a {
  font-size: 13px !important;
  text-transform: uppercase !important;
  padding: 17px !important;
}
.itemid101 a {
  font-size: 16px !important;
}
.dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn {
 
  background: #291b44 !important;
  margin: 15px 0 0 0 !important;
}

.dj-mobile-open-btn.active .dj-mobile-open-icon, .dj-megamenu-select-dark .dj-mobile-open-btn:focus, .dj-megamenu-select-dark:hover .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn:hover, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn:focus, .dj-megamenu-accordion-dark .dj-mobile-open-btn:hover, .dj-megamenu-accordion-dark .dj-mobile-open-btn:focus {
  background: rgb(236, 227, 205) !important;
  color: #291b44 !important;
}

.itemid311 a {

  color: #a92a1c !important;
  }

.itemid311 a::after {
  

  content: '\f061'; /* Юникод для fa-arrow-right из Font Awesome */
  font-family: 'Font Awesome 6 Free'; /* Убедитесь, что используете правильный шрифт */
  font-weight: 700; /* Для solid-иконок */
  margin-left: 8px; /* Отступ слева от текста */
  font-size: 14px; /* Размер иконки */
  color: #a92a1c; /* Цвет иконки, можно настроить */
  display: inline-block; /* Для корректного отображения */
}

/*-----------------*/

.onefield.acyfield_2.acyfield_text {
  padding: 10px 0px;
  }

.acym_module_form input {
  border: 0.1rem solid;
 /* width: 140px;*/
}



.acysubbuttons .btn-primary {
  background-color: #048767 !important;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.38);
  border-color: #fff !important;
}





@media (max-width: 767px) {
.grid-child.container-bottom-b {
  position: fixed;
  bottom:-8px;
  left: 0;
  width: 100%;
  z-index: 100;
  }

.btn.btn-primary.button.subbutton {
  margin-left: -20%;
  padding: 6px 33px 6px 20px !important;
}
  
  .bottom-b.card {
  background: #faf8f2 !important;
}

  .cell.acym__user__edit__email[type="email"] {
    width: 80% !important;
}  
  
  
  
    .container-sidebar-right .acym_module {
  display: none !important;
}
  
  .acym_introtext {
  margin-bottom: -3px;
  padding-top: 5px;
}

  .acym_form {
    display: flex;
    justify-content: center;
    width: 100%;
  }
.acym_module_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
}

@media (min-width: 767px) {
.grid-child.container-bottom-b {
 display:none !important;
  }
  
    .acym_introtext {
  padding-top: 5px;
  margin-bottom: 7px;
}
  


}



input.cell{
  padding:3px 10px;
}

/*****Кнопка закрытия*/

.module-close-button {
    position: absolute;
    top: 10px;  /* Регулируйте отступ сверху по необходимости */
    left: 10px; /* Регулируйте отступ слева по необходимости */
    border: none;
    background: transparent;
    cursor: pointer;
    
}
.bottom-b .card-body {
  padding: 0rem 0rem 0rem 0rem !important;
}


@media (max-width: 768px) {
  .pagination .page-item {
    display: none;
  }

  /* Всегда показываем стрелки: First, Prev, Next, Last */
  .pagination .page-item:first-child,
  .pagination .page-item:nth-child(2),
  .pagination .page-item:last-child,
  .pagination .page-item:nth-last-child(2) {
    display: inline-flex !important;
  }

  /* Активная страница */
  .pagination .page-item.active {
    display: inline-flex !important;
  }

  /* 1 страница перед активной */
  .pagination .page-item:has(+ .active) {
    display: inline-flex !important;
  }

  /* 2 страницы после активной */
  .pagination .page-item.active + .page-item,
  .pagination .page-item.active + .page-item + .page-item {
    display: inline-flex !important;
  }
  .pagination {
  margin: 1rem 0rem !important;
}

 
}

/* Стили для couponButton */
a.couponButton {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.highlight {
  background: yellow;
}

@media (width >= 1200px) {
    h2, .h2 {
        font-size: 1.5rem !important;
    }
}
h2, .h2 {
    font-size: calc(1.275rem + .3vw) !important;
}
.dj-megamenu-default li.logo a.dj-up_a img {
  max-height: 85px !important;
}
.main-bottom.card h3 {
    font-weight: normal;
    margin-bottom: 13px;
}

.search-form .btn {
  background-color: #0fbec3 !important;
}

.cmcouponlisting .couponCode .code {
  color: #E55B0E !important;
 
}