/* -Шалом- */
*{
	margin: 0;
	padding: 0;
	border: 0;
}


*,*:before, *after{
	-moz-box-sizing; border-box: 
	-webkit-box-sizing: border-box;
	-box-sizing:border-box;
}

:focus, :active{outline: none;}
a:focus, a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webcit-text-size-adjust: 100%;
}

input,button,textarea{font-family: inherit;}

input::-ms-clear{display: none; color: #c7c7c7;}
button{cursor: pointer;}
button::-moz-focus-inner{padding: 0; border: 0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

textarea {
resize: none;
}

/* - Шрифты - */

@font-face {
    font-family: 'AvenirNextCyr';
    src:url('../fonts/okVR1USK70TW.woff2') format('woff2');
    font-weight: 600;
    line-height: 120%;
}

@font-face {
    font-family: 'AvenirNextCyr';
    src: url('../fonts/tThH9B548297.woff2') format('woff2');
    font-weight: 500;
    line-height: 120%;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextCyr';
    src: url('../fonts/vWB674oMxK66.woff2') format('woff2');
    font-weight: 400;
    line-height: 120%;
    font-style: normal;
}


/* - end Шрифты - */


body{
font-family: 'AvenirNextCyr';
background: #fff;
color: #262626;
}


a{
color: #262626;
cursor: pointer;
transition: 1s all;    
}

a:hover{
opacity: 0.8;
transition: 1s all;   
}

h1, h2, h3, h4, h5, p{
font-weight: 400;
color: #262626;
line-height: 130%;
}

h1{
font-size: 44px;
font-weight: 600;
margin-bottom: 32px;
}

h2{
font-size: 36px;
font-weight: 600;
}

h3{
font-size: 24px;
}


h4{
font-size: 20px;
}

h5{
font-size: 14px;
}

p{
font-size: 16px; 
}

::-webkit-scrollbar{
    height: 4px;
    width: 9px;
}

::-webkit-scrollbar-track{
background: #f0f0f0;
border-radius: 0px;
}
::-webkit-scrollbar-track piece{
    background: #e3e3e3;
}

::-webkit-scrollbar-thumb{
    background: #686868;
    border-radius: 0px;
}

.container{
    width: 990px;
    margin: 0px auto;
    padding: 0px 15px;
    box-sizing: border-box;
    position: relative;
}

.head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 33px;
    padding-bottom: 33px;
}

.top_gap{
    width: 100%;
    height: 22px;
    margin-bottom: 12px;
}

.logo_row{
    display: flex;
    flex-direction: row;
    cursor: pointer;
}

.logo_row img{
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.logo_row h4{
    font-size: 20px;
    font-weight: 600;
}

.lr_text{
    display: flex;
    flex-direction: column;
}


.logo_row h4 span {
    color: #72d79b;
}

.logo_row h5{
    font-size: 16px;
    font-weight: 400;
    opacity: 0.7;
}

.hbtn_row{
    display: flex;
    flex-direction: row;
}

.hbtn_row img{
    width: 50px;
    height: 50px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 1s ease;
}

.hbtn_row img:hover{
    opacity: 1;
    transition: opacity 1s ease;
}

.btn {
    width: 100%;
    min-width: 200px;
    height: 50px;
    border-radius: 7px;
    background: #126df7;
    color: #f8f8f8;
    font-size: 18px;
    opacity: 1;
    transition: opacity 1s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn:hover{
    opacity: 0.8;
    transition: opacity 1s ease;
}

.gr_btn{
    background: none;
    border: 1px solid #262626;
    opacity: 0.6;
    min-width: 160px;
    margin-right: 20px;
    color: #262626;
}

.btn_mob{
    display: none;
}

.main_off{
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 21px;
}

.main_off .mbr{
    margin-top: 10px;
    margin-bottom: 0px;
}


#imgM{
    width: 100%;
    max-width: 500px;
    height: auto;
    margin-top: -235px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#imgM {
    width: 100%;
    max-width: 720px;
    border-radius: 16px;
    object-fit: cover;
    height: auto;
    margin-top: -235px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.main_off .btn{
    max-width: 270px;
    height: 60px;
}

.mbr{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-bottom: 50px;
}

.mbr .btn{
    max-width: 200px;
}

.mbr .btn img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.bsr{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 31px;
    margin-bottom: 31px;
    justify-content: center;
}

.bsr_soft{
    margin-top: 8px;
    margin-bottom: 18px;
}

.bsr_soft a{
    font-size: 14px;
    color: rgba(2,1,10,0.72);
    font-weight: 500;
}

.bsr_soft .point{
    background: rgba(2,1,10,0.28);
}

.point{
    background: #000;
    border-radius: 50%;
    flex-shrink: 0;
    height: 2px;
    margin: auto 0;
    width: 2px;
}

.main_off h2 {
    font-size: 42px;
    margin-bottom: 33px;
    font-weight: 600;
    max-width: 650px;
}

.main_off h2 span {
    color: #72d79b;
}

.main_off p{
    margin-bottom: 25px;
    font-size: 18px;
    max-width: 650px;
    opacity: 0.8;
}

.bg_class {
    background: #f6f7f8;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    padding-top: 33px;
}

.art_row{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 350px;
    align-items: center;
}

.avt_row{
    display: flex;
    flex-direction: row;
    margin-bottom: 31px;
    align-items: center;
}

.avt_row img{
    width: 64px;
    height: 64px;
    margin-right: 10px;
}

.avr_text{
    display: flex;
    flex-direction: column;
    max-width: 220px;
}

.avr_text h4{
    font-weight: 500;
}

.art_col{
    width: 100%;
    max-width: 650px;
    background: #fff;
    border-radius: 30px;
    padding: 25px;
    box-sizing: border-box;
    position: relative;
    height: 700px;
    overflow-y: clip;
}

.art_col h3{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 21px;
}

.art_col p{
    font-size: 18px;
    opacity: 0.8;
}

.noshow{
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,     /* сверху полностью прозрачный */
        rgba(255, 255, 255, 0.93) 20%,
        rgba(255, 255, 255, 0.96) 25%,  /* уже заметно белеет */
        rgba(255, 255, 255, 1) 100%    /* внизу полностью белый */
    );
    backdrop-filter: blur(0.3px);   /* размытие заднего фона */
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.noshow h3{
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    max-width: 350px;
    margin-bottom: 31px;
}

.art_ul{
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
    width: 90%;
}

.art_ul p{
    font-size: 16px;
    margin-bottom: 20px;
}

.promocode_row{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.promo_block{
    width: 100%;
    max-width: 720px;
    height: 320px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 25px;
    margin-bottom: 44px;
}

.pr_img{
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-right: 3px dashed #f6f7f8;
}

.pr_img img{
    width: 110px;
    height: 110px;
    margin-bottom: 31px;
}

.promo_ir{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10%;
    justify-content: center;
}

.promo_ir p span {
    color: #72d79b;
    font-weight: 500;
}

.promo_head{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 31px;
}

.promo_head p{
    opacity: 0.7;
}

.promo_ver{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.promo_ver img{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.promo_check{
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    opacity: 0.7;
}

.promo_check .promo_ver img{
    width: 16px;
    height: 16px;
}

.promo_check .promo_ver{
    font-size: 12px;
    margin-right: 10px;
}

.promo_user{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    opacity: 0.7;
    margin-top: 16px;
}

.promo_user img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.promo_ir .mbr{
    justify-content: flex-start;
    margin-top: 31px;
    margin-bottom: 0px;
}

.promo_ir .mbr .btn{
    max-width: 250px;
}

.promo_ir .mbr .btn img{
    margin-right: 0px;
    margin-left: 7px;
    width: 25px;
    height: 25px;
}






footer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 50px;
    justify-content: space-between;
}

.ft_info{
    display: flex;
    flex-direction: column;
    margin-top: 35px;
}

.ft_info h3{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
}

.ft_info h4{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.ft_info h5{
    opacity: 0.7;
    max-width: 240px;
}

.ft_info p{
    font-size: 13px;
    opacity: 0.7;
}

.ft_info a{
    font-size: 14px;
    max-width: 280px;
    opacity: 0.7;
    margin-bottom: 15px;
}

.ft_info a:hover{
    opacity: 1;
}

.ft_mess{
    display: flex;
    flex-direction: row;
    width: 50%;
    margin-top: 25px;
    margin-bottom: 10px;
}

.ft_mess .btn{
    width: 100px;
    min-width: 100px;
    height: 40px;
    font-size: 14px;
    margin-right: 15px;
    color: #f8f8f8;
}

.wh{
    background: #3a9f93;
}

.tg{
    background: #0088cc;
}

.mx{
    background: linear-gradient(88.21deg, #630eff 0.86%, #3a89fb 97.76%);
}

.ft_info .logo_row{
    margin-bottom: 20px;
}

.ft_info .logo_row h4{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 0px;
}

.ft_info_wide{
    max-width: 460px;
}

.ft_info_wide p{
    max-width: 460px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.ft_info_contacts p{
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.ft_info_legal h5{
    margin-top: 12px;
}

.popup{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(2 1 10 / 86%);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease 0s;
    z-index: 1;
}

/* prevent background scroll while modal open */
html.modal_open,
html.modal_open body{
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

.popup.active .popup_content{
    opacity: 1;
    transform: translate(0px, 0px);
}


.popup.active {
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
}

.popup.active::-webkit-scrollbar{
    display: none;
}

.popup_body {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    transition: all 0.8s ease 0s;
}

.popup_content {
    display: flex;
    flex-direction: column;
    background-color: #f6f7f8;
    background: radial-gradient(1200px 600px at 50% 0%, rgba(18,109,247,0.10), rgba(114,215,155,0.08) 40%, rgba(246,247,248,1) 70%);
    color: #333;
    width: 100%;
    max-width: 380px;
    max-height: 92vh;
    height: auto;
    border-radius: 21px;
    position: relative;
    transition: all 0.8s ease 0s;
    opacity: 0;
    transform: translate(0px, -100%);
    overflow-y: auto;
}

#popupClose{
    width: 30px;
    height: 30px;
    stroke: #333;
    top: 20px;
    right: 20px;
    position: absolute;
    cursor: pointer;
}

.popup_info{
    width: 100%;
    height: auto;
    min-height: 360px;
    background: #f8f8f8;
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    box-sizing: border-box;
    padding: 52px 21px 21px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 0;
}

/* ===== modal redesign (ticket) ===== */
.popup_top{
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

#offerPopup .popup_top h3{
    font-size: 30px;
    line-height: 1.12;
    margin-bottom: 0;
}

.brand_blue{
    color: #005bff;
}

.popup_sub{
    margin: 0;
    font-size: 14px;
    opacity: 0.74;
    line-height: 1.35;
}

.ticket{
    width: 100%;
    max-width: 320px;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(2,1,10,0.10);
    box-shadow: 0 18px 50px rgba(2,1,10,0.18);
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

.ticket::before,
.ticket::after{
    content:"";
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f6f7f8;
    box-shadow: 0 0 0 1px rgba(2,1,10,0.12);
    z-index: 1;
}
.ticket::before{ left: -9px; }
.ticket::after{ right: -9px; }

.ticket_left{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ticket_badge{
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1/1;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0,91,255,0.14), rgba(0,91,255,0.06));
    border: 1px solid rgba(2,1,10,0.10);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.tb_top{
    font-size: 11px;
    font-weight: 700;
    opacity: 0.72;
    letter-spacing: .4px;
}
.tb_val{
    margin-top: 6px;
    font-size: 22px;
    font-weight: 800;
    color: #005bff;
    line-height: 1.05;
}

.ticket_mid{
    min-width: 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.ticket_title{
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
}

.ticket_meta{
    display:flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0.92;
}

.tmeta{
    display:flex;
    align-items:center;
    gap: 10px;
    font-size: 12px;
    color: rgba(2,1,10,0.72);
    white-space: nowrap;
    min-width: 0;
}

.popup_form{
    width: 100%;
    max-width: 320px;
    margin-top: 0;
    margin-bottom: 12px;
}

.ticket_divider{
    width: 100%;
    border-top: 2px dashed rgba(2,1,10,0.14);
    margin-bottom: 2px;
}

.ticket.compact .tmeta{
    white-space: normal;
}

.ticket.compact .ticket_meta{
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "status verified"
      "expire expire";
    justify-content: start;
    column-gap: 16px;
    row-gap: 8px;
    width: 100%;
}

.ticket.compact .tmeta{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    white-space: nowrap;
    justify-self: start;
    gap: 6px;
    font-size: 13px;
}

.ticket.compact .tmeta span{
    min-width: 0;
}

.ticket.compact .tmeta_full{
    grid-area: expire;
}

#offerPopup .ticket.compact .tmeta:nth-child(1){
    grid-area: status;
}

#offerPopup .ticket.compact .tmeta:nth-child(2){
    grid-area: verified;
}

.popup_info img{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.popup_info h3{
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 10px;
}

.popup_info p{
    margin-bottom: 20px;
}

.popup_info .btn{
    height: 45px;
    width: 100%;
    max-width: 300px;
}

@media (min-width: 992px){
    .popup_body{
        padding: 92px 36px;
        align-items: flex-start;
        justify-content: center;
    }

    .popup_content{
        max-width: 500px;
        max-height: calc(100vh - 144px);
        border-radius: 24px;
    }

    .popup_info{
        padding: 58px 34px 34px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    #offerPopup .popup_top h3{
        font-size: 32px;
    }

    .popup_sub{
        font-size: 15px;
    }

    .ticket{
        max-width: 390px;
        padding: 16px;
    }

    .popup_form{
        max-width: 390px;
    }

    /* desktop: center meta rows in coupon ticket */
    #offerPopup .ticket.compact .ticket_meta{
        justify-content: center;
        justify-items: center;
        width: 100%;
        margin: 0 auto;
    }
    #offerPopup .ticket.compact .tmeta{
        justify-self: center;
        text-align: center;
    }
    #offerPopup .ticket.compact .tmeta_full{
        justify-self: center;
    }
}


@media (max-width: 990px){

.container{
  width: 100%;
  padding: 0px 30px;
}


.hbtn_row .btn{
    display: none;
}

.hbtn_row .btn_mob{
    display: flex;
}


}

@media (max-width: 550px){

.container{
  width: 100%;
  padding: 0px 15px;
}

/* ===== витрина (компактные плашки) ===== */
.offers{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

} /* end @media (max-width: 550px) */

.deals{
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.deal_card{
    width: 100%;
    background:
      radial-gradient(circle at 20% 20%, rgba(2,1,10,0.022) 0 1px, transparent 1px 100%),
      #fff;
    background-size: 8px 8px, auto;
    border-radius: 16px;
    border: 1px solid rgba(2,1,10,0.10);
    box-shadow: 0 14px 40px rgba(2,1,10,0.07);
    display: grid;
    grid-template-columns: 110px 1fr 170px;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: cardFadeIn 520ms ease both;
}

.deal_badge_verified{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 98px; /* same width as discount square */
    height: 24px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(2,1,10,0.12);
    box-shadow: 0 10px 20px rgba(2,1,10,0.08);
    font-size: 10px;
    font-weight: 600;
    color: rgba(2,1,10,0.80);
    flex: 0 0 auto;
    white-space: nowrap;
}
.deal_badge_verified .ico.ok{
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.deal_card:focus{ outline: none; }

.deal_card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background: linear-gradient(90deg, rgba(0,91,255,0.78), rgba(0,91,255,0.38));
}

.deal_left{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap: 10px;
}

.deal_discount{
    width: 100%;
    max-width: 98px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(2,1,10,0.06), rgba(2,1,10,0.02));
    border: 1px solid rgba(2,1,10,0.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 10px;
    box-sizing:border-box;
}

.deal_discount .dd_top{
    font-size: 11px;
    letter-spacing: .4px;
    opacity: .75;
    font-weight: 600;
}

.deal_discount .dd_value{
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
    color: #005bff;
    line-height: 1.05;
}

.deal_discount.dd_ship{
    background: linear-gradient(180deg, rgba(2,1,10,0.06), rgba(2,1,10,0.02));
    border-color: rgba(2,1,10,0.12);
}
.deal_discount.dd_ship .dd_value{ color: #4b5563; }

.deal_mid{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.deal_title{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.deal_verified{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size: 13px;
    opacity: .8;
    margin-bottom: 8px;
}

.deal_verified .vcheck{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(114,215,155,0.22);
    color: #1d7f45;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 800;
    font-size: 12px;
}

.deal_trustline{
    font-size: 12px;
    opacity: 0.68;
    margin: -2px 0 8px;
}

.deal_note{
    font-size: 12px;
    opacity: .65;
}

.deal_meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 2px 0 0;
    color: rgba(2,1,10,0.72);
}

.deal_meta_item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0.92;
    min-width: 0;
}

.deal_meta_item span{
    min-width: 0;
}

.deal_meta_item b{
    font-weight: 700;
}

.ico{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: rgba(2,1,10,0.55);
}
.ico.ok{
    stroke: rgba(22,163,74,0.95);
}
.ico.status{
    stroke: rgba(22,163,74,0.82);
}
.ico.date{
    stroke: rgba(245,158,11,0.95); /* yellow */
}
.ico.users{
    stroke: rgba(107,114,128,0.95); /* gray */
}

.deal_meta_item.is_inactive .ico.status{
    stroke: rgba(2,1,10,0.40);
}
.deal_meta_item.is_inactive{
    opacity: 0.78;
}

.deal_right{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap: 10px;
    padding-left: 14px;
    position: relative;
}

.deal_right::before{
    content:"";
    position:absolute;
    left:0;
    top: 10px;
    bottom: 10px;
    border-left: 2px dashed rgba(2,1,10,0.14);
}

/* “оторванная лента” */
.deal_ribbon{
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background-image:
      linear-gradient(180deg, #0b64ff, #005bff),
      linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 65%);
    background-size: 100% 100%, 220% 100%;
    background-position: 0 0, 170% 0;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    position: relative;
    box-shadow: 0 10px 22px rgba(0,91,255,0.30);
    overflow: hidden;
    animation: ribbonSweepBg 6.8s ease-in-out infinite;
}

.deal_ribbon::before,
.deal_ribbon::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.28) 0px,
        rgba(255,255,255,0.28) 6px,
        rgba(255,255,255,0.12) 6px,
        rgba(255,255,255,0.12) 12px
      );
    opacity: .8;
}
.deal_ribbon::before{
    left: -10px;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 85%, 10px 70%, 0 55%, 10px 40%, 0 25%, 10px 10%);
    border-radius: 12px 0 0 12px;
}
.deal_ribbon::after{
    right: -10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 15%, calc(100% - 10px) 30%, 100% 45%, calc(100% - 10px) 60%, 100% 75%, calc(100% - 10px) 90%, calc(100% - 10px) 100%, 0 100%);
    border-radius: 0 12px 12px 0;
}

.deal_code{
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(2,1,10,0.10);
    background: rgba(2,1,10,0.03);
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .9px;
    font-weight: 700;
    color: rgba(2,1,10,0.70);
}

.deal_code .code_mask{
    opacity: .7;
    font-weight: 600;
    letter-spacing: .2px;
}

.deal_card.hot{
    border-color: rgba(0,91,255,0.30);
    box-shadow: 0 14px 40px rgba(2,1,10,0.09);
    padding-top: 34px; /* room for built-in HIT strip */
    background:
      radial-gradient(circle at 20% 20%, rgba(2,1,10,0.022) 0 1px, transparent 1px 100%),
      #fff;
    background-size: 8px 8px, auto;
}

.deal_card.hot::before{
    display: none; /* replace thin line with full strip */
}

.deal_hot_strip{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #ffffff;
    background: linear-gradient(90deg, #0b64ff, #005bff);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

.deal_hot_strip::before{
    content:"";
    position:absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.22) 0px,
        rgba(255,255,255,0.22) 10px,
        rgba(255,255,255,0.06) 10px,
        rgba(255,255,255,0.06) 20px
    );
    opacity: 0.55;
    pointer-events: none;
    animation: hotStripeShift 7.2s linear infinite;
}

/* ===== deals base (all screens) ===== */
.deals{
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.deal_card{
    width: 100%;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(2,1,10,0.10);
    box-shadow: 0 14px 40px rgba(2,1,10,0.07);
    display: grid;
    grid-template-columns: 110px 1fr 170px;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.deal_card:focus{ outline: none; }

.deal_card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background: linear-gradient(90deg, rgba(0,91,255,0.78), rgba(0,91,255,0.38));
}

.deal_left{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap: 10px;
}

.deal_discount{
    width: 100%;
    max-width: 98px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(2,1,10,0.06), rgba(2,1,10,0.02));
    border: 1px solid rgba(2,1,10,0.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 10px;
    box-sizing:border-box;
}

.deal_discount .dd_top{
    font-size: 11px;
    letter-spacing: .4px;
    opacity: .75;
    font-weight: 600;
}

.deal_discount .dd_value{
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
    color: #005bff;
    line-height: 1.05;
}

.deal_discount.dd_ship{
    background: linear-gradient(180deg, rgba(2,1,10,0.06), rgba(2,1,10,0.02));
    border-color: rgba(2,1,10,0.12);
}
.deal_discount.dd_ship .dd_value{ color: #4b5563; }

.deal_badge_verified{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 98px;
    height: 24px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(2,1,10,0.12);
    box-shadow: 0 10px 20px rgba(2,1,10,0.08);
    font-size: 10px;
    font-weight: 600;
    color: rgba(2,1,10,0.80);
    white-space: nowrap;
}
.deal_badge_verified .ico.ok{
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.deal_mid{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.deal_title{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.deal_meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin: 2px 0 0;
    color: rgba(2,1,10,0.72);
}

.deal_meta_item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0.92;
    min-width: 0;
}

.deal_meta_item span{ min-width: 0; }
.deal_meta_item b{ font-weight: 700; }

.ico{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: rgba(2,1,10,0.55);
}
.ico.ok{ stroke: rgba(22,163,74,0.95); }
.ico.status{ stroke: rgba(22,163,74,0.82); }
.ico.date{ stroke: rgba(245,158,11,0.95); }
.ico.users{ stroke: rgba(107,114,128,0.95); }

.deal_meta_item.is_inactive .ico.status{ stroke: rgba(2,1,10,0.40); }
.deal_meta_item.is_inactive{ opacity: 0.78; }

.deal_right{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap: 10px;
    padding-left: 14px;
    position: relative;
}

.deal_right::before{
    content:"";
    position:absolute;
    left:0;
    top: 10px;
    bottom: 10px;
    border-left: 2px dashed rgba(2,1,10,0.14);
}

.deal_ribbon{
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(180deg, #0b64ff, #005bff);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    position: relative;
    box-shadow: 0 10px 22px rgba(0,91,255,0.30);
}

.deal_code{
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(2,1,10,0.10);
    background: rgba(2,1,10,0.03);
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .9px;
    font-weight: 700;
    color: rgba(2,1,10,0.70);
}

.deal_code .code_mask{
    opacity: .7;
    font-weight: 600;
    letter-spacing: .2px;
}

.deal_card.hot{
    border-color: rgba(0,91,255,0.30);
    box-shadow: 0 14px 40px rgba(2,1,10,0.09);
}

/* desktop tuning */
@media (min-width: 992px){
    .deals{
        max-width: 980px;
        gap: 18px;
    }

    .deal_card{
        grid-template-columns: 126px 1fr 200px;
        gap: 18px;
        padding: 18px;
        border-radius: 18px;
    }

    .deal_card:hover{
        box-shadow: 0 18px 48px rgba(2,1,10,0.10);
        transform: translateY(-1px);
    }

    .deal_discount{
        max-width: 110px;
    }

    .deal_discount .dd_top{
        font-size: 12px;
    }

    .deal_discount .dd_value{
        font-size: 24px;
    }

    .deal_badge_verified{
        max-width: 110px;
        height: 26px;
        font-size: 11px;
    }

    .deal_badge_verified .ico.ok{
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

    .deal_title{
        font-size: 21px;
    }

    .deal_meta{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px; /* row-gap col-gap */
    }
    .deal_meta_item{
        gap: 8px; /* tighter icon-text spacing */
        white-space: nowrap;
    }
    .deal_meta_item:last-child{
        flex-basis: 100%;
    }

    .deal_meta_item{
        font-size: 13px;
    }

    .deal_ribbon{
        height: 50px;
        font-size: 15px;
    }

    .deal_code{
        height: 38px;
        font-size: 13px;
    }
}

/* wide desktop */
@media (min-width: 1400px){
    .deals{
        max-width: 1080px;
    }
    .deal_card{
        grid-template-columns: 138px 1fr 220px;
        padding: 20px;
        gap: 20px;
    }
    .deal_discount{
        max-width: 118px;
    }
    .deal_badge_verified{
        max-width: 118px;
    }
    .deal_title{
        font-size: 22px;
    }
}

@media (max-width: 740px){
    .deal_card{
        grid-template-columns: 92px 1fr;
        grid-template-rows: auto auto;
    }
    .deal_right{
        grid-column: 1 / -1;
        padding-left: 0;
    }
    .deal_right::before{ display:none; }
    .deal_title{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .deal_meta{
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 2px;
    }
    .deal_meta_item{
        font-size: 12px;
    }
}

/* popup: промокод */
.popup_code{
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(2,1,10,0.10);
    background: rgba(255,255,255,0.85);
    margin-bottom: 14px;
    box-sizing: border-box;
}

.popup_code_label{
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 6px;
}

.popup_code_value{
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(2,1,10,0.04);
    border: 1px dashed rgba(2,1,10,0.18);
    margin-bottom: 10px;
}

.offer_card{
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 22px 18px 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    border: 2px solid #3aa86b;
    box-shadow: 0 14px 38px rgba(2,1,10,0.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative;
    overflow: hidden;
}

.offer_card:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(2,1,10,0.08);
}

.offer_card:focus{
    outline: none;
}

.offer_left{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.coupon_top{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.coupon_hit{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #1d7f45;
    background: #fff;
    border: 2px solid #3aa86b;
    box-shadow: 0 6px 18px rgba(2,1,10,0.10);
}

.coupon_hit .crown{
    font-size: 13px;
    line-height: 1;
}

.offer_badges{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill{
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    background: rgba(18,109,247,0.10);
    color: #126df7;
    font-weight: 500;
}

.pill_ok{
    background: rgba(0,91,255,0.12);
    color: #005bff;
}

.pill_hot{
    background: rgba(0,91,255,0.16);
    color: #005bff;
}

.pillrow{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}

.offer_title{
    font-size: 18px;
    font-weight: 600;
    line-height: 130%;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}

.offer_right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.offer_meta{
    font-size: 12px;
    opacity: 0.75;
}

.offer_gift{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58,168,107,0.10);
    border: 1px solid rgba(58,168,107,0.30);
    font-size: 20px;
}

/* вырезы “билетика” + перфорация */
.offer_card::before,
.offer_card::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f6f7f8;
    box-shadow: 0 0 0 2px #3aa86b;
}
.offer_card::before{ left: -9px; }
.offer_card::after{ right: -9px; }

.offer_card .offer_right{
    position: relative;
    padding-left: 16px;
}
.offer_card .offer_right::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 0;
    border-left: 2px dashed rgba(58,168,107,0.45);
    opacity: 0.9;
}

/* внутренний бордер для “ХИТ” как на примере */
.offer_card.hit{
    box-shadow:
      inset 0 0 0 3px rgba(58,168,107,0.28),
      0 14px 38px rgba(2,1,10,0.06);
}

@media (max-width: 550px){
    .offer_card{
        flex-direction: column;
        align-items: flex-start;
    }
    .offer_right{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .offer_card .offer_right{
        padding-left: 0;
    }
    .offer_card .offer_right::before{
        display: none;
    }
    .offer_title{
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ===== popup (форма) ===== */
.popup_kv{
    width: 100%;
    max-width: 300px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.kv{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(2,1,10,0.04);
    box-sizing: border-box;
}

.kv span{
    font-size: 12px;
    opacity: 0.75;
}

.kv b{
    font-size: 12px;
    font-weight: 600;
}

.popup_form{
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field{
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(2,1,10,0.10);
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 14px;
    background: #fff;
}

.field:focus{
    border-color: rgba(18,109,247,0.45);
    box-shadow: 0 0 0 4px rgba(18,109,247,0.10);
}

.small{
    font-size: 11px;
    opacity: 0.65;
    line-height: 140%;
}

/* ===== нижний таймер ===== */
.timer_bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 0;
    background: rgba(255,255,255,0.84);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(2,1,10,0.08);
}

.timer_inner{
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.timer_line{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.timer_title{
    font-size: 15px;
    opacity: 0.78;
    font-weight: 500;
}

.timer_value{
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.timer_clock{
    font-size: 18px;
    line-height: 1;
}

/* staggered reveal for cards */
.deals .deal_card:nth-child(1){ animation-delay: 40ms; }
.deals .deal_card:nth-child(2){ animation-delay: 120ms; }
.deals .deal_card:nth-child(3){ animation-delay: 200ms; }

@keyframes cardFadeIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
}

@keyframes ribbonSweepBg{
    0%, 70%{ background-position: 0 0, 170% 0; }
    86%{ background-position: 0 0, -40% 0; }
    100%{ background-position: 0 0, -40% 0; }
}

@keyframes hotStripeShift{
    from{ background-position: 0 0; }
    to{ background-position: 28px 0; }
}

@keyframes timerBreath{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.03); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce){
    .deal_card,
    .deal_ribbon,
    .deal_hot_strip::before,
    .timer_value{
        animation: none !important;
    }
}

@media (max-width: 990px){
    .timer_inner{
        width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 550px){
    .popup_body{
        /* place modal near top on mobile (not bottom) */
        align-items: flex-start;
        justify-content: flex-start;
        padding: 104px 12px 24px;
    }
    .popup_content{
        max-height: calc(100vh - 168px);
    }
    .popup_info{
        padding: 56px 18px 24px;
    }
    #offerPopup .ticket{
        max-width: 300px;
        grid-template-columns: 82px 1fr;
        gap: 10px;
        padding: 10px;
        border-radius: 16px;
    }
    #offerPopup .ticket_badge{
        max-width: 82px;
        border-radius: 14px;
        padding: 8px;
    }
    #offerPopup .tb_top{
        font-size: 10px;
    }
    #offerPopup .tb_val{
        margin-top: 4px;
        font-size: 18px;
    }
    #offerPopup .ticket_title{
        font-size: 12px;
        line-height: 1.2;
        margin-bottom: 6px;
    }
    #offerPopup .ticket.compact .ticket_meta{
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        column-gap: 10px;
        row-gap: 6px;
    }
    #offerPopup .ticket.compact .tmeta{
        font-size: 11px;
        gap: 5px;
        white-space: normal;
        min-width: 0;
    }
    #offerPopup .ticket.compact .tmeta svg{
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }
    .timer_inner{
        padding: 0 15px;
    }
    .timer_line{
        gap: 6px;
    }
    .timer_title{
        font-size: 13px;
    }
    .timer_value{
        font-size: 20px;
    }
}

/* чтобы контент не прятался под таймером */
body{
    padding-bottom: 86px;
}

.main_off h2{
    font-size: 34px;
}

.main_off{
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

.art_col{
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    height: 1050px;
}

#imgM{
    margin-top: -175px;
    height: 240px;
}

.noshow{
    height: 430px;
}

.noshow h3{
    margin-top: 31px;
}

.hbtn_row .btn_mob {
    width: 150px;
    height: 50px;
    min-width: 150px;
}

.ft_mess{
    flex-direction: column;
    width: 300px;
}

.ft_mess .btn{
    margin-bottom: 15px;
}

.promocode_row{
    margin-top: 30px;
}

.promo_block{
    flex-direction: column;
    height: auto;
}

.pr_img{
    width: 100%;
    border-right: none;
    border-bottom: 3px dashed #f6f7f8;
    padding-bottom: 20px;
}

.promo_ir{
    width: 100%;
    margin-left: 0px;
    margin-top: 31px;
}

.promo_ver img{
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

.promo_ir .mbr{
    justify-content: center;
}

.mbr .btn{
    max-width: 300px;
}

/* cleanup: removed extra closing braces */

/* ===== final animation overrides (force-visible) ===== */
#offers .deal_card{
    animation: cardFadeIn 520ms ease both;
}
#offers .deal_card:nth-child(1){
    animation-delay: 60ms;
}
#offers .deal_card:nth-child(2){
    animation-delay: 140ms;
}
#offers .deal_card:nth-child(3){
    animation-delay: 220ms;
}

#offers .deal_ribbon{
    background-image:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.05) 36%,
            rgba(255, 255, 255, 0.28) 50%,
            rgba(255, 255, 255, 0.05) 64%,
            rgba(255, 255, 255, 0.05) 100%
        ),
        linear-gradient(180deg, #2f8fff 0%, #1f6fff 100%);
    background-size: 230% 100%, 100% 100%;
    background-position: -150% 0, 0 0;
    animation: ribbonSweepBg 3.2s ease-in-out infinite;
}

#offers .deal_card.hot .deal_hot_strip{
    background-size: 200% 100%;
    animation: hotStripeShift 7.5s linear infinite;
}

#offers .deal_mid .deal_meta{
    margin-top: 2px;
}

#timerBar .timer_inner{
    animation: none;
}

.load_more_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 28px 0 6px;
}

.load_more_btn{
    height: 46px;
    min-width: 220px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1px solid rgba(0,91,255,0.20);
    background: linear-gradient(180deg, rgba(0,91,255,0.14), rgba(0,91,255,0.08));
    color: #005bff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.load_more_btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,91,255,0.16);
}

/* robust hidden state for extra cards */
#offers .deal_extra{
    display: none;
}
#offers .deal_extra.is_visible{
    display: grid;
}

/* ===== checkout prototype ===== */
.checkout_page{
    min-height: 100vh;
    padding-bottom: 96px; /* reserve space for fixed timer bar */
}

.checkout_container{
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.checkout_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
}

.checkout_card{
    width: 100%;
    max-width: 560px;
    border-radius: 24px;
    border: 1px solid rgba(2,1,10,0.10);
    background: radial-gradient(1200px 600px at 50% 0%, rgba(18,109,247,0.10), rgba(114,215,155,0.08) 40%, rgba(246,247,248,1) 70%);
    box-shadow: 0 18px 50px rgba(2,1,10,0.14);
    padding: 28px 24px 24px;
    box-sizing: border-box;
    text-align: center;
}

.checkout_card h1{
    font-size: 34px;
    line-height: 1.12;
    margin-bottom: 10px;
    font-weight: 700;
}

.checkout_sub{
    font-size: 18px;
    line-height: 1.35;
    opacity: 0.82;
    margin-bottom: 22px;
}

.checkout_pay_btn{
    width: 100%;
    max-width: 360px;
    height: 54px;
    font-size: 24px;
    margin: 0 auto 18px;
}

.checkout_agree{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.86;
}

.checkout_agree input{
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.checkout_agree a{
    color: #005bff;
    text-decoration: underline;
}

/* checkout page heading should wrap on small screens */
.checkout_page .main_off h2{
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 740px){
    .checkout_container{
        align-items: flex-start;
        padding-top: 26px;
        padding-bottom: 30px;
    }
    .checkout_card{
        max-width: 100%;
        border-radius: 20px;
        padding: 22px 16px 18px;
    }
    .checkout_card h1{
        font-size: 28px;
    }
    .checkout_sub{
        font-size: 16px;
        margin-bottom: 16px;
    }
    .checkout_pay_btn{
        height: 50px;
        font-size: 21px;
        margin-bottom: 14px;
    }
    .checkout_agree{
        font-size: 12px;
        gap: 8px;
    }
}

@media (max-width: 550px){
    .checkout_page{
        padding-bottom: 104px; /* extra room for timer on compact screens */
    }
    .checkout_agree{
        font-size: 11px;
        line-height: 1.4;
    }
    .checkout_agree input{
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }
    .checkout_pay_btn{
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce){
    #offers .deal_card,
    #offers .deal_ribbon,
    #offers .deal_card.hot .deal_hot_strip,
    #timerBar .timer_inner{
        animation: none !important;
    }
}

/* ===== final popup mobile spacing override ===== */
@media (max-width: 550px){
    #offerPopup .popup_body{
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 104px 12px 24px !important;
    }
    #offerPopup .popup_content{
        max-height: calc(100vh - 168px) !important;
    }
    #offerPopup .popup_info{
        padding: 56px 18px 24px !important;
    }
    #offerPopup .ticket{
        max-width: 300px !important;
    }

    .load_more_btn{
        width: 100%;
        max-width: 300px;
        height: 44px;
        font-size: 15px;
    }
}

/* keep main heading strictly one line */
.main_off h2{
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* deal titles: minimum 1 line, maximum 2 lines */
#offers .deal_title{
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25 !important;
    max-height: calc(1.25em * 2);
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ===== popup progress + email validation ===== */
#offerPopup .popup_progress{
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 0 8px;
}

#offerPopup .popup_form{
    gap: 8px;
}

#offerPopup .popup_top + .popup_progress{
    margin-top: -4px;
}

#offerPopup .pp_content{
    min-width: 0;
}

#offerPopup .pp_head{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

#offerPopup .pp_lead{
    display: inline-flex;
    align-items: center;
    gap: 2px; /* еле заметный пробел */
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
}

#offerPopup .pp_media{
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    overflow: visible;
}

/* gif sizing without clipping (pencil has larger frames) */
#offerPopup .pp_head .pp_lead .pp_media img{
    height: 18px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    display: block;
    overflow: visible;
}

/* different optical centers for gifs */
#offerPopup .pp_head .pp_lead #popupLeadGif[data-gif="idle"]{
    transform: translateY(10px) !important; /* pencil */
}
#offerPopup .pp_head .pp_lead #popupLeadGif[data-gif="typing"]{
    transform: translateY(9px) !important; /* darts */
}

#offerPopup .pp_text{
    font-size: 11px;
    line-height: 1.1;
    color: rgba(2,1,10,0.78);
    font-weight: 600;
    display: inline;
    min-width: 0;
}

#offerPopup .pp_percent{
    font-size: 11px;
    font-weight: 700;
    color: rgba(2,1,10,0.78);
    white-space: nowrap;
    margin-left: auto;
}

#offerPopup .pp_bar{
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(18,109,247,0.10);
    overflow: hidden;
    margin-top: -2px;
}

#offerPopup .pp_fill{
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f8fff 0%, #1f6fff 100%);
    transition: width 260ms ease;
}

#offerPopup .popup_email_wrap{
    width: 100%;
    position: relative;
    margin-bottom: 0;
}

#offerPopup .field_label_in{
    position: absolute;
    left: 14px;
    top: 5px;
    font-size: 9px;
    line-height: 1;
    color: rgba(2,1,10,0.46);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 160ms ease, transform 160ms ease;
}

#offerPopup .popup_email_wrap.is_filled .field_label_in{
    opacity: 1;
    transform: translateY(0);
}

#offerPopup .popup_email_wrap.is_filled .field{
    padding-top: 12px;
    padding-bottom: 2px;
}

#offerPopup .field.is_invalid{
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

#offerPopup .error_message{
    min-height: 0;
    margin-top: 0;
    font-size: 12px;
    line-height: 1.3;
    color: #d92d20;
    display: none;
}

#offerPopup .error_message:not(:empty){
    display: block;
    margin-top: 4px;
}

@media (max-width: 550px){
    #offerPopup .popup_progress{
        max-width: 300px;
        margin-bottom: 8px;
    }
    #offerPopup .pp_head .pp_lead .pp_media img{
        height: 17px !important;
        width: auto !important;
    }
    #offerPopup .pp_text{
        font-size: 10px;
    }
    #offerPopup .pp_percent{
        font-size: 10px;
    }
    #offerPopup .field_label_in{
        left: 12px;
        font-size: 8px;
    }
}