/* ===== VIEWPORT & CANVAS FIX ===== */
/*html,*/
/*body {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    overflow: hidden;*/
/*    position: fixed;*/
/*    box-sizing: border-box;*/
/*}*/

/**,*/
/**::before,*/
/**::after {*/
/*    box-sizing: border-box;*/
/*}*/

/* Fix AR.js canvas scaling */
/*.a-canvas {*/
/*    width: 100% !important;*/
/*    height: 100% !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/
/*    position: absolute !important;*/
/*}*/

/* Ensure video feed fills screen properly */
/*video {*/
/*    width: 100vw !important;*/
/*    height: 100vh !important;*/
/*    object-fit: cover !important;*/
/*    position: absolute !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/
/*}*/

/* AR Scene container fix */
/*a-scene {*/
/*    width: 100vw !important;*/
/*    height: 100vh !important;*/
/*    position: fixed !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/
/*}*/

/*a-scene canvas {*/
/*    width: 100% !important;*/
/*    height: 100% !important;*/
/*}*/

/* ===== LOADING SCREEN ===== */
/*#loading-screen {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 9999;*/
/*    color: white;*/
/*    font-family: 'Arial', sans-serif;*/
/*}*/

/*#loading-screen.hidden {*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: opacity 0.5s ease;*/
/*}*/

/* Loader Animation */
/*.loader {*/
/*    border: 6px solid rgba(255, 255, 255, 0.3);*/
/*    border-top: 6px solid white;*/
/*    border-radius: 50%;*/
/*    width: 60px;*/
/*    height: 60px;*/
/*    animation: spin 1s linear infinite;*/
/*    margin-bottom: 20px;*/
/*}*/

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

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

/*#loading-screen p {*/
/*    font-size: 20px;*/
/*    margin-top: 10px;*/
/*    font-weight: bold;*/
/*}*/

/* ===== INSTRUCTIONS OVERLAY ===== */
.ar-instructions {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    font-family: 'Arial', sans-serif;
    text-align: center;
    z-index: 100;
    font-size: 16px;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ar-instructions.hidden {
    display: none;
}

/* ===== DEBUG INFO (Optional - can be removed in production) ===== */
.debug-info {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #00ff00;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    border-radius: 5px;
    z-index: 1000;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#simulate-marker-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.3s;
}

#simulate-marker-btn:hover {
    background: #45a049;
}