.complementary-variant-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999}.complementary-variant-modal.active{display:flex;align-items:center;justify-content:center}.complementary-variant-modal__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;cursor:pointer}.complementary-variant-modal__wrapper{position:relative;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:8px;z-index:10000;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.complementary-variant-modal__close{position:absolute;top:16px;right:16px;background:#fff;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;color:#333;box-shadow:0 2px 8px #0000001a;z-index:10001;transition:background .2s}.complementary-variant-modal__close:hover{background:#f5f5f5}.complementary-variant-modal__product{padding:24px}.complementary-variant-modal__header{display:flex;gap:16px;margin-bottom:24px}.complementary-variant-modal__image{width:120px;height:120px;object-fit:cover;border-radius:8px;flex-shrink:0}.complementary-variant-modal__info{flex:1}.complementary-variant-modal__title{margin:0 0 8px;font-size:18px;font-weight:600;color:#333;line-height:1.3}.complementary-variant-modal__price{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#333}.complementary-variant-modal__price--compare{text-decoration:line-through;color:#999;font-weight:400}.complementary-variant-modal__options{margin-bottom:24px}.complementary-variant-option{margin-bottom:20px}.complementary-variant-option__label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#333}.complementary-variant-option__buttons{display:flex;flex-wrap:wrap;gap:8px}.complementary-variant-option__button{padding:10px 16px;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;color:#333;transition:all .2s;min-width:50px;text-align:center}.complementary-variant-option__button:hover:not(:disabled){border-color:#333}.complementary-variant-option__button.selected{border-color:#333;background:#333;color:#fff}.complementary-variant-option__button:disabled{opacity:.4;cursor:not-allowed}.complementary-variant-option__button--color{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;position:relative}.complementary-variant-option__button--color.selected:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid #333;border-radius:50%}.complementary-variant-modal__quantity{margin-bottom:24px}.complementary-variant-modal__quantity-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#333}.complementary-quantity-selector{display:flex;align-items:center;border:2px solid #ddd;border-radius:4px;width:fit-content}.complementary-quantity-selector__button{background:#fff;border:none;width:40px;height:40px;cursor:pointer;font-size:18px;color:#333;transition:background .2s}.complementary-quantity-selector__button:hover{background:#f5f5f5}.complementary-quantity-selector__input{width:60px;height:40px;border:none;border-left:2px solid #ddd;border-right:2px solid #ddd;text-align:center;font-size:14px;font-weight:600}.complementary-variant-modal__add-button{width:100%;padding:16px;background:#333;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.complementary-variant-modal__add-button:hover:not(:disabled){background:#000}.complementary-variant-modal__add-button:disabled{background:#ccc;cursor:not-allowed}.complementary-variant-modal__add-button--loading{position:relative;color:transparent}.complementary-loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.complementary-variant-modal__message{margin-top:16px;padding:12px;border-radius:4px;font-size:14px;text-align:center}.complementary-variant-modal__message--success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.complementary-variant-modal__message--error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@media (max-width: 640px){.complementary-variant-modal__wrapper{max-width:100%;width:100%;max-height:100vh;border-radius:0}.complementary-variant-modal__header{flex-direction:column}.complementary-variant-modal__image{width:100%;height:200px}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/complementary-variant-modal.css.map */