/* =================================================== */
/* WRAPPED IN #uscv-wrapper TO PROTECT FROM WP THEMES  */
/* =================================================== */

#uscv-wrapper * { box-sizing: border-box; margin: 0; padding: 0; }
#uscv-wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f4f7fa; color: #333; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; user-select: none; display: flex; flex-direction: row; width: 100%; height: auto; position: relative; border: 1px solid #eee; }

/* DESKTOP LAYOUT */
#uscv-wrapper .control-panel { width: 18%; max-width: 320px; min-width: 260px; height: auto; background-color: #ffffff; border-right: 1px solid #e0e0e0; box-shadow: 2px 0 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; flex-shrink: 0; z-index: 10; transition: transform 0.3s ease-in-out; }
#uscv-wrapper .control-panel.is-collapsed { transform: translateX(-100%); box-shadow: none; }
#uscv-wrapper .visualizer-container { flex: 1; height: 100%; background-color: #f4f7fa; position: relative; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: width 0.3s ease-in-out; }

/* DESKTOP TOGGLE BUTTON */
#uscv-wrapper .btn-desktop-toggle { position: absolute; top: 50%; left: -1px; transform: translateY(-50%); width: 25px; height: 60px; background: #fff; border: 1px solid #e0e0e0; border-left: none; border-radius: 0 8px 8px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.05); cursor: pointer; z-index: 9; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; }
#uscv-wrapper .btn-desktop-toggle span { font-size: 18px; font-weight: bold; color: #007aff; transition: transform 0.3s ease; }
#uscv-wrapper .control-panel.is-collapsed + .visualizer-container .btn-desktop-toggle { left: 0; z-index: 11; box-shadow: 2px 0 15px rgba(0,0,0,0.1); }
#uscv-wrapper .control-panel.is-collapsed + .visualizer-container .btn-desktop-toggle span { transform: rotate(180deg); }

/* INNER VISUALIZER */
#uscv-wrapper .visualizer-inner { position: relative; width: 100%; max-width: 1920px; margin: auto; aspect-ratio: 1920 / 1080; }
#uscv-wrapper .viz-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; max-width: none !important; }
#uscv-wrapper .hotspot { position: absolute; cursor: pointer; z-index: 10; border-radius: 50%; }

/* PANEL STYLES */
#uscv-wrapper .panel-header { padding: 20px 24px; border-bottom: 1px solid #eee; flex-shrink: 0; position: relative; }
#uscv-wrapper .panel-header h2 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 5px; line-height: 1.2; }
#uscv-wrapper .panel-header p { font-size: 14px; color: #666; margin: 0; }
#uscv-wrapper .panel-body { flex: 1; overflow-y: auto; padding: 20px; }
#uscv-wrapper .panel-section-title { font-size: 16px; font-weight: 600; color: #111; text-align: center; margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
#uscv-wrapper .panel-footer { padding: 20px; border-top: 1px solid #eee; background-color: #fdfdfd; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
#uscv-wrapper #hover-prompt { position: absolute; display: none; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; z-index: 100; pointer-events: none; transform: translate(-50%, -150%); white-space: nowrap; }

/* BUTTONS & LISTS */
#uscv-wrapper .btn-primary, #uscv-wrapper .btn-reset, #uscv-wrapper .btn-mobile-open { width: 100%; padding: 12px; font-size: 14px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
#uscv-wrapper .btn-primary { background-color: #007aff; color: white; }
#uscv-wrapper .btn-primary:hover { background-color: #005ecb; }
#uscv-wrapper .btn-reset { background-color: transparent; color: #c62828; border: 1px solid #ef9a9a; display: flex; align-items: center; justify-content: center; gap: 8px; }
#uscv-wrapper .btn-reset:hover { background-color: #ffebee; border-color: #c62828; }
#uscv-wrapper .btn-icon { font-size: 16px; line-height: 1; }
#uscv-wrapper .btn-back { display: block; width: 100%; padding: 10px; font-size: 14px; font-weight: 600; color: #007aff; background-color: #f0f5ff; border: 1px solid #b3d4ff; border-radius: 8px; cursor: pointer; text-align: center; margin-bottom: 20px; transition: all 0.2s ease; }
#uscv-wrapper .btn-back:hover { background-color: #e6f0ff; border-color: #007aff; }
#uscv-wrapper .part-list-item { display: flex; justify-content: space-between; align-items: center; background-color: #fff; border: 1px solid #eee; padding: 10px; border-radius: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease, transform 0.1s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
#uscv-wrapper .part-list-item:hover { background-color: #f9f9f9; border-color: #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.08); transform: translateY(-1px); }
#uscv-wrapper .part-list-chevron { font-size: 16px; font-weight: bold; color: #007aff; }
#uscv-wrapper .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
#uscv-wrapper .swatch { display: flex; flex-direction: column; align-items: center; cursor: pointer; border-radius: 8px; border: 3px solid transparent; padding: 0; transition: border 0.2s ease; position: relative; }
#uscv-wrapper .swatch-color { width: 100%; height: 50px; border-radius: 6px; border: 1px solid #00000020; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; }
#uscv-wrapper .swatch-label { font-size: 11px; color: #555; margin-top: 5px; text-align: center; padding-bottom: 3px; line-height: 1.2; }
#uscv-wrapper .swatch.is-selected { border-color: #007aff; }
#uscv-wrapper .swatch-spinner { display: none; width: 22px; height: 22px; border: 3px solid rgba(0, 0, 0, 0.2); border-top-color: #333; border-radius: 50%; animation: uscv-spin 1s linear infinite; }
#uscv-wrapper .swatch.is-loading .swatch-color { background-color: #f0f0f0; }
#uscv-wrapper .swatch.is-loading .swatch-spinner { display: block; }

@keyframes uscv-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes uscv-flash { from { box-shadow: 0 0 0 0px rgba(0, 122, 255, 0.7); } to { box-shadow: 0 0 0 20px rgba(0, 122, 255, 0); } }
#uscv-wrapper .hotspot.flash-active { animation: uscv-flash 0.3s ease-out; }

/* MOBILE ELEMENTS (HIDDEN ON DESKTOP) */
#uscv-wrapper .mobile-button-group, 
#uscv-wrapper .btn-mobile-close,
#uscv-wrapper .mobile-instruction { display: none; } 

/* HOTSPOT POSITIONS */
#uscv-wrapper .door { top: 50.9%; left: 49.47%; width: 7.03%; height: 25%; }
#uscv-wrapper .curtainw { top: 51.85%; left: 84.375%; width: 3.385%; height: 20.37%; }
#uscv-wrapper .curtainw2 { top: 51.85%; left: 77.6%; width: 3.385%; height: 20.37%; }
#uscv-wrapper .curtainw3 { top: 51.85%; left: 70.46%; width: 3.385%; height: 20.37%; }
#uscv-wrapper .curtaing { top: 50.9%; left: 11.97%; width: 32.8%; height: 28.24%; rotate: -1deg; }
#uscv-wrapper .bottombarg { top: 78.7%; left: 11.97%; width: 33.07%; height: 1.38%; rotate: -2.3deg; }
#uscv-wrapper .pelmetw { top: 49.07%; left: 83.85%; width: 4.42%; height: 2.77%; }
#uscv-wrapper .pelmetw2 { top: 49.07%; left: 77.08%; width: 4.42%; height: 2.77%; }
#uscv-wrapper .pelmetw3 { top: 49.07%; left: 70.0%; width: 4.42%; height: 2.77%; }
#uscv-wrapper .bottombarw { top: 72.22%; left: 84.375%; width: 3.385%; height: 0.74%; }
#uscv-wrapper .bottombarw2 { top: 72.22%; left: 77.6%; width: 3.385%; height: 0.74%; }
#uscv-wrapper .bottombarw3 { top: 72.22%; left: 70.46%; width: 3.385%; height: 0.74%; }
#uscv-wrapper .guidew { top: 51.85%; left: 87.76%; width: 0.52%; height: 20.37%; }
#uscv-wrapper .guidew2 { top: 51.85%; left: 84.06%; width: 0.31%; height: 20.37%; }
#uscv-wrapper .guidew3 { top: 51.85%; left: 81.0%; width: 0.52%; height: 20.37%; }
#uscv-wrapper .guidew4 { top: 51.85%; left: 77.29%; width: 0.31%; height: 20.37%; }
#uscv-wrapper .guidew5 { top: 51.85%; left: 73.85%; width: 0.52%; height: 20.37%; }
#uscv-wrapper .guidew6 { top: 51.85%; left: 70.15%; width: 0.31%; height: 20.37%; }
#uscv-wrapper .dormer { top: 24.8%; left: 43.48%; width: 17.7%; height: 9.25%; }
#uscv-wrapper .roof { top: 30.37%; left: 4.375%; width: 45.83%; height: 11.57%; }
#uscv-wrapper .roof2 { top: 32.22%; left: 22.4%; width: 48.43%; height: 9.25%; }
#uscv-wrapper .roof3 { top: 34.07%; left: 54.16%; width: 39.58%; height: 7.4%; }
#uscv-wrapper .roof4 { top: 29.25%; left: 51.56%; width: 10.93%; height: 0.92%; rotate: 28deg; }
#uscv-wrapper .roof5 { top: 28.24%; left: 42.18%; width: 10.93%; height: 1.2%; rotate: -25deg; }
#uscv-wrapper .gutter { top: 42.13%; left: 2.34%; width: 60.15%; height: 1.38%; transform: rotate(0.4deg); }
#uscv-wrapper .gutter2 { top: 41.48%; left: 64.58%; width: 31.5%; height: 1.38%; }
#uscv-wrapper .gutter3 { top: 41.85%; left: 62.24%; width: 2.86%; height: 1.38%; rotate: -9deg; }
#uscv-wrapper .wall { top: 46.75%; left: 7.03%; width: 4.68%; height: 34.72%; }
#uscv-wrapper .wall2 { top: 46.75%; left: 45.05%; width: 4.68%; height: 31.94%; }
#uscv-wrapper .wall3 { top: 45.83%; left: 81.5%; width: 2.6%; height: 31.0%; transform: rotate(-1deg); }
#uscv-wrapper .wall4 { top: 45.83%; left: 88.02%; width: 2.6%; height: 31.0%; transform: rotate(-1deg); }
#uscv-wrapper .wall5 { top: 45.83%; left: 74.63%; width: 2.6%; height: 31.0%; transform: rotate(-1deg); }
#uscv-wrapper .wall6 { top: 45.83%; left: 56.56%; width: 13.54%; height: 31.0%; transform: rotate(-1deg); }
#uscv-wrapper .wall7 { top: 46.3%; left: 7.08%; width: 63.02%; height: 3.98%; }
#uscv-wrapper .wall8 { top: 45.37%; left: 69.58%; width: 20.93%; height: 3.98%; }
#uscv-wrapper .wall9 { top: 73.14%; left: 69.58%; width: 21.35%; height: 3.98%; transform: rotate(-2deg); }
#uscv-wrapper .fascia { top: 43.88%; left: 3.43%; width: 59.1%; height: 2.77%; }
#uscv-wrapper .fascia2 { top: 42.96%; left: 65.625%; width: 29.94%; height: 2.5%; transform: rotate(0.3deg); }
#uscv-wrapper .fascia3 { top: 43.33%; left: 62.5%; width: 3.64%; height: 2.77%; transform: rotate(-8deg); }
#uscv-wrapper .gutterpipe { top: 46.3%; left: 4.21%; width: 2.6%; height: 34.72%; }
#uscv-wrapper .gutterpipe2 { top: 45.37%; left: 90.73%; width: 2.6%; height: 31.0%; transform: rotate(-1deg); }
#uscv-wrapper .gutterpipe3 { top: 45.37%; left: 65.88%; width: 2.08%; height: 32.4%; transform: rotate(-1deg); }

/* MOBILE OVERRIDES */
@media (max-width: 900px) {
    #uscv-wrapper { height: auto !important; flex-direction: column; border: none; aspect-ratio: auto !important; } /* auto height removes the big gap */

    #uscv-wrapper .control-panel { position: fixed; top: unset; bottom: -110%; left: 0; width: 100%; max-width: none; min-width: unset; height: 60vh; max-height: 550px; z-index: 3000; border-right: none; border-top: 1px solid #ddd; border-radius: 20px 20px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.15); transition: bottom 0.3s ease-in-out; transform: none; }
    #uscv-wrapper .control-panel.is-mobile-open { bottom: 0; }
    #uscv-wrapper .control-panel.is-collapsed { transform: none; } 

    #uscv-wrapper .control-panel .panel-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
    #uscv-wrapper .control-panel .panel-header h2 { display: none; }
    #uscv-wrapper .control-panel .panel-header p { display: block; font-size: 16px; font-weight: 600; color: #111; margin: 0; line-height: 1.2; }
    
    #uscv-wrapper .btn-mobile-close { display: block; position: static; transform: none; width: auto; height: auto; background: transparent; border: none; color: #888; font-size: 30px; font-weight: 300; line-height: 1; padding: 0 0 0 15px; flex-shrink: 0; }
    
    #uscv-wrapper .visualizer-container { width: 100%; flex: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; }
    #uscv-wrapper .visualizer-inner { position: relative; top: 0; transform: none; width: 100%; height: auto; margin: 0 auto; }
    #uscv-wrapper .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); gap: 10px; }
    
    #uscv-wrapper #hover-prompt { display: none !important; }
    #uscv-wrapper .btn-desktop-toggle { display: none !important; }
    
    /* SHOW INSTRUCTION ON MOBILE */
    #uscv-wrapper .mobile-instruction { display: block; max-width: none; font-size: 14px; font-weight: 500; color: #005ecb; text-align: center; padding: 12px; margin: 0 auto 15px auto; background-color: #f0f5ff; border: 1px solid #b3d4ff; border-radius: 8px; width: 100%; }
    
    /* HIDE DESKTOP FOOTER ON MOBILE */
    #uscv-wrapper .panel-footer { display: none; }

    /* IMPROVED MOBILE BUTTON GROUP */
    
    #uscv-wrapper .mobile-button-group { display: flex; width: 100%; padding: 15px 10px; background-color: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); flex-shrink: 0; gap: 10px; }
    
    /* Standardize all mobile action buttons */
    #uscv-wrapper .btn-mobile-action { flex: 1; padding: 12px 5px; font-size: 13px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; }
    
    /* Both main buttons get the standard desktop blue */
    #uscv-wrapper #btn-mobile-full,
    #uscv-wrapper #btn-mobile-parts { background-color: #007aff; color: white; border: none; }
    
    /* Reset gets the red outline style */
    #uscv-wrapper #btn-mobile-reset { background-color: #fff; color: #c62828; border: 1px solid #ef9a9a; }
}