/* ==============================================
   PRO-STYLE.CSS — Samsung S24 Ultra Quiz Page
   Mobile-first. Single file. No conflicts.
   Trendyol #ffe702 branding preserved.
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
body,html{margin:0;padding:0;overflow-x:hidden;background:#f4f5f7;-webkit-font-smoothing:antialiased}
body,h1,h2,h3,h4,h5,h6,p,span,a,li,label,button,input,textarea{font-family:'Inter','Open Sans',sans-serif!important;color:#1a1a1a}
img{max-width:100%;display:block}
ol,ul{margin:0;padding:0;list-style:none}
a{text-decoration:none}
button{cursor:pointer}

/* ── Container ── */
.conteiner{max-width:1200px;margin:0 auto;padding:0 16px}

/* ==============================================
   URGENCY STRIP
   ============================================== */
.pro-urgency-strip{
  width:100%;background:#111;color:#ffe702;
  font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-align:center;padding:9px 16px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;z-index:1000
}
.pulse-dot{
  display:inline-block;width:7px;height:7px;
  background:#ffe702;border-radius:50%;flex-shrink:0;
  animation:pulseDot 1.4s ease-in-out infinite
}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.5}}

/* ==============================================
   HEADER
   ============================================== */
.header{
  display:flex!important;width:100%;align-items:center;justify-content:space-between;
  background:#ffe702!important;height:64px;padding:0 20px;
  box-shadow:0 2px 16px rgba(0,0,0,.12);
  border-bottom:2px solid #e6ce00;
  position:sticky;top:0;z-index:900;
  float:none!important
}
.logo{display:block;width:130px;flex-shrink:0}
/* search */
.mOkuL__p{width:360px;position:relative}
.mOkuL__p .N4M8bfaJ{display:flex}
.mOkuL__p .N4M8bfaJ .V8wbcUhU{
  flex:1;font-size:14px;color:#000;background:#fff;
  border:2px solid transparent;border-radius:9px;
  padding:9px 38px 9px 14px;outline:none;
  transition:border-color .2s,box-shadow .2s
}
.mOkuL__p .N4M8bfaJ .V8wbcUhU:focus{border-color:#b8a800;box-shadow:0 0 0 3px rgba(255,231,2,.3)}
.mOkuL__p .N4M8bfaJ .cyrzo7gC{
  width:18px;height:18px;position:absolute;right:12px;bottom:calc(50% - 9px);
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%23F27A1A' d='M18.711 17.306l-4.684-4.703a7.49 7.49 0 0 0 1.864-4.932C15.891 3.441 12.327 0 7.946 0S0 3.441 0 7.671s3.565 7.671 7.946 7.671a8.056 8.056 0 0 0 4.552-1.388l4.72 4.74c.197.197.462.306.746.306.27 0 .525-.1.718-.28a.977.977 0 0 0 .03-1.414zM7.946 2.001c3.238 0 5.873 2.544 5.873 5.67 0 3.127-2.635 5.67-5.873 5.67-3.239 0-5.873-2.543-5.873-5.67 0-3.126 2.634-5.67 5.873-5.67z'/%3E%3C/svg%3E")
}
/* nav icons */
#account-navigation-container .account-navigation-wrapper{display:flex;justify-content:space-between;flex-direction:row;width:200px}
#account-navigation-container .account-navigation-wrapper .link{display:flex;align-items:center;height:40px;text-decoration:none!important;margin:0!important}
#account-navigation-container .account-navigation-wrapper .link-text{font-size:13px;color:#000!important;padding-left:5px;font-weight:700;margin:0!important}
#account-navigation-container .account-navigation-wrapper .icon-container{position:relative;height:18px}
#account-navigation-container .account-navigation-wrapper .initial-icon,
#account-navigation-container .account-navigation-wrapper .hover-icon{display:block;font-size:16px;transition:opacity .3s}
#account-navigation-container .account-navigation-wrapper .hover-icon{opacity:0;position:absolute;left:0;top:0}
#account-navigation-container .account-navigation-wrapper .link:hover .hover-icon{opacity:1}
#account-navigation-container .account-navigation-wrapper .link:hover .initial-icon{opacity:0}
.i-user-orange:before,.i-heart-orange:before{color:#fff}
.i-user-orange:before{content:"\e965"}
.i-heart-orange:before{content:"\e966"}
.i-bagg-orange:before{content:"\e958";color:#fff}

/* ==============================================
   PAGE TWO — Product + Quiz
   ============================================== */
#page_two{display:block;overflow:hidden;background:#f4f5f7;padding-bottom:24px}

/* Product card */
.main-product-content{
  background:#fff;
  display:flex;justify-content:space-between;flex-wrap:wrap;
  border-radius:20px;
  box-shadow:0 4px 28px rgba(0,0,0,.08);
  padding:24px;margin-top:20px;
  overflow:visible!important;
  float:none!important;width:auto!important;
  margin-bottom:20px
}

/* Image column */
.main-product-wrp{width:55%;float:none!important;display:flex;flex-direction:column;align-items:center;margin-bottom:0}
.main-roduct-slider-for{width:100%;margin-bottom:10px;visibility:hidden;position:relative}
.main-roduct-slider-for__item{height:380px;display:flex!important;align-items:center;justify-content:center;overflow:hidden;background:#fafafa;border-radius:12px}
.main-roduct-slider-for__image{max-width:100%;max-height:100%;object-fit:contain}
.main-product-slider-nav{visibility:hidden;width:100%;float:none!important}
.main-product-slider-nav__item{
  height:80px;border:2px solid #eee;border-radius:10px;
  overflow:hidden;cursor:pointer;display:flex!important;align-items:center;justify-content:center;
  transition:border-color .2s
}
.main-product-slider-nav__item.slick-current{border-color:#ffe702;background:#fffce0}
.main-product-slider-nav__image{max-width:100%;max-height:100%;object-fit:contain}
/* Slider arrows */
.main-roduct-slider-for .slick-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;font-size:1px;color:transparent;
  border-radius:50%;background:rgba(0,0,0,.22);border:none;
  z-index:50;cursor:pointer;transition:background .3s
}
.main-roduct-slider-for .slick-arrow:hover{background:rgba(0,0,0,.45)}
.main-roduct-slider-for .slick-prev{left:10px}
.main-roduct-slider-for .slick-next{right:10px}
.main-roduct-slider-for .slick-prev::before,.main-roduct-slider-for .slick-next::before{
  content:'';display:block;width:14px;height:7px;
  background:url(chevrone.svg) center/100% no-repeat;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg)
}
.main-roduct-slider-for .slick-next::before{transform:translate(-50%,-50%) rotate(-90deg)}

/* Info column */
.main-product-info{width:42%;float:none!important}

.main-product-info__title{
  font-size:1.6rem!important;font-weight:900!important;color:#0d0d0d!important;
  letter-spacing:-.4px;line-height:1.2;
  margin:0 0 12px!important;padding:0!important;float:none!important;width:auto!important
}
.prices-block{
  display:flex!important;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:16px!important;float:none!important;width:auto!important
}
.prices-block__old{font-size:.95rem;color:#bbb;text-decoration:line-through;font-weight:500;float:none!important;margin:0!important}
.prices-block__new{
  font-size:1.5rem;font-weight:900;color:#111;
  background:#ffe702;padding:3px 14px;border-radius:8px;
  box-shadow:0 2px 10px rgba(255,208,0,.3);float:none!important
}
.text-block{float:none!important;width:auto!important}
.text-block__paragraph{
  font-size:.9rem!important;line-height:1.65!important;color:#555!important;
  margin-bottom:7px!important;float:none!important;width:auto!important
}
.text-block__paragraph b{color:#111!important;font-weight:700!important}

/* Colour variants */
.product-descript-block{float:none!important;width:auto!important;padding:10px 0;border-top:1px solid #f0f0f0;border-bottom:none;margin:10px 0}
.product-descript-block.size{border-top:none;margin-bottom:0}
.product-size-block{float:none!important;width:auto!important;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.product-size-block__name{font-size:.75rem;color:#aaa;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.product-size-block__value{font-size:.88rem;font-weight:700;color:#111}
.size-list{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:7px;
  float:none!important;width:100%!important;margin:0!important
}
.size-list__item{
  background:#fff;color:#333;border:2px solid #eee;border-radius:9px;
  height:38px;font-size:.8rem;font-weight:600;
  display:flex!important;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,background .2s;padding:0!important;float:none!important
}
.size-list__item:hover{border-color:#ffe702;background:#fffce0}
.size-list__item.active{border-color:#e6ce00;background:#ffe702;color:#111}

/* ==============================================
   QUIZ PROGRESS BAR
   ============================================== */
.pro-quiz-progress{
  display:flex;align-items:flex-start;gap:0;
  padding:14px 16px;background:#f0f1f3;border-radius:13px;margin-bottom:16px
}
.pro-quiz-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative}
.pro-quiz-step:not(:last-child)::after{
  content:'';position:absolute;top:13px;left:50%;width:100%;height:3px;
  background:#ddd;z-index:0;border-radius:2px;transition:background .4s
}
.pro-quiz-step.done:not(:last-child)::after{background:#ffe702}
.pro-quiz-step-dot{
  width:26px;height:26px;border-radius:50%;background:#ddd;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:#999;
  position:relative;z-index:1;border:3px solid #ddd;
  transition:all .3s cubic-bezier(.34,1.56,.64,1)
}
.pro-quiz-step.active .pro-quiz-step-dot{background:#ffe702;border-color:#e6ce00;color:#111;box-shadow:0 0 0 5px rgba(255,231,2,.22);transform:scale(1.15)}
.pro-quiz-step.done .pro-quiz-step-dot{background:#111;border-color:#111;color:#ffe702}
.pro-quiz-step-label{font-size:.65rem;font-weight:600;color:#bbb;text-transform:uppercase;letter-spacing:.04em;text-align:center;transition:color .3s}
.pro-quiz-step.active .pro-quiz-step-label{color:#111}
.pro-quiz-step.done .pro-quiz-step-label{color:#666}

/* ==============================================
   QUIZ QUESTIONS
   ============================================== */
.block_questions{float:none!important;width:100%!important;margin-top:20px}

.question{
  background:#fff;border:1.5px solid #ebebeb;border-radius:16px;
  padding:20px 18px 16px;box-shadow:0 2px 12px rgba(0,0,0,.05);
  animation:qFadeIn .3s ease forwards
}
@keyframes qFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.first_question{display:block}
.two_question{display:none}
.three_question{display:none}

.question>p{font-size:.97rem!important;font-weight:600!important;color:#111!important;margin-bottom:16px!important;line-height:1.55!important}
.question>p>span{display:block;font-size:.68rem!important;font-weight:700!important;letter-spacing:.09em;text-transform:uppercase;color:#aaa!important;margin-bottom:4px}

.answer{display:flex!important;flex-direction:column!important;gap:9px!important;padding-top:0!important}
.answer>a{
  display:flex!important;align-items:center;justify-content:center;
  min-height:52px;width:100%!important;
  background:linear-gradient(145deg,#ffe702 0%,#ffd000 100%)!important;
  color:#111!important;border-radius:12px!important;font-size:.97rem!important;font-weight:700!important;
  border:2px solid transparent!important;box-shadow:0 3px 14px rgba(255,208,0,.35)!important;
  cursor:pointer;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s!important;
  padding:0 16px!important;text-align:center;position:relative;overflow:hidden;
  text-decoration:none!important
}
.answer>a:active{transform:scale(.97)!important;box-shadow:0 1px 6px rgba(255,208,0,.2)!important}

/* ==============================================
   VERIFICATION / CHECK SECTION
   ============================================== */
#Check{
  display:none;max-width:560px;margin:30px auto;
  background:#fff;border-radius:20px;box-shadow:0 4px 28px rgba(0,0,0,.09);padding:40px 32px
}
.check_info>h2{font-size:1.4rem!important;font-weight:900!important;color:#111!important;text-align:center;margin-bottom:24px!important}
.loading{text-align:center;margin-bottom:8px}
.loading>img{width:36px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.verification_elements{margin-top:20px}
.verification_elements>p{
  font-size:.92rem!important;font-weight:600!important;color:#111!important;
  padding:13px 16px!important;border-radius:11px!important;margin-bottom:10px!important;
  background:#f7f8fa!important;display:flex!important;align-items:center!important;gap:12px!important;
  border-left:4px solid #ffe702!important;
  opacity:0;transform:translateX(-12px);animation:slideIn .4s ease forwards
}
.verification_elements>p.time_one{animation-delay:0s;display:none}
.verification_elements>p.time_two{animation-delay:.3s;display:none}
.verification_elements>p.time_three{animation-delay:.7s;display:none}
.verification_elements>p::before{
  content:'✓';display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;min-width:24px;background:#ffe702;border-radius:50%;
  font-size:.72rem;font-weight:900;color:#111;box-shadow:0 2px 8px rgba(255,208,0,.4)
}
@keyframes slideIn{to{transform:none;opacity:1}}

/* ==============================================
   GIFT BOX GAME
   ============================================== */
#game{
  display:none;
  background:linear-gradient(155deg,#111 0%,#1e1e1e 60%,#2a2200 100%);
  padding:44px 0 52px;position:relative;overflow:hidden
}
#game::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:500px;height:280px;
  background:radial-gradient(ellipse,rgba(255,231,2,.1) 0%,transparent 70%);
  pointer-events:none
}
.page__container{background:transparent!important}
.boxes{
  display:grid;justify-content:center;
  grid-template-columns:repeat(3,minmax(140px,19.5rem));
  gap:16px;padding:0 16px;margin-top:20px;float:left;width:100%
}
.box{position:relative;cursor:pointer;z-index:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));transition:filter .2s}
.box:hover{filter:drop-shadow(0 6px 22px rgba(255,231,2,.3))!important}
.box:hover{animation:tremor .82s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tremor{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}
  40%,60%{transform:translate3d(4px,0,0)}
}

/* ==============================================
   MODAL — CONGRATULATIONS (initial)
   ============================================== */
.wrapp_modal_box{
  border-radius:24px!important;position:absolute;background:#fff!important;
  display:none;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px)!important;max-width:460px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.4)!important;
  overflow:hidden;padding:0!important;
  animation:modalPop .4s cubic-bezier(.34,1.56,.64,1) forwards
}
@keyframes modalPop{
  from{transform:translate(-50%,-50%) scale(.84);opacity:0}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.img_box{background:linear-gradient(145deg,#ffe702 0%,#ffd000 100%);padding:24px;text-align:center;border-bottom:3px solid #e6ce00}
.img_box>img{width:130px!important;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.2));animation:floatBox 2.5s ease-in-out infinite}
@keyframes floatBox{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.Congratulations_person{
  font-size:1rem!important;font-weight:700!important;color:#111!important;opacity:1!important;
  width:100%!important;max-width:100%!important;text-align:center;
  padding:20px 24px 6px!important;margin:0!important;line-height:1.5!important
}
.wrapp_modal_box>ol{padding:10px 24px 4px!important;list-style:none!important;margin:0!important;text-align:left!important}
.wrapp_modal_box>ol>li{font-size:.85rem!important;color:#666!important;padding:5px 0 5px 22px!important;position:relative;line-height:1.5!important}
.wrapp_modal_box>ol>li::before{content:'→';position:absolute;left:0;color:#c8a800;font-weight:800}
.wrapp_modal_box>ol>li>b{color:#111!important}
.wrapp_modal_box .link{padding:16px 24px 26px!important;margin:0!important;text-align:center!important}

/* ==============================================
   SHARED CTA BUTTONS (modals)
   ============================================== */
.click_me_pidor,.clickKlos{
  display:inline-block!important;
  background:linear-gradient(145deg,#ffe702 0%,#ffd000 100%)!important;
  color:#111!important;border-radius:13px!important;
  padding:14px 48px!important;font-size:.97rem!important;font-weight:800!important;
  letter-spacing:.03em;box-shadow:0 4px 20px rgba(255,208,0,.45)!important;
  border:none!important;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s!important;
  cursor:pointer;text-decoration:none!important
}
.click_me_pidor:active,.clickKlos:active{transform:scale(.97)!important}

/* ==============================================
   MODAL — EMPTY BOX (OHHH)
   ============================================== */
#fonGrey{position:relative}
.two_modal_icon{
  width:calc(100% - 32px)!important;max-width:460px;border-radius:24px!important;
  background:#fff!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:none;box-shadow:0 28px 80px rgba(0,0,0,.4)!important;
  overflow:hidden;z-index:100;animation:modalPop .35s cubic-bezier(.34,1.56,.64,1) forwards
}
.two_modal_icon>ol{text-align:center!important;padding:0!important;list-style:none!important}
.topOHH{font-size:2.2rem!important;font-weight:900!important;color:#e53935!important;opacity:1!important;text-align:center!important;padding:30px 24px 4px!important;letter-spacing:-.5px!important}
.topOHHBot{font-size:.92rem!important;color:#666!important;text-align:center!important;line-height:1.6!important;padding:6px 24px!important;width:100%!important}
.two_modal_icon .dfd{text-align:center;padding:20px 24px 28px!important}

/* ==============================================
   WIN MODAL (two_modal_icon_Two)
   ============================================== */
.two_modal_icon_Two{
  width:calc(100% - 32px)!important;max-width:480px;border-radius:24px!important;
  background:#fff!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:none;box-shadow:0 28px 80px rgba(0,0,0,.45)!important;
  overflow:hidden;z-index:999;transition:none;
  animation:modalPop .4s cubic-bezier(.34,1.56,.64,1) forwards
}
.checkmarkTwo{padding-top:24px!important;text-align:center!important}
.checkmarkTwo>img{width:160px!important;border-radius:14px!important;box-shadow:0 8px 28px rgba(0,0,0,.14)!important}
.lastCong{font-size:1.05rem!important;font-weight:800!important;color:#111!important;opacity:1!important;text-align:center!important;padding:16px 24px 0!important;line-height:1.5!important}
.lastCong>b{color:#b8960a!important}
.margLastL{padding:10px 24px 0!important;margin:0!important;list-style:none!important}
.margLastL>li{font-size:.84rem!important;color:#666!important;opacity:1!important;padding:5px 0!important;line-height:1.6!important}
.margLastL>li>b{color:#111!important;font-weight:700!important}
.nvnvmdlsl{padding:18px 24px 28px!important;text-align:center!important}

/* gift wind popup */
.img_gift_wind{position:absolute;top:50%;left:50%;transform:translate(-30%,-50%);display:none;transition:all 1s ease-in-out}
.img_gift_wind img{width:260px;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.2)}

/* ==============================================
   COMMENTS SECTION
   ============================================== */
.section.comments{background:#fff;padding:40px 0;float:left;width:100%}

.comments-rating-block{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:14px!important;background:#f7f8fa!important;border-radius:14px!important;
  padding:16px 20px!important;margin-bottom:24px!important;
  border:1.5px solid #f0f0f0;float:none!important;width:auto!important
}
.comments-rating-block__image-wrp{width:44px!important;height:44px;float:none!important;margin-bottom:0!important;flex-shrink:0}
.comments-rating-block__image{width:100%!important;height:100%!important;object-fit:contain;float:none!important}
.comments-rating-block__text{font-size:.95rem!important;font-weight:700!important;color:#111!important;text-align:left!important;margin-bottom:0!important;flex:1}
.comments-rating{display:flex!important;align-items:center!important;gap:5px!important}
.comments-rating-list{display:flex!important;align-items:center!important;gap:2px!important;padding:0!important;list-style:none!important;width:auto!important;margin:0!important}
.comments-rating-list__item{width:15px!important;height:15px!important;padding:0!important}
.star-fill{background:url(star_full.svg) center/contain no-repeat!important}
.comments-rating__value{font-size:1.25rem!important;font-weight:900!important;color:#111!important}

.comments__list{list-style:none!important;padding:0!important;float:none!important;width:100%}
.comments__item{
  background:#f9f9fb;border:1.5px solid #f0f0f0;border-radius:16px;
  padding:18px 20px;margin-bottom:12px;border-bottom:none!important;
  transition:border-color .2s,box-shadow .2s
}
.comments__item:first-child{border-top:none!important;padding-top:18px!important}
.comments__wrapper{margin-bottom:0!important}
.comments__prop{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap;margin-bottom:8px}
.comments__rating{display:flex!important;gap:2px!important;padding:0!important;margin:0!important;list-style:none!important}
.comments__rating li{width:14px!important;height:14px!important;flex-basis:auto!important}
.comments__username{font-size:.9rem!important;font-weight:700!important;color:#111!important;margin:0!important;display:flex!important;align-items:center!important}
.comments__username::after{content:'•';padding:0 5px;color:#ccc}
.comments__date-wrapper{margin:0!important}
.comments__date{font-size:.75rem!important;color:#bbb!important}
.comments__text{font-size:.88rem!important;color:#444!important;line-height:1.65!important;font-weight:400!important;margin-top:8px!important;padding-right:0!important;overflow-wrap:break-word}
.comments__review-image-wrp{max-width:200px!important;margin-top:12px!important;margin-bottom:0!important;width:auto!important}
.comments__review-image{width:100%!important;border-radius:10px!important;box-shadow:0 3px 10px rgba(0,0,0,.1)!important}
.comments__reviewed{display:none}

/* ==============================================
   ORDER FORM SECTION
   ============================================== */
.order-data-wrp{display:none}
.order-data-wrp.hidden{display:none!important}

.cart-content{padding:0!important}
.basket-steps{
  display:flex!important;background:#f7f8fa;border-bottom:1.5px solid #f0f0f0;
  overflow-x:auto;-webkit-overflow-scrolling:touch
}
.basket-steps .step{
  flex:1;display:flex!important;align-items:center;justify-content:center;gap:7px;
  padding:14px 12px;font-size:.82rem;font-weight:600;color:#bbb;
  text-decoration:none!important;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap
}
.basket-steps .step.done{color:#888;border-bottom-color:#ddd}
.basket-steps .step.current{color:#111;border-bottom-color:#ffe702;background:rgba(255,231,2,.07)}
.basket-steps .step .title{font-size:.82rem;font-weight:600}
.circle{
  width:22px!important;height:22px!important;border-radius:50%!important;
  border:2px solid #ddd!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:.67rem!important;font-weight:700!important;flex-shrink:0
}
.step.current .circle{border-color:#ffe702!important;background:#ffe702!important}
.step.done .circle{border-color:#ccc!important;background:#eee!important}
.basket-tab{padding:0 24px 24px!important}
.order-form-wrp{display:flex;float:left;width:100%;padding:20px 0}
.order-form-left-side{width:65%;padding-right:28px;border-right:1px solid #f0f0f0}
.order-form-right-side{width:35%;padding-left:28px}
.order-form-item{
  float:left;width:100%;padding:20px 0 16px;
  display:flex;justify-content:space-between;border-bottom:1px solid #f0f0f0
}
.order-form-item__name{width:33%;padding-right:16px;font-size:.75rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em}
.order-form-item__fields{width:67%}
.form-group{margin-bottom:12px;position:relative;float:left;width:100%}
.form-group label{position:absolute;left:12px;top:7px;font-size:.68rem;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.05em;z-index:10;white-space:nowrap;width:auto!important;opacity:1!important}
.input{border:2px solid #eee!important;border-radius:11px!important;height:52px!important;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s;margin-top:0!important;background:transparent}
.input input{
  width:100%;height:100%;background:#f5f7fa!important;border:none!important;border-radius:0!important;
  padding:24px 40px 8px 12px!important;font-size:.95rem!important;color:#111!important;
  transition:background .2s;float:left
}
.input:focus-within{border-color:#ffe702!important;box-shadow:0 0 0 3px rgba(255,231,2,.2)!important}
.input:focus-within input{background:#fff!important;outline:none}
.input.valid{border-color:#22c55e!important}
.input.invalid{border-color:#ef4444!important}
.input.valid input{background:#f0fdf4!important}
.input.invalid input{background:#fff5f5!important}
.button-group{position:absolute;right:0;top:0;height:100%;background:transparent!important;display:flex;align-items:center}
.button.input-clear-button{background:none!important;border:none!important;opacity:.35;padding:0 10px;height:100%;display:flex;align-items:center;transition:opacity .18s}
.button.input-clear-button:hover{opacity:.75}
.mt-1{margin-top:4px!important}

/* payment radio */
.basic-checkbox{
  width:100%!important;position:relative!important;left:0!important;top:0!important;float:none!important;
  display:flex!important;align-items:center!important;opacity:1!important;white-space:normal!important;
  background:#f7f8fa;border:1.5px solid #eee;border-radius:11px;padding:13px 16px!important;cursor:pointer;transition:border-color .2s
}
.basic-checkbox__input{position:absolute;width:100%;height:100%;opacity:0;margin:0!important;cursor:pointer;z-index:30}
.basic-checkbox__style{width:18px!important;height:18px!important;border:2px solid #ccc!important;border-radius:50%!important;position:relative;flex-shrink:0;float:none!important;overflow:hidden}
.basic-checkbox__text{width:auto!important;padding-left:12px!important;font-size:.92rem!important;font-weight:600!important;color:#111!important;line-height:1.4!important;margin:0!important;float:none!important}
.basic-checkbox__input:checked+.basic-checkbox__style{border-color:#e6ce00!important}
.basic-checkbox__input:checked+.basic-checkbox__style::before{content:'';display:block;width:10px!important;height:10px!important;background:#ffe702!important;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);float:none!important}

/* order sidebar */
.order-item{float:left;width:100%;display:flex;align-items:center;padding-bottom:16px;border-bottom:1px solid #f0f0f0}
.order-item__image-wrp{width:80px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px solid #f0f0f0;border-radius:10px;overflow:hidden}
.order-item__image{max-width:100%;max-height:100%;object-fit:contain}
.order-item__descript{padding-left:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.order-item__name{font-size:.95rem;font-weight:700;color:#111}
.order-item__price-row{display:flex;align-items:center;gap:10px}
.order-item__old-price{font-size:.85rem;color:#bbb;text-decoration:line-through}
.order-item__new-price{font-size:1rem;font-weight:800;color:#111;background:#ffe702;padding:2px 10px;border-radius:6px}
.order-details-list-wrp{float:left;width:100%;padding-top:18px}
.order-details-list-wrp__name{font-size:.92rem;font-weight:700;color:#111;float:left;width:100%;margin-bottom:12px}
.order-details-list{float:left;width:100%;list-style:none}
.order-details-list__item{float:left;width:100%;display:flex;align-items:center;justify-content:space-between;font-size:.87rem;color:#666;padding-bottom:8px;margin-bottom:8px;border-bottom:1px dashed #eee}
.order-details-list__item.all span{font-weight:700;color:#111;font-size:.95rem}

/* country phone */
.country-input{position:relative}
.country-input__value{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;padding-left:3rem;font-size:.95rem;color:#111;pointer-events:none;z-index:5}
.country-input__value::before{content:'';display:block;position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1.8rem;height:1.1rem;background:url(./flag.png) no-repeat;background-size:100% 100%}
.js-phone-input{padding-left:5.2rem!important}

/* submit */
.buttons{width:100%!important;float:left}
.order-footer__button-next{
  width:100%;margin-top:16px;
  background:linear-gradient(145deg,#1a1a1a 0%,#2d2d2d 100%)!important;
  color:#fff!important;border:none!important;border-radius:13px!important;
  font-size:1rem!important;font-weight:700!important;letter-spacing:.04em;
  padding:15px 28px!important;box-shadow:0 4px 18px rgba(0,0,0,.2)!important;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s!important;display:block
}
.order-footer__button-next:hover{transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(0,0,0,.3)!important}
.order-footer__button-next.disable{opacity:.35!important;pointer-events:none!important}
.js-submit-button.disable{opacity:.35!important;pointer-events:none!important}

/* ==============================================
   LOADER
   ============================================== */
.loader-wrp{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(247,248,250,.97)!important;z-index:300;backdrop-filter:blur(6px)}
.loader-block{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.loader-block__image{width:64px!important;filter:drop-shadow(0 4px 14px rgba(255,208,0,.5))}

/* ==============================================
   FOOTER
   ============================================== */
.block_footer_link{
  display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center;
  background:#111!important;padding:18px 0!important;border-top:3px solid #ffe702
}
.block_footer_link>a{font-size:.82rem;color:#aaa!important;text-decoration:none!important;transition:color .2s;font-weight:500}
.block_footer_link>a:hover{color:#ffe702!important}
.pos{position:relative}

/* ==============================================
   STICKY MOBILE CTA
   ============================================== */
.pro-mobile-cta-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 18px rgba(0,0,0,.12);z-index:800;
  display:none;align-items:center;gap:12px;border-top:1.5px solid #f0f0f0
}
.pro-mobile-cta-price{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.pro-mobile-cta-price-old{font-size:.68rem;color:#bbb;text-decoration:line-through;font-weight:500}
.pro-mobile-cta-price-new{font-size:1.05rem;font-weight:900;color:#111}
.pro-mobile-cta-btn{
  flex:1;background:linear-gradient(145deg,#ffe702 0%,#ffd000 100%);
  color:#111;border:none;border-radius:12px;font-size:.92rem;font-weight:800;
  padding:13px 0;text-align:center;cursor:pointer;
  box-shadow:0 3px 16px rgba(255,208,0,.4);display:flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none!important;transition:transform .2s cubic-bezier(.34,1.56,.64,1)
}
.pro-mobile-cta-btn:active{transform:scale(.97)}

/* misc helpers */
.blur{filter:blur(5px)}
.b-und,.b-show,.b-und-two,.b-show-two,.b-und-three{display:block}
#page_box{display:none;padding:30px 0}
#comments_display{display:block}
#fppter_display{display:block}
#page_faq{display:none;position:relative;z-index:99999}
.open_faq{position:fixed;width:80px;bottom:8%;z-index:9999;margin-left:1px;margin-bottom:5px}
.loaded-images{width:0;height:0;opacity:0;pointer-events:none;z-index:-1;float:left;overflow:hidden}
.decoration_rotato{animation:rotIn 1s linear forwards;width:50%}
@keyframes rotIn{from{transform:rotate(-180deg)}to{transform:none}}

/* ==============================================
   DESKTOP RESPONSIVE — 992px+
   ============================================== */
@media(min-width:769px){
  .answer{flex-direction:row!important;gap:10px!important}
  .answer>a{flex:1!important;min-height:50px!important;width:auto!important}
  .pro-mobile-cta-bar{display:none!important}
}

/* ==============================================
   TABLET — 768px
   ============================================== */
@media(max-width:992px){
  .main-product-wrp{width:50%}
  .main-product-info{width:47%}
  .order-form-wrp{flex-direction:column-reverse}
  .order-form-left-side{width:100%;border:none;padding:0}
  .order-form-right-side{width:100%;padding:0;margin-bottom:24px}
  .order-form-item{flex-direction:column;gap:8px}
  .order-form-item__name{width:100%}
  .order-form-item__fields{width:100%}
  .order-footer__button-next{position:fixed;bottom:0;left:0;width:100%;border-radius:0!important;margin:0!important;z-index:100;padding:16px 28px calc(16px + env(safe-area-inset-bottom))!important}
}

/* ==============================================
   MOBILE — 768px and below
   ============================================== */
@media(max-width:768px){
  /* header */
  .header{height:56px!important;padding:0 14px!important}
  #autoCompleteAppWrapper{display:none}
  #account-navigation-container .account-navigation-wrapper .link-text{display:none}
  #account-navigation-container .account-navigation-wrapper{width:auto}
  #account-navigation-container .account-navigation-wrapper>div,
  #account-navigation-container .account-navigation-wrapper>span{margin-left:14px}

  /* product */
  .main-product-content{flex-direction:column!important;align-items:stretch!important;border-radius:0 0 18px 18px!important;margin-top:0!important;padding:0 0 18px!important}
  .main-product-wrp{width:100%!important;background:#fafafa;border-radius:0}
  .main-roduct-slider-for__item{height:260px!important;border-radius:0!important;background:#fafafa}
  .main-product-slider-nav{width:100%!important;padding:0 14px!important}
  .main-product-slider-nav__item{height:66px!important;border-radius:10px!important}
  .main-product-info{width:100%!important;padding:16px 16px 0!important}
  .main-product-info__title{font-size:1.25rem!important;margin-bottom:10px!important}
  .prices-block__new{font-size:1.25rem!important}
  .size-list{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .size-list__item{height:36px!important;font-size:.77rem!important}

  /* quiz */
  .block_questions{padding:0 14px}
  .pro-quiz-progress{padding:12px 14px!important;margin-bottom:14px}
  .pro-quiz-step-label{font-size:.6rem!important}
  .question{padding:16px 14px 14px!important;border-radius:14px!important}
  .question>p{font-size:.93rem!important;margin-bottom:12px!important}
  .answer{flex-direction:column!important;gap:8px!important}
  .answer>a{min-height:52px!important;width:100%!important;flex:none!important;font-size:.95rem!important;border-radius:11px!important}

  /* #page_two bottom padding for sticky CTA */
  #page_two{padding-bottom:78px!important}

  /* sticky CTA bar */
  .pro-mobile-cta-bar{display:flex!important}

  /* check */
  #Check{margin:14px!important;padding:26px 16px!important;border-radius:18px!important}
  .check_info>h2{font-size:1.15rem!important}
  .verification_elements>p{font-size:.86rem!important;padding:11px 14px!important}

  /* game */
  #game{padding:30px 0 38px!important}
  .boxes{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;padding:0 14px!important}

  /* modals */
  .wrapp_modal_box,.two_modal_icon,.two_modal_icon_Two{width:calc(100vw - 28px)!important;border-radius:20px!important}
  .Congratulations_person{font-size:.93rem!important;padding:16px 18px 4px!important}
  .topOHH{font-size:1.85rem!important;padding:24px 18px 4px!important}
  .topOHHBot{padding:6px 18px!important}
  .lastCong{font-size:.97rem!important;padding:14px 18px 0!important}
  .img_box{padding:20px!important}
  .img_box>img{width:110px!important}
  .wrapp_modal_box .link,.two_modal_icon .dfd,.nvnvmdlsl{padding:14px 18px 22px!important}
  .click_me_pidor,.clickKlos{padding:13px 36px!important;font-size:.92rem!important}

  /* comments */
  .section.comments{padding:28px 0!important}
  .comments-rating-block{padding:13px 16px!important;border-radius:12px!important;margin-bottom:18px!important}
  .comments__item{padding:14px 16px!important;border-radius:13px!important}
  .comments__text{font-size:.83rem!important}

  /* order */
  .basket-tab{padding:0 14px 80px!important}
  .order-footer__button-next{position:fixed!important;bottom:0!important;left:0!important;width:100%!important;border-radius:0!important;margin:0!important;z-index:800!important;padding:16px 28px calc(16px + env(safe-area-inset-bottom))!important}

  /* footer */
  .block_footer_link{grid-template-columns:1fr!important;padding:18px 0 24px!important;gap:12px}
}

/* ==============================================
   SMALL — 480px
   ============================================== */
@media(max-width:480px){
  .main-product-info__title{font-size:1.15rem!important}
  .prices-block__new{font-size:1.15rem!important}
  .pro-quiz-step-label{display:none!important}
  .main-roduct-slider-for__item{height:220px!important}
  .boxes{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .check_info>h2{font-size:1.05rem!important}
  .topOHH{font-size:1.65rem!important}
}

/* ==============================================
   CRITICAL FIXES
   ============================================== */

/* Header — kill the inline style margin-bottom:15px from old code */
.header { margin-bottom: 0 !important; }

/* Modal overlay — dim the background when modal is shown */
.wrapp_modal_box[style*="display: block"],
.two_modal_icon[style*="display: block"],
.two_modal_icon_Two[style*="display: block"] { display: block; }

/* The conteiner holding modals needs overflow:visible so modal can escape */
section[style*="position:relative"] > .conteiner { overflow: visible !important; }

/* .link div inside modal (wraps the OK button) */
.wrapp_modal_box .link { display: block; text-align: center; margin-bottom: 0 !important; }

/* gift wind absolute positioned image */
.img_gift_wind { position: absolute; }
div.conteiner:has(.img_gift_wind) { position: relative; min-height: 1px; }

/* Game section — the inline style="display:grid" on .boxes conflicts with display:none on #game */
/* When #game is shown by JS it gets display:block, boxes has display:grid inline */
#game.visible, #game[style*="display: block"] { display: block !important; }

/* Verification paragraphs — JS adds display:block, need animation to still fire */
.verification_elements > p[style*="display: block"] {
  animation: slideIn .4s ease forwards !important;
}

/* Order form right side image */
.order-item__image-wrp { flex-shrink: 0; }

/* Fix boxes grid on game section for all screens */
.boxes[style] {
  display: grid !important;
}

/* Prevent body scroll when modals open — handled by JS if needed */
/* Make sure slick slider is visible after init */
.main-roduct-slider-for.slick-initialized,
.main-product-slider-nav.slick-initialized { visibility: visible !important; }

/* Comments wrapper float clear */
.section.comments::after { content: ''; display: table; clear: both; }
.comments__list::after { content: ''; display: table; clear: both; }

/* Ensure #page_two renders above everything at page load */
#page_two { position: relative; z-index: 1; }

/* Check section — needs to be in normal flow, not absolute */
#Check { position: relative; z-index: 2; }

/* Mobile: fix sticky CTA overlapping quiz content */
@media(max-width:768px) {
  .block_questions { padding-bottom: 8px !important; }
  /* Make sure quiz progress bar doesn't get cut */
  .main-product-content { overflow: visible !important; }
  /* Remove margin-top gap that shows after header */
  #page_two > .conteiner { padding: 0 !important; }
  .main-product-content { margin-top: 0 !important; }
  /* Product info padding */
  .main-product-info { padding: 16px !important; }
  /* Block questions padding */
  .block_questions { padding: 0 16px 16px !important; }
  /* Fix answer button text alignment */
  .answer > a { line-height: 1.3 !important; }
  /* game section boxes — ensure 2 col */
  .boxes { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; }
  /* Modals — ensure centered in viewport */
  .wrapp_modal_box,
  .two_modal_icon,
  .two_modal_icon_Two {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

@media(min-width:769px) {
  /* Desktop modals — absolute within their section */
  .wrapp_modal_box,
  .two_modal_icon,
  .two_modal_icon_Two {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
  }
}