/* =============================================
   COMPARE SECTION (Living Room)

   Click an option card to populate the compare stage.
   First click fills RIGHT, second fills LEFT, then alternates.
   ============================================= */

/* Hide description inside option cards (used only for JS) */
/* Target by new simplified class */
body:not(.elementor-editor-active) .nb-compare-section .nb-compare-option-desc,
body:not(.elementor-editor-active) .nb-compare-carousel .nb-compare-option-desc,
body:not(.elementor-editor-active) .nb-compare-options .nb-compare-option-desc {
  display: none !important;
}

/* Target by new ID pattern (e.g., muji-desc) */
body:not(.elementor-editor-active) .nb-compare-section [id$="-desc"],
body:not(.elementor-editor-active) .nb-compare-option [id$="-desc"] {
  display: none !important;
}

/* Backwards compatibility: hide old long description classes */
body:not(.elementor-editor-active) .nb-compare-section .nb-compare-option-long,
body:not(.elementor-editor-active) .nb-compare-carousel .nb-compare-option-long,
body:not(.elementor-editor-active) .nb-compare-options .nb-compare-option-long {
  display: none !important;
}

/* Target by old ID pattern (Elementor adds IDs like muji-long-desc, mid-century-long-desc, etc.) */
body:not(.elementor-editor-active) .nb-compare-section [id$="-long-desc"],
body:not(.elementor-editor-active) .nb-compare-option [id$="-long-desc"] {
  display: none !important;
}

/* =============================================
   ELEMENTOR EDITOR CLEANUP (Living Room Compare)
   Hide "empty container" placeholders that can appear in responsive previews.
   ============================================= */
body.elementor-editor-active .nb-living-room-compare .elementor-empty-view,
.elementor-edit-mode .nb-living-room-compare .elementor-empty-view {
  display: none !important;
}

body.elementor-editor-active .nb-living-room-compare .e-grid-outline,
.elementor-edit-mode .nb-living-room-compare .e-grid-outline {
  display: none !important;
}

body.elementor-editor-active .nb-living-room-compare .e-empty,
.elementor-edit-mode .nb-living-room-compare .e-empty {
  min-height: 0 !important;
}

/* Ensure hidden description elements stay hidden in all contexts */
.nb-compare-option-desc .elementor-widget-container,
.nb-compare-option-long .elementor-widget-container,
[id$="-desc"] .elementor-widget-container,
[id$="-long-desc"] .elementor-widget-container {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Make option cards feel clickable */
.nb-compare-section .nb-compare-option {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Living Room Layouts: keep thumbnail titles near the bottom for consistency. */
.nb-living-room-compare .thumbnail.nb-compare-option {
  justify-content: flex-end !important;
}

@media (hover: hover) {
  .nb-compare-section .nb-compare-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  }
}

/* =============================================
   SELECTION STATES
   - Apple-style border ring for selected cards
   - Dim inactive cards to make active ones pop
   ============================================= */

/* Dim non-selected cards when any selection exists */
.nb-compare-section.nb-has-selection .nb-compare-option:not(.is-selected-left):not(.is-selected-right) {
  opacity: 0.55;
  filter: grayscale(20%);
  transition: opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Active cards stay fully visible and are NOT clickable */
.nb-compare-section .nb-compare-option.is-selected-right,
.nb-compare-section .nb-compare-option.is-selected-left {
  pointer-events: none;
  cursor: default;
  opacity: 1;
  filter: none;
}

/* Elementor editor: keep selected cards clickable/selectable for editing. */
.elementor-editor-active .nb-compare-section .nb-compare-option.is-selected-right,
.elementor-editor-active .nb-compare-section .nb-compare-option.is-selected-left {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Apple-style border ring for selected cards */
.nb-compare-section .nb-compare-option.is-selected-right,
.nb-compare-section .nb-compare-option.is-selected-left {
  box-shadow: 0 0 0 3px #333, 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Editor preview: show first card as selected so user can see the style */
.elementor-editor-active .nb-compare-section .nb-compare-option:first-child {
  box-shadow: 0 0 0 3px #333, 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* No hover effect for selected cards */
@media (hover: hover) {
  .nb-compare-section .nb-compare-option.is-selected-right:hover,
  .nb-compare-section .nb-compare-option.is-selected-left:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px #333;
  }
}

/* =============================================
   GRID LAYOUT - Uses Elementor Grid Container
   Grid columns set in template (3 desktop, 2 tablet, 1 mobile)
   ============================================= */

/* Allow box-shadow border ring on cards - override overflow:hidden from nb-offer-card */
.nb-compare-section .nb-compare-option {
  overflow: visible !important;
}

/* =============================================
   LIVING ROOM LAYOUTS - 2-column shell
   - Desktop/tablet: wide compare + fixed side column
   - Mobile: template stacks to 1 column
   ============================================= */
@media (min-width: 768px) {
  .nb-living-room-compare .layout-grid,
  .nb-living-room-compare .layout-grid > .e-con-inner {
    display: grid !important;
    --e-con-grid-template-columns: minmax(0, 1fr) 300px !important;
    --e-con-grid-template-rows: auto !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* If Elementor wraps children in `.e-con-inner`, ensure it spans the full grid width. */
  .nb-living-room-compare .layout-grid > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* Force correct column placement (compare left, browse right). */
  .nb-living-room-compare .layout-grid .nb-compare-stage {
    grid-column: 1;
  }

  .nb-living-room-compare .layout-grid .browse-section {
    grid-column: 2;
  }
}

/* Tablet: stack browse section below so the main images don't get squeezed. */
@media (min-width: 768px) and (max-width: 1024px) {
  .nb-living-room-compare .layout-grid,
  .nb-living-room-compare .layout-grid > .e-con-inner {
    --e-con-grid-template-columns: 1fr !important;
    grid-template-columns: 1fr !important;
  }

  .nb-living-room-compare .layout-grid .nb-compare-stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .nb-living-room-compare .layout-grid .browse-section {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

}

/* Padding and overflow for border ring visibility */
.nb-compare-section .nb-compare-carousel {
  /* Add horizontal breathing room so selection rings/shadows don't get clipped */
  padding: 12px 16px;
  overflow: visible !important;
  box-sizing: border-box;
}

/* Elementor containers often render children inside .e-con-inner; ensure it doesn't clip rings/shadows */
.nb-compare-section .nb-compare-carousel > .e-con-inner {
  overflow: visible !important;
}

/* =============================================
   SIDE LIST VARIANT (Living Room Layouts)
   - Desktop: vertical list with scrollbar (3 visible)
   - Tablet: 3-card carousel (horizontal)
   - Mobile: 1-card carousel
   ============================================= */
@media (min-width: 1025px) {
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side,
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side > .e-con-inner {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 565px !important;

    /* Force vertical list (1 visible column). */
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }

  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side .nb-compare-option {
    width: 100% !important;
  }

  /* Desktop: this is a scroll list, not a carousel. Hide any injected nav arrows. */
  .nb-living-room-compare .nb-offer-carousel-wrapper .nb-carousel-nav {
    display: none !important;
  }
}

/* Tablet (iPad): 3-card carousel (horizontal). */
@media (min-width: 768px) and (max-width: 1024px) {
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side,
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 12px 0 !important;
    max-height: none !important;
  }

  /* Hide horizontal scrollbar (keep swipe). */
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side::-webkit-scrollbar,
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side > .e-con-inner::-webkit-scrollbar {
    display: none !important;
  }

  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side,
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side > .e-con-inner {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* Show 3 cards at a time. */
  .nb-living-room-compare .nb-compare-carousel.nb-compare-carousel-side .nb-compare-option {
    flex: 0 0 calc((100% - 32px) / 3) !important;
    min-width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
    scroll-snap-align: start !important;
  }
}

/* Inner wrapper - allow overflow for border rings */
.nb-compare-section .nb-offer-carousel-wrapper {
  position: relative;
  overflow: visible !important;
}

/* Mobile: Inner wrapper gets padding for arrows */
@media (max-width: 767px) {
  .nb-compare-section .nb-offer-carousel-wrapper {
    padding: 0 50px !important;
  }

  /* Living Room Layouts: maximize usable width on mobile.
     Arrows can overlay the card, so we don't need large side padding. */
  .nb-living-room-compare .nb-offer-carousel-wrapper {
    padding: 0 !important;
  }
}

/* Compare stage styling */
.nb-compare-section .nb-compare-images {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.nb-compare-section .nb-compare-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Elementor sometimes paints backgrounds on the inner wrapper. Keep it consistent. */
.nb-compare-section .nb-compare-image > .e-con-inner {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Always keep compare image labels at the bottom. */
.nb-compare-section .nb-compare-image-label {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
}

.nb-compare-section .nb-compare-image-label--left {
  text-align: left !important;
}

.nb-compare-section .nb-compare-image-label--right {
  text-align: right !important;
}

.nb-compare-section .nb-compare-image-label .elementor-widget-container {
  text-align: inherit !important;
}

/* Living Room Layouts: caption background (subtle bottom fade to help readability).
   Tweak these variables if you want it darker/lighter. */
.nb-living-room-compare {
  --nb-lr-caption-fade-strong: rgba(0, 0, 0, 0.55);
  --nb-lr-caption-fade-soft: rgba(0, 0, 0, 0.22);
  --nb-lr-caption-fade-none: rgba(0, 0, 0, 0);
  --nb-lr-tab-fade-strong: rgba(0, 0, 0, 0.45);
  --nb-lr-tab-fade-none: rgba(0, 0, 0, 0);
  --nb-lr-tab-fade-height: 60%;
}

.nb-living-room-compare .nb-compare-image-label,
.nb-living-room-compare .nb-compare-image-label > .e-con-inner {
  background-image: linear-gradient(
    to top,
    var(--nb-lr-caption-fade-strong) 0%,
    var(--nb-lr-caption-fade-soft) 55%,
    var(--nb-lr-caption-fade-none) 100%
  ) !important;
}

/* Living Room Layouts: right-side tabs (option cards) bottom fade for readability.
   Use pseudo-element because Elementor container overlays aren't always `.elementor-background-overlay`. */
.nb-living-room-compare .nb-compare-option {
  position: relative;
}

.nb-living-room-compare .nb-compare-option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nb-lr-tab-fade-height);
  background: linear-gradient(
    to top,
    var(--nb-lr-tab-fade-strong) 0%,
    var(--nb-lr-tab-fade-none) 72%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.nb-living-room-compare .nb-compare-option > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* Fallback for older Elementor markup (no `.e-con-inner`). Keep content above the fade. */
.nb-living-room-compare .nb-compare-option > :not(.elementor-background-overlay) {
  position: relative;
  z-index: 1;
}

/* Living Room Layouts: improve text readability without adding dark bands. */
.nb-living-room-compare .nb-compare-image-label .elementor-widget-container,
.nb-living-room-compare .nb-compare-option-title .elementor-heading-title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}

/* Living Room Layouts: main image caption typography (as per design). */
.nb-living-room-compare .nb-compare-image-label .elementor-widget-container,
.nb-living-room-compare .nb-compare-image-label .elementor-text-editor {
  font-size: 14px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

.nb-compare-section .nb-compare-image--left {
  border-right: 2px solid rgba(255, 255, 255, 0.9);
}

/* Living Room Layouts uses container gap as the divider (not border-right). */
@media (min-width: 768px) {
  .nb-living-room-compare .nb-compare-image--left {
    border-right: 0 !important;
  }
}

/* Desktop: enforce 2-up main images with equal widths. */
@media (min-width: 768px) {
  .nb-living-room-compare .nb-compare-images {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
  }

  .nb-living-room-compare .nb-compare-image--left,
  .nb-living-room-compare .nb-compare-image--right {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 767px) {
  .nb-compare-section .nb-compare-image--left {
    border-right: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  }
}

/* Next-side indicator removed - L/R badges on cards are enough */

/* Image label text (e.g., "muji style cabinets") - white text on image */
/* Default white - user can override in Elementor */
.nb-compare-section .nb-compare-image .elementor-widget-text-editor .elementor-widget-container {
  color: #ffffff;
}

/* Gap between description text and images container */
.nb-compare-section .nb-compare-stage {
  gap: 24px;
}


/* Mobile: show only one image/description (no comparison view) */
@media (max-width: 767px) {
  /* Living Room Layouts: avoid grid row stretching on mobile (removes big blank gaps). */
  .nb-living-room-compare .layout-grid,
  .nb-living-room-compare .layout-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Living Room Layouts: reduce side padding to avoid wasted space on small screens. */
  .nb-living-room-compare .compare-shell,
  .nb-living-room-compare .compare-shell > .e-con-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Living Room Layouts: tighten vertical rhythm on mobile so the images feel larger. */
  .nb-living-room-compare .nb-compare-stage {
    gap: 16px !important;
  }

  /* Hide right side - only show left (most recent selection) */
  .nb-compare-section .nb-compare-image--right,
  .nb-compare-section .nb-compare-slot--right {
    display: none !important;
  }

  /* Images container - stack vertically on mobile */
  .nb-compare-section .nb-compare-images {
    flex-direction: column !important;
    min-height: 300px !important;
  }

  /* Left side takes full width and full height */
  .nb-compare-section .nb-compare-image--left {
    width: 100% !important;
    min-height: 300px !important;
    border-right: 0 !important;
  }

  /* Living Room Layouts: keep main + tab images consistent and reduce excessive vertical space. */
  .nb-living-room-compare .nb-compare-images {
    min-height: 0 !important;
  }

  .nb-living-room-compare .nb-compare-image--left {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
  }

  .nb-living-room-compare .nb-compare-carousel,
  .nb-living-room-compare .nb-compare-carousel > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nb-living-room-compare .nb-compare-carousel .nb-compare-option {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
  }

  .nb-compare-section .nb-compare-slot--left {
    width: 100% !important;
    padding: 0 !important;
  }

  /* =============================================
     MOBILE CAROUSEL: Convert grid to horizontal scroll
     Show 1 card at a time with arrows
     ============================================= */

  /* Convert grid to horizontal scrolling flex */
  .nb-compare-section .nb-compare-carousel,
  .nb-compare-section .nb-compare-carousel.e-grid,
  .nb-compare-section .nb-compare-carousel > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 16px !important;
    /* Only vertical padding - horizontal is on wrapper */
    padding: 12px 0 !important;
  }

  /* Hide scrollbar */
  .nb-compare-section .nb-compare-carousel::-webkit-scrollbar,
  .nb-compare-section .nb-compare-carousel > .e-con-inner::-webkit-scrollbar {
    display: none !important;
  }

  /* Each card takes full width - show 1 at a time */
  .nb-compare-section .nb-compare-carousel .nb-compare-option {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  /* On mobile, selected cards CAN be clicked (to allow re-selection via arrows) */
  .nb-compare-section .nb-compare-option.is-selected-left {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Only ONE card active on mobile - stronger visual for active */
  .nb-compare-section.nb-has-selection .nb-compare-option:not(.is-selected-left) {
    opacity: 0.4 !important;
  }

  /* Mobile: Position arrows in the wrapper's padding area (beside the card) */
  .nb-compare-section .nb-offer-carousel-wrapper .nb-carousel-nav.nb-prev {
    left: 5px !important;
  }

  .nb-compare-section .nb-offer-carousel-wrapper .nb-carousel-nav.nb-next {
    right: 5px !important;
  }

  /* Smaller arrows on mobile */
  .nb-compare-section .nb-offer-carousel-wrapper .nb-carousel-nav {
    width: 40px !important;
    height: 40px !important;
  }
}