:root{--primary-color:#0052cc;--primary-hover:#0747a6;--border-color:#dfe1e6;--text-primary:#172b4d;--text-secondary:#6b778c;--background-light:#f4f5f7;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a}.card-designer-wrapper{align-items:flex-start;box-sizing:border-box;display:flex}.card-designer-wrapper,.designer-container{justify-content:center;min-height:100vh;padding:2rem;width:100%}.designer-container{grid-gap:2rem;align-items:start;display:grid;gap:2rem;grid-template-columns:minmax(550px,600px) minmax(800px,1200px);margin:0 auto;max-width:2200px}.designer-controls{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);box-sizing:border-box;height:fit-content;overflow:hidden;padding:2rem;position:sticky;top:20px;width:100%}.control-group{box-sizing:border-box;margin-bottom:1.5rem;width:100%}.control-group:last-child{border-bottom:none}.group-title{color:#172b4d;color:var(--text-primary);font-size:1rem;font-weight:600;justify-content:space-between;margin-bottom:.5rem;position:relative}.designer-canvas,.group-title{align-items:center;display:flex}.designer-canvas{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);box-sizing:border-box;flex-direction:column;height:fit-content;padding:2rem;position:sticky;top:20px;width:110%}.preview-header{border-bottom:1px solid #dfe1e6;border-bottom:1px solid var(--border-color);box-sizing:border-box;display:flex;flex-direction:row;margin-bottom:1rem;padding-bottom:1rem;width:100%}.preview-info{justify-content:space-between;width:100%}.preview-details,.preview-info{align-items:center;display:flex}.preview-details{gap:5px}.dimension-value,.preview-details span{color:#172b4d;color:var(--text-primary);font-size:1rem;font-weight:500}.preview-title{color:#172b4d;color:var(--text-primary);font-size:1.25rem;font-weight:600}.dimensions{color:#6b778c;color:var(--text-secondary);font-size:.875rem}.actual-size{color:#172b4d;color:var(--text-primary);font-weight:600}.canvas-frame{align-items:center;background:#f8f9fa;border-radius:8px;box-sizing:border-box;display:flex;justify-content:center;margin:0;max-width:100%;min-height:500px;padding:2rem;width:100%}.designer-canvas>:not(.canvas-frame){margin-bottom:1rem;width:100%}.canvas-inner{flex-direction:row;gap:20px}.canvas-inner,.card-sides{align-items:center;display:flex;justify-content:center}.card-sides{flex-wrap:nowrap;gap:3rem;padding:1rem;width:100%}.card-side{align-items:center;display:flex;flex:0 0 auto;flex-direction:column}.card-preview{background:#fff;box-shadow:0 6px 32px 0 #0000002e,0 1.5px 6px 0 #0000001f}.card-container,.card-preview{align-items:center;display:flex;justify-content:center;position:relative}.card-container{box-sizing:border-box;height:100%;width:100%}.card-content-wrapper{background:#0000;border-radius:inherit;flex-direction:column;padding:15px;position:relative;z-index:0}.card-content-wrapper,.card-text-display{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%}.card-content{background:#0000;display:inline-block;max-height:90%;max-width:90%;overflow-wrap:break-word;text-align:center;white-space:normal;word-break:break-word}.card-image{max-height:100%;max-width:100%;object-fit:contain;position:absolute;z-index:1}.icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.outer-frame{border:2px solid;border-radius:inherit;bottom:8px;box-sizing:border-box;left:8px;position:absolute;right:8px;top:8px}.with-single-frame .outer-frame{border-color:inherit}.size-indicator{color:#333;font-size:12px;font-weight:500;pointer-events:none}.dimension-line.width-line{border-top:1px dashed #000;margin-right:5px;width:20px}.dimension-line.height-line{border-left:1px dashed #000;height:20px;margin-bottom:5px}.height-indicator,.width-indicator{white-space:nowrap}.width-indicator-wrapper{right:-70px;top:50%;transform:translateY(-50%)}.height-indicator-wrapper,.width-indicator-wrapper{align-items:center;display:flex;position:absolute;z-index:10}.height-indicator-wrapper{flex-direction:column;left:50%;top:-50px;transform:translateX(-50%)}.standard-texture{background:linear-gradient(135deg,#fff,#f8f8f8)}.premium-texture{background:linear-gradient(135deg,#f5f5f5,#e8e8e8);position:relative}.premium-texture:after{background:radial-gradient(circle,#fff3 0,#fff0 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.recycled-texture{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAABJJREFUCJljYGBgYOD///9/BgYGABGDA3QAAAAASUVORK5CYII=) repeat;opacity:.9}.shape-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.shape-option{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;position:relative;text-align:center;transition:all .2s ease}.shape-option:hover{background:#f8faff;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.shape-option.selected,.shape-option:hover{border-color:#0052cc;border-color:var(--primary-color)}.shape-option.selected{background:#f0f7ff}.shape-preview{align-items:center;background:#f8f9fa;border-radius:4px;display:flex;height:100px;justify-content:center;margin-bottom:.75rem;width:100%}.shape-box{background:#fff;border:1px solid #ddd;box-shadow:0 2px 4px #0000000d}.shape-box.rectangle{height:40px;width:28px}.shape-box.circle,.shape-box.square{height:36px;width:36px}.shape-box.circle{border-radius:50%}.shape-name{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.25rem}.shape-dimensions{font-size:.8rem;margin-bottom:.25rem}.shape-dimensions,.shape-info{color:#6b778c;color:var(--text-secondary)}.shape-info{font-size:.75rem}.size-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:.5rem}.size-option{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;transition:all .2s ease}.size-option:hover{background:#f8faff;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.size-option.selected,.size-option:hover{border-color:#0052cc;border-color:var(--primary-color)}.size-option.selected{background:#f0f7ff;box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.size-preview{align-items:center;background:#f3f4f6;border-radius:4px;display:flex;height:100px;justify-content:center;margin-bottom:.75rem;width:100%}.size-box{background:#fff;border:1px solid #ddd;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transition:all .2s ease}.size-option[data-size=small] .size-box{height:56px;width:32px}.size-option[data-size=medium] .size-box{height:72px;width:40px}.size-option[data-size=large] .size-box{height:88px;width:48px}.size-option[data-size=fixed] .size-box{height:40px;width:40px}.size-details{text-align:center}.size-name{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:500;margin-bottom:.25rem}.size-dimensions{font-size:.8rem;margin-bottom:.25rem}.size-dimensions,.size-info{color:#6b778c;color:var(--text-secondary)}.size-info{font-size:.75rem}.backside-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}.backside-option{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;position:relative;text-align:center;transition:all .2s ease}.backside-option.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color)}.backside-preview{align-items:center;background:#f8f9fa;border-radius:4px;display:flex;height:100px;justify-content:center;margin-bottom:.75rem;width:100%}.backside-icon{height:32px;width:32px}.backside-details{text-align:center}.backside-name{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.25rem}.backside-info{color:#6b778c;color:var(--text-secondary);font-size:.75rem}.backside-icon{align-items:center;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px #0000000d;color:#172b4d;color:var(--text-primary);display:flex;font-size:24px;height:48px;justify-content:center;width:48px}.backside-option:hover{box-shadow:0 4px 6px #0000001a;transform:translateY(-2px)}.backside-option.selected .backside-icon{border-color:#0052cc;border-color:var(--primary-color);color:#0052cc;color:var(--primary-color)}.text-control-wrapper{background:#f8f9fa;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;width:100%}.text-input-container{display:flex;flex-direction:column;gap:.5rem}.card-text-input{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;box-sizing:border-box;color:#172b4d;color:var(--text-primary);font-size:.925rem;max-width:100%;min-height:80px;padding:.75rem;resize:vertical;transition:all .2s ease;width:100%}.card-text-input:focus{border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc1a;outline:none}.image-upload-wrapper{margin-top:1rem}.position-control-panel{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;padding:1rem}.control-title{color:#172b4d;color:var(--text-primary);font-size:.875rem;font-weight:600;margin-bottom:1rem}.controls-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin:0 auto;width:fit-content}.control-button{align-items:center;background:#fff;border:1px solid #ddd;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:16px;height:32px;justify-content:center;margin:2px;padding:0;transition:all .2s ease;width:32px}.control-button:hover{background:#f0f0f0;border-color:#ccc}.control-button:active{background:#e0e0e0}.control-button.center{background:#f8f8f8}.scale-controls{align-items:center;border-top:1px solid #dfe1e6;border-top:1px solid var(--border-color);display:flex;gap:.75rem;justify-content:center;margin-top:1rem;padding-top:1rem}.scale-value{color:#6b778c;color:var(--text-secondary);font-size:.875rem;font-weight:500;min-width:45px;text-align:center}.image-upload-section{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;margin-top:1.5rem;padding:1.5rem}.image-upload-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.image-upload-title{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:600}.image-upload-container{align-items:center;background:#f8f9fa;border:2px dashed #dfe1e6;border:2px dashed var(--border-color);border-radius:8px;cursor:pointer;display:flex;justify-content:center;min-height:120px;overflow:hidden;position:relative;transition:all .2s ease;width:100%}.image-upload-container:hover{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color)}.image-upload-content{align-items:center;display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;text-align:center}.upload-icon{color:#0052cc;color:var(--primary-color);height:40px;opacity:.8;width:40px}.upload-text{font-size:.875rem}.upload-hint,.upload-text{color:#6b778c;color:var(--text-secondary)}.upload-hint{font-size:.75rem}.remove-image{align-items:center;background:#ffffffe6;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:50%;color:#6b778c;color:var(--text-secondary);cursor:pointer;display:flex;height:24px;justify-content:center;position:absolute;right:.5rem;top:.5rem;transition:all .2s ease;width:24px}.remove-image:hover{background:#fff;border-color:#dc3545;color:#dc3545}.image-upload-input{display:none}.font-category-selector{align-items:center;display:flex;margin-bottom:1rem;padding:0 28px;position:relative}.font-category-list{-webkit-overflow-scrolling:touch;display:flex;gap:8px;overflow-x:auto;padding:4px 0;scroll-behavior:smooth;scrollbar-width:none;width:100%}.font-category-list::-webkit-scrollbar{display:none}.font-category-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;color:#172b4d;color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-size:.875rem;font-weight:500;gap:6px;overflow:hidden;padding:12px 16px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.font-category-button:not(.selected):after{background:#0052cc;background:var(--primary-color);bottom:0;content:"";height:2px;left:0;position:absolute;transform:scaleX(0);transition:transform .3s ease;width:100%}.font-category-button.selected:after,.font-category-button:not(.selected):hover:after{transform:scaleX(1)}.font-category-button:hover{background:#f8faff;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-2px)}.font-category-button.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color);color:#0052cc;color:var(--primary-color)}.font-preview-text{font-size:20px;line-height:1;margin-right:6px}.font-category-name{font-size:15px;font-weight:500;white-space:nowrap}.font-options-grid{grid-gap:8px;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-top:.5rem;max-height:200px;overflow-y:auto;padding:8px}.font-option{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:8px;transition:all .2s ease}.font-option:hover{background:#f8faff;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.font-option.selected,.font-option:hover{border-color:#0052cc;border-color:var(--primary-color)}.font-option.selected{background:#f0f7ff;box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.font-option .font-preview{font-size:24px}.font-option .font-name{color:#6b778c;color:var(--text-secondary);font-size:13px;margin-top:6px}.icon-category-selector{align-items:center;display:flex;margin-bottom:1rem;padding:0 28px;position:relative}.icon-category-list{-webkit-overflow-scrolling:touch;display:flex;gap:8px;overflow-x:hidden;padding:4px 0;scroll-behavior:smooth;width:100%}.icon-category-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;flex:0 0 auto;gap:6px;overflow:hidden;padding:8px 12px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.icon-category-button:hover{background:#f8faff;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.icon-category-button.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color);color:#0052cc;color:var(--primary-color)}.icon-category-button:not(.selected):after{background:#0052cc;background:var(--primary-color);bottom:0;content:"";height:2px;left:0;position:absolute;transform:scaleX(0);transition:transform .3s ease;width:100%}.icon-category-button.selected:after,.icon-category-button:not(.selected):hover:after{transform:scaleX(1)}.icon-category-button .icon{height:20px;width:20px}.icon-category-button.selected .category-icon{animation:iconPulse 2s infinite}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.category-icon{font-size:18px}.icon-category-name{font-size:13px;font-weight:500;white-space:nowrap}.category-count{background:#e5e7eb;border-radius:10px;color:#4b5563;font-size:11px;margin-left:4px;padding:2px 6px}.icon-category-button.selected .category-count{background:#0052cc;background:var(--primary-color);color:#fff}.icon-options-grid{grid-gap:8px;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));margin-top:12px;max-height:200px;overflow-y:auto;padding:16px}.icon-option{align-items:center;aspect-ratio:1;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:all .2s ease}.icon-option:hover{background:#f8faff;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.icon-option.selected,.icon-option:hover{border-color:#0052cc;border-color:var(--primary-color)}.icon-option.selected{background:#f0f7ff;box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.icon-option .icon{height:24px;object-fit:contain;transition:transform .2s ease;width:24px}.icon-option:hover .icon{transform:scale(1.1)}.icon-option .icon-name{display:none}.icon-option .icon-preview{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.icon-position-options{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:20px}.position-button{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:12px;transition:all .2s ease}.position-button:hover{background-color:#f9fafb;border-color:#d1d5db}.position-button.selected{background-color:#eff6ff;border-color:#3b82f6}.position-preview{aspect-ratio:2.5/1;background:#f9fafb;border-radius:4px;width:100%}.preview-frame{align-items:center;border:1px dashed #d1d5db;display:flex;height:100%;justify-content:center;width:100%}.preview-text{color:#4b5563;font-size:.75rem}.position-label{color:#374151;font-size:.75rem;font-weight:500}.color-controls{display:flex;flex-direction:column;gap:20px}.color-control{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;padding:16px}.color-control label{color:#172b4d;color:var(--text-primary);display:block;font-size:.875rem;font-weight:500;margin-bottom:12px}.color-palette{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(5,1fr);max-height:156px;overflow-y:auto;padding:4px}.color-swatch{border-radius:6px;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);cursor:pointer;height:40px;transition:all .2s ease;width:40px}.color-swatch:hover{box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:scale(1.05)}.color-swatch.selected,.color-swatch:hover{background:#f8faff;border-color:#0052cc;border-color:var(--primary-color)}.color-swatch.selected{box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.extras-grid,.material-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}.extra-button,.material-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;text-align:center;transition:all .2s ease}.extra-button:hover,.material-button:hover{background:#f8faff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.extra-button.selected,.material-button.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.extra-button:disabled,.material-button:disabled{background:#f5f5f5;box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.extra-icon,.material-icon{font-size:1.5rem;margin-bottom:.5rem}.extra-info,.material-info{display:flex;flex-direction:column;gap:.25rem}.extra-title,.material-title{color:#172b4d;color:var(--text-primary);font-weight:600}.extra-desc,.material-desc{color:#6b778c;color:var(--text-secondary);font-size:.875rem}.extra-button:hover .extra-info,.material-button:hover .material-info{transform:translateY(-2px);transition:transform .2s ease}.color-palette.disabled{opacity:.7;pointer-events:none;position:relative}.recycled-overlay{align-items:center;background:#ffffffe6;bottom:0;color:#6b778c;color:var(--text-secondary);display:flex;font-size:.875rem;justify-content:center;left:0;padding:1rem;position:absolute;right:0;text-align:center;top:0}.recycled-texture{background-color:#e5d3b3!important;background-image:repeating-linear-gradient(45deg,#8b45130d,#8b45130d 2px,#0000 0,#0000 4px),repeating-linear-gradient(-45deg,#8b45130d,#8b45130d 2px,#0000 0,#0000 4px),linear-gradient(90deg,#deb88726,#0000 1px,#deb88726 2px),radial-gradient(circle at 50% 50%,#8b45131a 0,#0000 1%),linear-gradient(to bottom right,#deb88733,#8b45131a);background-position:0 0,0 0,0 0,0 0,0 0;background-size:8px 8px,8px 8px,4px 4px,8px 8px,100% 100%;pointer-events:none}.punch-hole{background:#fff;border:2px solid #ddd;box-shadow:0 1px 4px #00000014,inset 0 1px 4px 1px #0000002e,inset 0 -1px 2px 0 #ffffff1f}.string-attachment .punch-hole,.string-attachment+.punch-hole{display:none!important}.string-attachment{border-radius:2px;box-shadow:0 2px 6px 0 #0000001a;height:38px;left:50%;position:absolute;top:-14px;top:calc(var(--hole-top, -30px) + var(--hole-size, 16px));transform:translateX(-50%);width:2.5px;z-index:1}.string-attachment:not(.organic){background:linear-gradient(180deg,#666c 0,#444444e6 40%,#444)}.string-attachment.organic{background:#f5ecd6}.string-attachment .string-shadow{background:radial-gradient(circle,#0000002e 0,#0000 80%);border-radius:50%;bottom:0;height:8px;left:50%;position:absolute;transform:translateX(-50%);width:8px;z-index:2}.application-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:1rem}.application-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;transition:all .2s ease}.application-button:hover{background:#f8faff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.application-button.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.method-icon{align-items:center;background:#f3f4f6;border-radius:6px;color:#172b4d;color:var(--text-primary);display:flex;font-size:1.2rem;height:40px;justify-content:center;margin-bottom:.5rem;width:40px}.application-info{text-align:center}.application-title{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:500;margin-bottom:.25rem}.application-desc{color:#6b778c;color:var(--text-secondary);font-size:.8rem}.string-type-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:1rem}.string-type-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;transition:all .2s ease}.string-type-button:hover{background:#f8faff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.string-type-button.selected{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.string-type-button:disabled{background:#f5f5f5;border-color:#ddd;box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.string-type-icon{align-items:center;background:#f3f4f6;border-radius:6px;color:#172b4d;color:var(--text-primary);display:flex;font-size:1.2rem;height:40px;justify-content:center;margin-bottom:.5rem;width:40px}.string-type-info{text-align:center}.string-type-title{color:#172b4d;color:var(--text-primary);font-size:.9rem;font-weight:500;margin-bottom:.25rem}.string-type-desc{color:#6b778c;color:var(--text-secondary);font-size:.8rem}.frame-style-buttons{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-top:.5rem}.frame-button{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:1rem;transition:all .2s ease}.frame-button:hover{background:#f8faff;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.frame-button.selected,.frame-button:hover{border-color:#0052cc;border-color:var(--primary-color)}.frame-button.selected{background:#f0f7ff;box-shadow:0 0 0 2px #0052cc;box-shadow:0 0 0 2px var(--primary-color)}.frame-preview{align-items:center;background:#f3f4f6;border-radius:4px;display:flex;height:60px;justify-content:center;margin-bottom:.5rem;position:relative;width:60px}.frame-preview.none-frame,.frame-preview.single-frame,.frame-preview.with-none-frame,.frame-preview.with-single-frame{background:repeating-linear-gradient(135deg,#f8f6f2,#f8f6f2 8px,#f3ede2 0,#f3ede2 16px);border:1.5px solid #e2e2e2;box-shadow:0 2px 8px 0 #0000001a,0 1.5px 6px 0 #0000001f}.frame-preview.single-frame,.frame-preview.with-single-frame{position:relative}.frame-preview.single-frame .outer-frame,.frame-preview.with-single-frame .outer-frame{border:2.5px solid #bdbdbd;border-radius:inherit;bottom:10px;box-sizing:border-box;left:10px;pointer-events:none;position:absolute;right:10px;top:10px}.preview-content{background:#fff;height:40px;width:40px}.price-container{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.quantity-control{align-items:center;display:flex;gap:1rem}.quantity-control label{color:#172b4d;color:var(--text-primary);font-size:.875rem;font-weight:500}.quantity-input{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:6px;cursor:text;font-size:.875rem;padding:.5rem;width:100px}.quantity-input:focus{border-color:#0052cc;border-color:var(--primary-color);box-shadow:0 0 0 2px #0052cc1a}.price-details{display:flex;flex-direction:column;gap:.5rem}.price-row{color:#6b778c;color:var(--text-secondary);display:flex;font-size:.875rem;justify-content:space-between}.price-row.total{color:#172b4d;color:var(--text-primary);font-size:1.125rem;font-weight:600}.price-with-discount{align-items:center;display:flex;gap:.5rem}.discount-info{background:#d1fae5;border-radius:12px;color:#047857!important;display:block;font-size:.85em;font-weight:500;margin-left:0;padding:3px 10px;text-align:left;width:fit-content}.add-to-cart-button{background:#0052cc;background:var(--primary-color);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:.75rem;padding:.75rem 1.5rem;transition:background .2s ease}.add-to-cart-button:hover{background:#0747a6;background:var(--primary-hover)}.add-to-cart-button:disabled{background:#a0aec0;cursor:not-allowed}.add-to-cart-button.loading{background:#a0aec0;cursor:wait}.scroll-button{align-items:center;background:#fff;border:none;border-radius:6px;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);color:#6b778c;color:var(--text-secondary);cursor:pointer;display:flex;height:28px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:28px;z-index:1}.scroll-button:hover:not(:disabled){box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);color:#0052cc;color:var(--primary-color);transform:translateY(-50%) scale(1.05)}.scroll-button:active:not(:disabled){transform:translateY(-50%) scale(.95)}.scroll-button:disabled{cursor:not-allowed;opacity:.3}.scroll-button.left{left:0}.scroll-button.right{right:0}.help-icon{align-items:center;background:#e5e7eb;border-radius:50%;color:#6b7280;cursor:help;display:inline-flex;font-size:12px;height:16px;justify-content:center;margin-left:8px;transition:all .2s ease;width:16px}.help-icon:hover{background:#d1d5db;color:#374151}.tooltip{border-radius:6px;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);color:#fff;font-size:12px;font-weight:400;max-width:250px;opacity:0;padding:8px 12px;right:0;top:calc(100% + 8px);transition:opacity .2s ease,visibility .2s ease;visibility:hidden;width:max-content;z-index:1000}.tooltip,.tooltip:before{background:#1f2937;position:absolute}.tooltip:before{content:"";height:8px;right:8px;top:-4px;transform:rotate(45deg);width:8px}.help-icon:hover .tooltip{opacity:1;visibility:visible}.overlay{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.overlay-content{background:#fff;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);max-width:400px;padding:2rem;text-align:center}.overlay-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.overlay-buttons button{border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.overlay-buttons .confirm-button{background:#0052cc;background:var(--primary-color);border:none;color:#fff}.overlay-buttons .confirm-button:hover{background:#0747a6;background:var(--primary-hover)}.overlay-buttons .cancel-button{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);color:#172b4d;color:var(--text-primary)}.overlay-buttons .cancel-button:hover{background:#f8faff;border-color:#0052cc;border-color:var(--primary-color)}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width:1260px){.designer-container{gap:1.5rem;grid-template-columns:1fr}.designer-controls{width:100%}.designer-canvas{position:relative;top:0}.canvas-frame{padding:1.5rem}}@media (max-width:768px){.card-designer-wrapper{padding:1rem}.canvas-inner{flex-direction:column;gap:20px}.canvas-frame{max-width:400px}.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.extras-grid,.material-options,.shape-options,.size-options{grid-template-columns:repeat(2,1fr)}.application-options,.frame-style-buttons{grid-template-columns:1fr}.icon-position-selector{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.card-designer-wrapper,.control-group{padding:.5rem}.font-category-selector,.icon-category-selector{padding:0 20px}.scroll-button{height:20px;width:20px}.scroll-button svg{height:12px;width:12px}.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.extras-grid,.material-options,.shape-options,.size-options{grid-template-columns:1fr}}@media (max-width:360px){.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}}.order-section{align-items:stretch;background:none;border-radius:0;border-top:1px solid #e5e7eb;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;margin:40px 0 0;padding:24px 0;width:100%}.order-quantity-row{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-start;margin-bottom:18px}.order-label{color:#1a2341;font-weight:600;margin-right:0;min-width:90px}.order-label,.order-quantity{font-size:18px;margin-bottom:0}.order-quantity{border:1px solid #e0e0e0;border-radius:8px;box-sizing:border-box;max-width:320px;padding:8px 12px;width:100%}.order-total-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.order-total-label{color:#0057ff;font-size:20px;font-weight:700;margin-right:8px}.order-total-value{color:#0057ff;font-size:28px;font-weight:700;text-align:right}.order-per-piece{color:#6c768a;font-size:15px;margin-bottom:18px;margin-top:2px;text-align:right}.order-add-to-cart{background:#0057ff;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:22px;font-weight:600;margin-top:18px;padding:16px 0;transition:background .2s;width:100%}.order-add-to-cart:disabled{background:#cfd6df;cursor:not-allowed}.frame-style-buttons .frame-button span{font-weight:500}.frame-style-buttons .frame-button:first-child span{content:"No Frame"}.frame-style-buttons .frame-button:last-child span{content:"Single Frame"}.frame-size-preview{align-items:center;background:#f3f4f6;display:flex;height:60px;justify-content:center;margin:0;position:relative;width:100%}.frame-size-box{background:#fff;border:1.5px solid #ddd;border-radius:0;box-shadow:0 2px 4px #0000000d;height:48px;position:relative;width:32px;z-index:1}.size-box-frame{border:2px solid #000;border-radius:0;bottom:3px;left:3px;pointer-events:none;position:absolute;right:3px;top:3px;z-index:2}@media (max-width:1260px){.designer-container{gap:1.5rem;grid-template-columns:1fr}.designer-canvas,.designer-controls{position:static;width:100%}.canvas-frame{padding:1.5rem}}@media (max-width:768px){.card-designer-wrapper,.designer-container{padding:1rem}.canvas-inner{flex-direction:column;gap:20px}.canvas-frame{max-width:400px}.card-sides{flex-direction:column;gap:2rem}.application-options,.backside-options,.extras-grid,.material-options,.shape-options,.size-options,.string-type-options{grid-template-columns:repeat(2,1fr)}.frame-style-buttons{grid-template-columns:1fr}.icon-position-options{grid-template-columns:repeat(2,1fr)}.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.color-palette{grid-template-columns:repeat(4,1fr)}}@media (max-width:480px){.card-designer-wrapper{padding:.5rem}.designer-canvas,.designer-controls{padding:1rem}.control-group{padding:.5rem}.font-category-selector,.icon-category-selector{padding:0 20px}.scroll-button{height:20px;width:20px}.scroll-button svg{height:12px;width:12px}.application-options,.backside-options,.extras-grid,.material-options,.shape-options,.size-options,.string-type-options{grid-template-columns:1fr}.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.color-palette{grid-template-columns:repeat(3,1fr)}.card-text-input{font-size:.875rem;padding:.5rem}.preview-title{font-size:1.125rem}.dimension-value,.preview-details span{font-size:.875rem}}@media (max-width:360px){.font-options-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.icon-options-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.canvas-frame{padding:1rem}.group-title{font-size:.875rem}.application-title,.backside-name,.extra-title,.material-title,.shape-name,.size-name,.string-type-title{font-size:.85rem}.application-desc,.backside-info,.extra-desc,.material-desc,.shape-dimensions,.size-dimensions,.string-type-desc{font-size:.75rem}}@media (max-width:600px){.order-section{padding:0 0 16px}.order-quantity-row{align-items:stretch;flex-direction:column;gap:4px}.order-label{margin-bottom:4px}.order-quantity{max-width:100%}.order-total-row{align-items:flex-end;flex-direction:column;gap:2px}.order-total-label,.order-total-value{font-size:18px}.order-add-to-cart{font-size:18px;padding:12px 0}}.mobile-preview-tab{display:none}@media (max-width:768px){.mobile-preview-tab{background:#0052cc;background:var(--primary-color);border:none;border-radius:12px 12px 0 0;bottom:0;box-shadow:0 -2px 12px #00000014;color:#fff;cursor:pointer;display:block;font-size:18px;font-weight:600;left:0;padding:16px;position:fixed;right:0;transition:all .3s ease;width:100%;z-index:3000}.mobile-preview-tab:active{background:#0747a6;background:var(--primary-hover)}.mobile-preview-tab.close-preview{background:#dc3545}.mobile-preview-tab.close-preview:active{background:#c82333}}.mobile-preview-modal{display:none}@media (max-width:768px){.mobile-preview-modal{animation:slideUpPreview .35s cubic-bezier(.4,0,.2,1);background:#00000052;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;position:fixed;right:0;top:0;z-index:2000}.mobile-preview-modal>div{animation:fadeInPreview .3s;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -2px 16px #0000001f;max-height:90vh;min-height:60vh;overflow-y:auto;padding:16px 8px 80px;position:relative}.mobile-preview-modal .designer-canvas{border-radius:0;box-shadow:none;margin:0;padding:0}.mobile-preview-modal .canvas-inner{align-items:center!important;flex-direction:column!important;gap:20px!important;justify-content:center!important}.mobile-preview-modal .side-label{font-size:15px;margin-bottom:12px}.mobile-preview-modal .card-preview{margin-bottom:0}.mobile-preview-modal .preview-header{margin-bottom:.5rem;padding-bottom:.5rem}.mobile-preview-modal .canvas-frame{max-width:100%;min-height:300px;padding:.5rem}.mobile-preview-modal .dimension-value{font-size:.95rem}.mobile-preview-modal .order-total-row{align-items:center;display:flex;gap:.5rem;justify-content:space-between;margin-bottom:0}.mobile-preview-modal .order-total-label{color:#0057ff;font-size:18px;font-weight:700;margin-right:0}.mobile-preview-modal .order-total-value{color:#0057ff;font-size:28px;font-weight:700;text-align:right}.mobile-preview-modal .price-with-discount{align-items:center;display:flex;gap:.5rem;justify-content:flex-end}}@keyframes slideUpPreview{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInPreview{0%{opacity:0}to{opacity:1}}@media (max-width:1024px){.designer-container{gap:1.2rem;grid-template-columns:1fr 1fr;max-width:100vw;padding:1.2rem}.designer-controls{max-width:100%}.designer-canvas,.designer-controls{border-radius:10px;box-sizing:border-box;min-width:0;padding:1.2rem;width:100%}.canvas-frame,.designer-canvas{max-width:100vw}.canvas-frame{border-radius:8px;min-height:320px;padding:.75rem}.canvas-inner{flex-wrap:wrap;gap:24px;max-width:100vw}.order-section{border-radius:8px;box-sizing:border-box;margin:24px 0 0;padding:18px 0 0}.order-quantity-row{gap:10px}.order-quantity{border-radius:10px;font-size:18px;min-height:44px;padding:10px 14px}.order-add-to-cart{border-radius:12px;font-size:20px;margin-top:18px;padding:16px 0}}@media (max-width:900px){.designer-container{gap:1rem;grid-template-columns:1fr;max-width:100vw;padding:1rem}.designer-controls{max-width:100%}.designer-canvas,.designer-controls{border-radius:8px;box-sizing:border-box;min-width:0;padding:1rem;width:100%}.canvas-frame,.designer-canvas{max-width:100vw}.canvas-frame{border-radius:6px;min-height:220px;padding:.5rem}.canvas-inner{flex-wrap:wrap;gap:16px;max-width:100vw}.order-section{border-radius:6px;box-sizing:border-box;margin:18px 0 0;padding:12px 0 0}.order-quantity-row{gap:8px}.order-quantity{border-radius:9px;font-size:17px;min-height:40px;padding:9px 12px}.order-add-to-cart{border-radius:10px;font-size:18px;margin-top:14px;padding:14px 0}}@media (max-width:600px){.designer-container{gap:.75rem;grid-template-columns:1fr;max-width:100vw;padding:.5rem}.designer-controls{max-width:100%}.designer-canvas,.designer-controls{border-radius:6px;box-sizing:border-box;min-width:0;padding:.5rem;width:100%}.canvas-frame,.designer-canvas{max-width:100vw}.canvas-frame{border-radius:4px;min-height:120px;padding:.25rem}.canvas-inner{flex-wrap:wrap;gap:8px;max-width:100vw}.order-section{border-radius:4px;box-sizing:border-box;margin:8px 0 0;padding:6px 0 0}.order-quantity-row{gap:4px}.order-quantity{border-radius:6px;font-size:15px;min-height:32px;padding:7px}.order-add-to-cart{border-radius:6px;font-size:15px;margin-top:8px;padding:8px 0}.preview-header{font-size:.95rem;margin-bottom:.5rem;padding-bottom:.5rem}}.htd-two-sided-section{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;margin-top:1rem;padding:1rem}.htd-sides-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:900px){.htd-sides-grid{grid-template-columns:1fr}}.htd-side-col{background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;gap:12px;padding:12px}.htd-side-title{font-size:.95rem}.htd-side-title,.htd-text-launch-btn{color:#172b4d;color:var(--text-primary);font-weight:600}.htd-text-launch-btn{background:#f8f9fa;border:2px dashed #dfe1e6;border:2px dashed var(--border-color);border-radius:8px;cursor:pointer;min-height:48px;transition:all .2s ease;width:100%}.htd-text-launch-btn:hover{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color)}.htd-text-panel{background:#f8f9fa;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;gap:12px;padding:12px}.htd-text-panel-header{align-items:center;color:#172b4d;color:var(--text-primary);display:flex;font-weight:600;gap:8px;justify-content:space-between}.htd-close-btn{align-items:center;background:#fff;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:50%;color:#6b778c;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:24px;justify-content:center;line-height:1;transition:all .2s ease;width:24px}.htd-close-btn:hover{background:#fff;border-color:#dc3545;color:#dc3545}.htd-upload-input{display:none}.htd-upload-box{align-items:center;background:#f8f9fa;border:2px dashed #dfe1e6;border:2px dashed var(--border-color);border-radius:8px;cursor:pointer;display:flex;justify-content:center;min-height:120px;overflow:hidden;position:relative;transition:all .2s ease;width:100%}.htd-upload-box:hover{background:#f0f7ff;border-color:#0052cc;border-color:var(--primary-color)}.htd-upload-content{align-items:center;display:flex;flex-direction:column;gap:8px;padding:15px;text-align:center}.htd-upload-icon{color:#0052cc;color:var(--primary-color);height:32px;opacity:.8;width:32px}.htd-upload-text{color:#172b4d;color:var(--text-primary);font-size:12px;font-weight:600}.htd-upload-hint{color:#6b778c;color:var(--text-secondary);font-size:10px}.htd-upload-preview{background:#fff;height:100%;inset:0;object-fit:contain;position:absolute;width:100%}.htd-remove-btn{align-items:center;background:#fffffff2;border:1px solid #dfe1e6;border:1px solid var(--border-color);border-radius:50%;color:#6b778c;color:var(--text-secondary);cursor:pointer;display:inline-flex;height:24px;justify-content:center;position:absolute;right:8px;top:8px;transition:all .2s ease;width:24px;z-index:2}.htd-remove-btn:hover{background:#fff;border-color:#dc3545;color:#dc3545}.htd-sides-grid.single{grid-template-columns:1fr}.htd-sides-grid.single .htd-side-col{width:100%}.htd-side-col,.htd-sides-grid,.htd-two-sided-section{box-sizing:border-box;max-width:100%;overflow:visible;width:100%}.htd-text-panel,.htd-upload-box,.position-control-panel,.text-input-container{box-sizing:border-box;width:100%}
/*# sourceMappingURL=main.cfaeaf44.css.map*/