/* Approved P1 plaque, C1 card frame and gold badge, shared by checkout and popup.
   Only decorative layers are clipped; content determines the component height. */
:is(#bridge-pay, #license-view) {
    --g-metal: linear-gradient(135deg, #d79535, #fff0ac 19%, #b07829 36%, #6e4017 49%, #f5cf75 68%, #b77825 84%, #ffe49c);
    --g-stone: radial-gradient(ellipse at 50% 0, #85222a24, transparent 75%), repeating-linear-gradient(44deg, transparent 0 13px, #ffd8ad06 13px 14px, transparent 14px 26px), linear-gradient(145deg, #25191a, #0d0b0c 70%);
    --g-wine: radial-gradient(ellipse at 50% 0, #a2313440, transparent 80%), repeating-linear-gradient(-42deg, transparent 0 15px, #ffd8ad07 15px 16px, transparent 16px 30px), linear-gradient(140deg, #3d0d14, #17080d 80%);
}
:is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame) {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    border: 0;
    border-radius: 0;
    background: none;
}
:is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::before,
:is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: var(--g-shape);
}
:is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::before {
    z-index: -2;
    background: var(--g-metal);
}
:is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::after {
    z-index: -1;
    background: var(--g-surface, var(--g-stone));
}
#bridge-pay .g-plaque {
    --g-shape: polygon(0 50%, 16px calc(50% - 12px), 16px 10px, calc(50% - 20px) 10px, 50% 0, calc(50% + 20px) 10px, calc(100% - 16px) 10px, calc(100% - 16px) calc(50% - 12px), 100% 50%, calc(100% - 16px) calc(50% + 12px), calc(100% - 16px) calc(100% - 10px), calc(50% + 20px) calc(100% - 10px), 50% 100%, calc(50% - 20px) calc(100% - 10px), 16px calc(100% - 10px), 16px calc(50% + 12px));
    display: grid;
    place-items: center;
    padding: 21px 34px;
    min-block-size: 66px;
    color: #f4ddaf;
    font: 600 19px/1.25 BridgeDisplay, Georgia, serif;
    text-align: center;
    overflow-wrap: anywhere;
}
#bridge-pay .g-plaque::after { inset: 2px; }
#bridge-pay .g-plaque > span { min-inline-size: 0; }
#bridge-pay .g-plaque .g-jewel { inset-block-start: 5px; }
:is(#bridge-pay, #license-view) .g-frame {
    --g-cut: 14px;
    --g-shape: polygon(var(--g-cut) 0, calc(100% - var(--g-cut)) 0, 100% var(--g-cut), 100% calc(100% - var(--g-cut)), calc(100% - var(--g-cut)) 100%, var(--g-cut) 100%, 0 calc(100% - var(--g-cut)), 0 var(--g-cut));
    display: flex;
    flex-direction: column;
    padding: 26px 25px 25px;
}
:is(#bridge-pay, #license-view) .g-frame::after { inset: 3px; --g-cut: 12px; }
:is(#bridge-pay, #license-view) .g-frame-inset {
    position: absolute;
    inset: 7px;
    border: 1px solid #d6a554;
    pointer-events: none;
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
:is(#bridge-pay, #license-view) .g-corner {
    position: absolute;
    inline-size: 19px;
    block-size: 19px;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    pointer-events: none;
}
:is(#bridge-pay, #license-view) .g-corner::before,
:is(#bridge-pay, #license-view) .g-corner::after {
    content: '';
    position: absolute;
    border: solid #dfb969;
    border-width: 1px 0 0 1px;
    inline-size: 11px;
    block-size: 11px;
    inset: 0;
}
:is(#bridge-pay, #license-view) .g-corner::after { inset: 4px; inline-size: 7px; block-size: 7px; }
:is(#bridge-pay, #license-view) .g-corner--tr { inset-inline-start: auto; inset-inline-end: 6px; transform: rotate(90deg); }
:is(#bridge-pay, #license-view) .g-corner--br { inset-block-start: auto; inset-block-end: 6px; inset-inline-start: auto; inset-inline-end: 6px; transform: rotate(180deg); }
:is(#bridge-pay, #license-view) .g-corner--bl { inset-block-start: auto; inset-block-end: 6px; transform: rotate(270deg); }
:is(#bridge-pay, #license-view) .g-jewel {
    position: absolute;
    inset-inline-start: calc(50% - 3px);
    inset-block-start: 7px;
    inline-size: 6px;
    block-size: 6px;
    transform: rotate(45deg);
    border: 1px solid #e5b458;
    background: linear-gradient(135deg, #ff8590, #a30e22 45%, #350308);
    pointer-events: none;
}
/* Intrinsic size keeps the inscription centred at every width. The two clipped
   decorative layers form the pointed ends and bevel without clipping text. */
:where(#bridge-pay, #license-view) .g-badge {
    --g-badge-cut: 7px;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    min-block-size: 24px;
    max-inline-size: 100%;
    padding: 4px 12px;
    background: none;
    color: #281807;
    font: 700 11px/1.2 Arial, sans-serif;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 1px 0 #fff2b766;
    vertical-align: middle;
}
:where(#bridge-pay, #license-view) .g-badge::before,
:where(#bridge-pay, #license-view) .g-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(var(--g-badge-cut) 0, calc(100% - var(--g-badge-cut)) 0, 100% 50%, calc(100% - var(--g-badge-cut)) 100%, var(--g-badge-cut) 100%, 0 50%);
}
:where(#bridge-pay, #license-view) .g-badge::before {
    z-index: -2;
    background: linear-gradient(160deg, #ffedaf, #e4b456 34%, #b8792b 68%, #f4cf78);
}
:where(#bridge-pay, #license-view) .g-badge::after {
    --g-badge-cut: 6px;
    z-index: -1;
    inset: 1px;
    background: linear-gradient(180deg, #f9da8b, #efc66e 17%, #e5b95f 58%, #dba54d);
    box-shadow: inset 0 2px 0 #fff5d14d, inset 0 -2px 0 #89531942;
}
@media (forced-colors: active) {
    :where(#bridge-pay, #license-view) .g-badge {
        border: 1px solid CanvasText;
        background: Canvas !important;
        color: CanvasText !important;
        text-shadow: none;
    }
    :where(#bridge-pay, #license-view) .g-badge::before,
    :where(#bridge-pay, #license-view) .g-badge::after { display: none; }
    :is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame) {
        border: 2px solid CanvasText !important;
        background: Canvas !important;
        color: CanvasText !important;
        text-shadow: none;
    }
    :is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::before,
    :is(#bridge-pay, #license-view) :is(.g-plaque, .g-frame)::after,
    :is(#bridge-pay, #license-view) :is(.g-frame-inset, .g-corner, .g-jewel) { display: none; }
}