/* Frontend only: the two palette samples remain editable in Spectra. */
.voucher-state-design-templates { display:none!important; }

/* No padding, border-width or size changes: selection cannot reflow a tile. */
.voucher-amount-template .voucher-tile,
.vs-template-option, .vs-delivery-option, .vs-delivery-spectra-option {
    position:relative;
}
.voucher-amount-template .voucher-tile[aria-pressed="true"],
.vs-template-option[aria-pressed="true"],
.vs-delivery-option[aria-pressed="true"],
.vs-delivery-spectra-option[aria-pressed="true"] {
    outline:2px solid var(--voucher-selected-color,#183d25)!important;
    outline-offset:0;
    border-color:var(--voucher-selected-color,#183d25)!important;
    /* Keep each tile's original background from Spectra or its base styles. */
}
/* Decorative tick; aria-pressed carries the same state to assistive technology.
   Absolute positioning keeps amount/custom-price text and tile dimensions intact. */
.voucher-amount-template .voucher-tile[aria-pressed="true"]::after,
.vs-template-option[aria-pressed="true"]::after,
.vs-delivery-option[aria-pressed="true"]::after,
.vs-delivery-spectra-option[aria-pressed="true"]::after {
    content:"";
    position:absolute;
    top:3px;
    right:3px;
    width:14px;
    height:14px;
    border:0;
    border-radius:50%;
    background-color:var(--voucher-selected-color,#183d25);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:14px 14px;
    background-repeat:no-repeat;
    pointer-events:none;
    z-index:1;
}
/* Keyboard focus has its own indicator; the tick still shows the selected choice. */
.voucher-amount-template .voucher-tile:focus-visible,
.vs-template-option:focus-visible,
.vs-delivery-option:focus-visible,
.vs-delivery-spectra-option:focus-visible,
.voucher-amount-template .voucher-tile:has(.voucher-custom-price-input:focus-visible) {
    outline:3px solid #2563eb!important;
    outline-offset:4px;
}