.v-rating {
    --dir: right;
    --fill: gold;
    --fillbg: rgba(100, 100, 100, 0.15);
    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --stars: 5;
    --starsize: 0.8rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
}

[dir="rtl"] .v-rating {
    --dir: left;
}
.v-rating::-moz-range-track {
    background: linear-gradient(
        to var(--dir),
        var(--fill) 0 var(--x),
        var(--fillbg) 0 var(--x)
    );
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
}
.v-rating::-webkit-slider-runnable-track {
    background: linear-gradient(
        to var(--dir),
        var(--fill) 0 var(--x),
        var(--fillbg) 0 var(--x)
    );
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.v-rating::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
}
.v-rating::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
}
.v-rating,
.v-rating-label {
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.v-rating-label {
    margin-block-end: 1rem;
}

/* NO JS */
.v-rating--nojs::-moz-range-track {
    background: var(--fillbg);
}
.v-rating--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}
.v-rating--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
}
.v-rating--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}
[dir="rtl"] .v-rating--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
}
.search-home {
    margin-left: 5px;
    width: 50%;
    border-radius: 20px;
}

.skeleton-service {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 5px 5px 0 0;
}

.label-promo {
    position: absolute;
    z-index: 1000;
    top: 14px;
    right: 10px;
    height: 12px;
    transform: rotate(30deg);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

#copyMessage {
    display: none;
}

.img-user-rating {
    border: 1px solid #ededed;
    padding: 3px;
    margin-right: 10px;
    background-size: cover;
    object-fit: cover;
}

.img-user {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin-right: 20px;
    border: 1px solid #ededed;
    object-fit: cover;
}

.code-container {
    background: linear-gradient(to right, #e7f4ea, #fff);
    padding: 10px;
    border: 1px solid #ddede1;
    border-radius: 5px;
}

pre {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.copy-btn {
    margin-left: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.copy-icon {
    width: 24px;
    height: 24px;
}

.input-voucher {
    padding: 8px;
    width: 100%;
    border-left: 2px dashed orange;
    border-right: 0px dashed orange;
    border-top: 2px dashed orange;
    border-bottom: 2px dashed orange;
}

.btn-voucher {
    padding: 8px;
    width: 100%;
    border: 2px solid #e3c763;
}

.link-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Animasi Muncul dari Bawah (Fade In Up) */
.my-animate-fade-in-up {
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

/* Jeda Waktu Muncul agar dinamis (berurutan) */
.my-delay {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timer-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #198754; /* Warna hijau success */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-direction: column;
}
.bg-light-custom {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

/* Styling khusus untuk kotak PIN */
input.pin-input {
    width: 50px;
    height: 60px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #dee2e6 !important;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

input.pin-input:focus {
    border-color: #072a50 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

/* Menghilangkan panah atas/bawah pada input type number di beberapa browser mobile */
.pin-input::-webkit-outer-spin-button,
.pin-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Penyesuaian ukuran untuk layar yang sangat kecil (seperti iPhone SE) */
@media (max-width: 360px) {
    .pin-input {
        width: 40px;
        height: 50px;
        font-size: 24px;
    }
}