#simple-floating-bar{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:6px 50px;background-color:rgb(153 153 153 / 60%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:999999;opacity:0;transform:scale(0);transition:all 0.45s ease;}
#simple-floating-bar.active{opacity:1;transform:scale(1);transition:all 0.45s ease;}
#simple-floating-bar .title{margin:0;font-size:19px;font-weight:700;color:#fff;}
#simple-floating-bar button{margin:0;font-size:16px;font-weight:700;color:#fff;background-color:#424242;border:none;border-radius:5px;padding:8px 70px;cursor:pointer;transition:all 0.45s ease;}
#simple-floating-bar button:hover{background-color:#000000;color:#fff;}
#custom-floating-bar{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex-direction:column;padding:70px 50px 40px;background-color:#2d2d2d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:99999;opacity:0;transform:scale(0);transition:all 0.45s ease;}
#custom-floating-bar.active{opacity:1;transform:scale(1);transition:all 0.45s ease;}
#wrap-steps-floating-bar{max-width:100%;width:100%;height:100%;}
.steps-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.steps-content-wrapper{flex-grow:1;height:37vw;width:100%;padding:20px 60px 20px;background-color:#fff;border-radius:15px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.steps-content-wrapper::-webkit-scrollbar{display:none;}
.step-content-item{display:none;width:100%;height:100%;}
.step-content-item.active{display:block;animation:fadeIn 0.3s ease-in-out;}
@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
.steps-navigation-wrapper{display:flex;justify-content:flex-start;align-items:flex-start;padding-top:30px;gap:40px;width:100%;}
.step-nav-item{cursor:pointer;position:relative;flex:1;padding-bottom:10px;transition:opacity 0.3s ease;}
.step-nav-item:hover{opacity:1;}
.step-nav-title{font-size:1.6em;font-weight:700;color:#fff;margin-bottom:5px;opacity:0.5;transition:opacity 0.3s;}
.step-nav-item.active .step-nav-title{opacity:1;}
.step-nav-desc{font-size:12px;font-weight:400;color:#aaa;opacity:0.5;transition:opacity 0.3s;}
.step-nav-item.active .step-nav-desc{opacity:1;}
.step-indicator-bar{width:100%;height:4px;background-color:#666;border-radius:2px;margin-bottom:10px;transition:background-color 0.3s;}
.step-nav-item.active .step-indicator-bar{background-color:#fff;}
.doors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 10px;}
.door-card{background:#f4f5f7;border:1px solid #d0d0d0;border-radius:8px;padding:20px 20px 0;padding-bottom:20px;display:flex;flex-direction:column;justify-content:space-between;transition:transform 0.2s,box-shadow 0.2s;}
.door-card:hover{box-shadow:0 5px 15px rgba(0,0,0,0.08);}
.door-card-header{margin-bottom:10px;}
.door-title{font-size:20px;font-weight:800;margin:0 0 5px 0;color:#111;display:flex;align-items:center;}
.door-meta{font-size:13px;color:#555;line-height:1.5;}
.meta-label{font-weight:600;color:#333;margin-right:4px;}
.door-image-wrapper{height:280px;display:flex;align-items:center;justify-content:center;margin:10px 0 20px;overflow:hidden;position:relative;}
.door-card-footer{border-top:none;padding-top:0;}
.door-category-label{font-size:14px;color:#444;margin-bottom:5px;font-weight:500;}
.door-color-section{margin-bottom:20px;}
.color-label{font-size:14px;font-weight:700;color:#000;margin-bottom:8px;}
.selected-color-name{font-weight:400;margin-left:2px;}
.color-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.color-swatch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,0.1);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;}
.color-swatch:hover{transform:scale(1.1);}
.color-swatch.active{border:2px solid #f4f5f7;box-shadow:0 0 0 2px #1976D2;transform:scale(1.1);}
.door-select-btn{width:100%;border:none;border-radius:6px;padding:10px 0;font-size:16px;font-weight:700;cursor:pointer;background-color:#7fabda;color:#fff;transition:background-color 0.3s;margin-top:5px;}
.door-select-btn:disabled{background-color:#89aadd;cursor:default;opacity:1;}
.door-select-btn.active,.door-select-btn:not(:disabled){background-color:var(--bg-button-th);}
.sizing-step-container{display:flex;width:100%;height:100%;gap:40px;}
.sizing-left-panel{width:70%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:20px;position:relative;}
.sizing-right-panel{flex:1;padding-left:20px;display:flex;flex-direction:column;justify-content:center;padding-right:40px;}
.width-indicator-wrapper{width:80%;margin-bottom:20px;text-align:center;}
.width-line{display:flex;align-items:center;justify-content:center;position:relative;font-weight:700;font-size:18px;color:#000;width:500px;margin:0 auto;}
.width-line::before{content:'';position:absolute;top:50%;left:0;width:35%;height:2px;background:#000;z-index:1;}
.width-line::after{content:'';position:absolute;top:50%;right:0;width:35%;height:2px;background:#000;z-index:1;}
.width-text{z-index:2;background:#fff;padding:0 10px;}
.width-arrow-left,.width-arrow-right{font-size:19px;line-height:0;position:absolute;top:50%;}
.width-arrow-left{left:-5px;transform:translate(-1px,2px);}
.width-arrow-left::before{content:'\f341';font-family:"dashicons";position:absolute;top:50%;transform:translateY(-1.5px);left:0;width:35%;height:2px;background:#000;z-index:4;}
.width-arrow-right{right:0;transform:translate(-10px,2px);}
.width-arrow-right::before{content:'\f345';font-family:"dashicons";position:absolute;top:50%;transform:translateY(-1.5px);right:0;width:35%;height:2px;background:#000;z-index:4;}
.selected-door-image-wrapper{width:500px;height:auto;display:flex;align-items:center;justify-content:center;}
.selected-door-image-wrapper img{max-height:100%;max-width:100%;object-fit:cover;}
.placeholder-image{width:100%;height:100%;background:#f9f9f9;display:flex;align-items:center;justify-content:center;color:#ccc;border:2px dashed #eee;font-size:1.2em;}
.bank-match-section{margin-bottom:50px;}
.bank-match-options-container{display:flex;flex-direction:column;gap:15px;margin-bottom:25px;}
.bank-match-option{position:relative;}
.bank-match-option input[type="radio"]{display:none;}
.bank-match-option label{display:block;width:100%;padding:12px 15px;border:1px solid #ccc;border-radius:4px;font-size:15px;color:#999;background:#fff;cursor:pointer;transition:all 0.2s;text-align:left;}
.bank-match-option label:not(.disabled):hover{border-color:#999;}
.bank-match-option input:checked + label{border:2px solid var(--bg-button-th);color:#444;color:#222;padding:11px 14px;}
.bank-match-option label.disabled{border-color:#eee;color:#ccc;cursor:not-allowed;background:#fcfcfc;}
.coming-soon{font-size:0.8em;color:#ccc;font-style:auto;}
.bank-match-descriptions{padding-top:10px;}
.bm-desc-item{font-size:14px;color:#333;margin:0 0 12px 0;line-height:1.4;text-align:center;}
.bm-desc-item strong{font-weight:800;color:#000;}
.sizing-inputs-section{text-align:center;}
.sizing-title{font-size:26px;font-weight:800;margin:0 0 25px 0;color:#000;text-align:center;}
.sizing-input-group{display:flex;flex-direction:column;gap:15px;width:100%;}
.input-wrapper{display:flex;align-items:center;justify-content:space-between;border:1px solid #000;border-radius:6px;padding:0 20px;height:55px;background:#fff;transition:all 0.2s;cursor:text;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.input-wrapper:focus-within{border-width:2px;padding:0 19px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.input-value-area{display:flex;align-items:center;}
.input-wrapper input{border:none!important;background:transparent;font-size:18px;font-weight:800;color:#000;width:40px;outline:none;padding:0;margin:0;text-align:right;font-family:inherit;}
.input-wrapper input::-webkit-outer-spin-button,.input-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.input-wrapper input[type=number]{-moz-appearance:textfield;appearance:textfield;border:none;}
.unit-symbol{font-size:18px;font-weight:800;color:#000;margin-left:2px;}
.input-label-text{font-size:16px;color:#333;font-weight:400;}
.sizing-right-panel{display:flex;flex-direction:column;height:100%;padding-left:40px;padding-right:20px;justify-content:flex-start;}
.bm-groups-container{display:flex;justify-content:flex-end;margin-bottom:20px;}
.bm-groups-grid{display:flex;gap:15px;flex-wrap:wrap;justify-content:flex-end;max-width:100%;height:360px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.bm-group-item{cursor:pointer;text-align:center;width:100%;opacity:0.6;transition:all 0.2s;}
.bm-group-item.active,.bm-group-item:hover{opacity:1;}
.bm-group-visual{width:100%;height:auto;border:1px solid #ccc;background:#fff;margin-bottom:5px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.bm-group-visual img{width:100%;height:100%;object-fit:cover;}
.bm-group-visual .no-img{font-size:10px;color:#ccc;}
.bm-group-label{font-size:12px;color:#666;}
.bm-sizing-forms-container{margin-top:auto;margin-bottom:40px;}
.bm-sizing-header{text-align:center;margin-bottom:20px;}
.bm-sizing-title{font-size:24px;font-weight:800;margin:0 0 10px 0;color:#000;}
.bm-sizing-subtitle{font-size:13px;color:#444;line-height:1.4;max-width:350px;margin:0 auto;}
.bm-sizing-instructions{text-align:center;font-size:13px;color:#444;margin-bottom:20px;}
.bm-sizing-content-grid{display:flex;flex-direction:column;gap:15px;width:100%;max-width:500px;margin:0 auto;}
.bm-grid-row{display:flex;width:100%;align-items:stretch;}
.bm-grid-left{flex:0 0 55%;display:flex;align-items:center;}
.bm-grid-right{flex:0 0 45%;padding-left:20px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.bm-input-box{width:100%;border:1px solid #000;background:#fff;border-radius:6px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;height:60px;}
.bm-input-value{font-size:18px;font-weight:800;color:#000;}
.bm-input-label{font-size:16px;color:#333;font-weight:400;}
.bm-group-diagram-container{text-align:center;position:absolute;bottom:-60px;position:static;display:flex;flex-direction:column;align-items:center;}
.bm-group-diagram-container img{max-width:80px;margin-bottom:5px;}
.bm-diagram-label{font-size:12px;color:#666;margin-top:5px;}
.bm-toggles{display:flex;gap:8px;width:100%;}
.bm-toggle-btn{background:#f4f5f7;border:1px solid transparent;border-radius:6px;padding:8px 5px;font-size:11px;font-weight:500;color:#444;cursor:pointer;line-height:1.2;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;word-break:break-word;white-space:normal;}
.bm-toggle-btn:hover{background:#e9eaec;}
.bm-toggle-btn.active{border:2px solid #2196F3;color:#000;font-weight:700;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05);}

/* Boring Step Styles */
.boring-header{margin-bottom:20px;text-align:center;}
.boring-title{font-size:24px;font-weight:800;margin:0 0 10px 0;color:#000;text-align:center;}
.boring-description{font-size:15px;color:#444;text-align:center;line-height:1.4;margin-bottom:20px;max-width:400px;margin-left:auto;margin-right:auto;}

/* Boring Groups List */
.boring-groups-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;margin:0 auto 30px;}
.boring-group-option{display:flex;align-items:center;justify-content:space-between;padding:8px 15px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;transition:all 0.2s;}
.boring-group-option:hover{border-color:#999;}
.boring-group-option.active{border:2px solid #2196F3;padding:7px 14px;}
.boring-opt-label{font-size:14px;font-weight:500;color:#333;}
.boring-group-option.active .boring-opt-label{font-weight:700;color:#000;}
.boring-opt-icon img{height:30px;width:auto;display:block;object-fit:cover;}

/* Placement Sections */
.boring-placements-container{width:100%;max-width:500px;margin:0 auto;}
.placement-section{margin-bottom:30px;}
.placement-label{font-size:15px;color:#333;margin-bottom:15px;}
.placement-visuals{display:flex;align-items:center;justify-content:space-between;}
.placement-sizes{display:flex;gap:15px;align-items:center;}
.placement-circle{width:40px;height:40px;border-radius:50%;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#555;background:#fff;cursor:pointer;}
.placement-circle:hover{border-color:#999;}
.placement-circle.active{border:2px solid #2196F3;color:#000;font-weight:800;}
.placement-diagram{flex-grow:1;display:flex;justify-content:flex-end;}
.placement-diagram img{max-width:150px;height:auto;display:block;}

/* Step Specific - Hinge Selection */

/* Override/Adjust existing classes for Hinge context if needed */

/* Hinge Navigation Tabs (Right Panel Top) */
.hinge-nav-wrapper{width:100%;margin-bottom:30px;display:flex;justify-content:flex-end; /* Align right as per visual hint for these inputs */}
.hinge-nav-tabs{display:flex;flex-direction:column;gap:10px;}
.hinge-nav-wrapper .hinge-nav-btn{width:280px; /* Fixed width for consistency */padding:12px 15px;background:#fff;border:1px solid #ccc;font-size:14px;font-weight:700;color:#333;text-align:left;border-radius:4px;cursor:pointer;transition:all 0.2s;}
.hinge-nav-wrapper .hinge-nav-btn:hover{border-color:#f5f5f5;background-color:#1976D2;color:#fff;}
.hinge-nav-wrapper .hinge-nav-btn.active{border:2px solid #1976D2; /* Blue Active Border */color:#000;background-color:#f5f5f5;    /* padding adjustment to prevent layout shift with 2px border? or use box-shadow? */    /* using box-shadow creates inner border feel without layout shift */
border:1px solid transparent;box-shadow:0 0 0 2px #1976D2;}
.hinge-nav-wrapper .hinge-nav-btn.active:hover{color:#000;}

/* Hinge Content Area */
.hinge-content-area{width:100%;display:flex;flex-direction:column;}
.hinge-group-card{display:flex;flex-wrap:wrap;justify-content:space-between;flex-direction:column;margin-bottom:40px;width:100%;}
.hinge-card-title{text-align:center;}
.hinge-card-content{display:flex;width:100%;flex-wrap:wrap;justify-content:flex-end;gap:40px;}
.hinge-group-title{font-size:20px;font-weight:800;color:#000;margin:0 0 5px 0;}
.hinge-group-desc{font-size:13px;color:#666;margin-bottom:20px;}
.hinge-card-image{width:130px;}
.hinge-card-image img{width:100%;height:auto;object-fit:contain;}

/* Value Buttons */
.hinge-values-wrapper{display:flex;gap:15px;align-items:center;}
.hinge-values-wrapper .hinge-value-btn{width:45px;height:45px;border-radius:50%;border:2px solid #ccc;background:#f5f5f5;color:#444;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;}
.hinge-values-wrapper .hinge-value-btn:hover,.hinge-values-wrapper .hinge-value-btn:focus{border-color:#1976D2;background-color:#f5f5f5;color:#444;}
.hinge-values-wrapper .hinge-value-btn.active{border:2px solid #1976D2;color:#000;}

/*Finish Button Customization*/
@keyframes pulse-soft{
    0%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,118,210,0.4);}
    50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(25,118,210,0);}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,118,210,0);}
}
.finish-selection-btn{width:77px;height:77px;display:flex;flex-wrap:wrap;              /* ← permitir salto de línea */align-items:center;justify-content:center;padding:6px 8px;background:#fff;border:1px solid #1976D2;font-size:14px;font-weight:700;color:#333;border-radius:50%;cursor:pointer;text-align:center;transition:all 0.2s;box-sizing:border-box;position:absolute;top:0;left:0;white-space:normal;overflow-wrap:break-word;line-height:1.1;animation:pulse-soft 2s infinite ease-in-out;}
.finish-selection-btn:hover,.finish-selection-btn:focus{border-color:#1976D2;background-color:#1976D2;color:#fff;animation:none;transform:scale(1);}


/* SweetAlert2 Z-Index Fix */
.swal2-container{z-index:1000000!important;backdrop-filter:blur(3px);--backdrop-filter:blur(3px);}
.swal2-container .swal2-title{font-size:1.7rem;font-weight:700;color:#000;}

/* SweetAlert2 Brand Customization */
.swal2-container.swal2-center>.swal2-popup{box-shadow:0 0 0 0 rgba(25,118,210,0.4);}
.swal2-popup button.swal2-styled{background-color:#1976D2!important;background-image:none!important;border:1px solid #1976D2!important;color:#fff!important;transition:all 0.35s ease!important;}
.swal2-popup button.swal2-styled.swal2-cancel{background-color:#ff0000!important;background-image:none!important;color:#fff!important;border-color:#ff0000!important;}
.swal2-popup button.swal2-styled:hover{background-color:#fff!important;background-image:none!important;color:#1976D2!important;border-color:#086bce!important;}
.swal2-popup button.swal2-styled:focus{box-shadow:0 0 4px 3px rgba(0,0,0,0.4)!important;}