.modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .75); color: var(--grey); font: inherit; }
.modal::backdrop { background: transparent; }
.modal[open].visible { display: flex; }
.modal.visible { animation: modal-backdrop-in var(--motion-modal-in) ease both; }
.modal.visible .modal__content { animation: modal-content-in var(--motion-modal-in) var(--motion-ease) both; }
.modal.visible.closing { animation: modal-backdrop-out var(--motion-modal-out) ease both; }
.modal.visible.closing .modal__content { animation: modal-content-out var(--motion-modal-out) ease both; }
.modal__content { zoom: var(--s); width: 328px; max-width: calc(var(--vw) - 32px / var(--s)); max-height: calc(var(--vh) - 32px / var(--s)); padding-bottom: 20px; overflow: auto; border-radius: 32px; background: #fff; }
.modal__header { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; margin: 0 16px; border-bottom: 1px solid var(--separator); }
.modal__heading { margin: 0; color: var(--green); font-size: 16px; font-weight: 700; line-height: 14px; }
.modal__close { position: absolute; right: 6px; width: 32px; height: 32px; background: url("../images/figma/modal-close.svg") center / 8px 8px no-repeat; }
.modal__barcode { display: block; width: 200px; max-width: calc(100% - 32px); height: 112px; margin: 16px auto; }
.modal__barcode[hidden] { display: none; }
.modal__description { margin: 0 16px; color: var(--grey); font-size: 14px; font-weight: 500; line-height: 16px; text-align: center; }
.modal__description strong { color: var(--green); font-weight: 500; }
.modal__expires { min-height: 12px; margin: 16px 16px 0; color: var(--grey); font-size: 10px; font-weight: 400; line-height: 12px; text-align: center; }

@keyframes modal-backdrop-in {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, .75); }
}

@keyframes modal-backdrop-out {
    from { background-color: rgba(0, 0, 0, .75); }
    to { background-color: rgba(0, 0, 0, 0); }
}

@keyframes modal-content-in {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modal-content-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(.97); }
}