html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, sans-serif;
      }
      #canvas {
        width: 100%;
        height: 100%;
        transition: margin-left 0.3s ease;
      }

      a {
        text-decoration: none;
        color:#af895a;
      }


      /* Configurator Sidebar */
      #configurator-sidebar {
        position: fixed;
        top: 0;
        width: 300px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto; /* Enables vertical scrolling */
      }

      #configurator-sidebar.open {
        left: 0;
      }

      #canvas.sidebar-open {
        margin-left: 150px;
      }

      /* Sidebar Toggle Button */
      #sidebar-toggle {
        position: absolute;
        top: 20px;
        left: 403px;
        z-index: 1001;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }

      #sidebar-toggle:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.05);
      }

      /* Tab Navigation */
      .nav-tabs-configurator {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 20px 0 0 0;
        border-bottom: none;
      }

      .nav-item-configurator {
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }

      .nav-item-configurator.active {
        background: rgba(0, 123, 255, 0.1);
      }

      .nav-link-configurator {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .nav-link-configurator:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      .nav-icon-configurator {
        width: 24px;
        margin-right: 39px;
        font-size: 18px;
      }

      /* Tab Content */
      .tab-content-configurator {
        padding: 20px;
        min-height: calc(100vh - 200px);
      }

      .tab-pane {
        display: none;
      }

      .tab-pane.active {
        display: block;
      }

      /* Form Groups */
      .form-group {
        margin-bottom: 20px;
      }

      .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
        font-size: 14px;
      }

      .form-control {
        width: 100%;
        padding: 10px 6px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.2s ease;
      }

      .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
      }

      /* Debug Controls */
      .debug-control {
        display: none; /* Hidden by default */
      }

      .debug-control.show {
        display: block; /* Show when debug mode is enabled */
      }

      /* Color Grid */
      .color-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 12px;
      }

      .color-option {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        border: 3px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
      }

      .color-option:hover {
        transform: scale(1.1);
        border-color: #007bff;
      }

      .color-option.active {
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
      }

      .color-option {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
        transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
      }

      
      /* Texture Grid Options */
      .texture-option {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        border: 3px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        text-align: center;
        line-height: 1;
      }

      .texture-option:hover {
        transform: scale(1.1);
        border-color: #007bff;
      }

      .texture-option.active {
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
      }

      /* Kokard Model Grid */
      .kokard-model-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 12px;
      }

      .kokard-model-btn {
        padding: 16px;
        border: 2px solid #ddd;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      .kokard-model-btn:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        background: rgba(0, 123, 255, 0.05);
      }

      .kokard-model-btn.active {
        border-color: #007bff;
        background: rgba(0, 123, 255, 0.1);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
      }

      .kokard-model-icon {
        font-size: 24px;
        margin-bottom: 4px;
      }

      .kokard-model-btn span:last-child {
        font-size: 12px;
        font-weight: bold;
        color: #333;
      }

      .model-btn{
        padding: 8px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-height: 80px;
      }

      .model-btn:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        background: rgba(0, 123, 255, 0.05);
      }

      .model-btn.active {
        border-color: #007bff;
        background: rgba(0, 123, 255, 0.1);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
      }

      .model-icon {
        font-size: 30px;
        margin-bottom: 4px;
      }
      .model-btn span:last-child {
        font-weight: bold;
        color: #333;
      }

      /* Inside Texture Grid */
      .inside-texture-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
      }

      .inside-texture-btn {
        padding: 8px;
        border: 2px solid #ddd;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-height: 60px;
      }

      .inside-texture-btn:hover {
        border-color: #007bff;
        transform: translateY(-2px);
        background: rgba(0, 123, 255, 0.05);
      }

      .inside-texture-btn.active {
        border-color: #007bff;
        background: rgba(0, 123, 255, 0.1);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
      }

      .inside-texture-icon {
        font-size: 20px;
        margin-bottom: 2px;
      }

      .inside-texture-btn span:last-child {
        font-size: 11px;
        font-weight: bold;
        color: #333;
      }

      /* Shape Grid */
      .shape-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 12px;
      }

      .shape-option {
        padding: 16px;
        border: 2px solid #ddd;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #fff;
      }

      .shape-option:hover {
        border-color: #007bff;
        transform: translateY(-2px);
      }

      .shape-option.active {
        border-color: #007bff;
        background: rgba(0, 123, 255, 0.1);
      }

      /* Range Slider */
      .range-slider {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #ddd;
        outline: none;
        appearance: none;
      }

      .range-slider::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
      }

      /* Camera Controls */
      .camera-controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 12px;
      }

      .camera-btn {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s ease;
      }

      .camera-btn:hover {
        background: #f8f9fa;
        border-color: #007bff;
      }

      /* Action Buttons */
      .btn-primary-configurator {
        width: 100%;
        padding: 12px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 20px;
        transition: all 0.2s ease;
      }

      .btn-primary-configurator:hover {
        background: #0056b3;
        transform: translateY(-1px);
      }

      /* Add to Cart Button - Top Right Corner */
      .add-to-cart-fixed {
        width: auto;
        padding: 12px 20px;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        transition: all 0.3s ease;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .add-to-cart-fixed:hover {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
      }

      /* Cart Container with Hover Dropdown */
      .cart-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
      }

      /* Floating Capture Button */
      .capture-button-container {
        position: fixed;
        top: 20px;
        right: 180px; /* Position to the left of cart */
        z-index: 1000;
      }

      .capture-btn {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      .capture-btn:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
      }

      .capture-btn:active {
        transform: translateY(0) scale(0.95);
      }

      .capture-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease;
      }

      .capture-btn:hover::before {
        width: 100%;
        height: 100%;
      }

      /* Disabled capture button */
      .capture-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #6c757d;
        pointer-events: none;
      }

      .capture-button-container.disabled .capture-options {
        display: none !important;
      }

      /* Capture options dropdown */
      .capture-options {
        position: absolute;
        top: 60px;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        min-width: 180px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        font-size: 14px;
        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
      }

      .capture-button-container:hover .capture-options {
        display: block;
        opacity: 1;
        transform: translateY(0);
      }

      /* Manual control for capture options with delay */
      .capture-options.show-delayed {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
      }

      .capture-option-btn {
        width: 100%;
        padding: 8px 12px;
        margin: 2px 0;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 12px;
      }

      .capture-option-btn:hover {
        background: #e9ecef;
        transform: translateX(4px);
      }

      .cart-container:hover .attributes-summary {
        display: block;
        opacity: 1;
        transform: translateY(0);
      }

      /* Manual control for attributes summary with delay */
      .attributes-summary.show-delayed {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
      }

      /* Attributes Summary */
      .attributes-summary {
        position: absolute;
        top: 60px;
        right: 0;
        z-index: 999;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        min-width: 350px;
        max-width: 450px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        font-size: 1.1em;
        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
      }

      .attributes-summary.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
      }

      .attributes-summary h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #333;
      }

      .attribute-item {
        margin-bottom: 8px;
        padding: 4px 0;
        border-bottom: 1px solid #eee;
      }

      .attribute-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .attribute-label {
        font-weight: 600;
        color: #555;
        display: inline-block;
        min-width: 80px;
      }

      .attribute-value {
        color: #333;
      }

      /* Cart count indicator */
      .cart-hover-indicator {
        background: #dc3545;
        color: white;
        border-radius: 50%;
        padding: 2px 6px;
        font-size: 12px;
        font-weight: bold;
        min-width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
      }

      /* Summary Panel */
      .summary-panel {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 16px;
        margin-top: 20px;
      }

      .summary-title {
        font-weight: 600;
        margin-bottom: 12px;
        color: #333;
      }

      .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
      }

      #loading-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 10;
      }
      

      #loading-circle {
        width: 50px;
        height: 50px;
        border: 5px solid #ccc;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .config-icon{
        height:50px;
        width:50px;
        position: relative;
      }
      
     .logo {
          height: 150px;
          width: 150px;
          position: relative;
          padding: 10px;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
     
      @media (max-width: 768px) 
      {
        #configurator-sidebar {
          position: fixed;
          width:100%;
          margin-top: 50vh;
        }
        #canvas.sidebar-open {
            margin-left:0px;
            margin-top:50px;
        }

        #canvas.sidebar-open {
            width: 475px!important;
            height: 500px!important;
        }

        .tab-pane {
            margin-bottom: 500px;
         }

         #loading-container {
          position: absolute;
          top: -25%;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(255, 255, 255, 0.8);
          z-index: 10;
        }
        
      

      }

      #cc-settings-container {
        position: absolute;
        bottom: 0.5em;
        right: 0.5em;
        z-index: 1000;
    }


 /* Professional Model Button Styling */
      .model-btn {
        position: relative;
        transition: all 0.3s ease;
        border: 2px solid #e0e0e0;
        background: #ffffff;
      }
      
      .model-btn:hover {
        border-color: #007bff;
        box-shadow: 0 4px 16px rgba(0,123,255,0.15);
        transform: translateY(-2px);
      }
      
      .model-btn{
        background: linear-gradient(135deg, #fff 0%, #f8fff9 100%);
        transform: translateY(-2px);
      }
      
      .model-btn::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: inherit;
        z-index: -1;
      }
   
      
      .model-btn span:last-child {
        font-weight: 600;
        color: #495057;
        font-size: 14px;
        margin-top: 8px;
        display: block;
        padding: 6px 12px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 6px;
        border: 1px solid #dee2e6;
        text-shadow: 0 1px 2px rgba(255,255,255,0.8);
      }
      
      .model-btn span:last-child {
          background: linear-gradient(135deg, #ba9465 0%, #815e29 100%);
          color: #ffffff;
          border-color: #616166;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          font-weight: 700;
          position: relative;
          overflow: hidden;
      }
      
      .model-btn span:last-child::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: shimmer 1.5s infinite;
      }
      
      @keyframes shimmer {
        0% { left: -100%; }
        100% { left: 100%; }
      }
      
      .model-btn span:first-child {
        font-weight: 500;
        color: #343a40;
      }
      
 
      /* Enhanced focus states for accessibility */
      .model-btn:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
      }
      
      .model-btn.kokard-model-icon:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40,167,69,0.25);
      }