* {
    -webkit-tap-highlight-color: transparent !important;
}

@font-face {
    font-family: 'after disaster';
    src: url('../fonts/after-disaster.otf') format('opentype');
}

/* --- Font Preloading Hack --- */
.font-preloader {
    font-family: 'after disaster', sans-serif;
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
}

@media (max-width: 768px) {
    /* --- General Layout & Overflow Fix --- */
    html, body {
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

    .simulator-container {
        width: 100vw;
        height: var(--app-height, 100vh);
        overflow: hidden;
    }

    /* --- Reposition Top Controls to Bottom --- */
    .top-controls-container {
        top: 10vh;
        left: 10px;
        right: 10px;
        width: auto;
        padding: 0;
        box-sizing: border-box;
        justify-content: center;
    }

    .button-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
        width: 100%;
        max-width: 400px; /* Limit max width on larger mobile screens */
        padding-top: 0;
        margin: 0 auto; /* Center the grid */
        top: 3em; 
    }

    .modelos-grid-item { grid-area: 1 / 1; }
    .cores-grid-item { grid-area: 1 / 4; }

    .button-grid-bottom-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        background-color: white;
        padding: 10px;
        border-radius: 12px;
        margin-top: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .gola-punho-grid-item { grid-area: 1 / 1; }
    .escudo-grid-item { grid-area: 1 / 2; }
    .nome-numero-grid-item { grid-area: 1 / 3; }
    .patrocinio-grid-item { grid-area: 1 / 4; }

    .button-with-label {
        gap: 5px;
    }

    .button-label {
        font-size: 11px; /* Slightly smaller for compact view */
        font-weight: 500;
    }

    .button-grid .btn-secondary {
        width: 55px;
        height: 55px;
    }

    /* --- D-Pad (Camera Controls) Adjustments --- */
    .right-controls-wrapper {
        /* This wrapper's positioning is now handled by its children */
        position: static;
    }

    #camera-controls {
        /* gap: 8px; */
        position: absolute;
        top: -1.2em;
        right: -2px;
        z-index: 10;
        padding: 0px;
    }

    #camera-controls .camera-btn {
        display: none;
        width: 42px;
        height: 42px;
    }

    #camera-controls #camera-recenter {
        display: flex;
    }

    #vertical-visibility-controls {
        padding: 5px 8px;
        position: absolute;
        top: -0.4em;
        left: 5px;
        z-index: 10;
    }

    .toggle-label {
        font-size: 10px;
    }

    /* --- Modal Layouts --- */
    .product-modal {
        width: 95vw;
        height: 85vh; /* Standard height for all modals */
        display: flex; /* Use flexbox for better internal layout */
        flex-direction: column;
    }

    /* This targets the modal for switching products */
    #product-selection-modal .product-modal-grid {
        flex-direction: column;
        height: auto;
        overflow-y: auto;
        flex-grow: 1;
    }

    #product-selection-modal .product-card {
        min-height: 150px;
        flex-grow: 1 !important; /* Disable hover animation on mobile */
    }

    #product-selection-modal .product-modal-title {
        position: static;
        color: #333;
        text-shadow: none;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }

    #product-selection-modal .product-modal-close {
        position: absolute;
        top: 5px;
        right: 10px;
    }


    #texture-editor-modal .customization-modal-content,
    #text-editor-modal .customization-modal-content,
    #image-editor-modal .customization-modal-content {
        flex-direction: column;
        overflow-y: auto;
    }

    #texture-editor-modal .customization-controls,
    #text-editor-modal .customization-controls,
    #image-editor-modal .customization-controls {
        width: 100%;
        flex-basis: auto; /* Reset fixed basis */
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 15px;
        flex-shrink: 0; /* Prevent the controls panel from shrinking */
    }

    #text-editor-modal .action-layout-container {
        flex-direction: column;
        gap: 20px;
    }

    #text-editor-modal .controls-column,
    #text-editor-modal .preview-column {
        flex: 1 1 100%;
    }

    #text-editor-modal .preview-column {
        min-height: 150px;
        background-color: #f0f0f0;
        border-radius: 8px;
        padding: 20px;
    }

    #texture-canvas-container,
    #image-preview-container,
    #image-preview-container-image-editor {
        flex-grow: 1;
        min-height: 0; /* Allow container to shrink and enable scrolling */
        overflow: auto; /* Ensure scrolling is enabled on this container */
    }

    #text-editor-modal,
    #image-editor-modal,
    #acessorios-modal {
        align-items: flex-end; /* Position modal at the bottom */
    }

    #text-editor-modal .product-modal,
    #image-editor-modal .product-modal,
    #acessorios-modal .product-modal,
    #cores-modal .product-modal,
    #rodas-modal .product-modal,
    #interior-modal .product-modal,
    #modelos-modal .product-modal {
        width: 100%;
        margin-bottom: 0; /* Remove the gap */
        height: auto;
        max-height: 85vh;
        padding-bottom: 50px; /* Add padding to account for mobile nav bar */
    }

    .modal-header-actions {
        flex-wrap: wrap;
        gap: 5px;
    }

    /* --- Mobile Cores Panel Slide-up --- */
    #cores-panel-container {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 45vh; /* 45% of viewport height */
        transform: translateY(0);
        z-index: 1002; /* Ensure it's above the logo (1000) and other modals (1001) */
    }

    #cores-panel-container.is-retracted {
        transform: translateY(100%); /* Slide down to hide */
    }

    #cores-panel-container .panel-content {
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
        /* New layout styles for mobile */
        display: flex;
        flex-direction: column;
    }

    #cores-panel-container .cores-steps-menu {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr; /* This makes each column take up equal space */
        width: 100%;
        border-bottom: 1px solid var(--border-color);
        padding-top: 1.5rem; /* Add space for the close button */
        overflow-y: hidden;
        border-right: none;
    }

    #cores-panel-container .step-menu-btn {
        text-align: center;
        padding: 12px 16px;
        font-size: 0.9em;
        border-bottom: 3px solid transparent;
        margin-bottom: -1px; /* Overlap the bottom border */
        border-radius: 0;
    }

    #cores-panel-container .step-menu-btn.active {
        border-bottom-color: var(--primary-color);
        background-color: transparent;
        color: var(--primary-color);
    }

    #cores-panel-container .cores-options-area {
        flex-grow: 1;
        overflow-y: auto;
        padding: var(--spacing-md);
    }

    .modal-header-actions .btn-primary {
        padding: 0.6em 1em;
        font-size: 0.8em;
        flex-grow: 1; /* Allow buttons to grow */
    }

    #image-editor-modal .modal-header,
    #text-editor-modal .modal-header,
    #texture-editor-modal .modal-header,
    #acessorios-modal .modal-header {
        flex-direction: column;
        align-items: stretch; /* Make children take full width */
        gap: 10px;
    }

    .modal-header-content {
        display: none;
        order: 2; /* Move title below buttons */
        text-align: center;
    }

    .modal-header-actions {
        order: 1; /* Move buttons above title */
        justify-content: flex-end; /* Align buttons to the right */
    }

    /* --- Mobile-Specific Overrides --- */
    .simulei-logo {
        height: 15px;
    }

    #export-svg-btn {
        display: none;
    }

    /* --- Bottom Panel Refinements --- */
    .configurator-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2px 10px;
        background-color: white;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 10px 10px 0 0;
        margin-bottom: -1px; /* Connects with the panel below */
        position: relative;
        z-index: 1;
    }

    #bottom-panel-container.is-expanded .configurator-top-bar {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .configurator-top-bar .simulei-logo {
        height: 15px;
        margin-left: 10px;
    }

    #bottom-panel-container .configurator-collapsed {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    #mobile-controls-container {
        position: absolute;
        width: 95%;
        margin: auto;
        bottom: 15%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding-bottom: env(safe-area-inset-bottom, 10px);
        z-index: 20;
        pointer-events: none;
    }

    #mobile-controls-container button,
    #mobile-controls-container input,
    #mobile-controls-container label {
        pointer-events: auto;
    }

    #bottom-panel-container {
        width: 100%;
        transform: none !important;
        position: relative !important;
        transition: none;
    }

    /* Override the default display of controls inside the collapsed panel */
    .configurator-collapsed .left-controls,
    .configurator-collapsed .right-controls {
        display: none; /* Hide original logo and expand button from here */
    }

    .configurator-collapsed .center-controls {
        width: 70%;
        max-width: 300px; /* Prevent it from getting too wide on larger mobile screens */
        margin: 0 auto; /* Center the container */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .configurator-collapsed {
        padding: 0 10px; /* Remove vertical padding */
    }

    #bottom-panel-container .color-swatches-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        justify-content: center;
        padding: 5px;
    }

    /* --- Sponsor/Image Editor Modal --- */
    #image-editor-modal .control-section {
        margin-bottom: 20px;
    }

    #image-editor-modal .control-section-title {
        margin-bottom: 8px;
    }

    #manufacturer-area-grid,
    #sponsor-area-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 15px;
        justify-items: center;
    }

    #manufacturer-area-grid .area-btn,
    #sponsor-area-grid .area-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        height: auto;
        min-height: 90px;
    }

    #manufacturer-area-grid .area-btn img,
    #sponsor-area-grid .area-btn img {
        width: 100%;
        height: 40px;
        object-fit: contain;
        background-color: transparent;
        border-radius: 4px;
        margin: 0;
    }

    #manufacturer-area-grid .area-btn span,
    #sponsor-area-grid .area-btn span {
        font-weight: 500;
        font-size: 12px;
        color: #333;
        text-align: center;
    }

    #sponsor-actions {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

    #sponsor-action-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    #sponsor-action-buttons .btn {
        flex-grow: 1;
        padding: 12px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Acessorio Modal Content Fix --- */
    .acessorios-modal-content {
        flex-grow: 1;
        min-height: 0; /* Add this to prevent overflow issues in flex children */
    }

    .finish-button .desktop-text {
        display: none;
    }

    .finish-button .mobile-icon {
        display: inline-block;
    }

    .finish-button {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
    }

    /* --- Responsive Button Grid Layout --- */
    #button-grid-desktop-container {
        display: none;
    }

    .mobile-undo-redo-controls {
        position: absolute;
        display: flex;
        gap: 10px;
        top: 2.5em;
        left: 5px;
        z-index: 10;
    }
}