/* OMTOPUP V2 - FLASH SALE MOBILE ALIGNMENT */
/* Hanya memengaruhi komponen Flash Sale homepage */

@media (max-width: 700px) {

    .cici-flash-section {
        box-sizing: border-box !important;
    }

    .cici-flash-section .cici-flash-head {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        margin-bottom: 15px !important;
        min-width: 0 !important;
    }

    .cici-flash-section .cici-flash-title-wrap {
        min-width: 0 !important;
        gap: 3px !important;
    }

    .cici-flash-section .cici-flash-title-wrap h2 {
        margin: 0 !important;
        font-size: clamp(16px, 4.3vw, 20px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }

    .cici-flash-section .cici-flash-countdown {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .cici-flash-section .cici-flash-countdown-label {
        display: none !important;
    }

    .cici-flash-section .cici-flash-time {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    .cici-flash-section .cici-flash-time > span {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;
        width: clamp(31px, 8.3vw, 40px) !important;
        height: clamp(35px, 9.1vw, 43px) !important;
        box-sizing: border-box !important;

        padding: 4px 2px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(0,200,255,.45) !important;

        background: linear-gradient(
            180deg,
            #087ff5,
            #0869d6
        ) !important;

        box-shadow:
            0 2px 9px rgba(0,130,255,.20) !important;
    }

    .cici-flash-section .cici-flash-time b {
        color: #ffffff !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .cici-flash-section .cici-flash-time small {
        color: rgba(255,255,255,.84) !important;
        font-size: 7px !important;
        line-height: 1.1 !important;
        margin-top: 3px !important;
    }

    .cici-flash-section .cici-flash-time i {
        color: #63dcff !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 900 !important;
    }
}

/* Layar sangat sempit: hindari tabrakan judul dan timer */
@media (max-width: 350px) {
    .cici-flash-section .cici-flash-head {
        column-gap: 4px !important;
    }

    .cici-flash-section .cici-flash-title-wrap h2 {
        font-size: 15px !important;
    }

    .cici-flash-section .cici-flash-time {
        gap: 2px !important;
    }

    .cici-flash-section .cici-flash-time > span {
        width: 29px !important;
        height: 35px !important;
    }
}



/* OMTOPUP FLASH SALE TIMER - REFERENCE STYLE V2 */

@media (max-width: 700px) {

    .cici-flash-section .cici-flash-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .cici-flash-section .cici-flash-title-wrap {
        gap: 4px !important;
    }

    .cici-flash-section .cici-flash-kicker {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .cici-flash-section .cici-flash-title-wrap h2 {
        font-size: clamp(14px, 4vw, 19px) !important;
        line-height: 1.2 !important;
        letter-spacing: -.3px !important;
    }

    .cici-flash-section .cici-flash-countdown {
        align-items: flex-end !important;
        gap: 0 !important;
    }

    .cici-flash-section .cici-flash-time {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
    }

    .cici-flash-section .cici-flash-time > span {
        width: clamp(34px, 9vw, 42px) !important;
        min-width: 0 !important;
        height: 43px !important;
        padding: 4px 2px !important;
        border-radius: 9px !important;

        background: linear-gradient(
            180deg,
            #092c4b,
            #061d35
        ) !important;

        border: 1px solid rgba(0,195,255,.55) !important;

        box-shadow:
            inset 0 0 9px rgba(0,195,255,.08),
            0 2px 8px rgba(0,0,0,.18) !important;
    }

    .cici-flash-section .cici-flash-time b {
        font-size: 16px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        color: #fff !important;
        font-variant-numeric: tabular-nums !important;
    }

    .cici-flash-section .cici-flash-time small {
        margin-top: 3px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        color: #a9c9dc !important;
    }

    .cici-flash-section .cici-flash-time i {
        font-size: 13px !important;
        line-height: 1 !important;
        color: #00dfff !important;
        font-weight: 900 !important;
    }
}

@media (max-width: 360px) {
    .cici-flash-section .cici-flash-head {
        column-gap: 3px !important;
    }

    .cici-flash-section .cici-flash-title-wrap h2 {
        font-size: 13px !important;
    }

    .cici-flash-section .cici-flash-time {
        gap: 2px !important;
    }

    .cici-flash-section .cici-flash-time > span {
        width: 30px !important;
        height: 40px !important;
    }

    .cici-flash-section .cici-flash-time b {
        font-size: 14px !important;
    }
}