/* Step 2: keep sidebar visible so preview image remains available */
.configurator-main {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 15px; /* Account for scrollbar */
  margin-right: -15px; /* Hide scrollbar styling */
  max-height: 100%; /* Fill the parent container */
}

.configurator-main-col { 
  height: calc(100vh - 130px - 100px); /* Full height minus top tabs and bottom bar */
  overflow: hidden; /* Prevent column itself from scrolling */
  display: flex;
  flex-direction: column;
}

/* Floating top tabs (always fixed) */
.configurator-top-tabs { position: fixed; top: 0; left: 0; right: 0; z-index: 150; background: transparent; backdrop-filter: blur(0px); padding-top: .75rem; padding-bottom: .35rem;  }
.configurator-layout { padding-top: 130px; }

/* Removed bottom bar styles (navigation now uses in-form buttons) */

.configurator-summary-fixed { position: sticky; top: 0; max-height: 100vh; overflow: auto; }
/* Fixed on desktop (applied via JS for exact left/width alignment) */
.configurator-summary-fixed.is-fixed { position: fixed; top: 100px; z-index: 5; }
.configurator-summary-table {
  width: 100%;
  border-collapse: collapse;
}
.configurator-summary-table th,
.configurator-summary-table td {
  border-bottom: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.configurator-summary-table th {
  background: #f8f9fa;
  font-weight: 500;
}
.configurator-container {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 2rem;
}
.configurator-step {
  margin-bottom: 2rem;
}
.configurator-step.inactive {
  display: none;
}
.configurator-nav {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.configurator-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  /* border-bottom: 1px solid #eee; */
  /* padding-bottom: 20px; */
}

.configurator-options-group {
  background-color: rgba(145, 130, 110, 0.2); 
  padding:20px;
}


@media (max-width: 991.98px) {
  .configurator-options { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .configurator-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .configurator-options { grid-template-columns: 1fr; }
}
.configurator-option { position: relative; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; width: 100%;   border:1px solid rgba(145, 130, 110, 0.8);}
.configurator-option:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06);  }
.configurator-option.selected {
  border-color: rgba(145, 130, 110, 0.8);
  background:#fff;
  border:2px solid  rgba(145, 130, 110, 0.8);
}
.configurator-option-img { width: 100px; height: 100px; object-fit: cover;  margin-bottom: 0rem;  display: block; }
.selected-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #198754;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 2;
}
.configurator-option-title {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.25rem;
  color: #333;
}

.configurator-option{
  width: 80px;
  height: 80px;
  padding:8px!important;
}

.configurator-preview {
  position: relative;
  width: 100%;
  max-width: 750px;
  height: 750px;
  margin: 0 auto 2rem auto;
  background: #f3f3f3;
  border-radius: 1rem;
  overflow: hidden;
}
.configurator-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
/* Persistent background image */
#preview-bg.preview-bg-layer {
  opacity: 1 !important;
  pointer-events: none;
  z-index: 1;
}
/* Ensure dynamic layers appear above background */
.configurator-preview img.preview-layer { 
  z-index: 2; 
}

/* Responsive behavior */
@media (max-width: 768px) {
  .configurator-preview {
    height: auto;
    aspect-ratio: 750 / 750;
  }
}
.configurator-summary {
  background: #f8f9fa;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 2rem;
}
.configurator-tabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 2rem;
}
.configurator-tabs .nav-link {
  color: #6c757d;
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  transition: border-color 0.2s, color 0.2s;
}
.configurator-tabs .nav-link.active {
  color: #198754;
  border-bottom: 3px solid #198754;
  background: none;
}
.configurator-tabs .nav-link.completed {
  color: #0d6efd;
  text-decoration: underline;
}
.info-btn { border: none; background: transparent; color: #0d6efd; padding: 0; }
.selected-badge { position:absolute; top:8px; right:8px; background:#198754; color:#fff; border-radius:999px; padding:4px; display:inline-flex; }

/* GSAP Tabs (steps) minimal styles */
.mdc-tabs .tab-content__bottom { display:flex; flex-direction:row; gap:0; padding-left:0; overflow:auto; }
.mdc-tabs .tab-content__item { text-decoration:none; color:inherit; padding: 1rem; position:relative; flex:1 1 0; min-width: 220px; }
.mdc-tabs .tab-content__item-main { display:flex; gap:1rem; align-items:center; }
.mdc-tabs .content-item__nr { background:#131313; color:#fff; border-radius:999px; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.mdc-tabs .content-item__heading { margin:0; font-size:1.125rem; }
.mdc-tabs .tab-content__item-detail { height:0; overflow:hidden; padding-left:3rem; }
.mdc-tabs .tab-content__item-bottom { position:absolute; left:0; right:0; bottom:0; height:1px; background:#0003; }
.mdc-tabs .tab-progress { transform-origin:left center; height:1px; background:#ff4c24; transform:scaleX(0); }
.tab-visual__item { visibility:hidden; }
.tab-visual__item.active { visibility:visible; }
/* Custom Modal (namespaced: mdc-*) */
.mdc-modal {
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.mdc-modal[data-modal-group-status="active"] {
  opacity: 1;
  visibility: visible;
}
.mdc-modal__dark {
  opacity: .5;
  pointer-events: auto;
  cursor: pointer;
  background-color: #131313;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mdc-modal__card {
  pointer-events: auto;
  background-color: #efeeec;
  border-radius: 2em;
  width: 100%;
  max-width: 54em;
  max-height: 100%;
  padding: .75em;
  display: none;
  position: relative;
}
.mdc-modal__card[data-modal-status="active"] { display: flex; }
.mdc-modal__scroll {
  background-color: #e2e1df;
  border-radius: 1.25em;
  flex-flow: column;
  width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
  overflow: auto;
}
.mdc-modal__content {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 2em;
}
.mdc-modal__content-row {
  display: flex;
  gap: 1.5em;
  align-items: stretch;
  width: 100%;
}
.mdc-modal__gallery { flex: 0 0 70%; min-height: 280px; display: block; min-width: 0; }
.mdc-modal__text { flex: 0 0 30%; font-size: 1rem; line-height: 1.6; color: #333; align-self: start; overflow: auto; max-height: 70vh; display: block; min-width: 0; }

/* Slider */
.mdc-slider { position: relative; background: #f4f4f4; border-radius: 2em; overflow: hidden; width: 100%; }
.mdc-slider__viewport { width: 100%; height: 100%; overflow: hidden; position: relative; min-height: 360px; border-radius: inherit; }
.mdc-slider__track { display: flex; height: 100%; white-space: nowrap; }
.mdc-slider__slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mdc-slider__slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mdc-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); color: #131313; border: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items:center; cursor: pointer; z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.mdc-slider__nav:hover { background: rgba(255,255,255,0.95); transform: translateY(-50%) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.mdc-slider__nav--prev { left: 10px; }
.mdc-slider__nav--next { right: 10px; }
.mdc-slider__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.mdc-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.3); cursor: pointer; }
.mdc-slider__dot.is-active { background: rgba(0,0,0,0.75); }

.mdc-modal__h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}
.mdc-modal__btn-close {
  background-color: #efeeec;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  position: absolute;
  top: 2.5em;
  right: 2.5em;
}
.mdc-modal__btn-close-bar {
  background-color: currentColor;
  width: .125em;
  height: 40%;
  position: absolute;
  transform: rotate(45deg);
}
.mdc-modal__btn-close-bar.is--second { transform: rotate(-45deg); }

/* Dimension overlay */
.dimension-overlay { position: absolute; inset: 0; pointer-events: none; }
.dimension-overlay .dim-line { position: absolute; background: rgba(0,0,0,0.5); }
.dimension-overlay .dim-width { height: 2px; left: 10%; right: 10%; top: 12%; }
.dimension-overlay .dim-height { width: 2px; top: 10%; bottom: 10%; left: 12%; }
.dimension-overlay .dim-label { position: absolute; color: #fff; background: rgba(0,0,0,0.65); padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.dimension-overlay .dim-label-w { top: 6%; left: 50%; transform: translateX(-50%); }
.dimension-overlay .dim-label-h { left: 6%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; }

@media (max-width: 575.98px) {
  .dimension-overlay .dim-label { font-size: 11px; padding: 3px 6px; }
}

/* Sidebar preview slider */
.sidebar-gallery { position: relative; }
.sidebar-slider { position: relative; background: #f4f4f4; border-radius: 1rem; overflow: hidden; width: 100%; }
.sidebar-slider__viewport { width: 100%; height: 300px; overflow: hidden; position: relative; }
.sidebar-slider__track { display: flex; height: 100%; }
.sidebar-slider__slide { flex: 0 0 100%; width: 100%; height: 100%; display: grid; place-items: center; }
.sidebar-slider__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85); color: #131313; border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items:center; cursor: pointer; z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.sidebar-slider__nav:hover { background: rgba(255,255,255,0.95); transform: translateY(-50%) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.sidebar-slider__nav--prev { left: 8px; }
.sidebar-slider__nav--next { right: 8px; }
.sidebar-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.sidebar-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f2f2f2; border: 2px solid transparent; }
.sidebar-thumb.is-active { border-color: #ff4c24; }
.sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Embedded composite preview as first slide */
.sidebar-slider__slide--composite { background: #f3f3f3; }
.configurator-preview.is-embedded { 
  width: 100%; 
  max-width: 750px; 
  height: 520px; 
  margin: 0; 
  border-radius: 0; 
  background: transparent; 
}
.configurator-preview.is-embedded img.preview-layer { 
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right-side preview thumbs under main preview */
.right-preview-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.right-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f2f2f2; border: 2px solid transparent; }
.right-thumb.is-active { border-color: #ff4c24; }
.right-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Main gallery slider */

/* Selected items list (preview removed) */
#selected-items-wrapper { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:12px 14px; }
#selected-items-wrapper h6 { font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
#selected-items-list li { padding:2px 0; border-bottom:1px solid #f1f1f1; }
#selected-items-list li:last-child { border-bottom:0; margin-top:4px; }

/* Inline slider (reintroduce) */
.right-inline-slider { position: relative; padding: 0 48px; }
.right-inline-slider__viewport { overflow: hidden; width: 100%; }
.right-inline-slider__track { display: flex; gap: 10px; transition: transform .4s cubic-bezier(.4,.1,.2,1); will-change: transform; }
.right-inline-slider .right-thumb { flex: 0 0 100px; width: 100px; height: 100px; border-radius: 10px; background:#f5f5f5; position: relative; }
.right-inline-slider .right-thumb img { width: 100%; height: 100%; object-fit: cover; }
.right-inline-slider .right-thumb.is-active { border-color: #ff4c24; box-shadow: 0 0 0 2px #ff4c24; }
.right-inline-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); color:#333; transition: background .2s ease, transform .2s ease; }
.right-inline-slider__nav:hover:not([disabled]) { background:#fff; transform: translateY(-50%) scale(1.05); }
.right-inline-slider__nav[disabled] { opacity: .4; cursor: not-allowed; }
.right-inline-slider__nav--prev { left: 0; }
.right-inline-slider__nav--next { right: 0; }
.right-inline-slider__dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.right-inline-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.3); border:0; padding:0; cursor:pointer; }
.right-inline-slider__dot.is-active { background: rgba(0,0,0,0.75); }
.right-inline-slider__dot:focus-visible { outline: 2px solid #ff4c24; outline-offset: 2px; }

/* Validation Styles */
.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 0.4 3.4 0.4-3.4'/%3e%3ccircle cx='6' cy='8.2' r='0.6' fill='%23dc3545'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.validation-notification {
  animation: slideInFromBottomRight 0.3s ease-out;
}

@keyframes slideInFromBottomRight {
  from {
    transform: translate(100%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.validation-notification .btn-close {
  background: none;
  border: none;
  font-size: 1rem;
  opacity: 0.5;
}

.validation-notification .btn-close:hover {
  opacity: 1;
}

/* Required field asterisk styling */
.text-danger {
  color: #dc3545 !important;
}

/* Thank you page styling */
.thank-you-content {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.thank-you-content h4 {
  color: #155724;
  margin-bottom: 1rem;
}

.thank-you-content .alert-heading {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Success notification styling */
.validation-notification.position-fixed {
  animation: slideInFromBottomRight 0.3s ease-out;
}

/* Summary table styling for thank you page */
.configurator-summary-table-final {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 0;
}

.configurator-summary-table-final th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.configurator-summary-table-final .table-primary th,
.configurator-summary-table-final .table-primary td {
  background: #d1ecf1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #0c5460;
}

.configurator-summary-table-final tfoot th,
.configurator-summary-table-final tfoot td {
  background: #e9ecef;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Thank you page layout improvements */
.configurator-main-col {
  transition: max-width 0.3s ease;
}

/* When summary is hidden, allow main column to use full width */
body.thank-you-page .configurator-main-col {
  max-width: 100%;
  flex: 0 0 100%;
}

/* Center the thank you content */
.thank-you-page .configurator-main-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* Hide preview section on thank you page */
.thank-you-page .configurator-preview {
  display: none;
}

/* Hide top tabs/steps on thank you page */
.thank-you-page .configurator-top-tabs {
  display: none;
}

/* Remove top padding when tabs are hidden */
.thank-you-page .configurator-layout {
  padding-top: 0;
}

/* Back to website button styling */
.back-to-website-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 160;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.back-to-website-container .btn {
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-width: 200px;
}

.back-to-website-container .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

/* Adjust layout when back button is shown */
.thank-you-page .configurator-layout {
  padding-top: 80px; /* Space for the back button */
}

.thank-you-page .thank-you-content {
  background: transparent;
  width: 100%;
}

/* Appointment booking section in thank you page */
.thank-you-content .appointment-booking {
  background: transparent;
  /* border-radius: 8px; */
  padding: 1.5rem;
  margin-top: 1rem;
}

.thank-you-content .appointment-booking h5 {
  color: #495057;
  margin-bottom: 1rem;
}

/* Style the BookingPress form within thank you page */
.thank-you-content .bpa-front-module-container {

}

/* Floating Bottom Bar */
.configurator-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #91826e 0%, #91826e 100%);

  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  z-index: 1000;
  padding: 1rem 0;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease-in-out;
}

.configurator-bottom-bar.hidden {
  transform: translateY(100%);
}

.bottom-bar-price {
  color: white;
  font-size: 1.1rem;
}

.bottom-bar-price .price-label {
  margin-right: 0.5rem;
  opacity: 0.9;
}

.bottom-bar-price .price-value {
  font-weight: 700;
  font-size: 1.3rem;
  color: #3498db;
}

.bottom-bar-navigation .btn {
  min-width: 120px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.bottom-bar-navigation .btn-outline-light {
  border: 2px solid rgba(255,255,255,0.3);
  color: white;
}

.bottom-bar-navigation .btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

.bottom-bar-navigation .btn-success {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

.bottom-bar-navigation .btn-success:hover {
  background: linear-gradient(135deg, #219a52 0%, #27ae60 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,204,113,0.4);
}

/* Add bottom padding to layout to prevent content from being hidden behind floating bar */
.configurator-layout {
  padding-bottom: 100px;
}

/* Hide bottom bar on thank you page */
.thank-you-page .configurator-bottom-bar {
  display: none;
}

/* Responsive design for bottom bar */
@media (max-width: 768px) {
  .configurator-bottom-bar {
    padding: 0.75rem 0;
  }
  
  .configurator-bottom-bar .container {
    padding: 0 1rem;
  }
  
  .bottom-bar-price {
    font-size: 1rem;
  }
  
  .bottom-bar-price .price-value {
    font-size: 1.2rem;
  }
  
  .bottom-bar-navigation .btn {
    min-width: 100px;
    font-size: 0.9rem;
  }

  /* Responsive design for main column */
  .configurator-main-col {
    height: calc(100vh - 120px - 80px); /* Adjust for smaller mobile bars */
  }
  
  .configurator-main {
    padding-right: 10px;
    margin-right: -10px;
  }
}

/* Tablet responsive design */
@media (max-width: 991.98px) {
  .configurator-main-col {
    height: calc(100vh - 125px - 90px);
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  .configurator-main-col {
    height: calc(100vh - 135px - 100px);
  }
}
  }
  
  .bottom-bar-navigation .btn {
    min-width: 100px;
    font-size: 0.9rem;
  }
}