/* MODAL  */ /* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  *//* MODAL  */
/* Base modal container (drawer style) */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 500px;
  max-width: 90%;
  border-radius: 24px 0 0 24px;
  background-color: #fff;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s ease-in-out;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {
    .modal {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
    }

}

/* When open, slide into view */
.modal.open {
  transform: translateX(0);
}
@media (max-width: 992px) {
    body:has(.modal.open) {
    overflow: hidden;
    position: fixed;
    width: 100%;
    }
}

/* Modal content styling */
.modal-content {
  padding: 20px 24px;
  flex: 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.modal-title{
  margin-top: 0;
  font-size: 1.5rem;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-weight: 500;

}

.modal-header {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 20px 24px ;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.modal-intro {
  font-size: 0.95rem;
  color: #181818;
  margin-bottom: 2rem;
  line-height: 1.4;
  letter-spacing: 1%;
  font-display: "Poppins", sans-serif;
}

.modal-tip {
    font-size: 0.80rem;
    color: #333;

    strong {
        font-weight: 600;
    }
}

.template-selector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.template-selector label {
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  color: #181818;
}

.template-selector select {
  flex: 1;
  padding: 0.45rem 0.75rem;
  padding: 0;
  border: 1px solid #d0d5dd;
  border: 0;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: #181818;
  cursor: pointer;
  width: fit-content;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9L12 14L17 9' stroke='%23181818' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding: 5px 2rem 5px 5px;
}

.template-selector select:focus {
  outline: 2px solid #7247FF;
  outline-offset: 2px;
}

.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

.tabs {
  display: flex;
justify-content: space-between;
  margin-bottom: 1rem;
  background-color: #F2F4F7;
  padding: 8px;
  border-radius: 12px;
  margin-top: 2rem;
 
}

.tab-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  /* border: 1px solid transparent; */
  cursor: pointer;
  border-radius: 12px;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-weight: 400;
  letter-spacing: 1%;
    font-size: 16px;
    overflow: hidden;
}

.tab-btn.active {
  background: white;
  border-color: #7347FF;
  box-shadow: rgba(24, 24, 24, 0.1) 0px 3px 11px;
      
}


/* Close button */
.close {
  font-weight: bold;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
  border: 0;
  background-color: transparent;
}

.close:hover {
  color: #000;
}

/* Button at top of page */
.settings-btn {
  display: flex;
  flex-direction: row;
  gap: 8px;
  background-color: #181818;
  color: #ffffff;
  border: 2px solid #181818;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 40px;
  position: fixed;
  right: 30px;
  top: 150px;
  z-index: 90;
  padding: 12px 16px;
  box-shadow: #1018282a 0px 5px 15px;
  transition: all .2s ease-in-out;
}
.settings-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.settings-btn svg path {
  stroke: white;
  transition: all .2s ease-in-out;
}

.settings-btn:hover {
  background-color: #7247FF;
  border-color: #7247FF;
  color: white;
}

.settings-btn:hover svg  path{
  stroke: white;
}

/* Delay dropdown opening slightly to prevent accidental re-triggers when cursor crosses the nav */
.nav__primary li:hover .dropdown__default,
.nav__primary li:focus-within .dropdown__default {
  transition-delay: 120ms;
}


@media (max-width: 1024px) {
  .settings-btn__label {
    display: none;
  }
  .settings-btn {
    padding: 12px;
    gap: 0;
  }
}



.modal-content form {
    
}
/* Form spacing */
.modal-content form section {
    font-family: "Poppins", sans-serif;
  /* border: 2px solid rgba(24, 24, 24, 0.05); */
  /* border-radius: 0.375rem; */
  /* padding: 8px; */
  
}

.modal-content ul {
  list-style: none;
  padding: 0;
}

.modal-content fieldset {
  border: none;
  margin-bottom: 12px;
}

.modal-content section h3 {
    visibility : hidden;
    height: 0;
    font-size: 0;
}

/* Save button */
.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  /* border-top: 2px solid rgba(24, 24, 24, 0.05); */
  background-color: #fff;
  flex-shrink: 0;
}

.modal-docs-link {
  color: #7247FF;
  font-size: 1rem;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-weight: 500;
  line-height: 140%;
  cursor: pointer;
  margin-right: auto;
  transition: all 0.2s ease-in-out;
}

.modal-docs-link:hover {
  color: #181818;
}

.modal-docs-link--icon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-docs-link--icon svg {
  flex-shrink: 0;
  transition: all 0.2s ease-in-out;
}
#saveSettings {
  background-color: #7347FF;
  color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 1.2rem;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

#saveSettings:hover {
  background-color: #181818;
}

/* tooltip */

.tooltip-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M224 224C224 171 267 128 320 128C373 128 416 171 416 224C416 266.7 388.1 302.9 349.5 315.4C321.1 324.6 288 350.7 288 392L288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416L352 392C352 390.3 352.6 387.9 355.5 384.7C358.5 381.4 363.4 378.2 369.2 376.3C433.5 355.6 480 295.3 480 224C480 135.6 408.4 64 320 64C231.6 64 160 135.6 160 224C160 241.7 174.3 256 192 256C209.7 256 224 241.7 224 224zM320 576C342.1 576 360 558.1 360 536C360 513.9 342.1 496 320 496C297.9 496 280 513.9 280 536C280 558.1 297.9 576 320 576z'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: 75%;
  background-color: #EBEFF4;
  margin-left: 6px;
  cursor: pointer;
  width: 18px;
  min-width: 18px;
  height: 18px;
  font-size: 14px;
  color: #666;
  position: relative;
  display: inline-block;
  border-radius: 100px;
}

.tooltip-icon:hover {
  color: #000;
}

/* Tooltip bubble */
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  /* left: 50%; */
  right: 0;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: normal;
  max-width: 200px;
  text-align: center;
width: 130px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999;
}



.tooltip-icon:hover::after,
.tooltip-icon:hover::before,
.tooltip-icon:focus-visible::after,
.tooltip-icon:focus-visible::before {
  opacity: 1;
}

.tooltip-icon:focus-visible {
  outline: 2px solid #7247FF;
  outline-offset: 2px;
}

/* Keep tooltip inside modal */


.modal .tooltip-icon::after {
  white-space: normal;
  word-wrap: break-word;
}


/* Feature list styles */

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; /* or repeat(2, 1fr) for two columns */
    gap: 5px;
}

.features-list-header {
  display: flex;
  padding: 10px 0 20px 5px;
}

#toggleAllFeatures {
  background: transparent;
  border: none;
  color: #7247FF;
  font-size: 1rem;
  letter-spacing: 1%;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

#toggleAllFeatures:hover {
  color: #181818;
  text-decoration: underline;
}

.feature-card {
  display: flex;
  align-items: center;
  justify-content: space-between; /* keeps label left, tooltip right */
  /* border: 1px solid #e2e2e5; */
  border-radius: 8px;
  padding: 10px 5px;
  width: 100%;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}

.feature-card:hover {
  background: #F2F4F7;
  border-color: #F2F4F7;
}

.feature-card label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  letter-spacing: 1%;
  color: #181818;
  width: 100%;
  cursor: pointer;
}

.feature-card input[type="checkbox"] {
  accent-color: #7247FF; /* modern primary color */
  width: 18px;
  height: 18px;
  min-height: 18px;
  min-width: 18px;
  cursor: pointer;
}

.feature-card:has(> label > input[type="checkbox"]:disabled) label {
    opacity: 0.7;
    cursor: default;
}


.feature-card:has(> label > input[type="checkbox"]:disabled)  {
    background-color: transparent !important;
    cursor: default !important;
}

.feature-card input[type="checkbox"]:disabled {
    cursor: default;
}

.feature-card__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.na-badge {
    display: none;
    font-size: 12px;
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    font-weight: 600;
    letter-spacing: 2%;
    color: #906C00;
    background: #FFFAED;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    white-space: nowrap;
}

#settingsModal[data-template="rich"] .na-badge {
    display: inline-block;
}

.feature-card--sub {
  background: #F2F4F7;
  border-radius: 8px;
  /* flex-direction: column; */
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.8rem;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

#AiSummarySubConfig {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#GridCategoriesConfig, #BorderRadiusCustomConfig {
    margin-bottom: 1rem;
}

.extra-facet-config,
.grid-categories-config {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.border-radius-custom-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.border-radius-custom-config label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  position: relative;
}

.border-radius-custom-config label input[type="text"] {
  margin-left: auto;
  width: 90px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(24, 24, 24, 0.1);
}

.border-radius-custom-config .tooltip-icon {
  right: 98px !important;
  top: 1px !important;
}

.extra-facet-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #181818;
  display: flex;
  align-items: center;
}

.facet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.facet-tags:empty {
  min-height: 0;
}

.facet-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7247FF;
  color: #fff;
  font-size: 0.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  max-width: 100%;
  min-width: 0;
}

.facet-tag--default {
  background: rgba(24, 24, 24, 0.12);
  color: #181818;
}

.facet-tag__label {
  opacity: 0.7;
  font-weight: 400;
}

.facet-tag__remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}

.facet-tag__remove:hover {
  color: #fff;
}

.facet-input-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.feature-disclaimer {
  margin: 0;
  padding: 0px 10px;
  font-size: 0.75rem;
  color: #667085;
  font-style: italic;
}

.feature-disclaimer a {
  color: #7247FF;
}

.facet-input-col > button {
  align-self: flex-end;
}

.facet-input-col > select {
  border: 2px solid rgba(24, 24, 24, 0.08);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23181818' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.facet-input-col > select:focus {
  border-color: #7347FF;
}

.settings-section li .facet-input-col > input[type="text"],
.facet-input-col > input[type="text"] {
  border: 2px solid rgba(24, 24, 24, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.facet-input-col > input[type="text"]:focus {
  border-color: #7347FF;
}

.facet-tag-label-inline {
  flex: 1;
  min-width: 140px;
  border: 2px solid rgba(24, 24, 24, 0.08);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: "Poppins", sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.facet-tag-label-inline:focus {
  border-color: #7347FF;
}

.facet-input-row {
  display: flex;
  gap: 8px;
}

.facet-input-row input[type="text"] {
  flex: 1;
  border: 2px solid rgba(24, 24, 24, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.facet-input-row input[type="text"]:focus {
  border-color: #7347FF;
}

#addFacetKeyBtn, #addGridCategoryBtn, #addFilterRuleBtn {
  background: #7247FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

#addFacetKeyBtn:hover, #addGridCategoryBtn:hover, #addFilterRuleBtn:hover {
  background: #181818;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background-color: rgba(24, 24, 24, 0.15);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toggle-track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-track {
  background-color: #7247FF;
}

.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid #7247FF;
  outline-offset: 2px;
}

/* Grid categories card */
.grid-categories-card {
  margin-bottom: 4px !important;
}

/* design styles */
/* design styles */
/* design styles */

/* Container for radio button groups */
.design-section {
    padding: 18px 24px  !important;
}
.design-section fieldset {
  border: none;
  margin-bottom: 1rem;
  width: 100%;
  min-width: 100%;
  padding: 0;
  
}

.design-card, .layout-wrapper {
    position: relative;
}

.design-section legend,
.settings-section .design-card legend {
    padding-bottom: 0.3rem;
    font-weight: 500;
    color: #181818;
}

.design-card:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Hide the native radio input */
.design-section input[type="radio"] {
  display: none;
}

/* Visually hide but keep in tab order */
.settings-section .design-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Style labels as buttons */
.design-section input[type="radio"] + label,
.settings-section .design-card input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.8rem;
  margin-right: 0.5rem;
  border: 1px solid rgba(24, 24, 24, 0.1);
  border-radius: 8px;
    background-color: rgba(24, 24, 24, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

/* Hover effect */
.design-section input[type="radio"] + label:hover,
.settings-section .design-card input[type="radio"] + label:hover {
  background: rgba(24, 24, 24, 0.1);
}

/* Checked state styling */
.design-section input[type="radio"]:checked + label,
.settings-section .design-card input[type="radio"]:checked + label {
  background: #7247FF;
  color: #fff;
  border-color: #7247FF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Focus styling for settings-section pill radios */
.settings-section .design-card input[type="radio"]:focus-visible + label {
  outline: 2px solid #7247FF;
  outline-offset: 2px;
}

.design-card-colors {
  border: 1px solid #e2e2e2;
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
  max-width: 400px;
}

.color-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.advanced-colors-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0.4rem 0;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #7247FF;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.advanced-colors-toggle svg {
  width: 12px;
  height: 12px;
  fill: #7247FF;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.advanced-colors-toggle.open svg {
  transform: rotate(180deg);
}

#AdvancedColorsSection,
#AdvancedBannerColorsSection {
  background: rgba(114, 71, 255, 0.04);
    border-radius: 8px;
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.8rem;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

#AiModeAdvancedConfig,
#AiSummaryAdvancedConfig,
#AiSummaryEBAdvancedConfig,
#AiChatAdvancedConfig {
  flex-direction: column;
  align-items: stretch;
}

#toggleAiModeAdvanced,
#toggleAiSummaryAdvanced,
#toggleAiSummaryEBAdvanced,
#toggleAiChatAdvanced {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  margin-top: 0;
}

#AiModeAdvancedSection,
#AiSummaryAdvancedSection,
#AiSummaryEBAdvancedSection,
#AiChatAdvancedSection {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 0.8rem;
  padding-top: 15px;
}

#AiModeAdvancedSection .extra-facet-config,
#AiSummaryAdvancedSection .extra-facet-config,
#AiSummaryEBAdvancedSection .extra-facet-config,
#AiChatAdvancedSection .extra-facet-config {
  gap: 5px;
}

[data-feature="AiSummaryLanguageConfig"] {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#AiModeAdvancedSection .extra-facet-config + .extra-facet-config,
#AiSummaryAdvancedSection .extra-facet-config + .extra-facet-config,
#AiSummaryEBAdvancedSection .extra-facet-config + .extra-facet-config,
#AiChatAdvancedSection .extra-facet-config + .extra-facet-config,
#AiModeAdvancedSection [data-feature]:not([style*="none"]) + .extra-facet-config,
#AiSummaryAdvancedSection [data-feature]:not([style*="none"]) + .extra-facet-config {
  border-top: 1px solid rgba(24, 24, 24, 0.1);
  padding-top: 15px;
}

#AiModeAdvancedSection .extra-facet-label,
#AiSummaryAdvancedSection .extra-facet-label,
#AiSummaryEBAdvancedSection .extra-facet-label,
#AiChatAdvancedSection .extra-facet-label {
  font-size: 1rem;
  font-weight: 500;
  justify-content: space-between;
}

.color-group--section {
  position: relative;

  &:not(:first-of-type) {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(24, 24, 24, 0.1);
  }
}

.color-group__label {
  width: 100%;
  margin: 0 0 0.25rem;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
  position: relative;
  /* letter-spacing: 0.04em; */
}

.color-group--btn-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-color-col-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-size: 13px;
  font-weight: 600;
  /* letter-spacing: 0.04em; */
}

.btn-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.color-group label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 0.8rem;
    justify-content: center;
    align-items: flex-start;
        flex: 1;
}


input[type="color"] {
  width: 100%;
  height: 2.5rem;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  padding: 0;
}

/* design tooltip */
.design-section .tooltip-icon {
  position: absolute;
  right: 0;
  top: 3px;
}

.design-section .tooltip-icon::before  {
    content: "";
    display: flex;
    width: 22px;
    height: 22px;
    background-color: transparent;
    position: absolute;
        right: -4px;
    top: calc(50% - 11px);
    border-radius: 100%;
     transition: all .15s ease-in-out
}

.design-section .tooltip-icon:hover::before  {
    background-color: rgba(24, 24, 24, 0.05);
}

/* Settings section  */

.settings-section {
    padding: 18px 24px  !important;
}

.settings-section li{
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    position: relative;
}

.settings-reset {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

#resetSettings {
  background: transparent;
  border: none;
  color: #7247FF;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  transition: color 0.2s ease;
}

#resetSettings:hover {
  color: #181818;
}

.settings-section li label {
    font-weight: 500;
    margin-bottom: 6px;
    color: #181818;
}

.settings-section li input[type="text"],.settings-section li input[type="number"] {
    border: 2px solid rgba(24, 24, 24, 0.05);
    border-radius: 8px;
    background-color: #fff;
    color: #181818;
    padding: 10px 16px;
    height: 44px;
    line-height: 1.2;
    width: 100%;
    transition: all .3s ease-in-out;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    outline: 0;
}

.settings-section li input[type="text"]::placeholder,.settings-section li input[type="number"]::placeholder { 
    opacity: 0.6;
}

.settings-section li input[type="text"]:focus,.settings-section li input[type="number"]:focus {
    border-color: #7347FF;
    outline: 0;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.settings-section .tooltip-icon {
  position: absolute;
  right: 0;
  top: 3px;
}

.settings-section .extra-facet-label .tooltip-icon {
  position: static;
}

.modal-content::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(24, 24, 24, 0.3);
	border-radius: 10px;
	background-color: rgba(24, 24, 24, 0.1);
}

.modal-content::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
}

.modal-content::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(24, 24, 24, 0.3);
	background-color: rgba(24, 24, 24, 0.5);
}


#poc-indicator {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #7247FF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
#poc-indicator:hover {
  opacity: 1;
}
#poc-disable-btn {
  padding: 2px 8px;
  background: transparent;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
#poc-disable-btn:hover {
  background: #ff6b6b;
  color: #1a1a2e;
}

/* Lock settings */
.settings-lock__label {
  font-weight: 500;
  color: #181818;
  display: block;
}

li.settings-lock label.toggle-switch {
  margin-bottom: 0;
  margin-top: 8px;
  width: 40px;
  cursor: pointer;
}

.settings-list--locked li:not(.settings-lock):not(.settings-reset) label {
  opacity: 0.45;
  cursor: default;
}

.settings-list--locked li:not(.settings-lock):not(.settings-reset) input {
  background-color: rgba(24, 24, 24, 0.06);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Enterprise notice in settings panel */
li.settings-enterprise-notice {
  font-size: 0.8rem;
  color: #7247FF;
  background: rgba(114, 71, 255, 0.07);
  border-left: 3px solid #7247FF;
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 8px;
  list-style: none;
}

#resetSettings:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}

/* Advanced options toggle */
li.settings-advanced-options {
  margin-bottom: 0 !important;
}

.advanced-options-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #7247FF;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.advanced-options-toggle svg {
  width: 12px;
  height: 12px;
  fill: #7247FF;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.advanced-options-toggle.open svg {
  transform: rotate(180deg);
}

.filter-rule-tag__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.filter-rule-tag__field {
  font-weight: 600;
  opacity: 0.85;
}
/* Pricing request overlay */
.pricing-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.5);
}

.pricing-overlay__panel {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.pricing-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  flex-shrink: 0;
}

.pricing-overlay__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.pricing-overlay__body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.pricing-overlay__intro {
  margin: 0 0 20px;
  color: rgba(24, 24, 24, 0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}

.pricing-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.pricing-form__row label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #181818;
}

.pricing-form__row input,
.pricing-form__row textarea,
.pricing-form__row select {
  border: 1.5px solid rgba(24, 24, 24, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #181818;
  background: #fff;
  transition: border-color 0.15s;
  resize: vertical;
}

.pricing-form__row select { padding-right: 36px; }

.pricing-form__row input:focus,
.pricing-form__row textarea:focus,
.pricing-form__row select:focus {
  outline: none;
  border-color: #7247FF;
}

.pricing-form__row textarea[readonly] {
  background: rgba(24, 24, 24, 0.04);
  color: rgba(24, 24, 24, 0.6);
  resize: none;
}

.pricing-form__status {
  font-size: 0.9rem;
  margin-bottom: 12px;
  min-height: 1.2em;
}

.pricing-form__status--success { color: #1a7f3c; }
.pricing-form__status--error   { color: #c0392b; }

.pricing-form__submit {
  background-color: #7347FF;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
  width: 100%;
}

.pricing-form__submit:hover { background-color: #181818; }
.pricing-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Pricing toast */
@keyframes pricing-toast-in  { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pricing-toast-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }

.pricing-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #1a7f3c;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 10000;
  white-space: nowrap;
}
.pricing-toast--show { display: flex; animation: pricing-toast-in 0.25s ease forwards; }
.pricing-toast--hide { display: flex; animation: pricing-toast-out 0.3s ease forwards; }
.pricing-toast__icon { flex-shrink: 0; }

/* Honeypot — visually hidden, not reachable by keyboard */
.pricing-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Math challenge */
.pricing-form__math-wrap { display: flex; align-items: center; gap: 8px; }
.pricing-form__math-wrap #pricingMathQuestion { font-size: 0.8rem; font-weight: 400; white-space: nowrap; }
.pricing-form__math-wrap #pricingMath { width: 60px; flex: 0 0 60px; padding: 6px 10px; font-size: 0.8rem; }

/* Customer name label injected above the search bar */
.hero__headline .studio-customer-name { margin: 0 0 10px; font-family: 'Zalando Sans SemiExpanded', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: #181818; }

.extra-facet-notice { margin: 10px 0 0; font-size: 0.75rem; font-family: 'Poppins', sans-serif; color: #6b4f00; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 7px 12px; line-height: 1.5; }
.extra-facet-notice a { color: #6b4f00; font-weight: 600; }