/* =========================================
   1. ŞRİFTLƏR VƏ MİQYAS (Standard)
   ========================================= */
@font-face {
    font-family: 'Playtox';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/Playtox.woff2') format('woff2'), 
         url('/assets/fonts/Playtox.ttf') format('truetype');
}

:root {
    --scale: 1px;
}

/* Yalnız eninə görə kiçilmə (Mobil üçün) */
@media screen and (max-width: 480px) {
    :root {
        --scale: calc(100vw / 480);
    }
}

body.modal-open {
    overflow: hidden !important; 
    height: 100vh;
}

/* =========================================
   2. MODAL ƏSAS ÇƏRÇİVƏ (DÜZƏLİŞ EDİLDİ)
   ========================================= */
.wrap-modal-box {
    display: none; /* Varsayılan olaraq GİZLİ */
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.8);
    
    /* Scroll üçün lazımi kodlar */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    
    padding: 20px 0;
    
    --start-x: 0px;
    --start-y: 0px;
}

/* Flex və Mərkəzləmə YALNIZ 'active' olanda işə düşsün */
.wrap-modal-box.active {
    display: flex !important;
    align-items: center !important; /* Şaquli mərkəzləmə */
    justify-content: center !important; /* Üfüqi mərkəzləmə */
}

/* =========================================
   3. QIŞ TƏQVİMİ POPUP
   ========================================= */
._winter-calendar .wc-popup {
    position: relative;
    max-width: 480px;
    width: 100%;
    
    margin: 0 auto; 
    
    z-index: 10;
    transform: scale(0); 
    opacity: 0;
    
    /* Animasiya mərkəzdən başlamalıdır */
    transform-origin: center center; 
}

._winter-calendar.active .wc-popup {
    animation: expandFromIcon 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

._winter-calendar.closing .wc-popup {
    animation: shrinkToIcon 0.4s ease-in forwards;
}

.wc-popup .wc-popup-close-link {
    position: absolute; z-index: 100; right: 10px; top: 10px; width: 40px; height: 40px;
    background: url('/assets/images/winter_calendar/back_x2.png') 50% 50%/100% auto no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
    cursor: pointer; transition: transform .2s;
    opacity: 0;
}
._winter-calendar.show-cells .wc-popup-close-link {
    opacity: 1; transition: opacity 0.5s;
}
.wc-popup .wc-popup-close-link:hover { transform: scale(1.1); }

.wc-popup .calendar {
    background: url('/assets/images/winter_calendar/calendar_bg.png') 50% 50%/100% auto no-repeat;
    width: 100%; height: calc(var(--scale)*787);
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.8));
    position: relative;
}

/* =========================================
   4. XANALAR
   ========================================= */
.wc-popup .wc-cell {
    position: absolute;
    width: calc(var(--scale)*82);
    height: calc(var(--scale)*82);
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    transition: filter .3s;
    overflow: visible !important;
    opacity: 0;
    transform: scale(0);
}

._winter-calendar.show-cells .wc-cell {
    animation: cellPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Gecikmələr */
._winter-calendar.show-cells .wc-cell:nth-child(1) { animation-delay: 0.00s; }
._winter-calendar.show-cells .wc-cell:nth-child(2) { animation-delay: 0.02s; }
._winter-calendar.show-cells .wc-cell:nth-child(3) { animation-delay: 0.04s; }
._winter-calendar.show-cells .wc-cell:nth-child(4) { animation-delay: 0.06s; }
._winter-calendar.show-cells .wc-cell:nth-child(5) { animation-delay: 0.08s; }
._winter-calendar.show-cells .wc-cell:nth-child(6) { animation-delay: 0.10s; }
._winter-calendar.show-cells .wc-cell:nth-child(7) { animation-delay: 0.12s; }
._winter-calendar.show-cells .wc-cell:nth-child(8) { animation-delay: 0.14s; }
._winter-calendar.show-cells .wc-cell:nth-child(9) { animation-delay: 0.16s; }
._winter-calendar.show-cells .wc-cell:nth-child(10){ animation-delay: 0.18s; }
._winter-calendar.show-cells .wc-cell:nth-child(11){ animation-delay: 0.20s; }
._winter-calendar.show-cells .wc-cell:nth-child(12){ animation-delay: 0.22s; }
._winter-calendar.show-cells .wc-cell:nth-child(13){ animation-delay: 0.24s; }
._winter-calendar.show-cells .wc-cell:nth-child(14){ animation-delay: 0.26s; }
._winter-calendar.show-cells .wc-cell:nth-child(15){ animation-delay: 0.28s; }
._winter-calendar.show-cells .wc-cell:nth-child(16){ animation-delay: 0.30s; }
._winter-calendar.show-cells .wc-cell:nth-child(17){ animation-delay: 0.32s; }
._winter-calendar.show-cells .wc-cell:nth-child(18){ animation-delay: 0.34s; }
._winter-calendar.show-cells .wc-cell:nth-child(19){ animation-delay: 0.36s; }
._winter-calendar.show-cells .wc-cell:nth-child(20){ animation-delay: 0.38s; }
._winter-calendar.show-cells .wc-cell:nth-child(21){ animation-delay: 0.40s; }
._winter-calendar.show-cells .wc-cell:nth-child(22){ animation-delay: 0.42s; }
._winter-calendar.show-cells .wc-cell:nth-child(23){ animation-delay: 0.44s; }
._winter-calendar.show-cells .wc-cell:nth-child(24){ animation-delay: 0.46s; }
._winter-calendar.show-cells .wc-cell:nth-child(25){ animation-delay: 0.48s; }
._winter-calendar.show-cells .wc-cell:nth-child(26){ animation-delay: 0.50s; }
._winter-calendar.show-cells .wc-cell:nth-child(27){ animation-delay: 0.52s; }
._winter-calendar.show-cells .wc-cell:nth-child(28){ animation-delay: 0.54s; }
._winter-calendar.show-cells .wc-cell:nth-child(29){ animation-delay: 0.56s; }
._winter-calendar.show-cells .wc-cell:nth-child(30){ animation-delay: 0.58s; }
._winter-calendar.show-cells .wc-cell:nth-child(31){ animation-delay: 0.60s; }

.wc-popup .wc-cell:hover { filter: brightness(115%); transform: scale(1.05) !important; }

.wc-cell .wc-day {
    position: absolute; z-index: 4; pointer-events: none;
    font-family: 'Playtox', 'Arial Black', sans-serif; font-weight: 900;
    color: #ffffff; font-size: calc(var(--scale) * 38);
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%; padding-top: calc(var(--scale) * 6);
    -webkit-text-stroke: calc(var(--scale) * 5.5) #5a3825;
    paint-order: stroke fill; filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.5));
}
._cell-block .wc-day { display: none; }
.wc-cell .wc-img { width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; z-index: 2; }

._cell-active { z-index: 10; }
._cell-active::before {
    content: ""; position: absolute; z-index: 1; width: 200%; height: 200%; top: -50%; left: -50%;
    background: url('/assets/images/winter_calendar/glow-white.png') 50% 50% no-repeat; background-size: contain;
    animation: cellActivePulse 12s linear infinite; pointer-events: none;
}
._wcc7._cell-active::before, ._wcc14._cell-active::before, ._wcc21._cell-active::before, ._wcc31._cell-active::before {
    width: calc(var(--scale)*169*1.8); height: calc(var(--scale)*169*1.8);
    top: calc(50% - (var(--scale)*169*1.8)/2); left: calc(50% - (var(--scale)*169*1.8)/2);
}
._cell-active .blink { position: absolute; overflow: hidden; width: 100%; height: 100%; border-radius: 6px; z-index: 3; pointer-events: none; }
._cell-active .blink:after {
    content: ""; display: block; width: 40px; height: 400px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    position: absolute; top: -100px; left: -250px; z-index: 1; transform: rotate(45deg); animation: movingFlare3 5s ease-in-out infinite;
}

/* KOORDİNATLAR */
.wc-cell._wcc1, .wc-cell._wcc2, .wc-cell._wcc3, .wc-cell._wcc4, .wc-cell._wcc5 { top: calc(var(--scale)*153); }
.wc-cell._wcc6, .wc-cell._wcc7, .wc-cell._wcc8, .wc-cell._wcc9, .wc-cell._wcc10 { top: calc(var(--scale)*241); }
.wc-cell._wcc11, .wc-cell._wcc12, .wc-cell._wcc13, .wc-cell._wcc14 { top: calc(var(--scale)*329); }
.wc-cell._wcc15, .wc-cell._wcc16, .wc-cell._wcc17, .wc-cell._wcc18 { top: calc(var(--scale)*418); }
.wc-cell._wcc19, .wc-cell._wcc20, .wc-cell._wcc21, .wc-cell._wcc22 { top: calc(var(--scale)*507); }
.wc-cell._wcc23, .wc-cell._wcc24, .wc-cell._wcc25, .wc-cell._wcc26, .wc-cell._wcc27 { top: calc(var(--scale)*596); }
.wc-cell._wcc28, .wc-cell._wcc29, .wc-cell._wcc30, .wc-cell._wcc31 { top: calc(var(--scale)*684); }

.wc-cell._wcc1, .wc-cell._wcc6, .wc-cell._wcc11, .wc-cell._wcc15, .wc-cell._wcc19, .wc-cell._wcc23, .wc-cell._wcc28 { left: calc(var(--scale)*26); }
.wc-cell._wcc2, .wc-cell._wcc7, .wc-cell._wcc16, .wc-cell._wcc20, .wc-cell._wcc24, .wc-cell._wcc29 { left: calc(var(--scale)*114); }
.wc-cell._wcc3, .wc-cell._wcc8, .wc-cell._wcc12, .wc-cell._wcc17, .wc-cell._wcc21, .wc-cell._wcc25, .wc-cell._wcc30 { left: calc(var(--scale)*202); }
.wc-cell._wcc4, .wc-cell._wcc9, .wc-cell._wcc13, .wc-cell._wcc18, .wc-cell._wcc26, .wc-cell._wcc31 { left: calc(var(--scale)*289); }
.wc-cell._wcc5, .wc-cell._wcc10, .wc-cell._wcc14, .wc-cell._wcc22, .wc-cell._wcc27 { left: auto !important; right: calc(var(--scale)*21); }
.wc-cell._wcc7, .wc-cell._wcc14 { height: calc(var(--scale)*170); }
.wc-cell._wcc21, .wc-cell._wcc31 { width: calc(var(--scale)*169); }

/* =========================================
   5. DEKORASİYALAR
   ========================================= */
.w-lights { position: absolute; width: 100%; top: 0; height: calc(var(--scale)*160); z-index: auto; }
.w-lights > * { position: absolute; border-radius: 50%; width: calc(var(--scale)*10); height: calc(var(--scale)*10); background-color: #f8f12e; pointer-events: none; filter: blur(2px); animation: garlandPulse 2.5s ease-in-out infinite; opacity: .7; }
.w-lights .wl1 { background: #00d3da; left: 43px; bottom: 20px; } .w-lights .wl2 { left: 70px; bottom: 22px; }
.w-lights .wl3 { background: #ff7bb3; left: 94px; bottom: 39px; } .w-lights .wl4 { left: 106px; bottom: 32px; }
.w-lights .wl5 { left: 130px; bottom: 46px; } .w-lights .wl6 { background: #ff7bb3; left: 165px; bottom: 75px; }
.w-lights .wl7 { background: #00d3da; left: 200px; bottom: 100px; } .w-lights .wl8 { background: #00d3da; left: 271px; bottom: 98px; }
.w-lights .wl9 { background: #ff7bb3; left: 307px; bottom: 75px; } .w-lights .wl10 { left: 333px; bottom: 48px; }
.w-lights .wl11 { left: 344px; bottom: 42px; } .w-lights .wl12 { background: #ff7bb3; left: 376px; bottom: 39px; }
.w-lights .wl13 { left: 402px; bottom: 19px; } .w-lights .wl14 { background: #00d3da; left: 428px; bottom: 19px; }

.bell { background: url('/assets/images/winter_calendar/bell.png') 50% 50%/100% auto no-repeat; position: absolute; left: calc(var(--scale)*10); top: calc(var(--scale)*120); width: calc(var(--scale)*30); height: calc(var(--scale)*45); transform-origin: 50% 0; animation: bellAnim 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; filter: drop-shadow(0px 6px 6px black); }
.bell._b-right { left: auto; right: calc(var(--scale)*10); animation-direction: reverse; }
.ghost { background: url('/assets/images/winter_calendar/ghost.png') 50% 50%/100% auto no-repeat; position: absolute; left: calc(var(--scale)*50); top: calc(var(--scale)*25); width: calc(var(--scale)*120); height: calc(var(--scale)*120); display: flex; justify-content: center; align-items: center; animation: ghostFloat 10s ease-in-out infinite; }
.ghost .g-wind { position: absolute; width: 85%; height: 85%; top: 30%; animation: windFloat 6s ease-in-out infinite; transform-origin: 50% 50%; }
.ghost .g-wind::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/assets/images/winter_calendar/wind.png') 50% 50%/100% auto no-repeat; animation: windLayerSwitchBefore 4s ease-in-out infinite; opacity: 0; }

/* =========================================
   6. HƏDİYYƏ PƏNCƏRƏSİ (OFFER BOX)
   ========================================= */
.offer-box {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 600px;
    animation: showOfferShine 0.666s forwards;
}

.offer-box:before {
    content: ''; position: absolute; display: block; width: 100%; height: 480px;
    background: url('/assets/images/winter_calendar/shine.png') 50% 50% no-repeat;
}

.offer-box:after {
    content: ''; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 480px;
    background: url('/assets/images/winter_calendar/mill.png') 50% 50% no-repeat;
    background-size: 100% auto !important;
    animation: rotateOfferMill 30s 0.666s linear infinite;
}

.offer-box-title {
    position: relative; z-index: 10; width: 100%; max-width: 480px; height: 60px;
    margin: 0 auto; top: 100px;
    background: url('/assets/images/winter_calendar/text_get-set.png') 50% 0 no-repeat;
    background-size: 100% auto;
    animation: offerBoxTitle 0.5s linear forwards;
}

.offer-box-items {
    position: absolute; width: 100%; left: 0; top: 180px;
    text-align: center; z-index: 100;
    display: flex; flex-direction: column; align-items: center;
}

.offer-box-item {
    position: relative; display: inline-block;
}

/* İkonlar üçün konteyner */
.reward-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    min-height: 80px;
}
 
.reward-icons-row img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain;
}

/* Miqdar (Count) Dizaynı */
.offer-box-item-count {
    position: relative; 
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ffd700;
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 0 #000;
    z-index: 101;
}

/* Tooltip */
.offer-box-item-text {
    display: none; opacity: 0; z-index: 10000; position: absolute;
    width: 140px; bottom: 110%; left: 50%; transform: translateX(-50%);
    color: #5c7e02 !important; background: #effad4 !important;
    padding: 5px; border-radius: 4px; box-shadow: 0 0 25px #000;
    font-size: 12px !important; white-space: normal !important;
}
.offer-box-item:hover .offer-box-item-text {
    display: block; animation: offerBoxItemHint 0.5s forwards;
}

/* Düymə (Button) */
.offer-box-link {
    position: absolute;
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: center;
    top: 290px;
    left: 50%;
    padding: 49px 0 0 0;
    width: 270px;
    max-width: 346px;
    height: 72px;
    font-size: 18px;
    max-height: 134px;
    z-index: 11;
    background: url('/assets/images/winter_calendar/button.png') 50% 50% no-repeat;
    background-size: 100% auto !important;
    animation: showOfferBoxLink 0.8s linear forwards;
    transform-origin: 50% 50%;
    transform: translateX(-50%);
    cursor: pointer;
}
.offer-box-link:hover { filter: brightness(1.2); }
.offer-box-link:active { transform: translateX(-50%) scale(0.95); }

/* =========================================
   7. KEYFRAMES
   ========================================= */
@keyframes showOfferShine { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rotateOfferMill { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes offerBoxTitle { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes showOfferBoxLink { from { opacity: 0; transform: translateX(-50%) scale(0.8); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes offerBoxItemHint { from { opacity: 0; } to { opacity: 1; } }
@keyframes expandFromIcon { 0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(0.05); } 60% { opacity: 1; transform: translate(0, 0) scale(1.05); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes shrinkToIcon { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(0.05); } }
@keyframes cellPopIn { 0% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cellActivePulse { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; } 100% { transform: scale(1) rotate(360deg); opacity: 1; } }
@keyframes garlandPulse { 0% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: .7; } }
@keyframes bellAnim { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }
@keyframes ghostFloat { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 1; } 20% { transform: translateY(-8px) translateX(3px) rotate(-1deg); opacity: .7; } 40% { transform: translateY(-5px) translateX(0px) rotate(0deg); opacity: 1; } 60% { transform: translateY(-8px) translateX(-3px) rotate(1deg); opacity: .7; } 80% { transform: translateY(-3px) translateX(0px) rotate(0deg); opacity: 1; } 100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 1; } }
@keyframes windFloat { 0% { transform: translateY(0px) translateX(0px); } 25% { transform: translateY(-5px) translateX(2px); } 50% { transform: translateY(-3px) translateX(0px); } 75% { transform: translateY(-5px) translateX(-2px); } 100% { transform: translateY(0px) translateX(0px); } }
@keyframes windLayerSwitchBefore { 0% { opacity: .1; } 33.33% { opacity: .8; } 66.66% { opacity: .1; } 100% { opacity: .1; } }
@keyframes movingFlare3 { 15%, 100% { left: 110%; margin-left: 80px; } 0% { left: -130px; margin-left: 0; } 15% { left: 110%; margin-left: 80px; } }