/* Tank Zone — Cart Variant Editor V1.1 */

.tzv11-current{
    margin-bottom:0!important;
}

.tzv11-editor{
    display:grid;
    gap:9px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #e2e2dc;
}

.tzv11-row{
    display:grid;
    gap:6px;
}

.tzv11-label{
    color:#777;
    font-size:.61rem;
    font-weight:800;
    line-height:1;
}

.tzv11-colors,
.tzv11-sizes{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.tzv11-color{
    width:30px;
    height:30px;
    padding:3px;
    border:1px solid #cfcfca;
    border-radius:999px;
    background:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.tzv11-color:hover{
    border-color:#777;
    transform:translateY(-1px);
}

.tzv11-color.is-selected{
    border-color:#111;
    box-shadow:0 0 0 1px #111 inset;
}

.tzv11-dot{
    display:block;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--tzv11-swatch,#ddd);
    border:1px solid rgba(0,0,0,.16);
}

.tzv11-size{
    min-width:35px;
    height:31px;
    padding:0 8px;
    border:1px solid #d0d0ca;
    border-radius:5px;
    background:#fff;
    color:#111;
    font:800 .67rem var(--font-en);
    cursor:pointer;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

html[dir="rtl"] .tzv11-size{
    font-family:var(--font-ar);
}

.tzv11-size:hover:not(:disabled){
    border-color:#111;
    transform:translateY(-1px);
}

.tzv11-size.is-selected{
    background:#111;
    border-color:#111;
    color:#fff;
}

.tzv11-size:disabled{
    opacity:.28;
    cursor:not-allowed;
    text-decoration:line-through;
}

.tzv11-size[hidden]{
    display:none!important;
}

.tzv11-hint{
    color:#8a5a00;
    font-size:.6rem;
    line-height:1.5;
}

.tzv11-editor.is-busy{
    pointer-events:none;
    opacity:.55;
}

.tzv11-sr{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

@media(max-width:760px){
    .tzv11-editor{
        margin-top:8px;
        padding-top:8px;
        gap:8px;
    }

    .tzv11-color{
        width:29px;
        height:29px;
    }

    .tzv11-dot{
        width:19px;
        height:19px;
    }

    .tzv11-size{
        min-width:33px;
        height:29px;
        padding:0 7px;
        font-size:.64rem;
    }
}

/* TANKZONE_CART_COLOR_CSP_FIX_V12
 * CSP-safe swatches: no inline style is required.
 */
.tzv11-color[title*="أسود"] .tzv11-dot,
.tzv11-color[title*="اسود"] .tzv11-dot,
.tzv11-color[title*="black" i] .tzv11-dot{
    background:#111111;
}
.tzv11-color[title*="أبيض"] .tzv11-dot,
.tzv11-color[title*="ابيض"] .tzv11-dot,
.tzv11-color[title*="white" i] .tzv11-dot{
    background:#ffffff;
}
.tzv11-color[title*="أزرق"] .tzv11-dot,
.tzv11-color[title*="ازرق"] .tzv11-dot,
.tzv11-color[title*="blue" i] .tzv11-dot{
    background:#2455a6;
}
.tzv11-color[title*="أحمر"] .tzv11-dot,
.tzv11-color[title*="احمر"] .tzv11-dot,
.tzv11-color[title*="red" i] .tzv11-dot{
    background:#c71920;
}
.tzv11-color[title*="بنفسجي"] .tzv11-dot,
.tzv11-color[title*="purple" i] .tzv11-dot{
    background:#6f42a5;
}
.tzv11-color[title*="أصفر"] .tzv11-dot,
.tzv11-color[title*="اصفر"] .tzv11-dot,
.tzv11-color[title*="yellow" i] .tzv11-dot{
    background:#e2bf24;
}
.tzv11-color[title*="عنابي"] .tzv11-dot,
.tzv11-color[title*="maroon" i] .tzv11-dot,
.tzv11-color[title*="burgundy" i] .tzv11-dot{
    background:#651f2b;
}
.tzv11-color[title*="رمادي"] .tzv11-dot,
.tzv11-color[title*="gray" i] .tzv11-dot,
.tzv11-color[title*="grey" i] .tzv11-dot{
    background:#777777;
}
.tzv11-color[title*="أخضر"] .tzv11-dot,
.tzv11-color[title*="اخضر"] .tzv11-dot,
.tzv11-color[title*="green" i] .tzv11-dot{
    background:#2f7046;
}
.tzv11-color[title*="كحلي"] .tzv11-dot,
.tzv11-color[title*="navy" i] .tzv11-dot{
    background:#14213d;
}
.tzv11-color[title*="بيج"] .tzv11-dot,
.tzv11-color[title*="beige" i] .tzv11-dot{
    background:#d8c3a5;
}
.tzv11-color[title*="وردي"] .tzv11-dot,
.tzv11-color[title*="زهري"] .tzv11-dot,
.tzv11-color[title*="pink" i] .tzv11-dot{
    background:#d9779b;
}

/* Make a white swatch visible against the button. */
.tzv11-color[title*="أبيض"] .tzv11-dot,
.tzv11-color[title*="ابيض"] .tzv11-dot,
.tzv11-color[title*="white" i] .tzv11-dot{
    box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
}