* {   margin:0;   padding:0;   box-sizing:border-box; }  html {   -webkit-text-size-adjust:100%;   -ms-text-size-adjust:100%; }  button, .btn, .action-btn, .style-btn, .tool-btn {   min-height:44px;   min-width:44px; }  .custom-element {   -webkit-user-select:none;   -moz-user-select:none;   -ms-user-select:none;   user-select:none;   -webkit-touch-callout:none;   touch-action:none;   -webkit-tap-highlight-color:transparent;   cursor:move;   pointer-events:auto !important;   position:absolute;   z-index:10;   will-change:transform;   transform:translateZ(0); }  .resize-handle, .rotate-handle, .delete-handle {   -webkit-user-select:none;   -moz-user-select:none;   -ms-user-select:none;   user-select:none;   -webkit-touch-callout:none;   touch-action:none !important;   -webkit-tap-highlight-color:transparent;   pointer-events:auto !important;   position:absolute;   z-index:1000;   will-change:transform;   transform:translateZ(0); }  input, select, textarea {   font-size:16px; }  .customizer-modal, .modal-content, .customization-layer {   touch-action:pan-y pan-x; }  .custom-element.selected {   touch-action:manipulation; }  .custom-element:active, .resize-handle:active, .rotate-handle:active {   transform:translateZ(0);   will-change:transform; }  .custom-element.selected {   outline:2px dashed #667eea;   outline-offset:2px;   transform:translateZ(0); }  .canvas-container {   transform:translateZ(0);   will-change:transform; }  .customization-layer {   transform:translateZ(0);   will-change:contents; }   -webkit-backface-visibility:hidden;   backface-visibility:hidden;   will-change:transform; }  .customization-layer {   -webkit-transform:translateZ(0);   transform:translateZ(0);   -webkit-backface-visibility:hidden;   backface-visibility:hidden;   will-change:contents; }  @media (max-width:768px) {   .color-options{ overflow-x:auto !important;   }   .product-thumbnail{  overflow:unset !important;   }  .custom-element,   .custom-element.selected,   .resize-handle,   .rotate-handle,   .delete-handle {  transform:translateZ(0);   }  .custom-element.selected .resize-handle {  width:16px !important;  height:16px !important;  border:2px solid #fff !important;  background:#667eea !important;  border-radius:3px !important;  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;  opacity:1 !important;  visibility:visible !important;  display:block !important;  pointer-events:auto !important;  touch-action:none !important;  z-index:1001 !important;  will-change:transform !important;   }  .custom-element.selected .rotate-handle {  width:28px !important;  height:28px !important;  border:3px solid #fff !important;  background:#e74c3c !important;  border-radius:50% !important;  box-shadow:0 2px 8px rgba(0,0,0,0.4) !important;  opacity:1 !important;  visibility:visible !important;  display:block !important;  pointer-events:auto !important;  touch-action:none !important;  z-index:1001 !important;  top:-34px !important;  will-change:transform !important;   }  .custom-element.selected .delete-handle {  width:32px !important;  height:32px !important;  border:3px solid #fff !important;  background:#e74c3c !important;  border-radius:50% !important;  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;  font-size:20px !important;  font-weight:bold !important;  opacity:1 !important;  visibility:visible !important;  display:flex !important;  align-items:center !important;  justify-content:center !important;  pointer-events:auto !important;  touch-action:none !important;  z-index:1001 !important;  top:-16px !important;  right:-16px !important;  will-change:transform !important;   }  .canvas-container {  -webkit-overflow-scrolling:touch;  overflow:visible;   }  * {  -webkit-user-select:none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none;  -webkit-tap-highlight-color:transparent;   }  input, textarea, select {  -webkit-user-select:text;  -moz-user-select:text;  -ms-user-select:text;  user-select:text;   }  .custom-logo {  image-rendering:-webkit-optimize-contrast;  image-rendering:crisp-edges;   } }  @media (max-width:768px) {   .custom-element {  will-change:transform;  -webkit-backface-visibility:hidden;  backface-visibility:hidden;  pointer-events:auto !important;  touch-action:none !important;  -webkit-transform:translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);   }  .custom-element.selected {  will-change:transform;  -webkit-transform:translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);  outline:2px dashed #667eea !important;  outline-offset:2px !important;   }  .custom-element .resize-handle,   .custom-element .rotate-handle,   .custom-element .delete-handle {  -webkit-transform:translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);  pointer-events:auto !important;  touch-action:none !important;  opacity:0;  transition:opacity 0.15s ease;  will-change:opacity, transform;   }  .custom-element.selected .resize-handle,   .custom-element.selected .rotate-handle,   .custom-element.selected .delete-handle {  opacity:1 !important;  display:block !important;  visibility:visible !important;   }  .customizer-modal,   .modal-content,   .modal-body {  -webkit-transform:translateZ(0);  transform:translateZ(0);  -webkit-backface-visibility:hidden;  backface-visibility:hidden;   } }  html, body {   touch-action:pan-y pan-x; } @media (max-width:768px) {   input, select, textarea {  font-size:16px !important;   } } body {   font-family:'Arial', sans-serif;   line-height:1.6;   color:#333; }  .product-customizer-trigger {   margin:20px 0; } .customize-btn {   background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);   color:white;   border:none;   padding:15px 30px;   font-size:16px;   font-weight:bold;   border-radius:8px;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   align-items:center;   gap:10px; } .customize-btn:hover {   transform:translateY(-2px);   box-shadow:0 8px 25px rgba(102, 126, 234, 0.3); }  .customizer-modal {   display:none;   position:fixed;   z-index:10000;   left:0;   top:0;   width:100%;   height:100%;   background-color:rgba(0, 0, 0, 0.8);   backdrop-filter:blur(5px); } .modal-content {   background-color:#fff;   margin:2% auto;   width:95%;   max-width:1400px;   height:90vh;   border-radius:12px;   overflow:hidden;   box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);   display:flex;   flex-direction:column; }  .modal-header {   background:#0597D4;   color:white;   padding:15px 25px;   display:flex;   justify-content:space-between;   align-items:center;   border-bottom:1px solid #34495e;   position:relative;   z-index:10; } .header-left {   display:flex;   align-items:center;   gap:10px;   font-weight:bold;   font-size:16px; } .header-right {   display:flex;   gap:10px; } .header-btn {   background:#8CC641;   border:1px solid rgba(255, 255, 255, 0.2);   color:white;   padding:3px 40px;   border-radius:6px;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   align-items:center;   gap:5px; } .header-btn:hover {   transform:translateY(2px); }  .header-btn:disabled {   cursor:not-allowed;   opacity:0.7 !important; } .header-btn .fa-spinner {   animation:spin 1s linear infinite; } @keyframes spin {   0% { transform:rotate(0deg); }   100% { transform:rotate(360deg); } } .close-btn {   background:#e74c3c;   border:none;   color:white;   padding:8px 15px;   border-radius:6px;   cursor:pointer;   transition:all 0.3s ease; } .close-btn:hover {   background:#c0392b; }  .modal-body {   display:flex;   flex:1;   overflow:hidden;   height:calc(100vh - 120px);   position:relative; }  .product-display-panel {   flex:1;   background:#f8f9fa;   padding:15px;   display:flex;   flex-direction:column;   min-height:100%;   overflow-y:auto;   width:100%;   padding-right:370px; }  .product-main-area {   display:flex;   gap:20px;   flex:1; } .product-tabs {   display:flex;   gap:10px;   margin-bottom:20px; } .tab-btn {   background:white;   border:2px solid #e9ecef;   padding:10px 20px;   border-radius:8px;   cursor:pointer;   transition:all 0.3s ease;   font-weight:500; } .tab-btn.active {   background:#667eea;   color:white;   border-color:#667eea; } .tab-btn:hover {   border-color:#667eea; }  .color-options {   display:flex;   flex-direction:column;   gap:10px;   padding:15px;   background:white;   border-radius:12px;   box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);   min-width:100px;   max-width:120px;   height:fit-content;   overflow:visible;   z-index:99999; } .color-options:empty::before {   content:"Loading thumbnails...";   display:flex;   align-items:center;   justify-content:center;   width:100%;   color:#6c757d;   font-style:italic; } .color-swatch {   width:40px;   height:40px;   border-radius:50%;   cursor:pointer;   border:3px solid transparent;   transition:all 0.3s ease; } .color-swatch.active {   border-color:#667eea;   transform:scale(1.1); } .color-swatch:hover {   transform:scale(1.05); }  .product-thumbnail {   width:70px;   height:85px;   border-radius:10px;   cursor:pointer;   border:2px solid transparent;   transition:all 0.3s ease;   overflow:hidden;   background:white;   box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);   display:flex;   flex-direction:column;   align-items:center;   padding:6px;   position:relative; } .product-thumbnail img {   width:100%;   height:55px;   object-fit:cover;   border-radius:6px;   margin-bottom:4px;   transition:transform 0.3s ease; } .product-thumbnail .variation-label {   font-size:9px;   text-align:center;   color:#495057;   font-weight:600;   line-height:1.1;   overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;   width:100%;   text-transform:capitalize; } .product-thumbnail.active {   border-color:#17A7D4;   background:#f0f4ff;   transform:translateY(-3px);   box-shadow:0 6px 20px rgba(102, 126, 234, 0.4); } .product-thumbnail.active .variation-label {   color:#17A7D4;   font-weight:bold; } .product-thumbnail.active img {   transform:scale(1.05); } .product-thumbnail:hover {   transform:translateY(-2px);   box-shadow:0 5px 18px rgba(0, 0, 0, 0.25); } .product-thumbnail:hover img {   transform:scale(1.02); }  .product-name {   margin-bottom:15px;   text-align:center; } .product-name h3 {   font-size:18px;   color:#333;   margin:0;   font-weight:600; }  .product-canvas {   flex:1;   display:flex;   flex-direction:column;   align-items:center;   justify-content:center;   padding:10px;   min-height:450px; } .canvas-container {   position:relative;   padding:10px;   margin-bottom:15px;   width:100%;   height:450px;   display:flex;   align-items:center;   justify-content:center;   overflow:visible; border-radius:12px;   z-index:1; } #product-image {   max-width:100%;   max-height:100%;   width:auto;   height:auto;   border-radius:8px;   display:block;   object-fit:contain;   box-shadow:0 2px 12px rgba(0, 0, 0, 0.1);   transition:transform 0.3s ease;   border-radius:50px; }  .customization-layer {   position:absolute;   top:0;   left:0;   right:0;   bottom:0;   pointer-events:none;   z-index:2; } .custom-element {   position:absolute;   cursor:move;   border:2px dashed transparent;   transition:border-color 0.2s ease; } .custom-element.selected {   border-color:#667eea; } .custom-text.selected {   background-color:rgba(102, 126, 234, 0.1);   border:2px dashed #667eea; } .custom-element .resize-handle {   position:absolute;   background:white;   border:1px solid #333;   border-radius:0;   display:none;   z-index:10;   box-shadow:0 1px 3px rgba(0, 0, 0, 0.2); } .custom-element.selected .resize-handle {   display:block; }  .custom-element .resize-handle.top-left {   width:8px;   height:8px;   left:-4px;   top:-4px;   cursor:nw-resize;   border-radius:1px;   background:white;   border:1px solid #333; } .custom-element .resize-handle.top-right {   width:8px;   height:8px;   right:-4px;   top:-4px;   cursor:ne-resize;   border-radius:1px;   background:white;   border:1px solid #333; } .custom-element .resize-handle.bottom-left {   width:8px;   height:8px;   left:-4px;   bottom:-4px;   cursor:sw-resize;   border-radius:1px;   background:white;   border:1px solid #333; } .custom-element .resize-handle.bottom-right {   width:8px;   height:8px;   right:-4px;   bottom:-4px;   cursor:se-resize;   border-radius:1px;   background:white;   border:1px solid #333; }  .resize-handle.top, .resize-handle.bottom, .resize-handle.left, .resize-handle.right, .custom-element .resize-handle.top, .custom-element .resize-handle.bottom, .custom-element .resize-handle.left, .custom-element .resize-handle.right, .custom-element.selected .resize-handle.top, .custom-element.selected .resize-handle.bottom, .custom-element.selected .resize-handle.left, .custom-element.selected .resize-handle.right {   display:none !important;   visibility:hidden !important;   pointer-events:none !important;   opacity:0 !important;   width:0 !important;   height:0 !important; }  .resize-handle.center, .custom-element .resize-handle.center, .custom-element.selected .resize-handle.center {   display:none !important;   visibility:hidden !important;   pointer-events:none !important;   opacity:0 !important;   width:0 !important;   height:0 !important; } .custom-element .rotate-handle {   position:absolute;   width:18px;   height:18px;   background:#e74c3c;   border:2px solid white;   border-radius:50%;   top:-25px;   left:50%;   transform:translateX(-50%);   cursor:grab;   display:none;   box-shadow:0 1px 3px rgba(0, 0, 0, 0.2); } .custom-element.selected .rotate-handle {   display:block; } .custom-element .rotate-handle:active {   cursor:grabbing; }  .custom-element .rotate-handle::before {   content:'';   position:absolute;   top:50%;   left:50%;   transform:translate(-50%, -50%);   width:12px;   height:12px;   border:2px solid #333;   border-radius:50%;   border-top:transparent;   border-right:transparent; } .custom-element .rotate-handle::after {   content:'';   position:absolute;   top:6px;   left:6px;   width:0;   height:0;   border-left:3px solid transparent;   border-right:3px solid transparent;   border-bottom:4px solid #333;   transform:rotate(-45deg); }  .text-style-btn.active, #bold-btn.active, #italic-btn.active, #underline-btn.active {   background-color:#17A7D4 !important;   color:white !important;   border-color:#17A7D4 !important; } .custom-text {   font-family:Arial, sans-serif;   font-size:24px;   color:#000; } .custom-logo {   max-width:100px;   max-height:100px;   border-radius:4px;   mix-blend-mode:multiply;   background:transparent !important;   pointer-events:none !important;   user-select:none !important;   -webkit-user-select:none !important;   -webkit-touch-callout:none !important;   touch-action:none !important;  image-rendering:-webkit-optimize-contrast;   image-rendering:crisp-edges;   will-change:transform, width, height;   transform:translateZ(0);   backface-visibility:hidden;   -webkit-backface-visibility:hidden; }  .canvas-tools {   display:none;   flex-direction:column;   gap:8px;   background:rgba(255, 255, 255, 0.95);   padding:10px;   border-radius:10px;   box-shadow:0 2px 12px rgba(0, 0, 0, 0.15);   border:1px solid #e9ecef;   position:fixed;   right:28%;   top:24%;   width:fit-content;   z-index:5;   max-height:calc(100% - 30px);   overflow:visible;   } .tool-btn {   background:#f8f9fa;   border:1px solid #17A7D4;   padding:8px;   border-radius:8px;   cursor:pointer;   transition:all 0.3s ease;   width:36px;   height:36px;   display:flex;   align-items:center;   justify-content:center;   font-size:14px;   color:#17A7D4; } .tool-btn:hover {   background:#B8E6F5;   color:white;   border-color:#B8E6F5;   transform:translateY(-2px);   box-shadow:0 4px 12px rgba(102, 126, 234, 0.3); } .tool-btn.active {   background:#17A7D4 ;   color:white;   border-color:#17A7D4 ;   transform:translateY(-1px); }  .customization-panel {   flex:1;   background:#F3FCFF;   border-left:1px solid #e9ecef;   display:flex;   flex-direction:column;   position:absolute;   right:0;   top:0;   bottom:0;   width:350px;   z-index:3; } .customization-tabs {   display:flex;   border-bottom:1px solid #e9ecef; } .custom-tab {   flex:1;   background:none;   border:none;   padding:15px 10px;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   flex-direction:column;   align-items:center;   gap:5px;   font-size:12px;   color:#6c757d; } .custom-tab.active {   background:#667eea;   color:white; } .custom-tab:hover {   background:#f8f9fa; } .custom-tab.active:hover {   background:#667eea; }  .design-header {   text-align:center; } .design-header h3 {   font-size:28px;   color:#0E5B79;   margin:0; }  .action-button-row {   display:flex;   gap:20px;   justify-content:center;   height:10%; } .action-btn {   flex:1;   max-width:130px;   min-height:60px;   background:#ffffff;   border:1px solid #17A7D4;   padding:10px 15px;   border-radius:6px;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   flex-direction:column;   align-items:center;   gap:4px;   font-size:12px;   font-weight:500;   color:#17A7D4;   text-align:center;   box-shadow:none; } .action-btn i {   font-size:16px;   margin-bottom:1px;   color:black; } .action-btn:hover {   opacity:0.8; } .action-btn.text-btn {   background:#ffffff;   border-color:#17A7D4;   color:#17A7D4;   border-radius:0px !important; } .action-btn.upload-btn {   background:#ffffff;   border-color:#17A7D4;   color:#17A7D4;   border-radius:0px !important; } .action-btn.active {   background:#D3F1FF;   border-color:#17A7D4;   color:#17A7D4; } .action-btn.active:hover {   opacity:0.9; }  .tab-content {   display:none;   flex:1;   overflow-y:auto; } .tab-content.active {   display:block; }  .text-controls {   display:flex;   flex-direction:column;   padding:5px 10px; } .control-group {   display:flex;   flex-direction:column;   gap:8px; } .control-row {   display:flex;   gap:15px; } .control-row .control-group {   flex:1; } label {   font-weight:600;   color:#666;   font-size:15px;   margin-bottom:8px; } textarea, select, input[type="range"] {   border:2px solid #17A7D4;   border-radius:8px;   font-size:14px;   transition:all 0.3s ease;   background:#ffffff; } textarea:focus, select:focus {   outline:none;   border-color:#17A7D4;   box-shadow:0 0 0 3px rgba(23, 167, 212, 0.1); } textarea {   resize:vertical;   font-family:inherit; } input[type="color"] {   width:60px;   height:45px;   border:2px solid #17A7D4;   border-radius:6px;   cursor:pointer; } #font-size-value {   font-size:12px;   color:#6c757d;   margin-left:10px; }  .text-style-options {   display:flex;   gap:12px;   justify-content:flex-start; } .style-btn {   background:#ffffff;   border:2px solid #17A7D4;   padding:8px 12px;   border-radius:8px;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   align-items:center;   justify-content:center;   min-width:45px;   height:40px;   font-size:16px;   color:#17A7D4;   font-weight:600; } .style-btn:hover {   background:#B8E6F5;   transform:translateY(-1px); } .style-btn.active {   background:#17A7D4;   border-color:#17A7D4;   color:white; } .add-text-btn {   background:linear-gradient(135deg, #28a745 0%, #20c997 100%);   color:white;   border:none;   padding:12px 20px;   border-radius:8px;   font-weight:bold;   cursor:pointer;   transition:all 0.3s ease; } .add-text-btn:hover {   transform:translateY(-2px);   box-shadow:0 4px 15px rgba(40, 167, 69, 0.3); }  .upload-section {   display:flex;   flex-direction:column;   gap:20px; } .upload-area {   border:2px dashed #dee2e6;   border-radius:12px;   padding:40px 20px;   text-align:center;   cursor:pointer;   transition:all 0.3s ease;   background:#f8f9fa;   margin-top:10px; } .upload-area:hover {   border-color:#667eea;   background:#f0f4ff; } .upload-area.dragover {   border-color:#667eea;   background:#e3f2fd; } .upload-area i {   font-size:48px;   color:#6c757d;   margin-bottom:15px; } .browse-btn {   background:#0597D4;   color:white;   border:none;   padding:10px 20px;   border-radius:6px;   cursor:pointer;   margin-top:10px;   transition:all 0.3s ease; } .browse-btn:hover { transform:translateY(2px); } .upload-btn {   background:#28a745;   color:white;   border:none;   padding:12px 30px;   border-radius:8px;   font-weight:bold;   cursor:pointer;   transition:all 0.3s ease; }   .logo-preview {   background:#f8f9fa;   border-radius:12px;   padding:20px;   text-align:center; } #preview-image {   max-width:150px;   max-height:150px;   border-radius:8px;   margin-bottom:15px; } .logo-actions {   display:flex;   flex-direction:column;   gap:15px; } .action-btn {   background:#667eea;   color:white;   border:none;   padding:12px 20px;   border-radius:8px;   cursor:pointer;   transition:all 0.3s ease; } .action-btn:hover {   transform:translateY(2px); } .checkbox-label {   display:flex;   align-items:center;   gap:10px;   font-size:14px;   cursor:pointer; } .checkbox-label input[type="checkbox"] {   width:18px;   height:18px; }  .terms-section {   font-size:12px;   color:#6c757d;   line-height:1.5; } .terms-link {   color:#667eea;   text-decoration:none; } .terms-link:hover {   text-decoration:underline; }  .graphics-categories {   display:flex;   gap:10px;   margin-bottom:20px;   flex-wrap:wrap; } .category-btn {   background:#f8f9fa;   border:1px solid #dee2e6;   padding:8px 16px;   border-radius:6px;   cursor:pointer;   transition:all 0.3s ease;   font-size:14px; } .category-btn.active {   background:#667eea;   color:white; } .category-btn:hover {   border-color:#667eea; } .graphics-grid {   display:grid;   grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));   gap:15px;   max-height:400px;   overflow-y:auto; } .graphic-item {   background:#f8f9fa;   border:2px solid #e9ecef;   border-radius:8px;   padding:10px;   cursor:pointer;   transition:all 0.3s ease;   text-align:center; } .graphic-item:hover {   border-color:#667eea;   transform:translateY(-2px); } .graphic-item img {   width:100%;   height:60px;   object-fit:contain; }  .action-buttons {   padding:20px;   border-top:1px solid #e9ecef; } .cost-btn {   background:#FFA403;   color:white;   border:none;   padding:15px 30px;   border-radius:8px;   font-weight:bold;   font-size:16px;   cursor:pointer;   width:100%;   transition:all 0.3s ease; } .cost-btn:hover {   transform:translateY(-2px);   box-shadow:0 8px 25px rgba(40, 167, 69, 0.3); }   @media (max-width:1200px) {   .modal-content {  width:98%;  max-width:none;   }  }  @media (max-width:992px) {   .modal-body {  flex-direction:column;   }   .product-display-panel{  padding-right:0;   }   .customization-panel{  position:unset !important;  width:100% !important;   }   .cost-inquiry-form{  margin-top:170px !important;   }   }  @media (max-width:768px) {   .product-main-area{  flex-direction:column !important;   }   .color-options{  flex-direction:row !important;  min-width:100% !important;  box-shadow:none !important;  background:none !important;   }   .modal-content {  width:100%;  height:100vh;  margin:0;  border-radius:0;   }  .modal-header {  padding:8px 15px;  flex-wrap:wrap;  gap:8px;   }  .header-left {  font-size:14px;  flex:1;  min-width:200px;   }  .header-right {  flex-wrap:wrap;  gap:5px;   }  .header-btn {  padding:2px 15px;  font-size:12px;   }  .close-btn {  padding:6px 10px;   }  .design-header h3 {  font-size:20px;   }  .action-button-row {  padding:15px 20px;  gap:15px;   }  .action-btn {  max-width:none;  flex:1;  min-height:50px;  font-size:11px;  padding:8px 12px;   }  .action-btn i {  font-size:14px;   }  .text-controls {  padding:10px 15px;  gap:15px;   }  .control-row {  flex-direction:column;  gap:10px;   }  .text-style-options {  justify-content:center;  gap:8px;   }  .style-btn {  min-width:35px;  height:35px;  font-size:14px;   }  .color-options {  padding:8px;  gap:8px;   }  .variation-label {  font-size:10px;   }  .canvas-tools {  right:10px;  top:10px;   }  .tool-btn {  padding:6px;  font-size:12px;   }  .upload-area {  padding:20px 15px;  margin-top:5px;   }  .upload-area i {  font-size:36px;  margin-bottom:10px;   }  .browse-btn {  padding:8px 16px;  font-size:14px;   }  .cost-btn {  padding:12px 20px;  font-size:14px;  margin:10px 15px;   }   .tab-content{  margin-top:10px;   }  .custom-element {  touch-action:manipulation;  -webkit-touch-callout:none;  -webkit-user-select:none;  -khtml-user-select:none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none;  pointer-events:auto !important;  cursor:grab;   }  .custom-element:active {  cursor:grabbing;  opacity:0.8;  transform:scale(1.02);   }  .custom-element.selected {  touch-action:none !important;  cursor:move;   }  .customization-layer {  touch-action:pan-y pan-x;  pointer-events:auto !important;  overflow:visible;   }  .custom-element .resize-handle {  opacity:0;  display:none;  visibility:hidden;  pointer-events:none;  transition:all 0.2s ease;   }  .custom-element.selected .resize-handle,   .custom-element:hover .resize-handle {  opacity:1 !important;  display:block !important;  visibility:visible !important;  pointer-events:auto !important;  transition:none;   } .custom-element .rotate-handle {  width:22px !important;  height:22px !important;  top:-28px !important;  left:50% !important;  transform:translateX(-50%) !important;  border:3px solid white !important;  box-shadow:0 2px 8px rgba(0, 0, 0, 0.4) !important;  opacity:0 !important;  pointer-events:none !important;  touch-action:none !important;  display:none !important;  transition:all 0.2s ease;   }  .custom-element.selected .rotate-handle,   .custom-element:hover .rotate-handle {  opacity:1 !important;  display:block !important;  visibility:visible !important;  pointer-events:auto !important;  transition:none;   }  .rotate-handle::before {  font-size:16px !important;  font-weight:bold !important;   }  .custom-element .delete-handle {  width:24px !important;  height:24px !important;  top:-12px !important;  right:-12px !important;  border:3px solid white !important;  font-size:16px !important;  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;  opacity:0 !important;  pointer-events:none !important;  touch-action:none !important;  display:none !important;  transition:all 0.2s ease;   }  .custom-element.selected .delete-handle,   .custom-element:hover .delete-handle {  opacity:1 !important;  display:flex !important;   }  .canvas-container {  touch-action:pan-y pan-x !important;  -webkit-touch-callout:none !important;  -webkit-user-select:none !important;  user-select:none !important;  pointer-events:auto !important;   }  #product-image {  touch-action:pan-y pan-x !important;  pointer-events:none !important;   } }  @media (max-width:480px) {   .product-main-area{  flex-direction:column !important;   }   .modal-header {  padding:5px 10px;   }  .header-left {  font-size:12px;   }  .header-btn {  padding:2px 10px;  font-size:10px;   }  .action-button-row {  padding:10px 15px;  gap:10px;   }  .action-btn {  min-height:45px;  font-size:10px;  padding:6px 8px;   }  .action-btn i {  font-size:12px;   }  .design-header h3 {  font-size:16px;   }  .text-controls {  padding:8px 12px;  gap:12px;   }  textarea, select {  font-size:12px;  padding:8px 10px;   }  .style-btn {  min-width:30px;  height:30px;  font-size:12px;   }  .variation-label {  font-size:9px;   }  .cost-btn {  padding:10px 15px;  font-size:12px;  margin:8px 12px;   }   .tab-content{  margin-top:10px;   } .rotate-handle {  width:24px !important;  height:24px !important;  top:-32px !important;  border:4px solid white !important;   }  .delete-handle {  width:26px !important;  height:26px !important;  top:-13px !important;  right:-13px !important;  border:4px solid white !important;  font-size:18px !important;   }   }  @media (max-width:768px) and (orientation:landscape) {   .modal-content {  height:100vh;   }  .action-button-row {  padding:8px 15px;   }  .action-btn {  min-height:40px;  font-size:10px;   }  .text-controls {  padding:8px 12px;  gap:10px;   }  .custom-element {  touch-action:manipulation !important;  pointer-events:auto !important;   }  .custom-element.selected {  touch-action:none !important;   }  .customization-layer {  touch-action:pan-y pan-x !important;  pointer-events:auto !important;   }  .resize-handle,   .rotate-handle,   .delete-handle {  pointer-events:auto !important;  touch-action:none !important;   } }  @media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {   .product-thumbnail img,   #product-image {  image-rendering:-webkit-optimize-contrast;  image-rendering:crisp-edges;   } }  @media (prefers-reduced-motion:reduce) {   * {  animation-duration:0.01ms !important;  animation-iteration-count:1 !important;  transition-duration:0.01ms !important;   } }  @media (prefers-color-scheme:dark) {   .customizer-modal {  background-color:rgba(0, 0, 0, 0.9);   } }  @media print {   .customizer-modal {  display:none !important;   } }  .cost-inquiry-modal {   z-index:100000001; } .cost-inquiry-content {   max-width:1000px;   width:90%;   height:auto;   max-height:90vh;   margin:5vh auto; } .cost-inquiry-header {   background:#0597D4;   color:white;   padding:15px 25px;   border-bottom:none; } .cost-inquiry-header h2 {   font-size:20px;   font-weight:600;   margin:0; } .cost-inquiry-body {   display:flex;   gap:30px;   padding:25px;   overflow-y:auto;   max-height:calc(90vh - 80px); }  .design-preview-panel {   flex:1;   min-width:300px;   background:#f8f9fa;   border-radius:12px;   padding:20px;   height:200px; } .design-preview-panel h3 {   font-size:18px;   font-weight:600;   color:#0597D4;   margin-bottom:15px;   text-align:center; } .design-preview-container {   background:white;   border-radius:8px;   padding:15px;   text-align:center;   border:2px solid #e9ecef; } #design-preview-canvas {   max-width:100%;   height:200px;   border-radius:6px;   box-shadow:0 2px 8px rgba(0, 0, 0, 0.1); } .design-info {   background:white;   border-radius:8px;   border:1px solid #e9ecef; } .design-info p {   margin:5px 0;   font-size:14px;   color:#333; }  .cost-inquiry-form-panel {   flex:1.5;   min-width:400px; } .cost-inquiry-form {   display:flex;   flex-direction:column;  } .form-row {   display:flex;   gap:6px;   flex-wrap:wrap; } .form-group {   display:flex;   flex-direction:column;   gap:5px; } .form-group.full-width {   flex:1 1 100%; } .form-group.half-width {   flex:1 1 calc(50% - 7.5px);   min-width:200px; } .form-group.third-width {   flex:1 1 calc(33.333% - 10px);   min-width:150px; } .form-group label {   font-weight:600;   color:#333;   font-size:14px; } .required {   color:#e74c3c;   font-weight:bold; } .form-group input, .form-group select, .form-group textarea {   padding:12px 15px;   border:2px solid #e9ecef;   border-radius:8px;   font-size:14px;   transition:all 0.3s ease;   background:white; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus {   outline:none;   border-color:#0597D4;   box-shadow:0 0 0 3px rgba(5, 151, 212, 0.1); } .form-group input:invalid {   border-color:#e74c3c; } .form-group textarea {   resize:vertical;   min-height:80px;   font-family:inherit; } .form-actions {   margin-top:10px;   text-align:center; } .submit-cost-inquiry.cost-btn, #get-cost {   background:#FFA403;   color:white;   border:none;   padding:15px 30px;   border-radius:8px;   font-size:16px;   font-weight:bold;   cursor:pointer;   transition:all 0.3s ease;   text-transform:uppercase;   letter-spacing:1px;   width:100%;   margin-top:20px;   z-index:999;   position:relative;   pointer-events:auto; } .cost-btn:hover, #get-cost:hover {   background:#e6930a;   transform:translateY(-2px);   box-shadow:0 4px 12px rgba(255, 164, 3, 0.3);   box-shadow:0 8px 25px rgba(255, 164, 3, 0.3); } .submit-cost-inquiry-btn:disabled {   background:#ccc;   cursor:not-allowed;   transform:none;   box-shadow:none; }  .success-message {   position:fixed;   top:50%;   left:50%;   transform:translate(-50%, -50%);   background:#28a745;   color:white;   padding:20px 30px;   border-radius:8px;   box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);   z-index:10002;   text-align:center;   min-width:300px; } .success-message h3 {   margin:0 0 10px 0;   font-size:18px; } .success-message p {   margin:0;   font-size:14px;   opacity:0.9; }  @media (max-width:768px) {   .cost-inquiry-content {  width:95%;  margin:2vh auto;  max-height:96vh;   }  .cost-inquiry-body {  flex-direction:column;  gap:20px;  padding:15px;   }  .design-preview-panel,   .cost-inquiry-form-panel {  min-width:auto;   }  .form-row {  flex-direction:column;  gap:15px;   }  .form-group.half-width,   .form-group.third-width {  flex:1 1 100%;  min-width:auto;   }  .submit-cost-inquiry-btn {  min-width:100%;  padding:15px 20px;   } } @media (max-width:480px) {   .cost-inquiry-header {  padding:10px 15px;   }  .cost-inquiry-header h2 {  font-size:16px;   }  .cost-inquiry-body {  padding:10px;   }  .design-preview-panel,   .form-group input,   .form-group select,   .form-group textarea {  padding:10px 12px;   } }  .fade-in {   animation:fadeIn 0.3s ease-in; } @keyframes fadeIn {   from { opacity:0; transform:translateY(20px); }   to { opacity:1; transform:translateY(0); } } .slide-in {   animation:slideIn 0.3s ease-out; } @keyframes slideIn {   from { transform:translateX(-100%); }   to { transform:translateX(0); } }  .loading {   opacity:0.6;   pointer-events:none; } .spinner {   border:2px solid #f3f3f3;   border-top:2px solid #667eea;   border-radius:50%;   width:20px;   height:20px;   animation:spin 1s linear infinite;   display:inline-block;   margin-right:10px; } @keyframes spin {   0% { transform:rotate(0deg); }   100% { transform:rotate(360deg); } }  .custom-element {   position:absolute;   cursor:move;   user-select:none;   border:2px solid transparent;   min-width:20px;   min-height:20px;   pointer-events:auto; } .custom-element.selected {   border:2px solid #667eea;   box-shadow:0 0 10px rgba(102, 126, 234, 0.3); } .custom-element:hover {   border:2px solid #667eea; } .custom-text {   display:inline-block;   white-space:nowrap;   padding:0;   background:transparent !important;   background-color:transparent !important;   border:none !important;   border-radius:0;   outline:none !important;   box-shadow:none !important; } .custom-logo img {   width:100%;   height:100%;   object-fit:contain;   pointer-events:none;   position:relative;   z-index:1; }   .cost-btn, #get-cost {   background:#FFA403 !important;   color:white !important;   border:none !important;   padding:15px 30px !important;   border-radius:8px !important;   font-size:16px !important;   font-weight:bold !important;   cursor:pointer !important;   transition:all 0.3s ease !important;   text-transform:uppercase !important;   letter-spacing:1px !important;   width:100% !important;   margin-top:20px !important;   z-index:999 !important;   position:relative !important;   pointer-events:auto !important;   display:block !important; } .cost-btn:hover, #get-cost:hover {   background:#e6930a !important;   transform:translateY(-2px) !important;   box-shadow:0 4px 12px rgba(255, 164, 3, 0.3) !important; } .cost-btn:active, #get-cost:active {   transform:translateY(0) !important; }  .bottom-action-buttons {   padding:20px !important;   border-top:1px solid #e9ecef !important;   background:#f8f9fa !important;   position:relative !important;   z-index:10 !important; }  .resize-handle {   position:absolute;   background:#667eea;   border:2px solid white;   border-radius:50%;   width:14px;   height:14px;   cursor:pointer;   opacity:0;   transition:opacity 0.2s ease;   z-index:100;   pointer-events:auto;   box-shadow:0 2px 4px rgba(0,0,0,0.2); } .custom-element.selected .resize-handle, .custom-element:hover .resize-handle {   opacity:1;   display:block; } .resize-handle.top-left {   top:-7px;   left:-7px;   cursor:nw-resize; } .resize-handle.top-right {   top:-7px;   right:-7px;   cursor:ne-resize; } .resize-handle.bottom-left {   bottom:-7px;   left:-7px;   cursor:sw-resize; } .resize-handle.bottom-right {   bottom:-7px;   right:-7px;   cursor:se-resize; } .resize-handle.top, .resize-handle.bottom, .resize-handle.left, .resize-handle.right {   display:none !important;   visibility:hidden !important;   pointer-events:none !important;   opacity:0 !important;   width:0 !important;   height:0 !important; } .resize-handle.center {   display:none !important;   visibility:hidden !important;   pointer-events:none !important;   opacity:0 !important;   width:0 !important;   height:0 !important; }  .rotate-handle {   position:absolute;   top:-26px;   left:50%;   transform:translateX(-50%);   width:20px;   height:20px;   background:#e74c3c;   border:2px solid white;   border-radius:50%;   cursor:grab;   display:none;   opacity:0.9;   transition:all 0.2s ease;   z-index:1003;   box-shadow:0 2px 8px rgba(0, 0, 0, 0.3); } .rotate-handle:active {   cursor:grabbing; } .custom-element.selected .rotate-handle, .custom-element:hover .rotate-handle {   opacity:1 !important;   display:block !important;   visibility:visible !important; } .rotate-handle::before {   content:'↻';   position:absolute;   top:50%;   left:50%;   transform:translate(-50%, -50%);   font-size:12px;   color:white;   font-weight:bold; }  .delete-handle {   position:absolute;   top:-12px;   right:-12px;   width:22px;   height:22px;   background:#ff4757;   border:2px solid white;   border-radius:50%;   cursor:pointer;   display:none;   opacity:0.9;   transition:all 0.2s ease;   z-index:1004;   font-size:14px;   font-weight:bold;   color:white;   text-align:center;   line-height:18px;   justify-content:center;   align-items:center;   box-shadow:0 2px 6px rgba(0,0,0,0.3); } .delete-handle:hover {   background:#ff3742;   transform:scale(1.1); } .custom-element.selected .delete-handle, .custom-element:hover .delete-handle {   opacity:1;   display:flex; }  .customization-layer {   position:absolute;   top:0;   left:0;   width:100%;   height:100%;   pointer-events:auto;   z-index:5; }  .add-to-cart-custom {   background:linear-gradient(135deg, #28a745 0%, #20c997 100%);   color:white;   border:none;   padding:15px 30px;   border-radius:8px;   font-weight:bold;   font-size:16px;   cursor:pointer;   width:100%;   margin-top:10px;   transition:all 0.3s ease; } .add-to-cart-custom:hover {   transform:translateY(-2px);   box-shadow:0 8px 25px rgba(40, 167, 69, 0.3); } .add-to-cart-custom:disabled {   opacity:0.6;   cursor:not-allowed;   transform:none;   box-shadow:none; }  .upload-area.dragover {   border-color:#667eea;   background-color:rgba(102, 126, 234, 0.1);   transform:scale(1.02); } .upload-area.dragover i {   color:#667eea;   transform:scale(1.1); }  .upload-info {   font-size:12px;   color:#666;   margin-top:10px;   text-align:center;   font-style:italic; } #custom-text{   padding-bottom:0px !important;   padding-right:0px !important; padding-left:0px !important; }