.apply-artwork-banner{display:flex;flex-direction:column;gap:8px;margin-top:8px;width:100%}.apply-artwork-banner__form,.apply-artwork-banner__colors{width:100%;padding:8px 10px;background:#f6f6f7;border:1px solid #dbdadf;border-radius:8px;box-sizing:border-box}.apply-artwork-banner__form{display:flex;flex-direction:column;gap:6px}.apply-artwork-banner__row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%;min-width:0}.apply-artwork-banner__field{display:inline-flex;align-items:center;gap:6px;min-width:0}.apply-artwork-banner__field--product{flex:1 1 0;min-width:0}.apply-artwork-banner__field--size{flex:0 0 auto}.apply-artwork-banner__label{font-size:12px;line-height:16px;color:#6f6f6f;white-space:nowrap}.apply-artwork-banner__select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #dbdadf;border-radius:6px;padding:6px 24px 6px 8px;font-size:13px;line-height:18px;color:#2c2c2c;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'><path d='M3 4.5l3 3 3-3' stroke='%232c2c2c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px;min-width:0;flex:1 1 auto}.apply-artwork-banner__select--size{flex:0 0 auto;width:52px;padding-right:18px;background-position:right 4px center}.apply-artwork-banner__select:disabled{opacity:.6;cursor:not-allowed}.apply-artwork-banner__apply{position:relative;display:inline-flex;align-items:center;justify-content:center;background:#6767ff;color:#fff;border:0;border-radius:6px;padding:7px 12px;font-weight:500;font-size:13px;line-height:18px;cursor:pointer;white-space:nowrap;flex:0 0 auto}.apply-artwork-banner__apply--loading .apply-artwork-banner__apply-label{visibility:hidden}.apply-artwork-banner__apply:disabled{opacity:.5;cursor:not-allowed}.apply-artwork-banner__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:apply-artwork-banner-spin .7s linear infinite}@keyframes apply-artwork-banner-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.apply-artwork-banner__colors{display:flex;flex-direction:column;gap:6px}.apply-artwork-banner__colors--enter,.apply-artwork-banner__colors--leave{overflow:hidden;transition:max-height .26s ease,opacity .2s ease,padding .22s ease,border-width .22s ease,margin-top .22s ease}.apply-artwork-banner__colors--enter-start,.apply-artwork-banner__colors--leave-end{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;margin-top:-8px}.apply-artwork-banner__colors--enter-end,.apply-artwork-banner__colors--leave-start{max-height:480px;opacity:1;margin-top:0}.apply-artwork-banner__color-label{margin:0;font-size:12px;line-height:16px;color:#6f6f6f;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.apply-artwork-banner__color-selected{font-weight:500;color:#2c2c2c}.apply-artwork-banner__color-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-wrap:wrap;gap:8px}.apply-artwork-banner__color-item{display:flex;align-items:center;justify-content:center;width:32px;min-width:32px;max-width:32px;height:32px;cursor:pointer;border:1px solid transparent;border-radius:8px;box-sizing:border-box}.apply-artwork-banner__color-item>span{width:24px;height:24px;border-radius:6px;border:1px solid transparent;display:block}.apply-artwork-banner__color-item--selected{border-color:#2c2c2c}.apply-artwork-banner__color-item .complex-color-sample{display:flex;width:24px;height:24px;border-radius:6px;overflow:hidden;border:1px solid #dbdadf}.apply-artwork-banner__color-item .color-part-front,.apply-artwork-banner__color-item .color-part-back,.apply-artwork-banner__color-item .color-part-visor{flex:1;height:100%}.apply-artwork-banner__error{margin:0;font-size:13px;line-height:18px;color:#b00020}@media(max-width:480px){.apply-artwork-banner{gap:6px}.apply-artwork-banner__form,.apply-artwork-banner__colors{padding:6px 8px}.apply-artwork-banner__row{gap:6px}.apply-artwork-banner__select--size{width:48px}}@media(max-width:425px){.apply-artwork-banner__form{position:relative;padding-top:24px}.apply-artwork-banner__label{position:absolute;top:4px;left:50%;transform:translate(-50%);margin:0}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/apply-artwork-banner.css.map */