#request-popup{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #1B1D1E99;
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    display: none;
}

#request-popup.active{
    display: flex;
}

#request-popup .box {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    max-width: 1120px;
    position: relative;
}

#request-popup .aside {
        background: radial-gradient(110.69% 103.28% at 62.84% 100.1%, #B8B4ED 0%, #F4F4FF 100%); 
        position: relative;
        padding: 40px;
        min-width: 520px;
}
#request-popup .aside .content {
    position: relative;
    z-index: 1000;
}

/* Selected product info block */
.selected-product-info {
    margin-top: -16px;
    margin-bottom: 24px;
    padding: 10px;
    background: #F4F4FA;
    border-radius: 8px;
}

.selected-product-info .product-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-product-info .product-preview img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.selected-product-info .small-text-medium {
    color: var(--dark-grey);
}


#request-popup .aside::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(https://storage.googleapis.com/voka-shop-preview-303011/common/Frame%201597887304.webp);
    background-size: cover;
    z-index: 1;
}

#request-popup .aside .title-3 {
    margin-bottom: 48px;
}

#request-popup .aside .info-items.product {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

#request-popup .aside .info-items.product::before {
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    left: 18px;
    top: 0;
    background: var(--white) ;
}

#request-popup .aside .info-items.product .info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #333057;
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
}
#request-popup .aside .info-items.product .info-item p{
    font-weight: 500;
}

#request-popup .info-items{
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

#request-popup .info-items.static::before{
    content: '';
    display: block;
    width: 1px;
    height: 172px;
    position: absolute;
    background: var(--white);
    top: 0;
    left: 12px;
    z-index: -1;
}

#request-popup .info-items.static p{
    color: #363738;
    font-weight: 500;
}

#request-popup .info-item {
    display: flex;
    gap: 16px;
    align-items: center;
}

#request-popup .static .info-item span{
    color: #7B62B4;
    font-size: 14px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: var(--white);
    font-weight: 600;
}

#request-popup .wpcf7 {
    background: var(--white);
    padding: 48px 40px 40px 40px;
    min-width: 600px;
}

#request-popup  label{
    font-weight: 400;
    color: var(--main-black);
    display: block;
    line-height: 1;
}
#request-popup .subject label{
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
}
#request-popup .top-fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 0;
    margin-bottom: 12px;
}

#request-popup .top-fields>p, #request-popup .top-fields+p, #request-popup .top-fields~p:nth-of-type(3), #request-popup form > p:nth-child(4) {
    position: relative;
    margin-bottom: 24px;
}

#request-popup label {
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 16px;
    transform: translateY(-50%);
    color: var(--n-grey);
    transition: all 0.25s ease-in-out;
}

#request-popup[data-is-product="1"] label[for="subject"] {
    top: 15px;
    font-size: 12px;
    background: var(--white-bg);
    z-index: 2;
    color: #768394;
}

#request-popup label::after{
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    content: '*';
    color: var(--black-60);
}

#request-popup label.focused {
    top: 15px;
    font-size: 12px;
    background: var(--white-bg);
    z-index: 2;
    color: #768394;
}

#request-popup.gray label.focused, #request-popup.image label.focused {
    background: var(--main-bg);
}

#request-popup label.area-label {
    position: absolute;
    top: 20px;
    left: 16px;
    font-size: 16px;
    color: var(--grey);
    transition: all 0.25s ease-in-out;
    transform: none;
    padding: 0;
    
}

#request-popup label.area-label::after {
    display: none;
}

#request-popup .wpcf7-form-control-wrap[data-name="your-DETAILS"]{
    display: block;
    min-height: 60px;
}
#your-DETAILS {
    overflow: hidden;
    resize: none;
  }
#request-popup label.area-label.focused {
    top: 9px;
    font-size: 12px;
    background: var(--white-bg);
    z-index: 2;
    color: #768394;
}

#request-popup.gray label.area-label.focused {
    background: var(--main-bg);
}

#request-popup.image label.area-label.focused {
    background: var(--main-bg);
}

#request-popup .wpcf7-not-valid-tip{
    font-size: 10px !important;
    position: absolute;
    bottom: -25px;
}

#request-popup .wpcf7 input[type="url"].wpcf7-not-valid, #request-popup .wpcf7 select.wpcf7-not-valid, #request-popup .wpcf7 input[type="email"].wpcf7-not-valid, #request-popup .wpcf7 input[type="tel"].wpcf7-not-valid, #request-popup input[type="text"].wpcf7-not-valid, #request-popup textarea.wpcf7-not-valid{
    border-color: #dc3232;
}

#request-popup .top-fields input, #request-popup select{
    padding: 27px 16px 9px 16px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    width: 100%;
    font-weight: 500;
}
#request-popup .top-fields input::placeholder, #request-popup select::placeholder, #request-popup textarea::placeholder{
    color: var(--grey);
}

#request-popup select{
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
}

#request-popup #subj{
    margin-top: 36px;
    margin-bottom: 20px;
}

#request-popup .subject .wpcf7-radio{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 20px;
}

/* CF7 radio chips for License and Quantity */

#request-popup .license, #request-popup .quantity{
    padding-top: 12px;
    margin-bottom: 20px;
}
#request-popup .license .wpcf7-form-control.wpcf7-radio,
#request-popup .quantity .wpcf7-form-control.wpcf7-radio{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#request-popup .license .wpcf7-list-item,
#request-popup .quantity .wpcf7-list-item{
    margin: 0;
}

#request-popup .license .wpcf7-list-item.first,
#request-popup .quantity .wpcf7-list-item.first,
#request-popup .license p > .custom-checkbox,
#request-popup .quantity p > .custom-checkbox{
    display: none;
}
#request-popup .license .custom-checkbox input,
#request-popup .quantity .custom-checkbox input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#request-popup .license .custom-checkbox,
#request-popup .quantity .custom-checkbox{
    position: static;
    transform: none;
}

#request-popup .license label::after, 
#request-popup .quantity label::after{
    display: none;
}
#request-popup .license .wpcf7-list-item-label,
#request-popup .quantity .wpcf7-list-item-label{
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--very-light-grey);
    border-radius: 9999px;
    color: var(--n-dark-grey);
    background: var(--white);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#request-popup .license .wpcf7-list-item-label:hover,
#request-popup .quantity .wpcf7-list-item-label:hover{
    border-color: var(--grey);
}
#request-popup .license .custom-checkbox input:focus-visible + .wpcf7-list-item-label,
#request-popup .quantity .custom-checkbox input:focus-visible + .wpcf7-list-item-label{
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
#request-popup .license .custom-checkbox input:checked + .wpcf7-list-item-label,
#request-popup .quantity .custom-checkbox input:checked + .wpcf7-list-item-label{
    border-color: var(--main-black);
    font-weight: 600;
}

#request-popup .item-title{
    display: flex;
    align-items: center;
    gap: 6px;
}

#request-popup .content .main-text-semibold {
    color: var(--black);
    margin-bottom: 24px;
    margin-top: -20px;
}

#request-popup .tooltip {
    position: relative;
    cursor: pointer;
} 

#request-popup .tooltip:hover p svg > path:first-child{
    fill: var(--accent-1);
}

#request-popup .tooltip:hover p svg path:nth-child(2),
#request-popup .tooltip:hover p svg path:nth-child(3) {
    stroke: var(--accent-1);
}

#request-popup .tooltip:hover .tooltip-text {
    display: flex;
}
#request-popup .tooltip-text {
    position: absolute;
    top: 31px;
    z-index: 10;
    box-shadow: 0px -1px 10px 0px #00000026;
    border-radius: 8px;
    background: var(--white);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    color: var(--grey);
    display: none;
}

#request-popup .tooltip-text .tooltip-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#request-popup .tooltip-text strong {
    color: var(--black);
}

#request-popup .tooltip-close{
    display: none;
}




#request-popup .tooltip-text::before{
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: 50%;
top: -6px;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #FFFFFF;
z-index: 1;
}

#request-popup .item-title > p{
    font-weight: 600;
    color: var(--main-black);
    display: flex;
    width: fit-content;
    gap: 2px;
    align-items: flex-start;

}

#request-popup .item-title{
    margin-bottom: 16px;
}

#request-popup .subject{
    margin-bottom: 36px;
}

#request-popup textarea{
    height: 60px;
    min-height: 60px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    padding: 27px 16px 9px 16px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    width: 100%;
    resize: vertical;
}

#request-popup textarea::-webkit-resizer{
    background: linear-gradient(315deg,
        #6C6F77 16%,
        #0000 16% 26%,
        #6C6F77 26% 33%,
        #0000 33% 43%,
        #6C6F77 43% 50%,
        #0000 50% 100%) no-repeat;
    background-size: 90% 90%;
}

#form-agree{
    color: var(--secondary-black);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    padding-top: 10px;
}

#form-agree a{
    color: var(--accent-1);
    text-decoration: underline;
}

#form-agree>span.wpcf7-spinner{
    display: none;
}

.contact-mobile{
    display: none;
}

#request-popup .custom-select{
    position: relative;
}
#request-popup .custom-select__native{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
#request-popup .custom-select__trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 27px 16px 9px 16px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    font-size: 16px;
    background: transparent;
    color: var(--dark-grey);
    cursor: pointer;
    font-weight: 500;
    min-height: 60px;
}
#request-popup .custom-select__text{
    text-align: left;
    color: var(--dark-grey);
    font-weight: 500;
}
#request-popup .custom-select__arrow{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.7038 17.1179L18.6538 12.1679C19.0443 11.7774 19.0443 11.1443 18.6538 10.7539C18.2633 10.3634 17.6303 10.3634 17.2398 10.7539L12.9968 14.9969L8.75381 10.7539C8.36335 10.3634 7.73028 10.3634 7.33981 10.7539C6.94935 11.1443 6.94935 11.7774 7.33981 12.1679L12.2898 17.1179C12.4773 17.3053 12.7316 17.4107 12.9968 17.4107C13.262 17.4107 13.5163 17.3053 13.7038 17.1179Z" fill="%231B1D1E" fill-opacity="0.6"/></svg>') no-repeat center / contain;
    background: currentColor;
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
}

#request-popup .custom-select.is-open .custom-select__arrow{
    transform: translateY(-50%) rotate(180deg);
}
#request-popup .custom-select__list{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    display: none;
    overflow: auto;
}
#request-popup .custom-select.is-open .custom-select__list{
    display: block;
}
#request-popup .custom-select__option{
    padding: 12px 16px;
    cursor: pointer;
    color: var(--dark-grey);
    font-weight: 500;
    font-size: 16px;
}
#request-popup .custom-select__option:hover{
    background: var(--white-bg);
}
#request-popup .custom-select__option.is-selected{
    background: var(--white-bg);
    font-weight: 600;
}

#request-popup #form-agree .small-text{
    font-size: 14px;
    line-height: 140%;
    color: var(--secondary-black);
}
#request-popup .area-text{
margin-bottom: 16px;
    font-weight: 700;
    color: var(--black);
    padding-top: 12px;
}
#request-popup  #form-agree .small-text-semibold{
   background: var(--accent-1);
   color: var(--white);
   border: none;
   padding: 14px 20px;
   border-radius: 8px;
   cursor: pointer;
}

#request-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

@media (max-width: 1919px) {
    #request-popup .aside {
        min-width: 480px;
    }

    #request-popup .box{
        width: 1080px;
    }

    #request-popup .aside .title-3 {
        margin-bottom: 40px;
    }

    #request-popup  .subject .wpcf7-radio {
        column-gap: 16px;
        row-gap: 16px;
    }
    #request-popup .content .main-text-semibold{
        margin-top: 0;
    }
}

@media (max-width: 1439px) {
    #request-popup .aside {
        padding: 40px 32px;
    }

    #request-popup .aside .title-3 {
        margin-bottom: 32px;
    }

    #request-popup .wpcf7{
        min-width: 520px;
    }

    #request-popup .box {
        width: 1000px;
    }
}

@media (max-width: 1079px) {
    #request-popup .box {
        width: 640px;
        flex-direction: column;
        background: url(https://storage.googleapis.com/voka-shop-preview-303011/common/popup-tablet.webp) top center / cover;
        padding: 80px 32px 40px 32px;
        border-radius: 10px;
    }

    #request-popup .aside{
        padding: 0;
        background: transparent;
        min-width: auto;
    }

    #request-popup .aside::before{
        display: none;
    }

    #request-popup .aside .info-items, #request-popup .content .main-text-semibold{
        display: none !important;
    }

    #request-popup .aside .title-3{
        text-align: center;
    }

    #request-popup .aside .title-3 br{
        display: none;
    }

    #request-popup .wpcf7 {
        min-width: auto;
        padding: 0;
        background: transparent;
    }

    #request-popup .top-fields input, #request-popup select, #request-popup textarea, #request-popup .custom-select__trigger {
        background: var(--white);
    }

    #request-popup label{
        z-index: 10;
    }

        #request-popup .tooltip-text {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            width: 100%;
            max-width: none;
            border-radius: 16px 16px 0 0;
            padding: 24px 20px 40px;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
            transform: translateY(100%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
    
        #request-popup .tooltip:hover .tooltip-text {
            display: none;
        }
        
        #request-popup .tooltip-text.active {
            transform: translateY(0);
            display: flex !important;
            padding: 22px 16px;
            gap: 24px;
        }
    
        #request-popup .tooltip-text strong{
            display: block;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }
    
        #request-popup .tooltip-text::before{
            display: none !important;
        }
        
        #request-popup .tooltip-close {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        #request-popup .tooltip-close:hover {
            background: #e0e0e0;
        }
        
        #request-popup .tooltip-text::before {
            display: none;
        }

                /* Overlay for active tooltip */
      #request-popup .tooltip-overlay{
        position: fixed;
        inset: 0;
        background: #1B1D1E66; /* 40% black per request */
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 999; /* below tooltip which is 1000 */
        display: none;
    }

    body.tooltip-open{
        overflow: hidden;
    }

    #request-popup .aside .content {
        z-index: 1;
    }
    
}

@media (max-width: 577px) {
    #request-popup .box{
        width: 100%;
        border-radius: 0;
        background: url(https://storage.googleapis.com/voka-shop-preview-303011/common/popup-mobile.webp) top center / cover;
        padding: 80px 16px 60px 16px;
        overflow-y: auto;
        position: fixed;
        top: 0;
        height: 100vh;
    }

    #request-popup .top-fields p {
        grid-column: 1 / span 2;
    }

    #request-popup .contact-mobile {
        margin-top: 60px;
    }


    #request-popup textarea{
        resize: none;
    }

    #request-popup textarea::-webkit-resizer{
        display: none;
    }

    #form-agree {
        gap: 16px;
        flex-direction: column;
    }

    #request-popup  #form-agree .small-text-semibold{
        width: 100%;
    }

    #request-popup .license .wpcf7-list-item-label, #request-popup .quantity .wpcf7-list-item-label {
        padding: 10px 14px;
    }
}