/* Approved classic frame: fixed-size corners, CSS metal and a flexible red face. */
:is(#bridge-pay, #license-view, .billing-section, .trial-upgrade-prompt) .bridge-classic-button {
    --bridge-button-cut: 7px;
    --bridge-button-metal: linear-gradient(180deg, #fff1b2 0%, #e9b959 20%, #a46a25 48%, #dab068 80%, #f9d580 100%);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff0d0;
    font-family: BridgeDisplay, Georgia, serif;
    font-weight: 700;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 2px 2px #240205;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.bridge-classic-button::before,
.bridge-classic-button::after,
.bridge-button-frame,
.bridge-button-face {
    position: absolute;
    inset: 0;
    clip-path: polygon(var(--bridge-button-cut) 0, calc(100% - var(--bridge-button-cut)) 0, 100% var(--bridge-button-cut), 100% calc(100% - var(--bridge-button-cut)), calc(100% - var(--bridge-button-cut)) 100%, var(--bridge-button-cut) 100%, 0 calc(100% - var(--bridge-button-cut)), 0 var(--bridge-button-cut));
    pointer-events: none;
}
.bridge-classic-button::before {
    content: '';
    z-index: -4;
    background: var(--bridge-button-metal);
}
.bridge-classic-button::after {
    content: '';
    --bridge-button-cut: 6px;
    z-index: -3;
    inset: 2px;
    background: #291506;
}
.bridge-button-frame {
    --bridge-button-cut: 5px;
    z-index: -2;
    inset: 3px;
    background: var(--bridge-button-metal);
}
.bridge-button-face {
    --bridge-button-cut: 4px;
    z-index: -1;
    inset: 4px;
    background:
        repeating-linear-gradient(44deg, transparent 0 9px, #ffd4a908 9px 10px, transparent 10px 20px),
        repeating-linear-gradient(-44deg, transparent 0 13px, #10000014 13px 14px, transparent 14px 26px),
        radial-gradient(ellipse at 50% 0, #e9343420, transparent 75%),
        linear-gradient(180deg, #a6111c, #6e0912 45%, #40040b);
    box-shadow: inset 0 1px 0 #ffb6a64a, inset 0 -2px 0 #1a000a80;
    transition: filter 120ms ease;
}
.bridge-classic-button:where(:hover, :focus-visible):not(:disabled) .bridge-button-face {
    filter: brightness(1.23);
}
.bridge-classic-button:focus-visible {
    outline: 2px solid #ffe5a0;
    outline-offset: 3px;
}
.bridge-classic-button:active:not(:disabled) { transform: translateY(1px); }
:is(#bridge-pay, #license-view, .billing-section, .trial-upgrade-prompt) .bridge-classic-button:disabled {
    opacity: .58;
    color: #e4cfae;
    filter: none;
    cursor: not-allowed;
}
.billing-section .bridge-classic-button { font-size: 19px; }
.billing-section :is(#billing-trial, #billing-login, #billing-direct-purchase-button).bridge-classic-button {
    min-height: 38px;
    padding: 9px 14px;
}
.trial-upgrade-prompt .bridge-classic-button { font-size: 18px; padding: 8px 14px; }
@media (prefers-reduced-motion: reduce) {
    .bridge-button-face { transition: none; }
}
@media (forced-colors: active) {
    :is(#bridge-pay, #license-view, .billing-section, .trial-upgrade-prompt) .bridge-classic-button {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        text-shadow: none;
    }
    .bridge-classic-button::before, .bridge-classic-button::after,
    .bridge-button-frame, .bridge-button-face { display: none; }
    .bridge-classic-button:focus-visible { outline-color: Highlight; }
    :is(#bridge-pay, #license-view, .billing-section, .trial-upgrade-prompt) .bridge-classic-button:disabled {
        opacity: 1;
        color: GrayText;
    }
}