/* ==========================================================
   PRE REGISTER - WAR CLASSIC
========================================================== */

.register-event {
    width: 780px;
    max-width: 90%;

    margin: 18px auto 20px;

    text-align: center;

    font-family: 'Kanit', sans-serif;

    position: relative;

    /*
        สำคัญ
        ต้อง visible เพื่อให้ Tooltip ลอยออกมาได้
    */
    overflow: visible !important;

    z-index: 20;
}


/* ==========================================================
   TITLE
========================================================== */

.register-event-title {
    color: #fff;

    font-size: 20px;
    font-weight: 600;

    letter-spacing: 1px;

    text-shadow:
        0 0 6px #ff7200,
        0 0 14px rgba(255, 80, 0, .6);
}


.register-event-title i {
    color: #fff;

    margin-right: 5px;
}


.register-event-sub {
    color: rgba(0, 0, 0, 0.85);

    font-size: 12px;
    font-weight: bold;

    margin-top: 2px;
}



/* ==========================================================
   REGISTER COUNTER
========================================================== */

.register-counter {
    margin-top: 10px;

    color: #fff;

    font-size: 13px;
}


.register-counter strong {
    color: #ffd05a;

    font-size: 22px;

    margin: 0 4px;

    text-shadow:
        0 0 7px #ff7800;
}



/* ==========================================================
   PERCENT
========================================================== */

.progress-percent {
    display: inline-block;

    color: #ffc34d;

    margin-left: 5px;

    font-size: 11px;
}



/* ==========================================================
   PROGRESS BAR
========================================================== */

.register-progress {
    width: 780px !important;

    max-width: 100% !important;

    height: 12px;

    margin: 8px auto 0 !important;

    position: relative;

    /*
        ตรง Progress ต้อง hidden
        เพราะต้องตัดสี progress ให้อยู่ในแท่ง
    */
    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(10, 10, 10, .82);

    border:
        1px solid rgba(255, 140, 30, .65);

    box-shadow:
        inset 0 0 5px rgba(0, 0, 0, .9),
        0 0 7px rgba(255, 100, 0, .25);
}



.register-progress-fill {
    height: 100%;

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #a51e00,
            #ef4800,
            #ff8c00,
            #ffd257
        );

    box-shadow:
        0 0 8px #ff6a00;

    transition:
        width 1.3s ease;
}



/* แสงวิ่งใน Progress */

.register-progress-fill::after {
    content: "";

    position: absolute;

    top: 0;
    left: -80px;

    width: 70px;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .8),
            transparent
        );

    animation:
        progressShine 2s linear infinite;
}


@keyframes progressShine {

    from {
        left: -80px;
    }

    to {
        left: 100%;
    }

}



/* ==========================================================
   MILESTONE WRAPPER
========================================================== */

.milestone-wrapper {
    width: 780px !important;

    max-width: 100% !important;

    margin: 14px auto 0 !important;

    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;

    align-items: center;

    gap: 20px;

    position: relative;

    /*
        สำคัญมาก
        Tooltip ต้องออกนอก wrapper ได้
    */
    overflow: visible !important;

    z-index: 30;
}



/* ==========================================================
   MILESTONE CARD
========================================================== */

.milestone-card {
    width: 130px !important;
    height: 165px !important;

    flex:
        0 0 130px !important;

    box-sizing: border-box;

    position: relative;

    z-index: 2;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    /*
        สำคัญที่สุด
        เดิมเป็น hidden ทำให้ Popup โดนตัด
    */
    overflow: visible !important;

    color: #fff;

    transition:
        transform .3s ease,
        filter .4s ease,
        opacity .4s ease,
        box-shadow .4s ease;
}



/* ==========================================================
   LOCKED
========================================================== */

.milestone-card.locked {
    /*
        ไม่ใช้ filter ที่ตัว card
        เพราะ filter จะกระทบ Tooltip ด้วย

        เปลี่ยนมาใช้สีเทาแทน
    */

    opacity: .65;

    background:
        linear-gradient(
            160deg,
            rgba(70, 70, 70, .88),
            rgba(15, 15, 15, .90)
        );

    border:
        1px solid rgba(200, 200, 200, .25);

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, .8);
}



/* ==========================================================
   UNLOCKED
========================================================== */

.milestone-card.unlocked {
    opacity: 1;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(145, 55, 8, .95),
            rgba(45, 10, 3, .96) 70%
        );

    border:
        1px solid rgba(255, 150, 35, .9);

    box-shadow:
        inset 0 0 18px rgba(255, 80, 0, .12),
        0 0 7px rgba(255, 110, 20, .6),
        0 0 17px rgba(255, 70, 0, .25);
}



.milestone-card.unlocked:hover {
    transform:
        translateY(-5px)
        scale(1.03);

    z-index: 100;

    box-shadow:
        0 0 12px #ff7a00,
        0 0 25px rgba(255, 60, 0, .45);
}



/* ==========================================================
   STATUS ICON
========================================================== */

.milestone-status {
    position: absolute;

    right: 7px;
    top: 7px;

    width: 21px;
    height: 21px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 9px;

    z-index: 5;
}



.locked .milestone-status {
    color: #aaa;

    background:
        rgba(0, 0, 0, .6);
}



.unlocked .milestone-status {
    color: #fff;

    background:
        #df7a00;

    box-shadow:
        0 0 6px #ff8c00;
}



/* ==========================================================
   STEP NUMBER
========================================================== */

.milestone-number {
    font-size: 10px;

    letter-spacing: 1.2px;

    color:
        rgba(255, 255, 255, .7);

    margin-bottom: 8px;
}



/* ==========================================================
   REWARD HOVER AREA
========================================================== */

.milestone-reward-hover {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    /*
        Tooltip จะยึดตำแหน่งจากตัวนี้
    */
    overflow: visible !important;

    z-index: 50;
}



/* ==========================================================
   MILESTONE ICON
========================================================== */

.milestone-icon {
    font-size: 32px;

    margin-bottom: 8px;

    position: relative;

    z-index: 2;
}



/* ล็อก */

.locked .milestone-icon {
    color: #aaa;

    filter:
        grayscale(100%);
}



/* ปลดล็อก */

.unlocked .milestone-icon {
    color: #ffc44d;

    filter: none;

    text-shadow:
        0 0 6px #ff7b00,
        0 0 13px rgba(255, 70, 0, .8);

    animation:
        rewardGlow 1.7s ease-in-out infinite alternate;
}



@keyframes rewardGlow {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.07);
    }

}



/* ==========================================================
   TARGET
========================================================== */

.milestone-target {
    font-size: 17px;

    font-weight: 600;

    color: #fff;
}



/* ==========================================================
   MILESTONE TEXT
========================================================== */

.milestone-text {
    margin-top: 4px;

    font-size: 10px;

    color:
        rgba(255, 255, 255, .6);
}



.unlocked .milestone-text {
    color: #ffb83f;
}



/* ==========================================================
   REWARD TOOLTIP
========================================================== */

.reward-tooltip {
    position: absolute;

    /*
        Popup กว้างประมาณตัวอย่างที่คุณส่งมา
    */
    width: 340px;

    /*
        อยู่กลาง icon
    */
    left: 50%;

    /*
        เด้งขึ้นเหนือรูป
    */
    bottom: calc(100% + 15px);

    transform:
        translateX(-50%)
        translateY(8px);

    padding:
        10px 12px;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 1),
            rgba(5, 5, 5, 1)
        );

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .95),
        0 0 12px rgba(0, 0, 0, .9),
        inset 0 0 18px rgba(0, 0, 0, 1);

    /*
        สูงกว่า Card ทุกตัว
    */
    z-index: 999999;

    /*
        ซ่อนตอนปกติ
    */
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    /*
        ป้องกัน Tooltip โดน grayscale ของ card
    */
    filter: none !important;

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
}



/* ==========================================================
   SHOW TOOLTIP
========================================================== */

.milestone-card:hover {
    z-index: 999998;
}

.milestone-card:hover .reward-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ==========================================================
   TOOLTIP ARROW
========================================================== */

.reward-tooltip::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -7px;

    transform:
        translateX(-50%);

    border-left:
        7px solid transparent;

    border-right:
        7px solid transparent;

    border-top:
        7px solid rgba(10, 10, 10, .98);
}



/* ==========================================================
   TOOLTIP ITEM
========================================================== */

.reward-tooltip-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    text-align: left;
}



/* ==========================================================
   ITEM IMAGE
========================================================== */

.reward-tooltip-image {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    margin-top: 2px;

    padding: 2px;

    box-sizing:
        border-box;

    background:
        #171717;

    border:
        1px solid rgba(255, 255, 255, .22);

    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, .8);
}



.reward-tooltip-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}



/* ==========================================================
   TOOLTIP INFO
========================================================== */

.reward-tooltip-info {
    flex: 1;

    min-width: 0;
}



/* ชื่อ Item */

.reward-tooltip-name {
    color: #ff9900;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.35;

    white-space: normal;

    text-shadow:
        0 0 5px rgba(255, 120, 0, .2);
}



/* จำนวน */

.reward-tooltip-count {
    color: #fff;

    font-size: 13px;

    font-weight: 600;

    margin-top: 4px;
}



/* Trade */

.reward-tooltip-trade {
    color: #ddd;

    font-size: 11px;

    margin-top: 5px;

    padding-top: 4px;

    border-top:
        1px solid rgba(255, 255, 255, .12);
}



.reward-tooltip-trade i {
    color: #ffd13b;

    margin-right: 4px;

    font-size: 10px;
}



/* ==========================================================
   STEP 1 TOOLTIP
   ป้องกัน Popup หลุดด้านซ้าย
========================================================== */

.milestone-card:first-child .reward-tooltip {
    left: 0;

    transform:
        translateX(0)
        translateY(8px);
}


.milestone-card:first-child:hover
.reward-tooltip {

    transform:
        translateX(0)
        translateY(0);
}


.milestone-card:first-child
.reward-tooltip::after {

    left: 65px;
}



/* ==========================================================
   STEP 5 TOOLTIP
   ป้องกัน Popup หลุดด้านขวา
========================================================== */

.milestone-card:last-child .reward-tooltip {
    left: auto;

    right: 0;

    transform:
        translateX(0)
        translateY(8px);
}


.milestone-card:last-child:hover
.reward-tooltip {

    transform:
        translateX(0)
        translateY(0);
}


.milestone-card:last-child
.reward-tooltip::after {

    left: auto;

    right: 57px;

    transform: none;
}



/* ==========================================================
   เวลาชี้ Card
   ดัน z-index ขึ้น
========================================================== */

.milestone-card:hover {
    z-index: 9999;
}



/* ==========================================================
   MOBILE / TABLET
========================================================== */

@media (max-width: 850px) {

    .register-event {
        width: 94%;

        max-width: 94%;

        overflow: visible !important;
    }


    .register-progress {
        width: 100% !important;
    }


    /*
        มือถือให้เลื่อนการ์ดซ้ายขวาได้
    */

    .milestone-wrapper {
        width: 100% !important;

        justify-content:
            flex-start !important;

        gap: 12px;

        /*
            ต้องมีพื้นที่ด้านบนให้ Popup
        */
        padding:
            130px 2px 15px;

        margin-top:
            -115px !important;

        overflow-x:
            auto !important;

        overflow-y:
            visible;

        scrollbar-width:
            thin;
    }


    .milestone-card {
        flex:
            0 0 130px !important;
    }


    /*
        Tooltip มือถือเล็กลง
    */

    .reward-tooltip {
        width: 280px;
    }

}



/* ==========================================================
   MOBILE SMALL
========================================================== */

@media (max-width: 500px) {

    .register-event {
        width: 96%;

        max-width: 96%;
    }


    .register-event-title {
        font-size: 16px;
    }


    .register-event-sub {
        font-size: 10px;
    }


    .register-counter strong {
        font-size: 19px;
    }


    .reward-tooltip {
        width: 250px;

        padding:
            8px 10px;
    }


    .reward-tooltip-name {
        font-size: 12px;
    }


    .reward-tooltip-count {
        font-size: 11px;
    }


    .reward-tooltip-image {
        width: 38px;
        height: 38px;

        flex:
            0 0 38px;
    }

}