/* ==========================================================
   CRONOMETRO NATIVO GLASS V2
   ========================================================== */

.ir-countdown-native{
    --countdown-opacity:.34;

    box-sizing:border-box;
    overflow:hidden;
    padding:14px 12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;

    background:
        rgba(
            30,
            22,
            10,
            var(--countdown-opacity)
        );

    border:
        1px solid
        rgba(220,185,88,.42);

    box-shadow:
        0 18px 44px
        rgba(0,0,0,.24);
}


.ir-countdown-title{
    width:100%;
    text-align:center;
    margin:0;
    padding:0;
    color:#f2da8f;
    font-size:16px;
    line-height:1.1;
    font-weight:850;
    letter-spacing:.04em;
}


.ir-countdown-grid{
    width:100%;
    display:grid;
    gap:7px;
}


.ir-countdown-unit{
    min-width:0;
    height:65px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:7px 3px;
    box-sizing:border-box;

    border:
        1px solid
        rgba(220,185,88,.22);

    border-radius:14px;

    background:
        rgba(220,185,88,.08);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.ir-countdown-number{
    color:#f2da8f;
    font-size:22px;
    line-height:1;
    font-weight:900;
}


.ir-countdown-label{
    margin-top:5px;
    color:#f4ebcd;
    font-size:8px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}


/* ==========================================================
   GLASS CLARO
   ========================================================== */

.ir-countdown-native
[data-countdown-preset]{
    pointer-events:none;
}


.ir-countdown-native[data-countdown-preset="glassLight"]{
    background:
        rgba(
            255,
            255,
            255,
            var(--countdown-opacity)
        );

    border-color:
        rgba(255,255,255,.55);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.13);
}


.ir-countdown-native[data-countdown-preset="glassLight"]
.ir-countdown-title,
.ir-countdown-native[data-countdown-preset="glassLight"]
.ir-countdown-number{
    color:#172033;
}


.ir-countdown-native[data-countdown-preset="glassLight"]
.ir-countdown-label{
    color:#4b566a;
}


.ir-countdown-native[data-countdown-preset="glassLight"]
.ir-countdown-unit{
    background:
        rgba(255,255,255,.26);

    border-color:
        rgba(255,255,255,.42);
}


/* ==========================================================
   GLASS OSCURO
   ========================================================== */

.ir-countdown-native[data-countdown-preset="glassDark"]{
    background:
        rgba(
            7,
            14,
            27,
            var(--countdown-opacity)
        );

    border-color:
        rgba(255,255,255,.15);

    box-shadow:
        0 20px 46px
        rgba(0,0,0,.30);
}


.ir-countdown-native[data-countdown-preset="glassDark"]
.ir-countdown-title,
.ir-countdown-native[data-countdown-preset="glassDark"]
.ir-countdown-number{
    color:#ffffff;
}


.ir-countdown-native[data-countdown-preset="glassDark"]
.ir-countdown-label{
    color:#d9e0ea;
}


.ir-countdown-native[data-countdown-preset="glassDark"]
.ir-countdown-unit{
    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(255,255,255,.12);
}


/* ==========================================================
   DORADO
   ========================================================== */

.ir-countdown-native[data-countdown-preset="goldGlass"]{
    background:
        rgba(
            31,
            23,
            9,
            var(--countdown-opacity)
        );

    border-color:
        rgba(220,185,88,.42);
}


/* ==========================================================
   MINT
   ========================================================== */

.ir-countdown-native[data-countdown-preset="mintGlass"]{
    background:
        rgba(
            190,
            235,
            219,
            var(--countdown-opacity)
        );

    border-color:
        rgba(217,199,130,.46);
}


.ir-countdown-native[data-countdown-preset="mintGlass"]
.ir-countdown-title,
.ir-countdown-native[data-countdown-preset="mintGlass"]
.ir-countdown-number{
    color:#17382f;
}


.ir-countdown-native[data-countdown-preset="mintGlass"]
.ir-countdown-label{
    color:#355950;
}


.ir-countdown-native[data-countdown-preset="mintGlass"]
.ir-countdown-unit{
    background:
        rgba(255,255,255,.22);

    border-color:
        rgba(255,255,255,.28);
}


/* ==========================================================
   MINIMAL
   ========================================================== */

.ir-countdown-native[data-countdown-preset="minimalGlass"]{
    background:
        rgba(
            255,
            255,
            255,
            var(--countdown-opacity)
        );

    border-color:
        rgba(255,255,255,.19);

    box-shadow:none;
}


.ir-countdown-native[data-countdown-preset="minimalGlass"]
.ir-countdown-title,
.ir-countdown-native[data-countdown-preset="minimalGlass"]
.ir-countdown-number{
    color:#ffffff;
}


.ir-countdown-native[data-countdown-preset="minimalGlass"]
.ir-countdown-label{
    color:
        rgba(255,255,255,.78);
}


.ir-countdown-native[data-countdown-preset="minimalGlass"]
.ir-countdown-unit{
    background:
        rgba(255,255,255,.045);

    border-color:
        rgba(255,255,255,.12);
}


/* ==========================================================
   PANEL DEL BUILDER
   ========================================================== */

.countdown-preset-panel{
    margin-bottom:15px;
    padding:12px;
    border-radius:12px;
    border:1px solid #354a65;
    background:#14233a;
}


.countdown-preset-header{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:10px;
}


.countdown-preset-header strong{
    color:#ffffff !important;
    font-size:12px;
}


.countdown-preset-header small{
    color:#9dafc5 !important;
    font-size:9px;
}


.countdown-preset-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:7px;
}


.countdown-preset-grid button{
    min-height:70px;
    padding:7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;

    border:
        1px solid
        #3c526e !important;

    border-radius:
        10px;

    background:
        #0d192a !important;

    color:
        #ffffff !important;

    cursor:pointer;
}


.countdown-preset-grid button:hover{
    background:
        #192d49 !important;

    border-color:
        #6885a9 !important;
}


.countdown-preset-grid button.active{
    background:
        #21446d !important;

    border-color:
        #67aaff !important;
}


.countdown-preset-grid button span{
    color:#ffffff !important;
    font-size:20px;
}


.countdown-preset-grid button b{
    color:#ffffff !important;
    font-size:9px;
}


.countdown-preset-grid button small{
    color:#9fb1c6 !important;
    font-size:8px;
}