/* =========================
   Zväčšenie obrázkov variantov
========================= */

#simple-variants {
    margin: 0 !important;
    padding: 0 !important;
}

#simple-variants > span:first-child {
    display: none !important;
}

/* outer box */
#simple-variants label.advanced-parameter {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 108px;
    height: 108px;

    margin: 0 10px 10px 0;
    padding: 2px;

    box-sizing: border-box;

    border: 1px solid #dcdcdc;
    background: #fff;

    overflow: visible;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

#simple-variants label.advanced-parameter:hover {
    border-color: #bfbfbf;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

/* selected */
#simple-variants label.advanced-parameter:has(input:checked) {
    border-color: #00338d;
}

/* inner wrapper */
#simple-variants .advanced-parameter-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;

    overflow: hidden;

    border: 0 !important;
    box-shadow: none !important;
}

/* image */
#simple-variants .advanced-parameter-inner img {
    display: block;

    width: 100px !important;
    height: 100px !important;

    min-width: 100px;
    min-height: 100px;

    max-width: 100px;
    max-height: 100px;

    object-fit: contain;
}

/* hide default icons */
#simple-variants .advanced-parameter-inner::before,
#simple-variants .advanced-parameter-inner::after {
    display: none !important;
}

/* blue circle */
#simple-variants label.advanced-parameter:has(input:checked)::after {
    content: "";

    position: absolute;

    top: -8px;
    left: -8px;

    width: 22px;
    height: 22px;

    border-radius: 50%;
    background: #00338d;

    z-index: 2;
}

/* white checkmark */
#simple-variants label.advanced-parameter:has(input:checked)::before {
    content: "";

    position: absolute;

    top: -3px;
    left: 1px;

    width: 5px;
    height: 10px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg);

    z-index: 3;
}

.tooltip {
    margin-top: -11px !important;
}

/* Opytat sa pri Na dotaz */


.custom-ask-link {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 14px !important;
    text-transform: none !important;
    font-variant: normal !important;
    gap: 6px !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}

.custom-ask-link:before {
    font-size: 13px !important;
    text-decoration: none !important;
    font-weight: normal !important;
    -webkit-text-stroke: 0.5px currentColor;
}

.custom-ask-link:hover:before {
    text-decoration: none !important;
}

.custom-ask-link span {
    text-decoration: underline !important;
    text-transform: none !important;
    position: relative;    
    top: -2px;
}

/* Dotaz k produktu */

form#formProductQuestion textarea#message.form-control {
    font-size: 12px;
    line-height: 1.4;
}


/* Filter farieb - specialne farby */

/* Zlatá */
.advanced-parameter[title="zlatá"] .advanced-parameter-inner{
    background: linear-gradient(
        135deg,
        #f6e27a 0%,
        #d4af37 25%,
        #edc967 50%,
        #b8860b 75%,
        #f6e27a 100%
    ) !important;
}

/* Strieborná */
.advanced-parameter[title="strieborná"] .advanced-parameter-inner{
    background: linear-gradient(
        135deg,
        #f5f5f5 0%,
        #c0c0c0 25%,
        #e8e8e8 50%,
        #a9a9a9 75%,
        #f5f5f5 100%
    ) !important;
}

/* Priehľadná */
.advanced-parameter[title="priehľadná"] .advanced-parameter-inner{
    background:
        linear-gradient(45deg, #e9e9e9 25%, transparent 25%),
        linear-gradient(-45deg, #e9e9e9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9e9e9 75%),
        linear-gradient(-45deg, transparent 75%, #e9e9e9 75%);
    
    background-size: 12px 12px;
    background-position:
        0 0,
        0 6px,
        6px -6px,
        -6px 0;

    background-color: #f8f8f8 !important;

    border-radius: 50%;
    border: 1px solid #d5d5d5;
}

/* Biela */
.advanced-parameter[title="biela"] .advanced-parameter-inner{
    background:#fff !important;
    border:1px solid #ccc;
}

/* Mix */
.advanced-parameter[title="mix"] .advanced-parameter-inner{
    background: linear-gradient(
        135deg,
        #ff4d4d 0%,
        #ffb84d 20%,
        #ffe84d 40%,
        #4dff88 60%,
        #4db8ff 80%,
        #b84dff 100%
    ) !important;

    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
}

/* Neurcena */
.advanced-parameter[title="neurčená"] .advanced-parameter-inner{
    background:
        linear-gradient(
            45deg,
            transparent 49%,
            rgba(150,150,150,.16) 49%,
            rgba(150,150,150,.16) 51%,
            transparent 51%
        ),
        linear-gradient(
            -45deg,
            transparent 49%,
            rgba(150,150,150,.16) 49%,
            rgba(150,150,150,.16) 51%,
            transparent 51%
        ),
        linear-gradient(135deg, #fcfcfc, #f1f1f1) !important;

    border-radius: 50%;
    border: 1px solid #e5e5e5;
}

/* Tooltip na filtri farieb */

/* zrusenie default browser tooltipu */
.filter-section-parametric-id-61 .advanced-parameter{
    position: relative;
}

/* modern tooltip */
.filter-section-parametric-id-61 .advanced-parameter::after{
    content: attr(title);

    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);

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

    background: rgba(30,30,30,.97);
    color: #fff;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    padding: 8px 10px;
    border-radius: 8px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .18s ease,
        transform .18s ease;

    pointer-events: none;

    box-shadow:
        0 8px 24px rgba(0,0,0,.14),
        0 2px 8px rgba(0,0,0,.08);

    z-index: 999;
}

/* sipka */
.filter-section-parametric-id-61 .advanced-parameter::before{
    content: "";

    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);

    width: 7px;
    height: 7px;

    background: rgba(30,30,30,.97);

    transform:
        translateX(-50%)
        rotate(45deg);

    border-radius: 1px;

    opacity: 0;
    visibility: hidden;

    transition: opacity .18s ease;

    pointer-events: none;

    z-index: 998;
}

/* hover */
.filter-section-parametric-id-61 .advanced-parameter:hover::after,
.filter-section-parametric-id-61 .advanced-parameter:hover::before{
    opacity: 1;
    visibility: visible;
}

.filter-section-parametric-id-61 .advanced-parameter:hover::after{
    transform: translateX(-50%) translateY(0);
}