/* ============================================================
   CDR Configurator — V1 Layout Override
   3-Column Layout:
     LEFT:   "1. EIGENSCHAFTEN AUSWÄHLEN"
     CENTER: Three.js 3D Glass Viewer
     RIGHT:  "2. ANPASSEN"
   ============================================================ */

/* ---- PANEL WIDTH VARIABLE ---- */
:root {
  --panel-w: 280px;
}

/* --- Hide the original thin nav/sidemenu --- */
.home__navigation {
  display: none !important;
}

.home__sidemenu {
  display: none !important;
}

/* --- Body: full width for center content --- */
.home__body {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

/* ================================================================
   CENTER: Constrain Three.js canvas between the two panels
   so the 3D model is visually centered in the gap.
   ================================================================ */
.glass_product_img.home__canvas.webgl-canvas,
canvas.glass_product_img {
  /* Canvas starts flush at left panel edge.
     Width = full viewport → Three.js center shifts ~20% right of gap.
     Right panel (z-index 100) covers the overflow. */
  left: var(--panel-w) !important;
  width: 100vw !important;
  top: 0 !important;
  height: 100vh !important;
}

/* ================================================================
   LEFT COLUMN: "1. EIGENSCHAFTEN AUSWÄHLEN"
   ================================================================ */
.glass_product_bottom {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--panel-w) !important;
  padding: 20vh 1.2rem 1.2rem 1.2rem !important;
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-right: 1.5px solid #456d86 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Category container: vertical stack */
.glass_product_category {
  flex-direction: column !important;
  padding: 0.3rem 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Category list: vertical layout */
.glass_product_category_list {
  flex-direction: column !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

/* Slick slider: force vertical */
.glass_product_category_list .slick-list {
  width: 100% !important;
}

.glass_product_category_list .slick-track {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.glass_product_category_list .slick-slide {
  width: 100% !important;
}

/* Glass config property tiles: single column */
.glass_config__details {
  flex-direction: column !important;
}

.glass_config__item.glass_config__item--short_state {
  width: 100% !important;
  padding-right: 0 !important;
}

/* ================================================================
   RIGHT COLUMN: "2. ANPASSEN"
   ================================================================ */
.glass_product_col.info_mod {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--panel-w) !important;
  padding: 20vh 1.2rem 1.2rem 1.2rem !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-left: 1.5px solid #456d86 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 100 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
}

/* Override original min-width / padding-right from .glass_product_col */
.glass_product_col {
  min-width: 0 !important;
  padding-right: 0 !important;
}

/* ---- Right column: controls section — align bottom with left pane's last setting ---- */
.glass_product_col_ctrl,
.glass_product_col.info_mod .glass_product_col_ctrl {
  margin-top: 10vh !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(69, 109, 134, 0.3) !important;
}

/* Price + weight row — margin-top:auto pushes it + buttons to bottom of ctrl flex */
.glass_product_sqm_data.glass_product_selection_info {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  padding: 0.8rem 0 !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 1.15em !important;

}

/* "Positionen erfassen" + "Als PDF speichern" — stacked & centered */
.cart_pdf {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0.4rem 0 !important;
  text-align: center !important;
}

/* Center the PDF save link inside the button row */
.cart_pdf > * {
  text-align: center !important;
  justify-content: center !important;
}

/* Reset links row — the <ul> at the bottom of the right panel */
.save_as_block__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 1.5rem !important;
  padding: 0.8rem 0 0 0 !important;
  border-top: 1px solid rgba(69, 109, 134, 0.15) !important;
  list-style: none !important;
  width: 100% !important;
}

.save_as_block__list_item {
  padding: 0 0.5rem !important;
}

.save_as_block__list_item:first-child {
  padding-left: 0 !important;
}

.save_as_block__glass_button {
  font-size: 0.95rem !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.save_as_block__glass_button:hover {
  color: #456d86 !important;
}

/* ================================================================
   HEADER: ensure it spans full width and sits above panels
   ================================================================ */
.header,
.header_in,
.header--dark_mod {
  z-index: 200 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  contain: none !important;
}

/* ---- CDR Logo: enlarge and center in left panel ---- */
.header_logo_btn {
  position: fixed !important;
  top: 2.5vh !important;
  left: calc(var(--panel-w) / 2 - 15px) !important;
  transform: translateX(-50%) !important;
  width: 140px !important;
  height: 90px !important;
  margin: 0 !important;
  z-index: 201 !important;
}

.header_logo_img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ---- Address & phone: reposition above left panel footer ---- */
.header_info_list_w {
  position: fixed !important;
  bottom: 50px !important;
  left: 0 !important;
  width: var(--panel-w) !important;
  height: auto !important;
  z-index: 201 !important;
  padding: 0 1.2rem !important;
  text-align: center !important;
}

.header_info_list {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  border-top: 1px solid rgba(69, 109, 134, 0.15) !important;
  gap: 0.15rem !important;
  width: 100% !important;
}

.header_info_item {
  padding: 0.1rem 0 !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.header_info_item:nth-child(2) {
  display: flex !important;
}

.header_info_link {
  font-size: 0.8rem !important;
  color: #888 !important;
  letter-spacing: 0.02em !important;
}

.header_info_link:hover {
  color: #456d86 !important;
}

/* ================================================================
   FAQ: large semicircle at bottom center
   The button has an SVG icon; the text "FAQ" lives in
   .faq_block_instruction_text — we show that horizontally.
   ================================================================ */
.faq_block {
  position: fixed !important;
  left: 50% !important;
  top: auto !important;
  bottom: -150px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 440px !important;
  height: 220px !important;
  border-radius: 220px 220px 0 0 !important;
  background: #456d86 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 200 !important;
  filter: none !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 15px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  display: flex !important;
}

/* Hide the old oversized circle decoration */
.faq_block_decor {
  display: none !important;
}

/* SVG icon inside the button */
.faq_block_btn {
  position: relative !important;
  z-index: 2 !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  background: none !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The SVG is vertical (viewBox 21×46) with stacked F-A-Q letters.
   Rotate 90° clockwise to make it read horizontally.
   .size_mod in selector overrides main CSS .icon.size_mod {height:100%;width:100%} */
.faq_block_btn .icon,
.faq_block_btn .icon.size_mod {
  transform: rotate(90deg) !important;
  width: auto !important;
  height: 50px !important;
  display: block !important;
}

/* Hide instruction — it says "Bedienungsanleitung", not "FAQ" */
.faq_block_instruction {
  display: none !important;
}

/* ================================================================
   FOOTER (.disclaimer): last child inside .glass_product_bottom
   Original is position:absolute — convert to static flex item
   pinned at the bottom of the left panel via margin-top:auto.
   ================================================================ */
.disclaimer {
  position: relative !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem 0.5rem !important;
  font-size: 0.95rem !important;
  color: #888 !important;
  padding: 1rem 0 0.5rem 0 !important;
  border-top: 1px solid rgba(69, 109, 134, 0.15) !important;
  line-height: 1.5 !important;
}

.disclaimer a {
  color: #456d86 !important;
  text-decoration: none !important;
}

.disclaimer a:hover {
  text-decoration: underline !important;
}

/* ================================================================
   SCROLLBAR styling — subtle for both panels
   ================================================================ */
.glass_product_bottom::-webkit-scrollbar,
.glass_product_col.info_mod::-webkit-scrollbar {
  width: 3px;
}

.glass_product_bottom::-webkit-scrollbar-thumb,
.glass_product_col.info_mod::-webkit-scrollbar-thumb {
  background: rgba(69, 109, 134, 0.3);
  border-radius: 2px;
}

.glass_product_bottom::-webkit-scrollbar-track,
.glass_product_col.info_mod::-webkit-scrollbar-track {
  background: transparent;
}

/* ================================================================
   MISC: hide overlays & cleanup
   ================================================================ */
.instruction-spotlight-bg {
  display: none !important;
}

/* Remove the original bottom-bar margin/padding that pushed content */
.glass_product__row {
  margin: 0 !important;
}