html,
 body {
     margin: 0;
     padding: 0;
     overflow: hidden;
     font-family: Arial, sans-serif;
 }

 /* Fullscreen Camera Container */
 #cameraContainer {
     position: relative;
     width: 100vw;
     height: 100vh;
     background: black;
 }

 /* Fullscreen Video Feed */
 #cameraVideo {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     object-fit: cover;
 }

 /* AR Overlay for Three.js rendering */
 #arOverlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
 }

 #loadingMessage {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 20px;
     border-radius: 10px;
     font-size: 16px;
 }

 /* Configuration Container */
 #configContainer {
     position: absolute;
     left: 5px;
     bottom: -100%;
     width: 100%;
     max-width: 350px;
     background: white;
     padding: 16px;
     border-radius: 5px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     z-index: 1002;
     transition: bottom 0.3s ease;
 }

 /* Hide steps by default */
 .config-step {
     display: none;
 }

 /* Show active step */
 .config-step.active {
     display: block;
 }

 .panel-title {
     font-size: 1em;
     margin-bottom: 15px;
     font-weight: bold;
 }

 /* Dimension Entry Step */
 #dimensionStep label {
     display: block;
     margin-bottom: 5px;
     font-size: 0.9em;
 }

 #dimensionStep input {
     width: 100%;
     padding: 8px;
     margin-bottom: 10px;
     box-sizing: border-box;
     font-size: 1em;
     border: 1px solid #ddd;
     border-radius: 4px;
 }

 /* Kitchen Type Selection Step */
 .kitchen-options {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     width: 100%;
     margin-bottom: 20px;
     gap: 10px;
 }

 .kitchen-option {
     text-align: center;
     cursor: pointer;
     transition: transform 0.3s ease;
     flex: 1;
     min-width: 100px;
 }

 .kitchen-option img {
     width: 100%;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
     border: 2px solid transparent;
     margin-bottom: 8px;
 }

 .kitchen-option p {
     margin: 0;
     font-size: 0.9em;
 }

 .kitchen-option:hover {
     transform: scale(1.05);
 }

 .kitchen-option.selected img {
     border-color: #D4D1CA;
     box-shadow: 0 0 10px #D4D1CA;
 }

 /* Buttons */
 .btn {
     padding: 12px 20px;
     width: 100%;
     background: #EBE8E0;
     color: rgb(107 114 128);
     border: none;
     border-radius: 5px;
     font-size: 1em;
     cursor: pointer;
     transition: background 0.3s ease;
     margin-top: 10px;
 }

 .btn:hover {
     background: #45a049;
 }

 .btn-secondary {
     background: #f0f0f0;
     color: #333;
 }

 .btn-secondary:hover {
     background: #e0e0e0;
 }

 .ar-btn {
     padding: 12px 20px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     border: none;
     border-radius: 50px;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .ar-btn:hover {
     background: rgba(0, 0, 0, 0.9);
 }

 /* Placement Indicator */
 .placement-instruction {
     position: absolute;
     top: 20px;
     left: 0;
     right: 0;
     text-align: center;
     color: white;
     background: rgba(0, 0, 0, 0.7);
     padding: 10px;
     border-radius: 0 0 10px 10px;
     z-index: 100;
     font-size: 14px;
 }

 /* Error Message */
 #errorMessage {
     position: absolute;
     top: 20px;
     left: 20px;
     right: 20px;
     background: rgba(255, 0, 0, 0.8);
     color: white;
     padding: 15px;
     border-radius: 5px;
     z-index: 100;
     display: none;
 }

 /* Loading spinner */
 .spinner {
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top: 4px solid white;
     width: 30px;
     height: 30px;
     animation: spin 1s linear infinite;
     margin: 0 auto 10px;
 }

 .placement-instruction {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10000;
     color: white;
     background: rgba(0, 0, 0, 0.7);
     padding: 10px 20px;
     border-radius: 5px;
     display: none;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .ar-controls {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: none;
     gap: 12px;
     z-index: 10000;
     padding: 15px;
     border-radius: 12px;
     backdrop-filter: blur(5px);
     text-align: center;
 }

 /* Ensure overlay element contains the controls */
 #arOverlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .ar-controls {
     pointer-events: auto;
 }

 .ar-controls button {
     padding: 12px 6px;
     border: 1px solid rgba(255, 255, 255);
     border-radius: 4px;
     background: rgba(0, 0, 0, 0.1);
     color: rgba(255, 255, 255);
     font-size: 16px snas-serif;
     text-align: center;
     opacity: 0.6;
     cursor: pointer;
     left: calc(50% - 50px);
     width: 100px;
 }

 .ar-controls button:disabled {
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
 }

 .options-container {
     display: none;
     gap: 10px;
     margin-top: 10px;
 }

 .option-item {
     width: 80px;
     height: 80px;
     border: 2px solid transparent;
     cursor: pointer;
 }

 .option-item.selected {
     border-color: #EBE8E0;
 }

 .option-thumbnail {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .customization-toggle {
     padding: 15px 8px;
     border: 1px solid rgba(255, 255, 255);
     background: rgba(0, 0, 0, 0.1);
     color: rgba(255, 255, 255);
     text-align: center;
     opacity: 0.6;
     cursor: pointer;
     width: 38px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     position: fixed;
     top: 30%;
     left: -8px;
     transform: translateY(-50%);
     z-index: 10000;
     transition: left 0.3s ease, opacity 0.3s ease;
 }

 .customization-toggle.visible {
     left: 0px;
     display: block;
 }

 .customization-toggle:focus {
     background-color: rgb(255, 255, 255, 0.7);
     color: rgba(255, 255, 255);
 }

 .customize-config {
     position: fixed;
     top: 30%;
     transform: translateY(-50%);
     transition: all 0.3s ease;
     z-index: 10001;
 }

 .customization-tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 15px;
 }

 .tab-btn {
     flex: 1;
     padding: 10px;
     border: none;
     background: #eee;
     cursor: pointer;
 }

 .tab-btn.active {
     background: #007bff;
     color: white;
 }

 .options-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 }

 .option-item {
     border: 2px solid transparent;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .option-item:hover {
     transform: scale(1.05);
 }

 .option-item.selected {
     border-color: #007bff;
 }

 .option-thumbnail {
     width: 100%;
     height: 120px;
     object-fit: cover;
 }

 /* customize panel */
 .customize-panel {
     position: fixed;
     top: 25%;
     left: -371px;
     width: 80%;
     max-width: 350px;
     background: white;
     padding: 10px;
     border-radius: 5px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     z-index: 10002;
     transition: left 0.3s ease;
     pointer-events: auto;
 }

 .customize-panel.visible {
     left: 4px !important;
     opacity: 1;
 }

 #customizationToggleBtn {
     pointer-events: auto !important;
     z-index: 10001;
 }

 .customization-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .customization-tabs {
     display: flex;
     gap: 8px;
     margin-bottom: 15px;
 }

 .tab-btn {
     border: 1px solid #c8c7c3;
     color: rgba(255, 255, 255);
     text-align: center;
     padding: 8px 15px;
     border-radius: 3px;
     font-family: sans-serif;
     color: black;
     cursor: pointer;
     transition: all 0.2s ease;
     background-color: white;
 }

 .tab-btn.active {
     background: rgba(0, 200, 0, 0.9);
     color: white;
 }

 .tab-content {
     display: none;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     max-height: 60vh;
     overflow-y: auto;
 }

 .tab-content.active {
     display: grid;
 }

 .option-item {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     padding: 10px;
     cursor: pointer;
     transition: transform 0.2s ease;
 }

 .option-item:hover {
     transform: translateY(-2px);
 }

 .option-thumbnail {
     width: 100%;
     height: 120px;
     object-fit: cover;
     border-radius: 5px;
 }

 .close-panel {
     background-color: white;
     border: none;
     font-size: 30px;
 }

 .success-message {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 200, 0, 0.9);
     color: white;
     padding: 10px 20px;
     border-radius: 5px;
     animation: slideUp 0.3s ease;
 }

 @keyframes slideUp {
     from {
         bottom: -50px;
     }

     to {
         bottom: 20px;
     }
 }


 #upgradeModal {
     position: fixed;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     background: rgba(0, 0, 0, 0.8) !important;
     display: none;
     z-index: 1400 !important;
     pointer-events: all !important;
 }

 .modal-content {
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     width: 90%;
     max-width: 400px;
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
     transform: scale(0.95);
     animation: modalEnter 0.3s ease forwards;
     position: relative;
 }

 .pricing-container {
     position: relative;
     overflow: hidden;
 }

 .pricing-options {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding-bottom: 1rem;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
 }

 .pricing-options::-webkit-scrollbar {
     display: none;
 }

 .pricing-option {
     flex: 0 0 80%;
     scroll-snap-align: center;
     background: white;
     border: 2px solid #e9ecef;
     border-radius: 12px;
     padding: 1.5rem;
     text-align: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     min-width: 150px;
 }

 .select-plan {
     padding: 10px 13px;
     font-family: sans-serif;
     border-radius: 10px;
     background-color: #ebe8e0;
     color: #76726a;
     border: none;
 }

 .select-plan:focus {
     border: 1px solid #76726a;
 }

 .scroll-indicator {
     display: flex;
     justify-content: space-between;
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     transform: translateY(-50%);
     pointer-events: none;
 }

 .arrow {
     font-size: 1.5rem;
     color: #007bff;
     opacity: 0.5;
     transition: opacity 0.3s;
     display: none;
 }

 @media (hover: hover) {
     .arrow {
         display: block;
     }
 }

 @media (max-width: 768px) {
     .modal-content {
         width: 90%;
         padding: 1rem;
     }

     .pricing-option {
         flex: 0 0 80%;
     }
 }

 @media (max-width: 480px) {
     .modal-header h2 {
         font-size: 1.5rem;
     }

     .pricing-option {
         flex: 0 0 80%;
         padding: 1rem;
     }
 }

 /* Swipe animation */
 @keyframes swipe-left {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-100%);
     }
 }

 @keyframes swipe-right {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(100%);
     }
 }

 #timer {
     position: fixed;
     top: 20px;
     right: 20px;
     color: white;
     padding: 10px 15px;
     border-radius: 5px;
     font-family: monospace;
 }

 /* Disabled state styling */
 button[disabled] {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
 }

 /* Modal blocking overlay */
 .blocked-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 2147483646;
     display: flex;
     justify-content: center;
     align-items: center;
 }