.vsd-1025 .vsd-element.vsd-element-c39f22f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.vsd-1025 .vsd-element.vsd-element-c39f22f:not(.vsd-motion-effects-element-type-background), .vsd-1025 .vsd-element.vsd-element-c39f22f > .vsd-motion-effects-container > .vsd-motion-effects-layer{background-color:#FFFFFF;}.vsd-1025 .vsd-element.vsd-element-c39f22f.e-con{--flex-grow:0;--flex-shrink:0;}.vsd-1025 .vsd-element.vsd-element-f3d392b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.vsd-1025 .vsd-element.vsd-element-ac4cf22{width:auto;max-width:auto;}.vsd-1025 .vsd-element.vsd-element-ac4cf22.vsd-element{--flex-grow:0;--flex-shrink:1;}.vsd-1025 .vsd-element.vsd-element-b8d90fc > .vsd-widget-container{margin:-49px 0px 0px 0px;}.vsd-widget-button .vsd-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.vsd-1025 .vsd-element.vsd-element-6b69059 .vsd-button{background-color:#4B83FC;border-radius:7px 7px 7px 7px;}.vsd-1025 .vsd-element.vsd-element-e2ba197{width:auto;max-width:auto;}.vsd-1025 .vsd-element.vsd-element-e2ba197 > .vsd-widget-container{margin:0px 0px 0px 15px;}.vsd-1025 .vsd-element.vsd-element-e2ba197.vsd-element{--align-self:flex-start;}.vsd-1025 .vsd-element.vsd-element-4981403{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.vsd-widget-heading .vsd-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.vsd-1025 .vsd-element.vsd-element-4f5df45{width:var( --container-widget-width, 37% );max-width:37%;--container-widget-width:37%;--container-widget-flex-grow:0;}.vsd-1025 .vsd-element.vsd-element-4f5df45 > .vsd-widget-container{padding:0px 0px 0px 14px;}.vsd-1025 .vsd-element.vsd-element-4f5df45.vsd-element{--align-self:flex-start;--order:-99999 /* order start hack */;}.vsd-1025 .vsd-element.vsd-element-4f5df45 .vsd-heading-title{color:#535353;}.vsd-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.vsd-widget-text-editor.vsd-drop-cap-view-stacked .vsd-drop-cap{background-color:var( --e-global-color-primary );}.vsd-widget-text-editor.vsd-drop-cap-view-framed .vsd-drop-cap, .vsd-widget-text-editor.vsd-drop-cap-view-default .vsd-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.vsd-1025 .vsd-element.vsd-element-6d63ee2.vsd-element{--align-self:flex-start;--flex-grow:1;--flex-shrink:0;}.vsd-1025 .vsd-element.vsd-element-6d63ee2{z-index:55;text-align:end;}.vsd-1025 .vsd-element.vsd-element-81446e2{width:100%;max-width:100%;}.vsd-1025 .vsd-element.vsd-element-81446e2 > .vsd-widget-container{margin:0px 0px 0px 0px;}.vsd-1025 .vsd-element.vsd-element-c13b265{width:100%;max-width:100%;}.vsd-1025 .vsd-element.vsd-element-c13b265 > .vsd-widget-container{margin:0px 0px 0px 15px;}.vsd-1025 .vsd-element.vsd-element-ddd1052 > .vsd-widget-container{margin:0px 0px -81px 0px;}.vsd-1025 .vsd-element.vsd-element-7f03734{--display:flex;}.vsd-1025 .vsd-element.vsd-element-e6904b7{--display:flex;}.vsd-1025 .vsd-element.vsd-element-fcb1251 .vsd-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.vsd-1025 .vsd-element.vsd-element-9de076d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.vsd-1025 .vsd-element.vsd-element-752a09a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.vsd-1025 .vsd-element.vsd-element-752a09a:not(.vsd-motion-effects-element-type-background), .vsd-1025 .vsd-element.vsd-element-752a09a > .vsd-motion-effects-container > .vsd-motion-effects-layer{background-color:#FFFFFF;}.vsd-1025 .vsd-element.vsd-element-227e21f{width:100%;max-width:100%;}.vsd-1025 .vsd-element.vsd-element-227e21f.vsd-element{--flex-grow:1;--flex-shrink:0;}.vsd-1025 .vsd-element.vsd-element-30da5d0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:25px 5px;--row-gap:25px;--column-gap:5px;--flex-wrap:wrap;}.vsd-1025 .vsd-element.vsd-element-53b2a2c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:20px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}.vsd-1025 .vsd-element.vsd-element-53b2a2c:not(.vsd-motion-effects-element-type-background), .vsd-1025 .vsd-element.vsd-element-53b2a2c > .vsd-motion-effects-container > .vsd-motion-effects-layer{background-color:#FFFFFF;}.vsd-widget-gallery .vsd-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.vsd-widget-gallery .vsd-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.vsd-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.vsd-widget-gallery .vsd-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.vsd-1025 .vsd-element.vsd-element-ca958cd .e-gallery-item:hover .vsd-gallery-item__overlay, .vsd-1025 .vsd-element.vsd-element-ca958cd .e-gallery-item:focus .vsd-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.vsd-1025 .vsd-element.vsd-element-ca958cd{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.vsd-1025 .vsd-element.vsd-element-8d24a3a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.vsd-1025 .vsd-element.vsd-element-8d24a3a:not(.vsd-motion-effects-element-type-background), .vsd-1025 .vsd-element.vsd-element-8d24a3a > .vsd-motion-effects-container > .vsd-motion-effects-layer{background-color:#FFFFFF;}.vsd-1025 .vsd-element.vsd-element-657c37d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.vsd-1025 .vsd-element.vsd-element-9360ce1{width:100%;max-width:100%;}.vsd-1025 .vsd-element.vsd-element-9360ce1 > .vsd-widget-container{background-color:#FFFFFF;}.vsd-1025 .vsd-element.vsd-element-553cf1e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.vsd-1025 .vsd-element.vsd-element-75812ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.vsd-1025 .vsd-element.vsd-element-a72ac37{--swiper-slides-to-display:1;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.vsd-1025 .vsd-element.vsd-element-a72ac37 .swiper-slide > .vsd-element{height:100%;}.vsd-1025 .vsd-element.vsd-element-0f1f0ef{--display:flex;}@media(max-width:1024px){.vsd-1025 .vsd-element.vsd-element-a72ac37{--swiper-slides-to-display:2;}}@media(min-width:768px){.vsd-1025 .vsd-element.vsd-element-c39f22f{--width:98.146%;}.vsd-1025 .vsd-element.vsd-element-f3d392b{--width:28%;}.vsd-1025 .vsd-element.vsd-element-4981403{--width:72%;}.vsd-1025 .vsd-element.vsd-element-53b2a2c{--width:100%;}.vsd-1025 .vsd-element.vsd-element-8d24a3a{--width:100%;}}@media(max-width:767px){.vsd-1025 .vsd-element.vsd-element-4f5df45{--container-widget-width:197px;--container-widget-flex-grow:0;width:var( --container-widget-width, 197px );max-width:197px;}.vsd-1025 .vsd-element.vsd-element-a72ac37{--swiper-slides-to-display:1;}}/* Start custom CSS for html, class: .vsd-element-ac4cf22 */.dj-profile-picture-wrapper {
    width: 100%;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dj-profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover !important; 
    transition: transform 0.8s ease;
    transform: scale(1.2);
    object-position: center;
}

.dj-profile-picture-wrapper:hover .dj-profile-picture {
    transform: scale(1); /* Zoom out on hover */
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-b8d90fc */.rating-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto;
}

.rating-stars {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 0px 18px;
    background-color: white;
    border-radius: 36px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
    width: fit-content;
    padding-bottom: 10px;
}

.star {
    width: 28px;
    height: 40px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}

.star::before {
    content: '★';
    font-size: 30px;
    color: #dcdcdc;
    position: absolute;
    top: 0;
    left: 0;
    transition: color 0.2s;
}

.star::after {
    content: '★';
    font-size: 30px;
    color: #ffd700;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.2s;
}

.star-full::before {
    color: #ffd700;
}

.star-empty::before {
    color: #dcdcdc;
}

.rating-stars.animate-stars .star:hover::before,
.rating-stars.animate-stars .star.active::before {
    color: #ffd700;
}

.rating-stars.animate-stars .star:hover::after,
.rating-stars.animate-stars .star.active::after {
    width: 100%;
}

.rating-stars.animate-stars:hover {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.2);
}

.rating-stars.animate-stars .star:hover:nth-child(1),
.rating-stars.animate-stars .star:hover:nth-child(5) {
    transform: scale(1.1);
}

.rating-stars.animate-stars .star:hover:nth-child(2),
.rating-stars.animate-stars .star:hover:nth-child(4) {
    transform: scale(1.3);
}

.rating-stars.animate-stars .star:hover:nth-child(3) {
    transform: scale(1.5);
}

.star:hover::before {
    color: #ffd700;
}

.star:hover::after {
    width: 100%;
}

.rating-info {
    position: absolute;
    bottom: -10px;
    right: -10px;
    z-index: 99;
    display: flex;
    align-items: center;
}

.info-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 16px;
    text-align: center;
    background-color: #007BFF;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.info-icon:hover {
    transform: scale(1.2);
}

.i-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 11px;
    left: -255px;
    background-color: white;
    padding: 12px;
    border-radius: 42px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: #333;
    text-align: left;
    width: max-content;
    z-index: 99;
    transition: visibility 0.2s, opacity 0.2s;
    white-space: nowrap;
}

.i-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.rating-info:hover .i-tooltip {
    visibility: visible;
    opacity: 1;
}

.i-tooltip .dynamic-rating {
    font-weight: bold;
    font-size: 22px;
}

.i-tooltip .additional-info {
    font-size: 19px;
    color: #666;
}

@media (max-width: 768px) {
    .star {
        width: 30px;
        height: 50px;
    }

    .i-tooltip {
        font-size: 14px;
    }

    .i-tooltip .dynamic-rating {
        font-size: 16px;
    }
}

.star {
    color: #dcdcdc;
    /* Default empty star color */
}

.star.filled {
    color: #ffd700;
    /* Gold for filled stars */
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-9489e40 *//* General styling for the last online text */
.last-online {
    font-weight: bold;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Container for the status element */
.status-container {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 12px; 
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    vertical-align: middle;
    cursor: pointer;  /* Change cursor to pointer */
}

/* Styling for dynamic values */
.dynamic-value {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    color: #333;
    margin-left: 8px;
}

/* Circle indicator */
.dynamic-value::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.3s ease;
}

/* Status circle colors */
.dynamic-value[data-status="online"]::before {
    background-color: #4caf50; 
}
.dynamic-value[data-status="recent"]::before {
    background-color: #ff9800; 
}
.dynamic-value[data-status="days"]::before {
    background-color: #ffc107; 
}
.dynamic-value[data-status="weeks"]::before {
    background-color: #ffb74d; 
}
.dynamic-value[data-status="months"]::before {
    background-color: #9e9e9e; 
}
.dynamic-value[data-status="years"]::before {
    background-color: #616161; 
}

/* Hover effects */
.status-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Show full status text on hover */
.dynamic-value:hover {
    white-space: nowrap;
}

/* Styling for error messages */
.error-message {
    color: #d32f2f;
    font-weight: bold;
    background-color: #fff3f3;
    padding: 8px;
    border: 1px solid #d32f2f;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-96cba67 */.dj-profile-stats-container {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  padding: 10px;
}

.dj-profile-stats-container .stats-heading {
  font-size: 16px; /* Reduced font size */
  font-weight: bold;
  color: #0056b3; /* Slightly darker blue for less prominence */
  padding: 10px 15px;
  background-color: #e0f0ff; /* Softer light blue background */
  border-bottom: 1px solid #ddd; /* Lighter border */
  border-radius: 12px;
}

.dj-profile-stats-container .stats-item {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  font-size: 16px; /* Increased font size for list items */
}

.dj-profile-stats-container .stats-item:last-child {
  border-bottom: none;
}

.dj-profile-stats-container .label {
  font-weight: bold; /* Make labels bold */
}

.dj-profile-stats-container .value {
  color: #333; /* Darker text color for better readability */
  font-size: 16px; /* Increased font size */
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-e2ba197 */.group-user {
    display: flex;
    align-items: center;
}

.rtl {
    display: flex;
    align-items: center;
}

.user {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    margin-left: -13px;
    object-fit: cover;
    position: relative;
}

.rtl .user:nth-child(1) {
    z-index: 3; /* First avatar on top */
}

.rtl .user:nth-child(2) {
    z-index: 2; /* Second avatar below first */
}

.rtl .user:nth-child(3) {
    z-index: 1; /* Third avatar below second */
}

.is-mute {
    margin-left: 10px;
    color: #5d5d5d;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .vsd-element-6d63ee2 */.dj-styles-container {
    position: relative;
    display: inline-block;
}

.view-styles-btn {
    padding: 10px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.view-styles-btn:hover {
    background: #0056b3;
}

.genre-list {
    display: none;
    position: absolute;
    top: 40px; /* Adjust this value based on button height */
    left: 0;
    width: 200px; /* Set a width that fits your design */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 10;
}

.dj-styles-container:hover .genre-list {
    display: block;
}

.genre-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    color: #333;
}

.genre-item:last-child {
    border-bottom: none;
}

.note-icon {
    color: #007bff;
    margin-right: 8px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.genre-item:hover {
    background: #f0f8ff;
    transform: translateX(5px);
}

.genre-item:hover .note-icon {
    color: #0056b3;
}

.genre-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-81446e2 *//* Общи стилове за списъка */
.dj-profile-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    transition: max-height 0.5s ease; /* Smooth transition for max-height */
}

/* List item styles */
.dj-profile-info li {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

/* Remove border from the last item */
.dj-profile-info li:last-child {
    border-bottom: none;
}

/* Initially hide items after the fourth one */
.dj-profile-info li:nth-child(n+5) {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    overflow: hidden;
}

/* Show all items when hovering over the list */
.dj-profile-info:hover li:nth-child(n+5) {
    opacity: 1; /* Show all items */
    max-height: 100px;
}

/* Additional styling for labels and values */
.label {
    font-weight: bold;
    color: #333;
    flex: 1;
}

.value {
    color: #666;
    flex: 2;
    word-wrap: break-word; /* Ensure long text wraps to fit */
}

/* Стилове за по-добра четливост на мобилни устройства */
@media (max-width: 600px) {
    .dj-profile-info li {
        flex-direction: column;
        align-items: flex-start;
    }

    .label {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .value {
        font-size: 14px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-0ab6557 */.claim-page-container {
    display: block;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #f5f9ff);
    padding: 25px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.1);
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    border: 1px solid rgba(0, 123, 255, 0.1);
    animation: fadeInContainer 0.6s ease-out forwards;
}

.claim-page-text {
    font-size: 22px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInText 0.5s ease-out forwards 0.3s;
}

.login-register-button {
    display: inline-block;
    font-size: 16px;
    padding: 16px 32px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff !important;
    border-radius: 12px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    font-weight: 600;
}

.login-register-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
    background: linear-gradient(135deg, #4facfe 0%, #00d4ff 100%);
}

.claim-page-button {
    display: inline-block;
    background: #007bff;
    color: #fff !important;
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    min-width: 220px;
}

.claim-page-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    background: #0056b3;
}

.claim-success-message {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    color: #1a472a;
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 500;
    animation: fadeInSuccess 0.5s ease-out forwards;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(132, 250, 176, 0.3);
}

@keyframes fadeInSuccess {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInContainer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .claim-page-container {
        padding: 20px;
    }

    .claim-page-text {
        font-size: 20px;
    }

    .claim-page-button,
    .login-register-button {
        font-size: 15px;
        padding: 14px 28px;
    }
}

@media (max-width: 480px) {
    .claim-page-container {
        padding: 15px;
    }

    .claim-page-text {
        font-size: 18px;
    }

    .claim-page-button,
    .login-register-button {
        font-size: 14px;
        padding: 12px 24px;
        min-width: 180px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-c13b265 */.dj-short-desc {
    position: relative;
    max-height: 150px; /* Set a fixed height for the container */
    overflow: hidden; /* Initially hide overflowing text */
    line-height: 1.6;
    color: #333;
    padding: 0 20px;
    word-wrap: break-word;
    display: block;
    border-radius: 8px;
}

/* Fade effect - transparent to white */
.dj-short-desc::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Height of the fade effect */
    background: linear-gradient(to bottom, transparent, white); /* Fade effect */
    pointer-events: none;
}

/* Centered "Read full description" button */
.read-more {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Center the button horizontally */
    background: white;
    color: #007bff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
}

/* Scrollable state when full text is visible */
.full-text-visible .dj-short-desc {
    max-height: none; /* Remove height constraint */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 20px; /* To ensure padding below the text */
}

/* Remove fade effect and button when full text is visible */
.full-text-visible .dj-short-desc::before,
.full-text-visible .read-more {
    display: none; /* Hide the fade and button */
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-ddd1052 */.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
}

.badge {
    background: #e6f7ff;
    color: #333;
    border: 1px solid #b3e0ff;
    border-radius: 12px;
    padding: 5px 12px;
    font-size: 16px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.badge-title {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.badge:nth-child(1) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0s;
}

.badge:nth-child(2) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.1s;
}

.badge:nth-child(3) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.2s;
}

.badge:nth-child(4) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.3s;
}

.badge:nth-child(5) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.4s;
}

.badge:nth-child(6) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.5s;
}

.badge:nth-child(7) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.6s;
}

.badge:nth-child(8) .badge-title {
    animation: slideIn 0.5s ease forwards;
    animation-delay: 0.7s;
}

.badge:hover {
    background: #b3e0ff;
    color: #004080;
}

.badge-title::before {
    content: "🏆";
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.4s ease, margin 0.4s ease, filter 0.4s ease;
}

.badge:hover .badge-title::before {
    transform: scale(3.3) rotate(-10deg) translateX(-5px);
    margin-right: 0px; 
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.badge:hover .badge-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-15px);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .vsd-element-08ab93c *//* Make the dj-single-menu sticky */
.dj-single-menu {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 100;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Style the unordered list inside the dj-single-menu */
.dj-single-menu ul {
    list-style: none;
    margin: 0;
    display: flex;
    gap: 20px;
    position: relative;
}

/* Style each list item */
.dj-single-menu ul li {
    position: relative;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s ease;
    color: #333;
    z-index: 1;
    padding-left: 0;
    padding-right: 0;
}

/* Add pipe symbol between items */
.dj-single-menu ul li:not(:last-child)::after {
    content: "|";
    margin-left: 20px;
    color: #ddd;
    position: relative;
    pointer-events: none;
}

.dj-single-menu ul li:last-child {
    padding-right: 20px;
}


/* Liquid hover background element */
.liquid-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 50px;
    transition: width 0.6s cubic-bezier(0.22, 0.68, 0, 1.71), height 0.6s cubic-bezier(0.22, 0.68, 0, 1.71), transform 0.6s cubic-bezier(0.22, 0.68, 0, 1.71);
    z-index: 0;
    pointer-events: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-6b977f6 */@media (max-width: 768px) {
    .dj-single-menu {
        padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px 0;
        box-shadow: 0 1px 0 rgba(0,0,0,.06);
        background: rgba(255,255,255,.96);
        -webkit-backdrop-filter: saturate(150%) blur(6px);
        backdrop-filter: saturate(150%) blur(6px);
    }

    .dj-single-menu ul {
        position: relative;               /* за стрелките */
        width: 100%;
        display: flex;
        gap: 8px;
        padding: 0 14px;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .dj-single-menu ul::-webkit-scrollbar { display: none; }

    .dj-single-menu ul li {
        flex: 0 0 auto;
        border-radius: 9999px;
        background: rgba(0,0,0,.05);
        scroll-snap-align: center;
        padding: 0; /* пази десктоп отстъпите */
    }

    .dj-single-menu ul li > a {
        display: block;
        padding: 10px 14px; /* по-голям hit area */
        text-decoration: none;
        color: inherit;
        line-height: 1.2;
        font-weight: 600;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
    }

    /* махни „|“ само на мобилно */
    .dj-single-menu ul li::after { display: none !important; }

    /* крайни градиенти (остават отделно от стрелките) */
    .dj-single-menu::before,
    .dj-single-menu::after {
        content: "";
        position: sticky;
        top: 0;
        width: 24px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
    .dj-single-menu::before {
        left: 0;
        background: linear-gradient(90deg, rgba(255,255,255,.96) 30%, rgba(255,255,255,0));
    }
    .dj-single-menu::after {
        right: 0;
        background: linear-gradient(270deg, rgba(255,255,255,.96) 30%, rgba(255,255,255,0));
    }

    /* стрелки-подсказки върху UL, не колидират с градиентите */
    .dj-single-menu ul::before,
    .dj-single-menu ul::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: .35;
        pointer-events: none;
        animation: nudge 2.4s ease-in-out 2;
        z-index: 3;
    }
    .dj-single-menu ul::before {
        left: 6px;
        background-image: url("data:image/svg+xml;utf8,<svg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
    }
    .dj-single-menu ul::after {
        right: 6px;
        background-image: url("data:image/svg+xml;utf8,<svg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
    }
    .dj-single-menu ul::before,
    .dj-single-menu ul::after {
        animation-fill-mode: forwards;
        animation-delay: .5s;
    }

    /* anchor scroll само на мобилно */
    html { scroll-behavior: smooth; }
    [id] { scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* изключи течния hover на touch устройства (независимо от ширината) */
@media (hover: none) {
    .liquid-hover { display: none !important; }
}

/* keyframes + уважение към reduced motion */
@keyframes nudge {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: .35; }
    20% { transform: translateY(-50%) translateX(-6px); opacity: .7; }
    40% { transform: translateY(-50%) translateX(6px); opacity: .7; }
    60% { transform: translateY(-50%) translateX(0); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .dj-single-menu ul { scroll-behavior: auto; }
    .dj-single-menu ul::before,
    .dj-single-menu ul::after { animation: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-fcb1251 */.error-message1 {
    position: relative;
    background: #ffffff; /* Clean white background */
    color: #333;
    padding: 20px;
    padding-left: 75px; /* Space for the exclamation mark */
    border-radius: 12px;
    width: 100%; /* Full width */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Bold shadow for depth */
    border-left: 8px solid #ff5722; /* Accent color for left border */
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    animation: popIn 0.6s ease-out;
    box-sizing: border-box; 
    overflow: hidden;
}

.error-message1::before {
    content: '!';
    font-size: 96px; /* 20% smaller than previous */
    font-weight: bold;
    color: rgba(255, 87, 34, 0.2); /* Faded accent color */
    position: absolute;
    top: 50%;
    left: 20px; /* Position from the left edge */
    transform: translateY(-50%);
    z-index: 1; /* Ensure it sits behind text */
    user-select: none; /* Prevents selection */
}

.error-message1 a {
    color: #ff5722; /* Accent color for links */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s, text-decoration 0.3s;
}

.error-message1 a:hover {
    color: #e64a19; /* Darker shade on hover */
    text-decoration: underline;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-cfdacee */.video-carousel {
    position: relative;
    display: flex;
    align-items: center;
    height: 570px;
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.3), rgba(255, 0, 150, 0.3)); 
    border-radius: 15px;
    padding: 10px;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    cursor: grab;
    width: 100%;
    padding-bottom: 20px;

}

.carousel-slide {
    min-width: 300px;
    height: 500px;
    margin: 0 10px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}

.carousel-slide iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 15px;
}

.carousel-arrow {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 50px !important; /* ? */
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.carousel-arrow:hover {
    background: rgba(255, 255, 255, 1);
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.indicator-container {
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    transition: background 0.3s;
}

.indicator.active {
    background: rgba(255, 0, 150, 0.9) !important;
}

.carousel-inner.dragging .carousel-slide {
    transform: scale(0.95);
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-227e21f */.responsive-table-container {
    width: 100%;
    overflow-x: auto;
}

.search-bar-container {
    margin-bottom: 10px;
    text-align: right;
}

#searchInput {
    padding: 8px;
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.upgraded-services-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.upgraded-services-table th, .upgraded-services-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.upgraded-services-table th {
    background-color: #f4f4f4;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.upgraded-services-table th:nth-child(2) {
    display: table-cell;
    flex: none;
    text-align: left;
}

.upgraded-services-table th .sort-icons {
    margin-left: 8px;
}

.upgraded-services-table th:hover {
    background-color: #e0e0e0;
}

.upgraded-services-table tbody tr:hover {
    background-color: rgba(173, 216, 230, 0.2);
}

.upgraded-services-table td:last-child {
    text-align: right;
}

.upgraded-services-table td:last-child {
    text-align: right;
    width: 15%;
}

.sort-icons {
    margin-left: auto;
    align-items: center;
}

.sort-icons .asc, .sort-icons .desc {
    font-size: 10px;
    display: inline; 
    cursor: pointer;
    color: silver;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}


@media (max-width: 768px) {
    .upgraded-services-table, .upgraded-services-table th, .upgraded-services-table td {
        display: block;
        width: 100%;
    }

    .upgraded-services-table th {
        display: none;
    }

    .upgraded-services-table td {
        border: none;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

    .upgraded-services-table tbody tr {
        display: block;
        margin-bottom: 10px;
    }

    .upgraded-services-table td:nth-child(1)::before {
        content: "Услуга: ";
        font-weight: bold;
    }

    .upgraded-services-table td:nth-child(2)::before {
        content: "Описание: ";
        font-weight: bold;
    }

    .upgraded-services-table td:nth-child(3)::before {
        content: "Цена: ";
        font-weight: bold;
    }
    
    .upgraded-services-table td:last-child {
    text-align: left;
    width: 100%;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-9360ce1 *//* Секция/грид */
.pricing-section{ text-align:center; padding:5rem 1rem; background:#f9fafb; font-weight:300 }
.pricing-title{ font-size:2.4rem; font-weight:700; color:#111; margin-bottom:.8rem }
.pricing-subtitle{ font-size:1.15rem; color:#4b5563; margin-bottom:3.2rem }
.pricing-grid{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; max-width:1200px; margin:0 auto }

/* Карта */
.plan-card{ flex:1 1 320px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:2.2rem 2rem; text-align:left; display:flex; flex-direction:column; position:relative; transition:box-shadow .25s ease, transform .25s ease }
.plan-card:hover{ box-shadow:0 8px 28px rgba(0,0,0,.08); transform:translateY(-3px) }

/* Хедър */
.plan-head{ margin-bottom:1.8rem }
.plan-name{ font-size:1.4rem; font-weight:600; color:#0f172a; margin:0 0 .6rem }
.plan-price-row{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap }
.plan-price{ font-size:2.1rem; font-weight:600; color:#111; margin:0 }
.price-kind{ font-size:.95rem; color:#6b7280; border:1px solid #e5e7eb; border-radius:999px; padding:.18rem .55rem; line-height:1 }

/* Спестявате */
.saving-pill{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; font-size:1rem; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; padding:.35rem .6rem; font-weight:400 }
.saving-pill::before{ content:"✓"; font-weight:600 }

/* Бадж за топ план */
.plan-badge{ position:absolute; top:-14px; right:18px; background:#2563eb; color:#fff; font-size:.78rem; font-weight:600; padding:.38rem .9rem; border-radius:999px; box-shadow:0 2px 8px rgba(37,99,235,.28) }

/* Функции — по-големи, тънък шрифт */
.plan-features{ list-style:none; margin:1.2rem 0 2.2rem; padding:0 }
.plan-features li{ font-size:1.08rem; font-weight:300; color:#1f2937; padding:.62rem 0; display:flex; align-items:center; border-bottom:1px solid #eef2f7 }
.plan-features li:last-child{ border:none }
.plan-features .check{ width:18px; height:18px; margin-right:.55rem; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cpath fill='%232563eb' d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z'/%3E%3C/svg%3E") no-repeat center/contain }

/* Бутони — по-елегантни */
.plan-cta{ margin-top:auto; display:block; text-align:center; padding:.95rem 1rem; border-radius:12px; font-weight:500; font-size:1.05rem; text-decoration:none; transition:background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; border:1px solid #c7d2fe; background:#eef2ff; color:#1e40af }
.plan-cta:hover{ background:#e0e7ff; border-color:#a5b4fc; box-shadow:0 3px 10px rgba(30,64,175,.18) }

/* Най-препоръчан — запълнен бутон + деликатен фон */
.plan-featured{ border:2px solid #2563eb; background:#f5f8ff }
.plan-featured .plan-price{ color:#1d4ed8 }
.plan-featured .plan-cta{ background:#2563eb; border-color:#2563eb; color:#fff }
.plan-featured .plan-cta:hover{ background:#1e40af; border-color:#1e40af; box-shadow:0 4px 12px rgba(30,64,175,.25) }

/* Responsive */
@media (max-width:768px){ .plan-card{ flex:1 1 100% } }/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-1223d8a *//* CORE */
.rvx{
  --bg:hsl(230 20% 6%); --card:hsl(230 16% 12%); --card-2:hsl(230 18% 14%);
  --text:hsl(0 0% 95%); --subtext:hsl(0 0% 80%); --muted:hsl(230 8% 42%);
  --accent:hsl(265 100% 67%); --accent-2:hsl(200 100% 62%);
  --ok:hsl(150 70% 45%); --warn:hsl(40 90% 55%); --danger:hsl(0 85% 60%);
  --radius:14px; --radius-sm:10px; --shadow:0 6px 18px hsl(0 0% 0%/.18);
  --ring:0 0 0 1px hsl(0 0% 100%/.05) inset; --glass:linear-gradient(180deg,hsl(0 0% 100%/.04),hsl(0 0% 100%/.02));
  --fs-base:19px; --fs-small:15.5px; --fs-title:21px; --lh:1.7;
  position:relative; color:var(--text); background:var(--card);
  border-radius:calc(var(--radius)+2px); box-shadow:var(--shadow);
  border:1px solid hsl(0 0% 100%/.06); max-width:min(1100px,100%); overflow:hidden; font:inherit;
}

/* Header */
.rvx .review-header{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--glass); position:sticky; top:0; z-index:10;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid hsl(0 0% 100%/.06);
  -webkit-transform:translateZ(0); transform:translateZ(0); will-change:transform; backface-visibility:hidden;
}
.rvx .review-header .title{ font-weight:800; letter-spacing:.2px; font-size:var(--fs-title) }
.rvx .review-header .meta{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  color:var(--subtext); font-size:var(--fs-small); white-space:nowrap; flex-wrap:nowrap;
}

/* Pills */
.rvx .pill{
  padding:6px 10px; border-radius:10px;
  background:hsl(0 0% 100%/.05); color:var(--subtext);
  border:1px solid hsl(0 0% 100%/.12);
  cursor:pointer; line-height:1; display:inline-flex; align-items:center; white-space:nowrap;
  max-height:32px;
}
.rvx .pill:hover{ background:hsl(0 0% 100%/.08); color:var(--text) }

/* Rating select — още по-бледа рамка по default, по-плътна при фокус */
.rvx #rating-filter{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; color:inherit; font:inherit; outline:none;
  border:1px solid hsl(0 0% 100%/.04); /* още по-бледа */
  border-radius:8px; line-height:1;
  padding:6px 26px 6px 8px; min-width:210px; max-height:32px;
  transition:border-color .15s, background-color .15s, color .15s, box-shadow .15s;
  box-shadow:none;
  background-image:
    linear-gradient(45deg, currentColor 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 10px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.rvx #rating-filter:hover{
  background:hsl(0 0% 100%/.04);
  border-color:hsl(0 0% 100%/.08);
}
.rvx #rating-filter:focus{
  background:hsl(0 0% 100%/.10);
  border-color:hsl(0 0% 100%/.18);
  box-shadow:0 0 0 2px hsl(210 100% 70%/.16);
  color:var(--text);
}


/* Date button: keep on one line; slightly smaller arrow */
.rvx [data-sort-date]{ white-space:nowrap }
.rvx [data-sort-date] [data-arrow]{ margin-left:6px; font-size:.85em }

/* List / Cards */
.rvx .review-scroll{ max-height:70vh; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges }
.rvx .review-scroll::-webkit-scrollbar{ width:10px }
.rvx .review-scroll::-webkit-scrollbar-thumb{ background:hsl(0 0% 100%/.20); border-radius:999px }
.rvx .review-scroll::-webkit-scrollbar-track{ background:hsl(0 0% 100%/.08); border-radius:999px }
.rvx .list{ columns:1; column-gap:16px; padding:16px }
@media (min-width:900px){ .rvx .list{ columns:2 } }
.rvx .card{ display:inline-block; width:100%; margin:0 0 16px; break-inside:avoid;
  background:var(--card-2); border-radius:var(--radius); padding:16px; box-shadow:var(--ring);
  transition:background .18s ease, box-shadow .18s ease }
.rvx .card:hover{ background:color-mix(in oklab,var(--card-2),white 2%); box-shadow:0 0 0 1px hsl(0 0% 100%/.08) inset }
.rvx .card:focus-within{ outline:2px solid hsl(210 100% 70%/.35); outline-offset:0 }
.rvx .card[data-kind="video"]{ border:1px solid hsl(200 100% 60%/.22) }
.rvx .card[data-kind="text"]{  border:1px solid hsl(48 100% 60%/.22) }
.rvx .card[data-kind="both"]{  border:1px solid hsl(280 100% 70%/.22) }

.rvx .card-head{ display:flex; gap:12px; align-items:center }
.rvx .avatar{ width:46px; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 0deg at 50% 50%, var(--accent), var(--accent-2), var(--accent)); position:relative; overflow:hidden; flex:0 0 auto }
.rvx .avatar::after{ content:attr(data-initials); position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:900; letter-spacing:.3px; text-shadow:0 1px 2px hsl(0 0% 0%/.35) }
.rvx .info{ display:grid; gap:0; min-width:0 }
.rvx .name{ display:flex; align-items:center; gap:10px; font-weight:400; letter-spacing:.1px; font-size:var(--fs-base) }
.rvx .name a{ color:inherit; text-decoration:none; border-bottom:1px dashed hsl(0 0% 100%/.14) }
.rvx .name a:hover{ border-bottom-color:currentColor }
.rvx .handle{ color:var(--muted); font-size:var(--fs-small); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px }

.rvx .badges{ display:flex; gap:6px; flex-wrap:wrap }
.rvx .badge{ font-size:12px; padding:4px 8px; border-radius:999px; font-weight:400; color:var(--subtext); background:transparent; border:1px solid hsl(0 0% 100%/.14) }
.rvx .badges .badge.video{ border-color:hsl(200 100% 60%/.35) }
.rvx .badges .badge.text{  border-color:hsl(48 100% 60%/.35) !important }
.rvx .badges .badge.both{  border-color:hsl(280 100% 70%/.35) }

.rvx .rating{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
  background:hsl(0 0% 100%/.06);
  border:1px solid hsl(0 0% 100%/.12);
  font-size:var(--fs-small); color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* махаме звездата отпред */
.rvx .rating::before{ content:none }
/* след числото показваме „ / 5 ★“ */
.rvx .rating::after{
  content:" / 5 ★";
  margin-left:6px; line-height:1;
}


/* Media block: softer bg */
.rvx .media{ border-radius:var(--radius-sm); overflow:hidden; background:hsl(230 18% 14%/.55); outline:1px solid hsl(0 0% 100%/.08) }
.rvx .media video{ width:100%; display:block; height:auto; aspect-ratio:16/9; background:black }

/* Text blocks */
.rvx .text{ color:hsl(0 0% 98%); line-height:var(--lh); font-size:calc(var(--fs-base) + 1px); position:relative }
.rvx .text-wrap{ position:relative; max-height:9.6em; overflow:hidden; border-radius:var(--radius-sm) }
.rvx .text-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 35%, var(--card-2) 92%); pointer-events:none }
.rvx .card:focus, .rvx .card:focus-within{ outline:2px solid hsl(210 100% 70%/.6) }
.rvx .card:focus .text-wrap, .rvx .card:focus-within .text-wrap{ max-height:none; overflow:visible }
.rvx .card:focus .text-wrap::after, .rvx .card:focus-within .text-wrap::after{ opacity:0 }

/* Compose */
.rvx .review-compose{ padding:16px 16px 0 16px }
.rvx .review-compose .card{ margin:0 }
.rvx [data-review-form] textarea,
.rvx [data-review-form] input[type="url"],
.rvx [data-review-form] input[type="file"]{
  width:100%; box-sizing:border-box; margin-top:10px; padding:12px;
  border-radius:12px; border:1px solid hsl(0 0% 100%/.12);
  background:hsl(0 0% 100%/.04); color:var(--text); font:inherit;
}
.rvx [data-review-form] textarea::placeholder{ color:hsl(0 0% 100%/.45) }
.rvx [data-review-form] textarea:focus,
.rvx [data-review-form] input[type="url"]:focus{
  outline:2px solid hsl(210 100% 70%/.35); outline-offset:0;
}
.rvx [data-review-form] textarea:disabled,
.rvx [data-review-form] input:disabled{ opacity:.6; cursor:not-allowed }

/* Rating stars */
.rvx [data-rating-fieldset]{
  display:inline-flex; gap:8px; vertical-align:middle !important;
  padding:6px 10p !importantx;
  border-radius:999px !important;
  background:hsl(0 0% 100%/.06) !important;
  border:1px solid hsl(0 0% 100%/.10) !important;
}
.rvx [data-rating-fieldset] input[type="radio"]{
  position:absolute; opacity:0; width:0; height:0;
}
.rvx [data-rating-fieldset] [data-star]{
  cursor:pointer; user-select:none; font-size:20px; line-height:1;
  color:hsl(0 0% 100%/.45);              /* малко по-видими по default */
  transition:transform .12s ease, color .12s ease;
}
.rvx [data-rating-fieldset] [data-star]:hover{
  transform:scale(1.08);
  color:hsl(48 100% 60%/.95);
}

/* Video tabs – smaller */
.rvx .video-toggle{ border-bottom:1px solid hsl(0 0% 100%/.08) }
.rvx [data-video-tab]{
  appearance:none; border:1px solid hsl(0 0% 100%/.12);
  background:hsl(0 0% 100%/.06); color:var(--subtext);
  padding:5px 10px; border-radius:9px; cursor:pointer; font:inherit; font-size:14px;
}
.rvx [data-video-tab][aria-selected="true"]{
  color:var(--text); background:hsl(0 0% 100%/.12); border-color:hsl(0 0% 100%/.20);
}

/* Actions row */
.rvx .actions{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:var(--fs-small) }
.rvx .action{ padding:6px 12px; border-radius:999px; background:hsl(0 0% 100%/.04); border:1px solid hsl(0 0% 100%/.08); color:var(--muted); user-select:none; cursor:pointer; transition:background .18s, border-color .18s, color .18s, box-shadow .18s }
.rvx .action:hover{ background:hsl(0 0% 100%/.10); border-color:hsl(0 0% 100%/.16); color:var(--text) }
.rvx .action:active{ background:hsl(0 0% 100%/.14); box-shadow:inset 0 1px 0 hsl(0 0% 0%/.08) }

/* Submit — визуално в тон с табовете, различим като primary; чист текст (без ::after) */
/* Actions – леко отстояние отгоре (същото като между textarea и media блока) */
.rvx [data-review-form] .actions{
  justify-content:flex-start;
  margin-top:12px; /* исканото „въздухче“ */
}

/* Submit – без рамка (нецветна), мек фон, в тон с табовете */
.rvx [data-submit]{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:7px 14px;
  border-radius:10px;
  background:hsl(0 0% 100%/.10);
  border:none;                          /* няма рамка */
  color:var(--text);
  font-weight:700; letter-spacing:.2px; font-size:14.5px;
  line-height:1; white-space:nowrap; cursor:pointer;
  transition:background .18s, box-shadow .18s, transform .06s;
  text-decoration:none;
}
.rvx [data-submit]:hover{
  background:hsl(0 0% 100%/.14);
  box-shadow:0 1px 0 hsl(0 0% 0%/.10) inset, 0 2px 10px hsl(0 0% 0%/.14);
}
.rvx [data-submit]:active{
  transform:translateY(1px);
  background:hsl(0 0% 100%/.18);
  box-shadow:inset 0 1px 0 hsl(0 0% 0%/.18);
}
.rvx [data-submit]:disabled{
  opacity:.6; cursor:not-allowed;
  background:hsl(0 0% 100%/.06);
  box-shadow:none;
}

/* Светла тема – леки корекции */
@media (prefers-color-scheme: light){
  .rvx #rating-filter{ border-color:hsl(230 20% 86%/.6) }
  .rvx #rating-filter:hover{ border-color:hsl(230 20% 82%) }
  .rvx #rating-filter:focus{ border-color:hsl(230 20% 68%); box-shadow:0 0 0 2px hsl(210 100% 60%/.18) }

  .rvx [data-submit]{
    background:hsl(230 20% 96%);
    border-color:hsl(230 20% 86%);
  }
  .rvx [data-submit]:hover{
    background:hsl(230 20% 94%);
    border-color:hsl(230 20% 78%);
    box-shadow:0 1px 0 hsl(230 20% 40%/.06) inset, 0 2px 10px hsl(230 20% 20%/.08);
  }
  .rvx [data-submit]:active{
    background:hsl(230 20% 92%);
    border-color:hsl(230 20% 72%);
  }
}
.rvx [data-review-form] .actions{ justify-content:flex-start }

/* Mobile */
@media (max-width:520px){
  .rvx .review-header .meta{ flex-wrap:wrap; gap:8px 10px; white-space:normal }
}

/* Light mode tweaks */
@media (prefers-color-scheme: light){
  .rvx{ --bg:hsl(0 0% 98%); --card:#fff; --card-2:#fff; --text:hsl(230 25% 8%); --subtext:hsl(230 11% 37%); --muted:hsl(230 10% 55%); --shadow:0 6px 18px hsl(230 20% 20%/.08); --ring:0 0 0 1px hsl(230 20% 92%) inset }
  .rvx .text{ color:hsl(230 25% 10%) }
  .rvx .badge{ border-color:hsl(230 20% 82%) }
  .rvx .card:hover{ box-shadow:0 0 0 1px hsl(230 20% 82%) inset }
  .rvx .media{ background:hsl(230 12% 96%); outline:1px solid hsl(230 20% 88%) }
  .rvx [data-video-tab]{ border-color:hsl(230 20% 88%); background:hsl(230 20% 96%) }
  .rvx [data-video-tab][aria-selected="true"]{ background:hsl(230 20% 92%); border-color:hsl(230 20% 82%) }
  .rvx [data-submit]{ border-color:hsl(265 80% 52%/.5) }
}

/* Ensure component sizing */
.rvx[data-rvx]{ max-width:100%; width:100%; display:block }



/* badges */
.rvx .badges{display:flex;gap:6px;flex-wrap:wrap}
.rvx .badge{font-size:12px;line-height:1;padding:3px 8px;border-radius:999px;color:var(--subtext);background:transparent;border:1px solid hsl(0 0% 100%/.14)}
.rvx .badges .badge.video{border-color:hsl(200 100% 60%/.35)}
.rvx .badges .badge.text{border-color:hsl(48 100% 60%/.35)}
.rvx .badges .badge.both{border-color:hsl(280 100% 70%/.35)}

[data-list] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}/* End custom CSS */
/* Start custom CSS for html, class: .vsd-element-2b42d6e */#favorite-popup {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#favorite-popup.show {
    display: block;
    opacity: 1;
}/* End custom CSS */