input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #9ca3af !important;
    transition: background-color 5000s ease-in-out 0s;
}

.btn {
    height: clamp(4.6rem, 10vw, 6.4rem);
    width: clamp(11.5rem, 72vw, 15rem);
    max-width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dcb86a;
    padding: 0 1rem;
    font-size: clamp(1.65rem, 7vw, 3.1rem);
    line-height: 0.95;
    white-space: nowrap;
    color: #f8eac7;
    transition: all 0.3s ease-out;
    box-shadow:
            0 0 0 1px rgba(255, 218, 140, 0.34),
            0 10px 20px rgba(0, 0, 0, 0.38);
    font-family: 'Bethany', serif;
    cursor: pointer;
    text-shadow: 0 0 8px rgba(255, 225, 150, 0.2);
}

.btn-red {
    background: linear-gradient(180deg, #e22b2b 0%, #c9151d 48%, #980d12 100%);
    box-shadow:
            0 0 0 1px rgba(255, 218, 140, 0.34),
            0 10px 20px rgba(0, 0, 0, 0.38),
            inset 0 0 0 9px #941218,
            inset 0 12px 18px rgba(255, 100, 100, 0.18);
}

.btn-blue {
    background: linear-gradient(180deg, #3e4ed0 0%, #2d3bb0 48%, #1c256a 100%);
    box-shadow:
            0 0 0 1px rgba(255, 218, 140, 0.34),
            0 10px 20px rgba(0, 0, 0, 0.38),
            inset 0 0 0 9px #26378f,
            inset 0 12px 18px rgba(135, 160, 255, 0.14);
}

.btn:hover  { transform: translateY(-4px); filter: brightness(1.1); }


input {
    filter: none;
}

.star {
    transition: 0.3s ease all;
    cursor: pointer;
    pointer-events: auto;
}

.star:hover:not(:disabled) {
    opacity: 0.75;
}

.star:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}