/* =========================================
   1. SMART GASKET SYSTEM (Auto-Pilot UI)
   ========================================= */
#sgs-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 45, 32, 0.95);
    color: #FFC9AB;
    padding: 12px 24px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 201, 171, 0.3);
    border-top: none;
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

#sgs-toast.visible {
    top: 0;
}

.sgs-loader {
    width: 16px;
    height: 16px;
    border: 2px solid #D1E2C0;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: sgs-spin 1s linear infinite;
}

@keyframes sgs-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Smart Hints - Dynamic Palette System
   ========================================================================== */

.model_mini {
    position: relative !important;
    transition: all 0.2s ease;
    --indicator-color: #999; 
}

.model_mini.set-active::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    background-color: var(--indicator-color);
    border: 1px solid #ffffff;
    transform: scale(1.1);
}

.model_mini.set-hint {
    border: 2px solid transparent !important;
    box-shadow: none !important;
}

.model_mini.set-hint::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    background-color: transparent;
    border: 2px solid var(--indicator-color);
}

/* Overlay Background */
.bride-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

/* Modal Box */
.bride-modal-content {
    background: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.bride-modal-header h2 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 24px;
}
.bride-modal-header p {
    margin: 0 0 20px 0;
    color: #666;
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #444;
}
.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}

.bride-note-box {
    background-color: #f8f9fa;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
}
.bride-note-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
.note-icon {
    font-size: 18px;
}

.bride-modal-btn {
    width: 100%;
    padding: 14px;
    background-color: #2D4630;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
.bride-modal-btn:hover {
    background-color: #1e3020;
}

/* =========================================
   Labeling System UI (Legacy Support)
   ========================================= */
.label-category-section {
    margin-bottom: 20px;
}

.label-category-header {
    font-size: 14px;
    font-weight: 600;
    color: #FFC9AB;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 201, 171, 0.2);
    padding-bottom: 5px;
}

.label-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.label-item {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 5px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.label-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.label-item .model_mini {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
}

.label-item .model_mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.label-item.has-note .model_mini {
    border-color: #28a745; 
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.label-item.has-note .model_mini::after {
    content: '✓';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #28a745;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a1a1a;
    z-index: 10;
}

.label-item.active .model_mini {
    border-color: #FFC9AB;
    box-shadow: 0 0 10px rgba(255, 201, 171, 0.3);
}

.label-item-name {
    font-size: 10px;
    color: #ccc;
    text-align: center;
    margin-top: 5px;
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popover Note Input */
.label-popover {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: #1a1a1a;
    border: 1px solid #FFC9AB;
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.label-popover.visible {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.label-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #FFC9AB transparent transparent transparent;
}

.label-popover textarea {
    width: 100%;
    background: #2d2d2d;
    border: 1px solid #444;
    color: #f0f0f0;
    font-size: 12px;
    padding: 8px;
    border-radius: 4px;
    resize: none;
    min-height: 60px;
    outline: none;
}

.label-popover textarea:focus {
    border-color: #FFC9AB;
}

.label-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.label-popover-title {
    font-size: 11px;
    font-weight: bold;
    color: #FFC9AB;
}

.label-popover-close {
    font-size: 16px;
    color: #777;
    cursor: pointer;
    line-height: 1;
}
.label-popover-close:hover { color: #fff; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#labeling-container{
    /* gap:15px; */
}
.labeling-container .label-item{
    width:48%;
}

.warning-text p{
    width:100%;
    color:#FFCC00 !important;
}

.material_float .model_mini{
    border-radius:8px !important;
}

.coolors{
    display:contents;
}

/* =========================================
   ✅ NEW STYLES: 3D Preview & List-View Labeling
   ========================================= */

/* 1. 3D Preview Canvas Wrapper */
#final-design-3d-wrapper {
    width: 100%;
    height: 350px;
    border-radius: 12px;
    overflow: hidden;
    /* margin-bottom: 20px; */
    position: relative;
    background: radial-gradient(circle at center, #2a2a2a 0%, #111 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    border: 1px solid #FDFDF026;
}

/* 2. New List View Labeling Container */
#labeling-container {
    /* max-height: 400px; */
    /* overflow-y: auto; */
    padding-right: 5px;
    margin-top: 15px;
}

#labeling-container::-webkit-scrollbar {
    width: 5px;
}

#labeling-container::-webkit-scrollbar-thumb {
    background: #404942;
    border-radius: 3px;
}

/* 3. Categories Headers */
.label-category h6 {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 15px;
    color: #FFC9AB;
    border-bottom: 1px solid rgba(64, 73, 66, 0.5);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 4. The Row Item (Thumbnail Left, Input Right) */
.label-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.label-item-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #404942;
}

/* 5. The Thumbnail Box */
.label-preview-box {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #FDFDF026;
    flex-shrink: 0;
    background: #222;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.label-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 6. The Text Input Area */
.label-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.label-item-name {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 2px;
    font-weight: 600;
}

.label-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    color: #fff;
    font-size: 13px;
    padding: 4px 0;
    outline: none;
    transition: border-color 0.2s;
}

.label-input:focus {
    border-bottom-color: #FFC9AB;
}

.label-input::placeholder {
    color: #555;
    font-style: italic;
}



/* ===================================== */

/* ==========================================================================
   ADDITIVE STYLES FOR SAVE DESIGN MODAL
   Append these to your existing CSS. Do not replace your file.
   ========================================================================== */

/* --- 3D Preview Canvas (New Feature) --- */
.preview-3d-container {
    width: 100%;
    background-color: #f0f0f0; /* Darker background to verify visibility */
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    /* Ensures minimum height if JS fails */
    min-height: 300px; /* Increased height */
    /* CRITICAL FIX: display: flex ensures the child canvas fills the min-height */
    display: flex; 
    align-items: center;
    justify-content: center;
    z-index: 10; /* Ensure it sits on top */
}

.preview-3d-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
    cursor: grab;
}

.preview-3d-container canvas:active {
    cursor: grabbing;
}

/* --- Labeling List Container --- */
#labeling-container {
    /* max-height: 400px; */
    /* overflow-y: auto; */
    padding-right: 5px;
    margin-bottom: 20px;
    border-top: 1px solid #FDFDF026;
    padding-top: 15px;
}

/* --- Labeling List Rows --- */
.label-category-section {
    margin-bottom: 15px;
}

.label-category-title {
    font-size: 14px;
    color: #2D4630; /* Your App Theme Color */
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.label-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

/* --- Thumbnails in List --- */
.label-preview-box {
    width: 50px; /* Increased size for visibility */
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee; /* Contrast background */
    position: relative;
    z-index: 5;
}

.label-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Fix inline spacing issues */
}

/* --- Input Fields in List --- */
.label-input-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.label-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.label-note-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #666;
    padding: 4px 0;
    border-bottom: 1px dashed #ccc;
    transition: border-bottom 0.3s;
}

.label-note-input:focus {
    outline: none;
    border-bottom: 1px solid #2D4630;
    color: #000;
}

/* --- Disabled Button State (Validation) --- */
#proceed_and_save_btn.disabled,
#proceed_and_save_btn:disabled {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* --- Scrollbar Polish --- */
#labeling-container::-webkit-scrollbar {
    width: 6px;
}
#labeling-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#labeling-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}


/* ============================== */
/* NEW: SKELETON LOADER ANIMATIONS */
/* ============================== */
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}


/* ==========================================================================
   NEW MODAL LAYOUT STYLES
   ========================================================================== */

/* Expand the modal width for the side-by-side layout */
.design_final_modal {
    width: 90% !important;
    max-width: 1200px !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.flex_layout_wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    height: 100%;
    overflow: hidden; /* Prevent outer scroll */
}

/* Left Column: 3D Preview */
.preview_column {
    flex: 1.2; /* Takes slightly more space */
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

/* Right Column: Form & Details */
.details_column {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Scroll ONLY the form side */
    padding-right: 10px; /* Space for scrollbar */
}

/* Scrollbar styling for the details column */
.details_column::-webkit-scrollbar {
    width: 6px;
}
.details_column::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.details_column::-webkit-scrollbar-thumb {
    background: #404942;
    border-radius: 3px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .flex_layout_wrapper {
        flex-direction: column;
        overflow-y: auto;
    }

    .preview_column {
        /* height: 350px; */
        flex: none;
    }

    .details_column {
        flex: none;
        overflow-y: visible; 
    }
    
    .design_final_modal {
        max-height: 95vh;
        overflow-y: auto;
    }
}

@media (max-width:624px){
    .design_final_modal{
        width:100% !important;
    }
}

/* Override existing preview container height for this specific layout */
.preview_column .preview-3d-container {
    height: 100% !important;
    min-height: 400px;
    margin-bottom: 0; /* Remove bottom margin in side-by-side */
}

/* Ensure the proceed button looks good in the column */
.details_column .modal_btn {
    width: 100%;
    margin-top: 20px;
}

/* ====================================== */

/* Model mini tooltip - Premium Blue Design */
.model_mini {
  position: relative;
}

.model_mini .model-tooltip {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30, 58, 138, 0.95); /* Deep Blue */
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1000;
  line-height: 1;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Arrow pointing down */
.model_mini .model-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(30, 58, 138, 0.95);
}

.model_mini:hover .model-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ========================================= */
/* extra modal animation  */

/* ── Modal content staggered entrance ───────────────────────── */

/* Base state: hidden, shifted down slightly */
.model_popup .pop_top,
.model_popup .pop_mid,
.model_popup .pop_bot {
  opacity: 0;
  transform: translateY(18px);
  transition: none; /* JS will control via animation */
}

/* Entrance animation keyframe */
@keyframes popChildIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  60% {
    transform: translateY(-4px); /* slight overshoot = bouncy */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* When the popup is active AND children have been triggered */
.model_popup .pop_top.pop-animate,
.model_popup .pop_mid.pop-animate,
.model_popup .pop_bot.pop-animate {
  animation: popChildIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards;
}

/* Stagger delays */
.model_popup .pop_top.pop-animate { animation-delay: 0.25s; }
.model_popup .pop_mid.pop-animate { animation-delay: 0.38s; }
.model_popup .pop_bot.pop-animate { animation-delay: 0.50s; }

/* ─────────────────────────────────────────────────────────────── */



/* ── Background thumbnails: hover scale + chosen ring glow ─── */
.bgs img {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.bgs img:hover {
  transform: scale(1.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.bgs img.chosen {
  transform: scale(1.12);
  border: 2px solid #FFC9AB;
  box-shadow: 0 0 0 3px rgba(255, 201, 171, 0.35),
              0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ── Background fade layer ───────────────────────────────────── */
.bg-fade-layer {
  position: absolute;
  inset: 0;               /* covers the full model_wrapper */
  z-index: 0;             /* behind the canvas */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* ─────────────────────────────────────────────────────────────── */


/* ── Nav dropdown menu ───────────────────────────────────────── */
.nav-menu-wrap {
  position: relative;
  z-index: 200;
}

/* Hamburger button */
.nav-menu-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.nav-menu-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.06);
}

.nav-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #FDFDF0;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate to X when open */
.nav-menu-wrap.open .nav-menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-menu-wrap.open .nav-menu-btn span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-menu-wrap.open .nav-menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(20, 29, 21, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.3),
              visibility 0.25s ease;
}

.nav-menu-wrap.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Dropdown items */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #FDFDF0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFC9AB;
}

.nav-dropdown-item i {
  font-size: 14px;
  width: 16px;
  flex-shrink: 0;
}

/* User info row — not a link, just display */
.nav-user-info {
  cursor: default;
  opacity: 0.85;
}
.nav-user-info:hover {
  background: transparent;
  color: #FDFDF0;
}

/* Login link accent */
.nav-login-link:hover {
  color: #FFC9AB;
}
.nav-login-link strong {
  color: #FFC9AB;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Status icons */
.nav-status-icon.logged-in  { color: #4CAF50; }
.nav-status-icon.logged-out { color: #ff3b30; }

/* Divider */
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 8px;
}
/* ─────────────────────────────────────────────────────────────── */


/* ====================================== */

/* Background Fade Layer for smooth transitions */
.bg-fade-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Behind the canvas (z-index 5-10) */
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

.model_wrapper {
    position: relative;
    overflow: hidden;
    /* Ensure the wrapper itself doesn't block the fade layer */
    background-image: none !important; 
}

/* Ensure the canvas sits on top of the background */
.model_wrapper canvas {
    position: relative;
    z-index: 5;
}



/* =========================================
   Panel slide-in item animations
   (model_customise + position-adjust-panel)
   ========================================= */

@keyframes panelItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.panel-slide-item {
  opacity: 0; /* hidden until animation fires */
}

.panel-slide-item.panel-animating {
  animation: panelItemSlideIn 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}


/* ================================================================ */

/* Material skeleton loader */
        .mat-skeleton-wrap {
            position: relative;
        }
        .mat-skeleton-box {
            position: absolute;
            inset: 0;
            border-radius: 6px;
            background: linear-gradient(90deg, #2a3a2c 25%, #324535 50%, #2a3a2c 75%);
            background-size: 200% 100%;
            animation: matShimmer 1.4s infinite linear;
        }
        @keyframes matShimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }


.model-sub-label {
    font-size: 9px;
    text-align: center;
    color: #888;
    margin-top: 2px;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    line-height: 1.2;

    position:absolute;
    bottom:-3px;
    left:50%;
    transform:translateX(-50%)
}



#clear-selections-btn {
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
#clear-selections-btn.visible {
    opacity: 1;
    pointer-events: auto;
}