/* Sidebar Styles for Desktop - Updated to match screenshot */
.tap-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tap-sidebar__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.36;
  color: #121a26;
  margin: 34px 0 12px;
}

.tap-sidebar__title--spaced {
  margin-top: 16px;
}

.tap-sidebar__card {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Less gap between items */
}

.tap-sidebar__card--spaced {
  margin-top: 24px;
}

.tap-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px; /* Smaller padding */
  border-radius: 12px;
  background-color: #F6F6F7;
  color: #121a26;
  text-decoration: none;
  font-size: 14px; /* Smaller font */
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
}

.tap-sidebar__item:hover {
  background-color: #eeeeef;
  color: #121a26;
}

.tap-sidebar__item.is-active {
  background-color: #ffffff; /* White background for active in new design? Or maybe faint grey? */
  /* Actually in screenshot active item has white background? No, it looks like:
     "Personal data" -> Light grey bg
     "Order history" -> Light grey bg
     "Create shop" (active in sidebar) -> Grey bg (darker than page bg?)
     Wait, in the screenshot "Create shop" is active in the "My Shops" list.
     It has a grey background #82868D in my previous CSS, but in the screenshot it looks dark grey.
  */
  background-color: #6c707a; /* Dark grey */
  color: #ffffff;
}

.tap-sidebar__item.is-active .tap-sidebar__icon {
  filter: brightness(0) invert(1);
}

.tap-sidebar__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Page Layout */
.tap-shop-create__layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding-bottom: 40px;
}

.tap-profile__main {
    flex: 1;
    min-width: 0;
}

.tap-profile__sidebar {
    width: 300px; /* Slightly narrower */
    flex-shrink: 0;
}

/* ... (rest of profile styles) ... */

.tap-shop-create__sidebar {
    width: 300px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .tap-shop-create__layout {
        flex-direction: column;
    }
    .tap-profile__sidebar,
    .tap-shop-create__sidebar {
        width: 100%;
        margin-top: 32px;
    }
}