/**

 * Общий каркас разделов и выпадающего списка (привязка к триггеру — .spt-popover).

 * Подключайте вместе с base.css / header.css.

 */

.spt-popover {

  position: relative;

  z-index: 20;

}



.spt-popover.is-open {

  z-index: 850;

}



.spt-section {

  max-width: 32rem;

  margin: 0 auto;

}



.spt-section__title {

  margin: 0 0 0.5rem;

  font-family: var(--spt-font-display);

  font-size: 1.5rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  line-height: 1.15;

  text-transform: uppercase;

  color: var(--spt-color-accent-hot);

}



.spt-section__lead {

  margin: 0 0 1.25rem;

  font-size: 0.95rem;

  line-height: 1.5;

  color: var(--spt-color-text-muted);

}



/* Триггер выбора — визуально близко к пунктам меню */

.spt-popover__trigger {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  width: 100%;

  min-height: var(--spt-menu-row-height);

  padding: 0 var(--spt-menu-padding-x);

  border-radius: var(--spt-radius-sm);

  border: 1px solid var(--spt-color-border);

  background: var(--spt-color-surface);

  font-family: var(--spt-font-display);

  font-size: var(--spt-menu-font-size);

  font-weight: 600;

  letter-spacing: var(--spt-menu-letter-spacing);

  line-height: 1;

  text-transform: uppercase;

  text-align: left;

  color: var(--spt-color-text);

  transition: background var(--spt-transition), color var(--spt-transition),

    border-color var(--spt-transition);

}



.spt-popover__trigger:hover,

.spt-popover__trigger:focus-visible {

  background: var(--spt-color-surface-elevated);

  color: var(--spt-color-accent-hot);

  outline: none;

}



.spt-popover__trigger[aria-expanded="true"] {

  color: var(--spt-color-accent-hot);

  border-color: var(--spt-color-border);

}



.spt-popover__trigger-label {

  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.spt-popover__chevron {

  flex-shrink: 0;

  font-size: 0.65em;

  opacity: 0.85;

  transition: transform var(--spt-transition);

}



.spt-popover__trigger[aria-expanded="true"] .spt-popover__chevron {

  transform: rotate(180deg);

}



.spt-popover-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.4);

  opacity: 0;

  visibility: hidden;

  transition: opacity var(--spt-transition), visibility var(--spt-transition);

  z-index: 840;

}



.spt-popover-backdrop.is-visible {

  opacity: 1;

  visibility: visible;

}



.spt-popover-panel {

  position: absolute;

  left: 0;

  right: 0;

  top: calc(100% + 6px);

  z-index: 860;

  max-height: calc(100dvh - var(--spt-safe-bottom) - 1rem);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  background: var(--spt-color-surface);

  border: 1px solid var(--spt-color-border);

  border-radius: var(--spt-radius-md);

  box-shadow: var(--spt-shadow-menu);

  transform: translateY(-6px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: transform var(--spt-transition), opacity var(--spt-transition),

    visibility var(--spt-transition);

}



.spt-popover-panel.is-open {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.spt-popover__list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.spt-popover__btn {

  display: flex;

  align-items: center;

  width: 100%;

  min-height: var(--spt-menu-row-height);

  padding: 0 var(--spt-menu-padding-x);

  border: none;

  border-bottom: 1px solid var(--spt-color-border);

  box-sizing: border-box;

  background: transparent;

  font-family: var(--spt-font-display);

  font-size: var(--spt-menu-font-size);

  font-weight: 600;

  letter-spacing: var(--spt-menu-letter-spacing);

  line-height: 1;

  text-transform: uppercase;

  text-align: left;

  color: var(--spt-color-text);

  cursor: pointer;

  transition: background var(--spt-transition), color var(--spt-transition);

}



.spt-popover__item:last-child .spt-popover__btn {

  border-bottom: none;

}



.spt-popover__btn:hover,

.spt-popover__btn:focus-visible {

  background: var(--spt-color-surface-elevated);

  color: var(--spt-color-accent-hot);

  outline: none;

}



.spt-popover__btn--selected {

  background: var(--spt-color-surface-elevated);

  color: var(--spt-color-accent-hot);

}



.spt-popover__hint {

  margin: 0;

  padding: var(--spt-menu-padding-y) var(--spt-menu-padding-x);

  font-size: 0.9rem;

  line-height: 1.45;

  color: var(--spt-color-text-muted);

}



.spt-popover__hint--error {

  color: #fca5a5;

}



body.spt-popover-open {

  overflow: hidden;

}