.cf7m-star-rating {
--cf7m-star-size: 28px;
--cf7m-star-off: #e5e7eb;
--cf7m-star-on: #f59e0b;
--cf7m-star-hover: #fbbf24;
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: auto;
height: auto;
}
.cf7m-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--cf7m-star-size);
height: var(--cf7m-star-size);
padding: 0 !important;
border: none !important;
background: none !important;
cursor: pointer;
color: var(--cf7m-star-off);
transition: color 0.2s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
box-shadow: none !important;
}
.cf7m-star:hover {
color: var(--cf7m-star-hover);
transform: scale(1.1);
}
.cf7m-star:focus {
outline: 2px solid var(--cf7m-star-on);
outline-offset: 2px;
border: none !important;
box-shadow: none !important;
}
.cf7m-star.cf7m-star--on,
.cf7m-star-rating:hover .cf7m-star.cf7m-star--on {
color: var(--cf7m-star-on);
}
.cf7m-star-svg {
width: 100%;
height: 100%;
pointer-events: none;
}
.cf7m-star-rating input[type="hidden"],
.cf7m-star-rating input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.cf7m-star {
cursor: pointer;
color: #ddd;
transition: color 0.15s;
}
.cf7m-star:hover,
.cf7m-star.active {
color: #ffc107;
}
.cf7m-star svg {
width: 24px;
height: 24px;
} .cf7m-range-slider {
--cf7m-range-track: #e5e7eb;
--cf7m-range-thumb: #3044D7;
--cf7m-range-value-bg: #f3f4f6;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
width: 100%;
}
.cf7m-range-input {
flex: 1;
min-width: 120px;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: var(--cf7m-range-track) !important;
border-radius: 4px;
outline: none;
cursor: pointer;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.cf7m-range-input:focus {
outline: 2px solid var(--cf7m-range-thumb);
outline-offset: 2px;
border: none !important;
box-shadow: none !important;
}
.cf7m-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--cf7m-range-thumb);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
transition: transform 0.15s ease;
border: none;
}
.cf7m-range-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.cf7m-range-input::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--cf7m-range-thumb);
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.cf7m-range-value {
min-width: 50px;
padding: 6px 12px;
background: var(--cf7m-range-value-bg);
border-radius: 6px;
text-align: center;
font-weight: 500;
font-size: 14px;
border: none;
} .dipe-cf7 .cf7m-range-slider,
.cf7m-cf7-styler .cf7m-range-slider {
--cf7m-range-thumb: currentColor;
}
.dipe-cf7 .cf7m-range-value,
.cf7m-cf7-styler .cf7m-range-value {
border-radius: inherit;
}
.dipe-cf7 .cf7m-star-rating,
.cf7m-cf7-styler .cf7m-star-rating {
padding: 0;
border: none;
background: transparent;
}
.dipe-cf7 .cf7m-range-input,
.cf7m-cf7-styler .cf7m-range-input {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.dipe-cf7 .cf7m-separator,
.cf7m-cf7-styler .cf7m-separator {
border-color: inherit;
opacity: 0.3;
}
.cf7m-range-slider .wpcf7-form-control-wrap,
.cf7m-star-rating .wpcf7-form-control-wrap {
display: contents;
}
.cf7m-range-slider label,
.cf7m-star-rating label {
display: contents;
}
.cf7m-range-slider p {
margin: 0;
display: contents;
}