/*
 * Shared 4WT button design – operator, DEMO, self-interviews, calendar,
 * preparation, people directory and login.
 *
 * Neutral: white, softly rounded, orange border on hover.
 * Primary: solid 4WT orange, darker orange on hover.
 * Other components keep control of spacing, layout and visibility.
 */
:root {
    --4wt-button-orange: #d97706;
    --4wt-button-orange-hover: #bd6504;
    --4wt-button-border: #c6d0d8;
    --4wt-button-navy: #10263d;
    --4wt-button-radius: 0.5rem;
}

button {
    border: 1px solid var(--4wt-button-border);
    border-radius: var(--4wt-button-radius);
    background-color: #fff;
    color: var(--4wt-button-navy);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease,
                color 120ms ease;
}

button:hover:not(:disabled) {
    border-color: var(--4wt-button-orange);
}

/* Existing semantic primary class plus the few established unclassed
 * primary actions. Leave all other buttons neutral, including Delete/Cancel.
 */
button.primary,
#operator-command-button.current-action,
#demo-advance-button,
#slot-form #next-slot,
#issue-booking,
#rotate-ics,
.slot-book,
.calendar-operator button[type="submit"],
.respondent-access #redeem-button {
    border-color: var(--4wt-button-orange);
    background-color: var(--4wt-button-orange);
    color: #fff;
    font-weight: 700;
}

button.primary:hover:not(:disabled),
#operator-command-button.current-action:hover:not(:disabled),
#demo-advance-button:hover:not(:disabled),
#slot-form #next-slot:hover:not(:disabled),
#issue-booking:hover:not(:disabled),
#rotate-ics:hover:not(:disabled),
.slot-book:hover:not(:disabled),
.calendar-operator button[type="submit"]:hover:not(:disabled),
.respondent-access #redeem-button:hover:not(:disabled) {
    border-color: var(--4wt-button-orange-hover);
    background-color: var(--4wt-button-orange-hover);
    color: #fff;
}

button:focus-visible {
    outline: 3px solid #b96800;
    outline-offset: 3px;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    button { transition: none; }
}