.design-selection-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:none;opacity:0;visibility:hidden;z-index:9999;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .3s ease,visibility .3s ease,backdrop-filter .3s ease}.design-selection-modal.is-open{display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible}.design-selection-modal.is-open .design-modal-content{display:flex!important;opacity:1!important;visibility:visible!important;transform:scale(1) translateY(0)!important}body.modal-open{overflow:hidden}.design-modal-content{background-color:#fff;padding:24px;border-radius:16px;box-shadow:0 10px 30px #0003;max-width:90%;width:90%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;position:relative;transform:scale(.9) translateY(-20px);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}.design-selection-modal.is-open .design-modal-content{transform:scale(1) translateY(0)}.design-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:0;border-bottom:none}.design-modal-title{font-size:1.75em;color:#333;margin:0;font-weight:600}.close-modal-button{background:none;border:none;font-size:2.2em;cursor:pointer;color:#999;transition:color .2s ease,transform .2s ease;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.close-modal-button:hover{color:#666;transform:scale(1.1)}.design-modal-grid-container{flex-grow:1;overflow-y:auto;padding-right:8px;margin-right:-8px}.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18%,1fr));gap:5px;padding-bottom:16px}.design-card{display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #e5e5e5;border-radius:12px;padding:4px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;position:relative;overflow:hidden;background-color:#fafafa}.design-card-image{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:none}.design-card-name{display:none}.design-card:hover{border-color:#bbb;box-shadow:0 4px 12px #00000026}.design-card.selected{border-color:#007bff!important;background-color:#f0f8ff;box-shadow:0 0 0 2px #007bff33,0 4px 12px #007bff26}.design-card:active{transform:translateY(0) scale(.98);transition:transform .1s ease}.design-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.design-modal-footer button{padding:10px 20px;border-radius:25px;border:1px solid;cursor:pointer;font-size:1em;transition:all .2s ease}.design-modal-footer .cancel-button{background-color:#f0f0f0;color:#333;border-color:#ccc}.design-modal-footer .cancel-button:hover{background-color:#e0e0e0}.design-modal-footer .select-button{background-color:#007bff;color:#fff;border-color:#007bff}.design-modal-footer .select-button:hover{background-color:#0056b3;border-color:#0056b3}.design-modal-footer .select-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 1200px){.design-grid{grid-template-columns:repeat(auto-fill,minmax(20%,1fr));gap:5px}}@media (max-width: 992px){.design-grid{grid-template-columns:repeat(auto-fill,minmax(25%,1fr));gap:5px}.design-modal-content{padding:20px}}@media (max-width: 768px){.design-modal-content{padding:16px;max-width:95%;max-height:85vh}.design-modal-title{font-size:1.5em}.design-grid{grid-template-columns:repeat(auto-fill,minmax(30%,1fr));gap:5px}}@media (max-width: 576px){.design-modal-content{padding:12px}.design-modal-title{font-size:1.3em}.design-grid{grid-template-columns:repeat(auto-fill,minmax(30%,1fr));gap:5px}.design-card{padding:4px}}@media (max-width: 400px){.design-grid{grid-template-columns:repeat(auto-fill,minmax(30%px,1fr))}}.design-modal-grid-container::-webkit-scrollbar{width:6px}.design-modal-grid-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.design-modal-grid-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.design-modal-grid-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
/*# sourceMappingURL=/cdn/shop/t/8/assets/design-selection-modal.css.map */