.add_on_modal_overlay{position:fixed;top:0;left:0;width:100%;height:100%;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1;opacity:0;user-select:none;pointer-events:none;transition:all .5s ease}.add_on_modal_overlay.active{opacity:1;user-select:auto;pointer-events:all}.add_on_modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #e6e6e6;border-radius:4px;opacity:0;user-select:none;pointer-events:none;z-index:2;background-color:#fff;max-width:856px;width:100%;min-height:300px;max-height:500px;padding:1rem;box-shadow:0 1px 3px 0 #3333331f;transition:all .5s ease}.add_on_modal.active{opacity:1;user-select:auto;pointer-events:all}.add_on_modal_header{display:flex;gap:10px;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.add_on_modal_header .title{font-weight:600;font-size:1.125rem;line-height:1.75rem}.add_on_modal_header .close{color:#01a9f2}.add_on_modal_body{padding:1rem 0;min-height:200px;max-height:420px;overflow-y:auto;overflow-x:hidden}.card_wrapper{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}.card_wrapper .card{width:124px;min-height:182px;border:1px solid #e6e6e6;border-radius:.125rem;overflow:hidden;cursor:pointer;transition:all .3s ease}.card_wrapper .card:hover{transform:scale(1.05)}.card_wrapper .card .image_wrapper{width:124px;height:124px}.card_wrapper .card .image_wrapper img{width:100%;height:100%;object-fit:cover}.card_wrapper .card .description_wrapper{border-top:2px solid #e6e6e6;padding:8px}@media (max-width:1024px){.add_on_modal{max-width:90vw}}