@font-face {
    font-family: 'Frutiger LT STD 45 Light';
    src: url('/fonts/FrutigerLTStd-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger LT STD 55 Roman';
    src: url('/fonts/FrutigerLTStd-Roman.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

body {
    font-family: 'Frutiger LT STD 45 Light', sans-serif !important;
    background: #EFEFEF;
}

/* Panel */
#formColumn {
    position: fixed;
    top: 80px;
    right: 0;
    width: 480px;
    height: calc(100% - 100px);
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    transition: transform 0.4s ease;
    transform: translateX(100%);
    z-index: 1500;
    overflow-y: auto;
}

    #formColumn.open {
        transform: translateX(0);
    }

/* Options tab */
#optionsTab {
    position: fixed;
    top: 150px;
    right: 0;
    background: #0d6efd;
    color: white;
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: none;
    z-index: 2001;
}

    #optionsTab:hover {
        background: #0b5ed7;
    }

/* Canvas */
#mainCanvas {
    width: 526px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 1px #666 solid;
}

#canvasOuter {
    text-align: center;
    margin: 20px auto;
}

/* USER MODE: hide designer-only controls */
.user-mode .designer-only {
    display: none !important;
}


/* Hide all controls for non-editable items */
.not-editable textarea,
.not-editable .colour-field,
.not-editable .fontsize-field,
.not-editable .scale-field,
.not-editable .designer-xy,
.not-editable .form-check .lock-field,
.not-editable label.form-check-label[for*="lock_"],
.not-editable .coord-label {
    display: none !important;
}

/* Hides designer-only unless in Designer mode */
.always-hidden {
    display: none !important;
}


.image-option-thumb-wrapper {
    position: relative;
    display: inline-block;
}

.image-option-thumb {
    height: 100px;
    width: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
    object-fit: contain;
    background: #f8f9fa;
    padding: 2px;
}

    /* Blue outline when selected */
    .image-option-thumb.selected {
        border-color: #0d6efd;
        box-shadow: 0 0 6px rgba(13,110,253,0.6);
    }

/* Checkmark overlay */
.image-checkmark {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #0d6efd;
    color: white;
    font-size: 16px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.15s ease-in-out;
    pointer-events: none;
}

/* When selected, show checkmark */
.image-option-thumb-wrapper.selected .image-checkmark {
    opacity: 1;
    transform: scale(1);
}


.designer-xy,
.scale-field {
    padding: 2px 6px;
}


/* Style textareas inside the Material Builder panel */
#formColumn textarea {
    min-height: 110px !important;
    font-size: 80% !important;
    
}


/* All editable controls are always visible */
.editable-only {
    display: block !important;
}

/* Designer-only still hides in User mode */
.user-mode .designer-only {
    display: none !important;
}


/* Force FEATURE items to stack as full-width blocks */
.image-option-thumb-wrapper.feature-item {
    /*display: block;
    width: 100%;*/
    margin: 20px 20px 10px 20px;    
}

.feature-option-thumb {
    width: 300px;
}


.upload-preview-wrapper {
    position: relative;
}

.upload-preview {
    display: block;
}

.remove-upload-btn {
    z-index: 10;
    cursor: pointer;
}

#formColumn .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#formColumn .card-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid #ddd;
}

#formColumn .card-body {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 80px; /* room for last options */
}

/* Download section under settings */
.download-section {
    padding: 16px 20px;
    border-top: 1px solid #e4e4e4;
    background: #fafafa;
    text-align: center;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

    /* Button spacing improvement */
    .download-section .btn {
        min-width: 140px;
        font-weight: 500;
    }

/* Text option list */
.text-option-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Wrapper for each selectable text option */
.text-option-wrapper {
    position: relative; /* Needed for checkmark positioning */
    padding: 6px 10px !important;
    min-height: auto !important;
    border: 1px solid #CCC;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .text-option-wrapper:hover {
        background-color: #f8f9fa;
    }

/* The text inside the option */
.text-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px; /* tighter, look cleaner */
    margin: 0;
}

/* --- CHECKMARK FOR SELECTED TEXT OPTIONS --- */

.text-option-wrapper .image-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #0d6efd;
    color: white;
    font-size: 14px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease-in-out;
    pointer-events: none;
}

/* Show checkmark when selected */
.text-option-wrapper.selected .image-checkmark {
    opacity: 1;
    transform: scale(1);
}