/* Basic overrides for the embedded template (most styles are inline in the template) */
#movespain-calculator {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

#movespain-calculator .payment-grid {
    gap: 16px;
}

#movespain-calculator button[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #movespain-calculator .payment-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Improved checkbox styling for translation option */
#movespain-calculator .translation-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#movespain-calculator input[type="checkbox"]#translationCheck {
    /* reset native appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid #6c757d;
    background: white;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

#movespain-calculator input[type="checkbox"]#translationCheck:checked {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: transparent;
}

#movespain-calculator input[type="checkbox"]#translationCheck:checked::after {
    content: "";
    position: absolute;
    /* center the checkmark */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%) rotate(45deg);
    display: block;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    box-sizing: content-box;
}

/* Hide number input spinner arrows but keep the value visible */
#movespain-calculator input[type=number]::-webkit-outer-spin-button,
#movespain-calculator input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#movespain-calculator input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Slight visual polish for the small counter buttons */
#movespain-calculator button {
    transition: transform .12s ease, box-shadow .12s ease;
}

#movespain-calculator button:active {
    transform: translateY(1px) scale(.98);
}