/* model_enhancements.css - Modern Card UI, Responsive Grid, Enhanced Features */

/* --- Root Variables --- */
:root {
    --page-default-bg: linear-gradient(to bottom, #f4f6f8, #e9ecef);
}

/* --- Base & Typography --- */
.control-label {
    font-size: 0.875em; color: #495057; margin-bottom: 4px; display: block; font-weight: 500;
}
.export-note, .model-appearance-note {
    font-size: 0.8em !important; color: #6c757d !important; margin-bottom: 12px; line-height: 1.4;
}

/* --- Main Controls Layout (Flex for Rows) --- */
.viewer-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

/* --- Control Row Layout (Grid for Cards within a Row) --- */
.viewer-controls-row {
    display: grid;
    /* Change to 3 columns for the merged cards */
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* --- Card Styling --- */
.control-card {
    background-color: #ffffff; border: 1px solid #dee2e6; border-radius: 0.35rem;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.05);
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    /* Merged cards might be taller, ensure consistent height if desired using align-items on parent or min-height */
}
.control-card:hover {
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.07); transform: translateY(-2px);
}
.card-header {
    padding: 10px 15px; border-bottom: 1px solid #e9ecef; background-color: #f8f9fa;
    border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem;
}
.card-header h2 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #343a40; }
.card-body { padding: 15px; flex-grow: 1; }

/* Styling for sub-headers and dividers within merged cards (also added inline for quick test) */
.card-body h3 {
    font-size: 0.9rem; /* Slightly smaller than card title */
    color: #343a40;   /* Darker than regular text for emphasis */
    margin-top: 0;      /* Remove top margin if it's the first element */
    margin-bottom: 10px;
    padding-bottom: 5px; /* Space before the border */
    border-bottom: 1px solid #e9ecef; /* Subtle separator */
    font-weight: 500; /* Medium weight */
}
.card-body h3:first-child { /* If a sub-header is the very first item in card-body */
    margin-top: 0;
}
.card-body > *:not(h3) + h3 { /* Add top margin to h3 if it's not the first child and follows another element */
    margin-top: 15px;
}

.card-section-divider {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #dee2e6; /* Light divider */
}


/* Text Position Controls Styling */
.text-position-controls { margin-top: 15px; }
.text-position-controls .control-label { margin-bottom: 8px; }
.position-buttons-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 8px;
}
.modern-button.icon-button {
    padding: 6px 8px; font-size: 1.1em; min-width: 40px; line-height: 1;
}

.card-body .rotation-controls { display: flex; gap: 10px; margin-top: 10px; margin-bottom: 5px; }
.card-body .rotation-controls .modern-button { flex-grow: 1; }

.card-footer {
    padding: 12px 15px; border-top: 1px solid #e9ecef; background-color: #f8f9fa;
    border-bottom-left-radius: 0.35rem; border-bottom-right-radius: 0.35rem;
    display: flex; gap: 10px; justify-content: flex-end;
}
.card-footer .modern-button.full-width { flex-grow: 1; width: 100%; }

/* Button Grids (Image & Gradient) */
.button-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-image-button, .bg-gradient-button {
    width: 34px; height: 34px; border: 1px solid #ced4da; color: #495057; border-radius: 0.25rem; cursor: pointer; font-size: 0.75em;
    transition: all 0.15s ease-in-out; box-sizing: border-box; background-color: #f8f9fa;
    display: flex; align-items: center; justify-content: center;
}
.bg-gradient-button { text-indent: -9999px; overflow: hidden; }
.bg-image-button:hover, .bg-gradient-button:hover { border-color: #007bff; background-color: #e9ecef; }
.bg-image-button.active, .bg-gradient-button.active {
    background-color: #007bff; color: white; border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.bg-gradient-button.active { background-image: none !important; }

/* Modern Buttons & Inputs (styles remain largely the same) */
.modern-button {
    padding: 8px 14px; font-size: 0.85em; font-weight: 500; border-radius: 0.25rem; border: 1px solid transparent;
    cursor: pointer; transition: all 0.15s ease-in-out; background-color: #007bff; color: white;
    line-height: 1.5; text-align: center; display: inline-flex; align-items: center; justify-content: center;
}
.modern-button:hover { background-color: #0056b3; border-color: #0052a0; }
.modern-button.secondary { background-color: #6c757d; border-color: #6c757d; color: white; }
.modern-button.secondary:hover { background-color: #5a6268; border-color: #545b62; }
.modern-button:focus, .modern-button:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.35); }
.modern-button.secondary:focus, .modern-button.secondary:focus-visible { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }

.modern-input, .modern-select {
    display: block; width: 100%; padding: 8px 12px; font-size: 0.875em; font-weight: 400; line-height: 1.5;
    color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da;
    border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; box-sizing: border-box;
}
.modern-input:focus, .modern-select:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.modern-input.short { width: 75px; }
.modern-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px 10px; padding-right: 2.5rem;
}
.modern-select::-ms-expand { display: none; }
.modern-color-picker {
    height: 38px; min-width: 44px; padding: 4px; border: 1px solid #ced4da; border-radius: 0.25rem;
    box-sizing: border-box; cursor: pointer; background-color: #fff; vertical-align: middle;
}
.modern-color-picker:hover { border-color: #adb5bd; }

/* Text Overlay Controls specific styling (styles remain largely the same) */
.text-overlay-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.text-overlay-controls .input-group {
    display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 120px;
}
.text-overlay-controls .input-group.full-width-group { min-width: calc(100% - 24px); flex-basis: 100%; }
.text-overlay-controls .input-group label { white-space: nowrap; }
#card-text-overlay .input-group select#text-font-select { min-width: 140px; }
#card-text-overlay .input-group input#text-size-input.short { flex-grow: 0; }

.model-appearance-controls-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.model-appearance-controls-wrapper .control-label { margin-bottom: 0; margin-right: 5px; }

/* Text Overlay Display on Model Viewer */
#text-overlay-display {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 10px 18px; color: white;
    border-radius: 0.25rem; font-size: 24px; text-align: center;
    pointer-events: none; display: none; max-width: 90%; word-wrap: break-word;
    z-index: 10;
    white-space: nowrap; will-change: transform;
}

.hidden { display: none !important; }

/* --- Responsive Adjustments --- */
/* For 3 cards, they will be wider. Adjust breakpoints accordingly. */
@media (max-width: 1200px) { /* Example: When 3 cards start to get too cramped */
    .viewer-controls-row {
        /* Allow wrapping if 3 cards are too much, or switch to 2 columns then 1 */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* minmax for wider cards */
    }
}

@media (max-width: 992px) { /* Potentially switch to 2 columns */
    .viewer-controls-row {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Or explicitly repeat(2, 1fr) */
    }
}

@media (max-width: 768px) { /* Tablet and smaller, likely 1 or 2 columns */
    .viewer-controls-row {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
    /* Other existing responsive styles for card content can remain */
    .card-header h2 { font-size: 0.9rem; }
    .modern-button { font-size: 0.8rem; padding: 7px 10px; }
    /* ... etc ... */
}

@media (max-width: 576px) { /* Mobile phones - stack cards */
    .viewer-controls-row {
        grid-template-columns: 1fr; /* Stack all cards vertically */
    }
    /* Other existing responsive styles for card content can remain */
}

/* Styles from @media (max-width: 480px) can largely remain as they handle content within cards */