.icon{background-color:currentColor;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon--clickable{cursor:pointer}
.modal__overlay{z-index:9999;padding:var(--padding-lg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0006;justify-content:center;align-items:center;animation:.2s modal-fade-in;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background-color:var(--color-white-cream);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:90dvh;padding:var(--padding-lg);box-shadow:var(--shadow-lg);animation:.25s modal-slide-up;position:relative;overflow-y:auto}.modal__header{margin-bottom:var(--gap-lg);justify-content:space-between;align-items:center;display:flex}.modal__title{font-family:var(--font-family);font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-dark-brown);margin:0}.modal__close{border-radius:var(--radius-full);cursor:pointer;width:36px;height:36px;transition:background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.modal__close:hover{background-color:var(--color-cream)}.modal__body{flex-direction:column;display:flex}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.modal__overlay{padding:var(--padding-sm)}.modal{padding:var(--padding-md)}}